/* =========================================================
   Atelier MÁRA — Main stylesheet
   Mobile-first, warm and minimal editorial design
   ========================================================= */


/* ---------------------------------------------------------
   1. CSS VARIABLES
   All brand colors and fonts live here, so we only change
   them in one place if the brand evolves.
   --------------------------------------------------------- */
:root {
  /* Brand palette (exact hex values from the brand guide) */
  --color-sand: #F4D8BE;
  /* Light sand — main background */
  --color-beige: #DEB58B;
  /* Warm beige — secondary bg */
  --color-caramel: #C0976C;
  /* Caramel — buttons & accents */
  --color-brown: #8D6437;
  /* Warm brown — body text */
  --color-deep: #603912;
  /* Deep brown — headings */
  --color-offwhite: #FAF5EE;
  /* Softer off-white — never pure white */

  /* Typography stacks with graceful fallbacks */
  --font-heading: 'adobe-kis-vf', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'mundial', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout tokens */
  --container-max: 1200px;
  --header-height: 72px;
}


/* ---------------------------------------------------------
   2. BASIC RESET
   Removes default browser spacing and makes sizing predictable.
   --------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Make images easier to work with by default */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Lists used for navigation should not show bullets */
ul {
  list-style: none;
}

/* Links inherit color and remove underline by default */
a {
  color: inherit;
  text-decoration: none;
}


/* ---------------------------------------------------------
   3. BASE BODY STYLES
   Warm off-white background, soft deep-brown text.
   --------------------------------------------------------- */
html {
  /* Smooth scrolling when clicking anchor links */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  /* 16px base */
  line-height: 1.6;
  color: var(--color-deep);
  background-color: var(--color-offwhite);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ---------------------------------------------------------
   4. TYPOGRAPHY
   Elegant serif for headings, modern sans for body.
   --------------------------------------------------------- */
h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-deep);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
}

h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 1rem;
}

h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin-bottom: 0.75rem;
}

p {
  color: var(--color-brown);
  margin-bottom: 1rem;
  max-width: 65ch;
  /* comfortable reading width */
}


/* ---------------------------------------------------------
   5. LAYOUT HELPERS
   .container centers content and limits its max width.
   --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  /* center horizontally */
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  /* ~20px on phone, 40px from tablet up */
}

/* Generic section spacing — overridden per section later */
.section {
  padding-block: 5rem;
  /* vertical breathing room */
}


/* ---------------------------------------------------------
   6. SITE HEADER
   Fixed at the top, subtle translucent background.
   --------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background-color: rgba(250, 245, 238, 0.9);
  /* soft off-white with transparency */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  border-bottom: 1px solid rgba(141, 100, 55, 0.1);
  /* very subtle separator */
}

/* Header layout: 3 grid columns — logo (left) | nav (center) | Instagram (right)
   The outer 1fr columns flank the auto center column equally, so the nav is
   perfectly centered in the viewport regardless of logo or icon widths. */
.site-header__inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  /* LEFT */
}

.site-header__logo img {
  height: 52px;
  /* ~30% larger than before, still compact within a 72px header */
  width: auto;
  /* keep natural proportions */
}

/* Main navigation: sits naturally at the center of the grid */
.site-nav {
  justify-self: center;
}

.site-nav__list {
  display: flex;
  gap: 2.25rem;
  /* generous spacing between links for an airy feel */
}

.site-nav__list a {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--color-brown);
  transition: color 0.2s ease;
}

.site-nav__list a:hover,
.site-nav__list a:focus {
  color: var(--color-caramel);
}

.site-header__instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  /* RIGHT */
  color: var(--color-brown);
  transition: color 0.2s ease;
}

.site-header__instagram:hover,
.site-header__instagram:focus {
  color: var(--color-caramel);
}


/* ---------------------------------------------------------
   7. SITE FOOTER
   Small, quiet, centered.
   --------------------------------------------------------- */
.site-footer {
  background-color: #DDCDB6;  /* same soft sand as the tagline and approach bands */
  padding-block: 2.5rem;
  margin-top: 0;              /* sits flush against the Contact section */
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.site-footer__icon {
  width: 48px;
  height: auto;
  opacity: 0.8;
}

.site-footer__copy {
  font-size: 0.85rem;
  color: var(--color-brown);
  margin: 0;
}


/* ---------------------------------------------------------
   8. TEMPORARY SECTION MARKERS
   Light alternating backgrounds so we can see each empty
   section while we build. Remove once real content is in.
   --------------------------------------------------------- */
main .section {
  /* Offset first section so fixed header does not cover it */
  border-top: 1px dashed rgba(141, 100, 55, 0.2);
}

main .section:first-of-type {
  padding-top: calc(5rem + var(--header-height));
}



/* ---------------------------------------------------------
   9. HERO SECTION
   Full-width split (50/50) of two image panels, each
   clickable and gently zooming on hover.
   --------------------------------------------------------- */

/* Override the default .section and temporary markers for the hero */
#hero {
  border-top: none;
  background: none;
  /* cream body bg shows in the side margins */

  /* Push below the fixed header so the images sit just under it.
     scroll-margin-top keeps anchor-link scrolling aligned with the header. */
  margin-top: var(--header-height);
  scroll-margin-top: var(--header-height);

  /* Fixed 40px of cream breathing room on each side (no longer fluid) */
  padding: 0 40px;

  /* Hero height: 72vh — keeps photos AND tagline visible together */
  height: 72vh;
}

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  /* single row filling the full section height */
  gap: 24px;
  /* visible cream strip between the two photos */
  height: 100%;
  overflow: hidden;
}

.hero__panel {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  /* clip the zoomed image inside the panel */
  cursor: pointer;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* fill the panel, crop nicely */
  transition: transform 0.6s ease;
  /* soft zoom on hover */
}

/* Subtle zoom on hover or keyboard focus */
.hero__panel:hover .hero__image,
.hero__panel:focus-visible .hero__image {
  transform: scale(1.03);
}


/* ---------------------------------------------------------
   10. TAGLINE
   Quiet brand statement between the hero and the intro.
   The outer wrapper keeps the cream page background; the
   inner "band" holds the beige color and aligns with the
   hero photos (40px lateral margins — the site-wide rule).
   --------------------------------------------------------- */
.tagline {
  /* 40px gutter on each side so the band lines up with the hero */
  padding-inline: 40px;
  background: none;
  /* 30px of cream between the hero photos and the beige band */
  margin-top: 30px;
}

.tagline__band {
  background-color: #DDCDB6;
  /* shared soft sand — matches the Approach band */
  text-align: center;
  /* 25px vertical × 40px horizontal — thin band, comfortable inner space */
  padding: 25px 40px;
}

.tagline__text {
  font-family: var(--font-heading);
  color: var(--color-deep);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  /* ~18px → ~22px */
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
  max-width: none;
  /* override the default p max-width */
}


/* ---------------------------------------------------------
   11. INTRODUCTION ("The Atelier")
   Minimalist centered typography — no image, a moment of
   pause after the visual density of the hero.
   --------------------------------------------------------- */

#introduction {
  /* Remove temporary dashed marker, lock in the soft cream background */
  border-top: none;
  background-color: var(--color-offwhite);

  /* Symmetric 30px — matches the gallery's top padding, so the
     Introduction → Gallery transition reads as 30px + 30px. */
  padding-top: 30px;
  padding-bottom: 30px;
}

.introduction__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  /* soft rhythm between label / title / text */
}

/* Small uppercase eyebrow above the title */
.introduction__label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  /* ~13px */
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-brown);
  margin: 0;
  max-width: none;
  /* override the base p max-width */
}

/* Main heading: elegant serif, large and quiet */
.introduction__title {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5vw, 3.5rem);
  /* ~48px → ~56px */
  font-weight: 500;
  color: var(--color-deep);
  line-height: 1.15;
  letter-spacing: 0.005em;
  margin: 0;
}

/* Intro paragraph: narrow column for comfortable reading */
.introduction__text {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  /* ~17px */
  line-height: 1.7;
  color: var(--color-brown);
  max-width: 55ch;
  /* ~600px comfortable reading width */
  margin: 0.25rem 0 0;
  /* slight lift from the title */
}


/* ---------------------------------------------------------
   12. GALLERY ("Creations")
   Horizontal scrollable carousel — all creations on one row,
   scrolled with the trackpad or horizontal swipe. The content
   bleeds to the right edge on first load to suggest "more to
   see". 40px of cream sits before the first image and after
   the last one.
   --------------------------------------------------------- */

#gallery {
  border-top: none;
  /* remove temp marker */
  background-color: var(--color-offwhite);
  /* 30px top + 30px bottom — consistent rhythm with Introduction
     and Approach. No lateral padding here — the header and carousel
     each manage their own 40px gutter. */
  padding: 30px 0;
}

/* Gallery heading: centered title only (no eyebrow) */
.gallery__header {
  text-align: center;
  padding-inline: 40px;
  /* protect the title on narrow screens */
  padding-bottom: 50px;
  /* space between title and carousel */
}

.gallery__title {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5vw, 3.5rem);
  /* 48→56px, matches "The Atelier" */
  font-weight: 500;
  color: var(--color-deep);
  line-height: 1.15;
  letter-spacing: 0.005em;
  margin: 0;
}

/* Horizontal scrollable carousel */
.gallery__carousel {
  display: flex;
  gap: 24px;
  /* 40px of cream on both sides: first image starts 40px from the
     viewport left; when fully scrolled right, the last image ends
     40px before the viewport right. Between those two states, the
     carousel bleeds to the right edge — a natural "more to see" hint. */
  padding-inline: 40px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  /* Hide the scrollbar completely — trackpad/swipe scrolling still works */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE / legacy Edge */
}

/* Chrome, Safari, modern Edge */
.gallery__carousel::-webkit-scrollbar {
  display: none;
}

/* Remove default focus outline on the carousel itself; focus-visible
   on individual pieces handles keyboard visibility */
.gallery__carousel:focus {
  outline: none;
}

/* Each piece: fixed width, does not shrink; image frame + caption */
.piece {
  flex: 0 0 340px;
  /* 340px fixed width, no grow / no shrink */
  margin: 0;
  cursor: pointer;
}

.piece__frame {
  aspect-ratio: 3 / 4;
  /* uniform portrait ratio across the row */
  overflow: hidden;
  /* clips the zoomed image on hover */
}

.piece__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* fill the frame, crop nicely — no distortion */
  display: block;
  transition: transform 0.4s ease;
}

.piece:hover .piece__image,
.piece:focus-within .piece__image {
  transform: scale(1.03);
  /* subtle zoom on hover / keyboard focus */
}

.piece__caption {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  /* normal, not bold */
  color: var(--color-brown);
  margin-top: 16px;
  text-align: left;
  /* aligned left under the image */
}


/* ---------------------------------------------------------
   13. APPROACH ("The Approach")
   Simple rebuild — coloured rectangle, centered title,
   photo/text split, signature at the end.
   --------------------------------------------------------- */

.approach {
  background-color: #DDCDB6;
  padding: 30px 40px;
  margin: 30px 40px;
}

.approach-container {
  max-width: 1100px;
  margin: 0 auto;
}

.approach-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 56px;
  color: #603912;
  text-align: center;
  margin-bottom: 40px;
}

.approach-grid {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 0;
  align-items: center;
}

.approach-image img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.approach-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 60px;
}

.approach-content p {
  max-width: 400px;
  text-align: center;
  color: #603912;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 20px;
  font-family: 'Mundial', 'DM Sans', sans-serif;
}

.approach-content .signature {
  width: 45px;
  opacity: 0.7;
  margin-top: 16px;
}


/* ---------------------------------------------------------
   14. RESPONSIVE TWEAKS (mobile-first, so we only scale up)
   --------------------------------------------------------- */
@media (max-width: 700px) {
  :root {
    /* Header grows taller because its 3 blocks stack on mobile */
    --header-height: 110px;
  }

  /* Header: stack logo, nav, Instagram vertically, all centered */
  .site-header__inner {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    justify-items: center;
    align-content: center;
  }

  .site-header__logo,
  .site-nav,
  .site-header__instagram {
    justify-self: center;
  }

  .site-nav__list {
    gap: 1rem;
  }

  .site-nav__list a {
    font-size: 0.8rem;
  }

  .site-header__logo img {
    height: 30px;
  }

  /* Hero: stack the two panels vertically on small screens */
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  /* Keep some horizontal breathing room, just less than desktop */
  #hero,
  .tagline {
    padding-inline: 1.25rem;
    /* 20px on mobile */
  }

  /* Gallery: smaller gutter + narrower cards for small screens */
  .gallery__header,
  .gallery__carousel {
    padding-inline: 1.25rem;
  }

  .piece {
    flex: 0 0 260px;
    /* narrower card so ~1 full + 1 preview fit */
  }

  /* Approach: tighter lateral margin/padding + stacked layout */
  .approach {
    margin: 30px 20px;
    padding: 30px 20px;
  }

  .approach-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .approach-content {
    padding: 0;
  }
}


/* ---------------------------------------------------------
   15. APPROACH — visual centering override
   Asymmetric padding on the text column compensates for the
   40/60 grid split so the paragraphs read as visually
   centered between the photo and the rectangle's right edge.
   On tablet/mobile the padding becomes symmetric again.
   --------------------------------------------------------- */
.approach-content {
  padding-left: 140px !important;
  padding-right: 50px !important;
}

@media (max-width: 1024px) {
  .approach-content {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

@media (max-width: 700px) {
  .approach-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* ---------------------------------------------------------
   16. CONTACT
   Centered title, short message, Instagram button.
   Cream background (no coloured rectangle).
   --------------------------------------------------------- */
.contact {
  background-color: #FAF5EE;
  padding: 30px 40px;
}

.contact-container {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.contact-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px;
  color: #603912;
  text-align: center;
  line-height: 1.15;
  margin-bottom: 30px;
}

.contact-text {
  font-family: 'Mundial', 'DM Sans', sans-serif;
  font-size: 17px;
  color: #603912;
  line-height: 1.7;
  text-align: center;
  margin: 0 0 40px;
  max-width: none;
}

.contact-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid #603912;
  color: #603912;
  padding: 14px 32px;
  font-family: 'Mundial', 'DM Sans', sans-serif;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.contact-button:hover,
.contact-button:focus {
  background: #603912;
  color: #FAF5EE;
}

@media (max-width: 700px) {
  .contact {
    padding: 30px 20px;
  }

  .contact-title {
    font-size: 42px;
  }
}