/* ==========================================================================
   Andreas Gärdnert — Photography Portfolio
   Shared stylesheet (works alongside Tailwind CDN utilities)
   ========================================================================== */

:root {
  --color-ink: #0b0b0c;
  --color-ink-soft: #17171a;
  --color-paper: #faf9f6;
  --color-paper-dim: #f1efea;
  --color-cream: #f5f3ef;
  --color-accent: #c17a4d;
  --color-accent-light: #dba272;
  --color-line: rgba(255, 255, 255, 0.16);
  --color-line-dark: rgba(11, 11, 12, 0.12);
  --header-h: 88px;
  --header-h-mobile: 68px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: "Jost", "Futura", "Century Gothic", ui-sans-serif, sans-serif;
  --font-logo: "Jost", "Futura", "Century Gothic", ui-sans-serif, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-paper);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.font-display {
  font-family: var(--font-display);
}

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

/* Custom scrollbar for a premium feel */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(140, 130, 115, 0.45);
  border-radius: 999px;
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

/* Header stays fully transparent with white text on every page, at every
   scroll position — it always floats on top of the video / hero image / a
   soft top scrim, and never switches to a solid surface. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: #fff;
  background: transparent;
  border-bottom: 1px solid transparent;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
}

/* Pages that use the dark theme (About) have their own solid dark surface,
   so the header's soft gradient scrim reads naturally against it too. */
body.dark {
  background-color: var(--color-ink);
  color: var(--color-cream);
}

.header-inner {
  position: relative;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Logo — set in the same bold Jost used across the nav, so it reads as
   one family with the menu. "Andreas" sits normally on top, "Gärdnert" is
   rotated a full 180deg beneath it so it reads upside down. Hovering flips
   the whole lockup 180deg, which cancels Gärdnert's own rotation (bringing
   it upright, now on top) while sending Andreas the other way (upside
   down, now on the bottom). */
.logo {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  font-family: var(--font-logo);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #fff;
  flex-shrink: 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  transform: rotate(0deg);
  transform-origin: center center;
  transition: transform 0.65s var(--ease-out);
  /* Enlarge the clickable hit area beyond the tight text box without
     shifting surrounding header content (negative margin cancels it out). */
  padding: 0.75rem 1rem;
  margin: -0.75rem -1rem;
}

.logo:hover {
  transform: rotate(180deg);
}

.logo-line {
  font-size: clamp(0.98rem, 1.4vw, 1.2rem);
  white-space: nowrap;
  color: #fff;
}

.logo-reflection {
  margin-top: 0.3em;
  opacity: 1;
  transform: rotate(180deg);
  -webkit-mask-image: none;
  mask-image: none;
}

/* Desktop nav */
.main-nav {
  display: none;
  align-items: center;
  gap: clamp(1.5rem, 2.5vw, 2.75rem);
}

@media (min-width: 900px) {
  .main-nav {
    display: flex;
  }
}

.nav-link {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem 0;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right 0.35s var(--ease-out);
}

.nav-link:hover::after,
.nav-link.is-active::after,
.nav-item.is-open .nav-link::after {
  right: 0;
}

/* Photography is a dropdown trigger, not a page — never underline it */
.nav-item.has-dropdown > .nav-link::after {
  display: none;
}

.nav-item {
  position: relative;
}

/* Compact vertical dropdown for Photography — drops straight down beneath
   the nav item, right-aligned, no card/background, just floating type.
   top sits flush at 100% (no dead gap) with the visual breathing room added
   as padding-top *inside* the dropdown's own hoverable box, so moving the
   cursor from the button down into the menu never leaves a hoverable area. */
.mega-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 90;
  min-width: 200px;
  padding-top: 1.1rem;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out), visibility 0.28s;
}

.nav-item.is-open .mega-dropdown,
.nav-item:hover .mega-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mega-dropdown-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.7rem;
}

.mega-dropdown-inner a {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  text-align: right;
  padding: 0.1rem 0;
  position: relative;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.mega-dropdown-inner a::after {
  content: "";
  position: absolute;
  right: 0;
  left: 100%;
  bottom: -3px;
  height: 1.5px;
  background: currentColor;
  transition: left 0.3s var(--ease-out);
}

.mega-dropdown-inner a:hover {
  transform: translateX(-3px);
}

.mega-dropdown-inner a:hover::after,
.mega-dropdown-inner a.is-active::after {
  left: 0;
}

.mega-dropdown-inner a.is-active {
  opacity: 0.55;
}

/* Mobile menu toggle */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 110;
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .menu-toggle {
    display: none;
  }
}

.menu-toggle span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile nav overlay */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--color-ink);
  color: var(--color-cream);
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease-out);
  overflow-y: auto;
  padding: calc(var(--header-h-mobile) + 1.5rem) 1.75rem 3rem;
}

.mobile-nav.is-open {
  transform: translateY(0);
}

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

.mobile-nav a {
  color: inherit;
  text-decoration: none;
}

.mobile-nav-link {
  display: block;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 500;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-photo-list a {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  padding: 0.55rem 0 0.55rem 1rem;
  color: rgba(245, 243, 239, 0.75);
}

.mobile-photo-list a.is-active {
  color: var(--color-accent-light);
}

.mobile-accordion-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: inherit;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 500;
}

.mobile-accordion-btn svg {
  transition: transform 0.35s var(--ease-out);
  flex-shrink: 0;
}

.mobile-accordion-btn.is-open svg {
  transform: rotate(180deg);
}

.mobile-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out);
}

/* ==========================================================================
   Homepage hero — pinned category showcase
   ========================================================================== */

.hero-video-layer {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  background: var(--color-ink);
}

.hero-video-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out);
}

.hero-video-layer img.is-active {
  opacity: 1;
}

.hero-video-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 7, 0.32) 0%, rgba(6, 6, 7, 0.12) 30%, rgba(6, 6, 7, 0.5) 100%);
}

/* Category showcase: every group lives in the exact same spot on screen.
   The wrapper is tall enough to give the scrollbar something to grab, but
   an inner sticky panel pins in place while JS reads the raw scroll offset
   and crossfades between groups continuously — the visual state always
   matches scroll position 1:1, so it feels instant and perfectly fluid in
   both directions, never locked into steps. */
.hero-pin-wrapper {
  position: relative;
  z-index: 5;
}

.hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* A fixed-height "window" shows exactly four rows of the full genre list.
   The list itself is one continuous column, and JS translates it upward
   1px for every 1px scrolled, so genres queue past like a conveyor belt —
   Portrait exits the top, the rest shift up, and the next genre in line
   arrives at the bottom. A soft mask fades items as they cross the edges
   instead of letting them clip off abruptly. */
.category-window {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3.5rem) 0 clamp(1.5rem, 11vw, 9rem);
  overflow: hidden;
  transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
}

.category-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  will-change: transform;
}

.category-link {
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  text-decoration: none;
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.45);
  padding: 0.5rem 0;
  transition: border-color 0.6s var(--ease-out);
}

.category-link:hover {
  border-color: transparent;
}

.category-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 5.5vw, 4rem);
  letter-spacing: 0;
  transition: transform 0.35s var(--ease-out), color 0.35s var(--ease-out);
}

.category-link:hover .category-name {
  color: var(--color-accent-light);
  transform: translateX(6px);
}

.category-arrow {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  color: var(--color-accent-light);
  flex-shrink: 0;
}

.category-link:hover .category-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   Interior page hero (used on About / Contact)
   ========================================================================== */

.page-hero {
  padding: calc(var(--header-h) + 3.5rem) clamp(1.25rem, 4vw, 3.5rem) 3rem;
  max-width: 1600px;
  margin: 0 auto;
}

.page-eyebrow {
  font-family: var(--font-display);
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.page-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: -0.005em;
  line-height: 1.02;
}

.page-desc {
  max-width: 46ch;
  margin-top: 1.25rem;
  color: rgba(11, 11, 12, 0.62);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* ==========================================================================
   Genre pages: full-bleed hero image + edge-to-edge masonry
   ========================================================================== */

.gallery-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--color-ink-soft);
}

.gallery-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 7, 0.32) 0%, rgba(6, 6, 7, 0) 30%, rgba(6, 6, 7, 0.22) 100%);
}

/* A justified-gallery grid: each row is a self-contained, full-bleed band
   of images whose relative widths already match their own aspect ratios
   (set inline per photo), so filling the row edge-to-edge only ever needs
   to trim a sliver off an edge rather than cropping deep into the frame.
   Occasional full-width feature rows break up the rhythm. Every row —
   including the last — is flex-stretched to fill the full width, so the
   grid always finishes flush with zero gaps or dead space. */
.photo-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-ink-soft);
}

.grid-row {
  display: flex;
  width: 100%;
  height: var(--row-h, 46vh);
}

.grid-row > .masonry-item {
  flex: var(--cell-grow, 1) 1 0;
  min-width: 0;
  height: 100%;
}

.masonry-item {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-ink-soft);
}

.masonry-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out);
}

/* Below ~640px, cropped magazine rows get cramped — fall back to a single,
   natural-aspect column so every photo reads cleanly on a small screen. */
@media (max-width: 639px) {
  .grid-row {
    flex-direction: column;
    height: auto;
  }

  .grid-row > .masonry-item {
    flex: none;
    width: 100%;
    height: auto;
  }

  .masonry-item img {
    height: auto;
  }
}

.masonry-item:hover img {
  transform: scale(1.045);
}

.masonry-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0) 60%, rgba(11, 11, 12, 0.35) 100%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

.masonry-item:hover .masonry-item-overlay {
  opacity: 1;
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(3, 3, 4, 0.99);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
  padding: clamp(1rem, 5vw, 4rem);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.lightbox.is-open img {
  opacity: 1;
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 44px;
  height: 44px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s;
  /* Sits above the full-height next/prev hit zones so the corner where
     they overlap always resolves to closing, not advancing. */
  z-index: 3;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Prev/next hit zones run the full height of the lightbox along each edge,
   so clicking anywhere in a generous strip advances the gallery — no need
   to aim precisely at a small button. The arrow itself stays low-key by
   default and only brightens on hover, keeping focus on the photo. */
.lightbox-nav {
  position: absolute;
  top: 0;
  height: 100%;
  width: clamp(96px, 18vw, 260px);
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 clamp(0.75rem, 3vw, 2.5rem);
  z-index: 2;
}

.lightbox-prev {
  left: 0;
  justify-content: flex-start;
}

.lightbox-next {
  right: 0;
  justify-content: flex-end;
}

.lightbox-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  opacity: 0.4;
  transition: opacity 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}

.lightbox-nav:hover .lightbox-nav-icon {
  opacity: 0.95;
  background: rgba(255, 255, 255, 0.1);
}

.lightbox-counter {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  font-weight: 500;
}

/* ==========================================================================
   About page
   ========================================================================== */

.about-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 1600px;
  margin: 0 auto;
  min-height: calc(100vh - var(--header-h));
  padding: calc(var(--header-h) + 1.75rem) clamp(1.25rem, 4vw, 3.5rem) 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .about-hero {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 4.5rem;
  }
}

.about-portrait {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--color-ink-soft);
}

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

.about-copy .page-eyebrow {
  margin-bottom: 1rem;
}

.about-copy h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin-bottom: 1.5rem;
}

.about-heading {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-cream);
  padding-bottom: 0.85rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--color-cream);
}

.about-copy p {
  color: rgba(245, 243, 239, 0.68);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 1.25rem;
  max-width: 58ch;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-line-dark);
}

.stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--color-ink);
}

.stat-label {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 11, 12, 0.5);
  margin-top: 0.35rem;
}

.section-wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding: 3rem clamp(1.25rem, 4vw, 3.5rem) 5rem;
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 2.5rem;
  letter-spacing: -0.005em;
}

.service-list {
  border-top: 1px solid var(--color-line-dark);
}

.service-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--color-line-dark);
}

.service-row-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.service-row-title .service-index {
  font-size: 0.85rem;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-weight: 700;
}

.service-row-desc {
  color: rgba(11, 11, 12, 0.58);
  font-size: 0.96rem;
  max-width: 46ch;
}

/* ==========================================================================
   Contact panel (About + dedicated Contact page)
   ========================================================================== */

.contact-panel {
  background: var(--color-ink);
  color: var(--color-cream);
}

.contact-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(var(--header-h) + 3.5rem) clamp(1.25rem, 4vw, 3.5rem) 6rem;
  display: grid;
  gap: 3rem;
  min-height: 100vh;
  align-content: center;
}

.contact-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.contact-details a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: inherit;
  text-decoration: none;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 1.05rem;
  transition: color 0.25s, padding-left 0.25s;
}

.contact-details a:hover {
  color: var(--color-accent-light);
  padding-left: 0.5rem;
}

.contact-details .contact-label {
  color: rgba(245, 243, 239, 0.5);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.3rem;
}

.contact-form {
  display: grid;
  gap: 1.5rem;
}

.contact-form label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 243, 239, 0.55);
  margin-bottom: 0.6rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.6rem 0;
  transition: border-color 0.25s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-accent-light);
}

.contact-form textarea {
  resize: vertical;
  min-height: 110px;
}

.contact-submit {
  justify-self: start;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: #fff;
  border: none;
  padding: 0.95rem 2.25rem;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}

.contact-submit:hover {
  background: var(--color-accent-light);
}

.contact-direct {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.95rem;
  color: rgba(245, 243, 239, 0.55);
}

.contact-direct a {
  color: var(--color-accent-light);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(219, 162, 114, 0.4);
  transition: color 0.25s, border-color 0.25s;
}

.contact-direct a:hover {
  color: #fff;
  border-color: #fff;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-ink);
  color: var(--color-cream);
  position: relative;
  z-index: 5;
}

.footer-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 5rem clamp(1.25rem, 4vw, 3.5rem) 2.5rem;
}

.footer-cta {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.5vw, 3.5rem);
  line-height: 1.15;
  max-width: 18ch;
}

.footer-cta a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent);
  transition: color 0.3s;
}

.footer-cta a:hover {
  color: var(--color-accent-light);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer-heading {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 243, 239, 0.5);
  margin-bottom: 1rem;
}

.footer-grid a {
  display: block;
  color: rgba(245, 243, 239, 0.85);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 0.3rem 0;
  transition: color 0.25s;
}

.footer-grid a:hover {
  color: var(--color-accent-light);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  color: rgba(245, 243, 239, 0.45);
}

/* ==========================================================================
   Reveal utility (used by main.js IntersectionObserver)
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}