@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Manrope:wght@300;400;500;600&display=swap");


/* ==========================================================
   JUAN MARCOS LAMBLIN
   GLOBAL
========================================================== */
/* ==========================================================
   DESIGN TOKENS
========================================================== */
/* ==========================================================
   DESIGN TOKENS
   COLORS
========================================================== */
:root{

  /* Brand */

  --color-black:#070707;
  --color-white:#ffffff;

  /* Surfaces */

  --color-background:var(--color-black);
  --color-surface:#0b0b0b;
  --color-surface-alt:#111111;

  /* Typography */

  --color-text:#efefef;
  --color-text-muted:#b7b7b7;

  /* Borders */

  --color-border:rgba(255,255,255,.08);
  --color-border-light:rgba(255,255,255,.18);

  /* Overlay */

  --color-overlay:rgba(7,7,7,.96);

}
/* ==========================================================
   DESIGN TOKENS
   TYPOGRAPHY
========================================================== */
:root{

  /* Font families */

  --font-display:"Cormorant Garamond",serif;
  --font-body:"Manrope",sans-serif;

  /* Font sizes */

  --text-xs:.75rem;
  --text-sm:.875rem;
  --text-base:1rem;
  --text-lg:1.125rem;
  --text-xl:1.5rem;
  --text-2xl:2rem;
  --text-3xl:3rem;
  --text-display:5rem;
  --text-hero:7rem;

  /* Line heights */

  --leading-tight:1.1;
  --leading-normal:1.6;
  --leading-relaxed:1.8;

  /* Letter spacing */

  --tracking-tight:-0.02em;
  --tracking-normal:0;
  --tracking-wide:.12em;
  --tracking-display:.22em;

  /* Font weights */

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

}
/* ==========================================================
   DESIGN TOKENS
   LAYOUT
========================================================== */
:root{

  /* ========================================================
     WIDTHS
  ======================================================== */

  --reading-width:760px;

  --content-width:1320px;

  --gallery-width:1600px;

  --page-width:1920px;

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

  --page-padding:48px;

}
/* ==========================================================
   DESIGN TOKENS
   SPACING
========================================================== */
:root{

  /* ========================================================
     SPACING SCALE
  ======================================================== */

  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:48px;
  --space-6:64px;
  --space-7:96px;
  --space-8:128px;
  --space-9:160px;

  /* ========================================================
     SEMANTIC SPACING
  ======================================================== */

  --section-space:var(--space-9);

  --section-space-small:var(--space-7);

  --content-gap:var(--space-5);

  --grid-gap:var(--space-6);

  --card-gap:var(--space-4);

}
/* ==========================================================
   DESIGN TOKENS
   BREAKPOINTS
========================================================== */
/*
  Mobile
  0 → 767 px
*/
@media (max-width:767px){

  :root{

    /* Typography */

    --text-display:3rem;
    --text-hero:4rem;

    /* Layout */

    --page-padding:24px;

    /* Spacing */

    --section-space:96px;

  }

}
/*
  Tablet
  768 → 1023 px
*/
@media (min-width:768px) and (max-width:1023px){

  :root{

    /* Typography */

    --text-display:4rem;
    --text-hero:5.5rem;

    /* Layout */

    --page-padding:32px;

    /* Spacing */

    --section-space:128px;

  }

}
/*
  Large Desktop
  ≥ 1440 px
*/
@media (min-width:1440px){

  :root{

    --page-padding:64px;

  }

}
/* ==========================================================
   DESIGN TOKENS
   MOTION
========================================================== */
:root{

  /* ========================================================
     DURATIONS
  ======================================================== */

  --duration-fast:150ms;

  --duration-normal:300ms;

  --duration-slow:600ms;

  /* ========================================================
     EASING
  ======================================================== */

  --ease-standard:ease;

  --ease-smooth:cubic-bezier(.22,.61,.36,1);

}
/* radius.css */
/* borders.css */
/* shadows.css */
/* layers.css */
/* ==========================================================
   LAYOUT
========================================================== */
/* ==========================================================
   HEADER
========================================================== */
.site-header{

  position:fixed;

  inset:0 0 auto 0;

  z-index:1000;

  display:flex;

  justify-content:space-between;

  align-items:center;

  width:100%;

  height:88px;

  padding-inline:var(--page-padding);

  color:var(--color-text);

  background:rgba(7,7,7,.68);

  backdrop-filter:blur(10px);

  transition:
    background var(--duration-normal) var(--ease-smooth),
    backdrop-filter var(--duration-normal) var(--ease-smooth),
    color var(--duration-normal) var(--ease-smooth);

}
/* ==========================================================
   HERO
========================================================== */
.site-header--hero{

  background:transparent;

  backdrop-filter:none;

}
/* ==========================================================
   MENU BUTTON
========================================================== */
.menu-button{

  display:flex;

  align-items:center;

  justify-content:center;

  width:48px;

  height:48px;

  background:none;

  border:none;

  color:inherit;

  cursor:pointer;

  font-family:var(--font-display);

  font-size:2rem;

  line-height:1;

  transition:
    opacity var(--duration-normal) var(--ease-smooth),
    transform var(--duration-normal) var(--ease-smooth);

}
.menu-button:hover{

  opacity:.7;

  transform:scale(1.05);

}
/* ==========================================================
   LANGUAGE SWITCH
========================================================== */
.language-switch{

  color:inherit;

  font-family:var(--font-display);

  font-size:1.6rem;

  font-weight:300;

  letter-spacing:.08em;

  text-transform:uppercase;

  text-decoration:none;

  transition:
    opacity var(--duration-fast) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-smooth);

}
.language-switch:hover{

  opacity:.65;

  transform:scale(1.05);

}
/* ==========================================================
   MENU OVERLAY
========================================================== */
.menu-overlay{

  position:fixed;

  inset:0;

  display:flex;

  justify-content:center;

  align-items:center;

  background:rgba(7,7,7,.96);

  backdrop-filter:blur(16px);

  opacity:0;

  visibility:hidden;

  transition:
    opacity .35s ease,
    visibility .35s ease;

  z-index:3000;

}
.menu-overlay.is-open{

  opacity:1;

  visibility:visible;

}
/* ==========================================================
   MENU
========================================================== */
.menu{

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  gap:2rem;

}
.menu a{

  position:relative;

  display:inline-block;

  font-family:"Cormorant Garamond",serif;

  font-size:clamp(3rem,5vw,5rem);

  font-weight:400;

  letter-spacing:.04em;

  line-height:1;

  color:var(--white);

  text-decoration:none;

  transition:
    opacity .35s ease,
    transform .35s ease;

}
.menu a:hover{

  opacity:.65;

  transform:translateX(.5rem);

}
.menu a::after{

  content:"";

  position:absolute;

  left:0;

  bottom:-.5rem;

  width:0;

  height:1px;

  background:rgba(255,255,255,.45);

  transition:width .35s ease;

}
.menu a:hover::after,
.menu a.active::after{

  width:100%;

}
.menu a.active{

  opacity:1;

}
@media (max-width:900px){

  .menu{

    gap:1.5rem;

  }

  .menu a{

    font-size:2.5rem;

  }

}
/* ==========================================================
   MAIN
========================================================== */
.main{

  padding-top:88px;

}
.main--hero{

  padding-top:0;

}
.main--viewing{

  padding-top:0;

  min-height:100svh;

}
/* ==========================================================
   FOOTER
========================================================== */
.site-footer{

  border-top:1px solid rgba(255, 255, 255, 0.429);

  margin-top:1rem;

  padding:2.2rem 0 2.5rem;

}
.footer-inner{

  width:min(90%,900px);

  margin:0 auto;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

}
/* =========================
   LOGO
========================= */
.footer-logo{

  display:block;

  width:260px;

  max-width:55vw;

  margin:0 auto .8rem;

}
.footer-logo img{

  display:block;

  width:100%;

  height:auto;

}
/* =========================
   NOM
========================= */
.footer-name{

  font-family:var(--font-display);

  font-size:clamp(1.2rem,1.45vw,1.7rem);

  font-weight:300;

  letter-spacing:.30em;

  text-transform:uppercase;

  color:var(--color-text);

  margin-bottom:1.4rem;

}
/* =========================
   NAVIGATION
========================= */
.footer-nav{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:.9rem;

  margin-bottom:1.2rem;

}
.footer-nav a{

  font-family:var(--font-body);

  font-size:.82rem;

  letter-spacing:.14em;

  text-transform:uppercase;

  color:rgba(255,255,255,.70);

  transition:color .3s ease;

}
.footer-nav a:hover{

  color:#fff;

}
.footer-separator{

  color:rgba(255,255,255,.35);

}
/* =========================
   COPYRIGHT
========================= */
.footer-copy{

  font-family:var(--font-body);

  font-size:.78rem;

  letter-spacing:.08em;

  color:rgba(255,255,255,.45);

}
/* =========================
   MOBILE
========================= */
@media (max-width:700px){

  .site-footer{

    margin-top:3rem;

    padding:2rem 0 2rem;

  }

  .footer-logo{

    width:170px;

    max-width:60vw;

    margin-bottom:.6rem;

  }

  .footer-name{

    font-size:1rem;

    letter-spacing:.18em;

    margin-bottom:1.2rem;

  }

  .footer-nav{

    flex-direction:column;

    gap:.8rem;

    margin-bottom:1rem;

  }

  .footer-nav a{

    font-size:.8rem;

  }

  .footer-copy{

    font-size:.75rem;

  }

}
/* ==========================================================
   UI
========================================================== */
/* ==========================================================
   CLOSE BUTTON — standard site close control
========================================================== */
.close-button {
  position: fixed;
  top: clamp(1rem, 2.5vw, 1.75rem);
  right: 1.5rem;
  z-index: 30;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 3rem;
  height: 3rem;
  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;
  background: transparent;

  color: var(--color-text);

  cursor: pointer;
  opacity: 0.72;
  transition: opacity 160ms ease;
}
.close-button__icon {
  display: block;

  font-family: "Cormorant Garamond", serif;
  font-size: 6.45rem;
  font-weight: 300;
  line-height: 1;
}
.close-button:hover,
.close-button:focus-visible {
  opacity: 1;
}
.close-button:focus-visible {
  outline: 1px solid var(--color-text-muted);
  outline-offset: 3px;
}
/* Mobile — align with page margins; keep clear of content below */
@media (max-width: 900px) {
  .close-button {
    top: 1.25rem;
    right: 1.5rem;
  }
}
@media (max-height: 560px) and (orientation: landscape) {
  .close-button {
    top: 0.85rem;
    right: 1.5rem;
  }
}
/* ==========================================================
   HOME
========================================================== */
/* ==========================================================
   HOME - HERO
   Editorial magazine-cover composition.
   LEFT  = .hero-identity (one positioned flex block)
   RIGHT = model
========================================================== */
.hero {
  position: relative;
  height: 100svh;
  min-height: 32rem;
  overflow: hidden;
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 42%;
  transition: transform 10s ease;
}
.hero:hover .hero-image {
  transform: scale(1.04);
}
.hero-overlay {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 78% 48%,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.04) 18%,
      rgba(255, 255, 255, 0) 42%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.38) 34%,
      rgba(0, 0, 0, 0.1) 68%,
      rgba(0, 0, 0, 0.02) 88%,
      rgba(0, 0, 0, 0.05) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04),
      rgba(0, 0, 0, 0.08),
      rgba(0, 0, 0, 0.16)
    );
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: min(1320px, 92%);
  height: 100%;
  margin-inline: auto;
}
/* ==========================================================
   HERO IDENTITY — sole positioned editorial wrapper
   Internals use normal flex flow only.
========================================================== */
.hero-identity {
  /*
    Vertical guide = the model's left hand resting on the parapet.
    It sits at 62.7% of hero.jpg (1672x941). The photograph is cropped with
    object-fit: cover, so the hand lands in two different places:
      - hero taller than 16:9  -> photo fitted on height, hand at 62.7% of the hero
      - hero wider than 16:9   -> photo fitted on width, hand pushed down by the
                                  42% object-position, i.e. 42svh + 11.65vw
    max() picks the right one and the two are equal at the crossover.
  */
  --hero-hand-guide: max(62.7svh, 42svh + 11.65vw);

  /*
    Distance from the top of this block down to the decorative line, so that
    top: var(--hero-hand-guide) + translateY(-offset) drops the line exactly on
    the hand. Sum of what sits above the line:
      logo box            0.6667 * 14.1em =  9.4000em
      logo optical pull                    - 2.9516em
      title, 3 lines at 0.88 * 1.72em     =  4.5408em
      gap IdentityBlock -> CaptionBlock    + 0.5800em
                                          = 11.5692em
  */
  --hero-line-offset: 11.57em;

  position: absolute;
  top: var(--hero-hand-guide);
  /*
    Left edge of the identity = right edge of the 48px sandwich + 2px gap.
    Sandwich starts at var(--page-padding). .hero-identity lives inside
    .hero-inner, so subtract the inner's side inset: (100vw - 100%) / 2.
  */
  left: max(0px, calc(var(--page-padding) + 48px + 2px - (100vw - 100%) / 2));
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.58em; /* moderate: IdentityBlock ↔ CaptionBlock */

  box-sizing: border-box;
  width: max-content;
  /*
    Expressed in em so the block keeps the same proportions at every scale.
    12.2em holds the widest line of the tagline (12.08em), which then breaks on
    its own <br> instead of piling up extra lines under the rule.
    The 42vw term keeps the text clear of the model in narrow windows.
  */
  max-width: min(42vw, 12.2em);
  margin: 0;
  padding: 0;

  transform: translateY(calc(-1 * var(--hero-line-offset)));
  text-align: center;

  /* Single scale knob for the whole composition */
  font-size: clamp(2.85rem, 3.05vw, 3.45rem);
}
/* ==========================================================
   IDENTITY BLOCK — logo + title (normal flex)
========================================================== */
.hero-identity-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;

  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.hero-logo {
  /*
    The asset is 1536x1024 but the monogram only covers 537x295 of it,
    with 329px of empty space above and 400px below.
    Width 14.1em therefore draws a monogram of 4.93em, slightly wider than
    JUAN (4.64em of ink) as intended.
  */
  --hero-logo-width: 14.1em;

  display: block;
  box-sizing: border-box;
  width: var(--hero-logo-width);
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;

  /*
    Remove the asset's empty bottom band (400/1536 of the width), then leave
    optical space at least equal to the open gap between LAMBLIN and the slogan
    (IdentityBlock↔CaptionBlock 0.58em + line↔tagline 0.3em, ignoring the rule).
    Logo size unchanged; only this pull moves it upward.
  */
  margin-bottom: calc(-0.2604 * var(--hero-logo-width) + 0.72em);
}
.hero-title {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.72em;
  font-weight: var(--weight-regular);
  line-height: 0.88;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: white;
}
/* ==========================================================
   CAPTION BLOCK — line + tagline (normal flex)
========================================================== */
.hero-caption-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em; /* small: line ↔ tagline */

  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.hero-line {
  flex-shrink: 0;
  width: 2.85em;
  height: 1px;
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.42);
}
.hero-tagline {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 0.92em;
  line-height: 1.45;
  color: white;
}
.hero-tagline span {
  font: inherit;
  color: inherit;
  opacity: 1;
}
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vh, 2.4rem);
  z-index: 3;
  transform: translateX(-50%);
  color: white;
  font-size: clamp(1.5rem, 2vw, 2.1rem);
  text-decoration: none;
}
/* ==========================================================
   RESPONSIVE — move / scale .hero-identity only
========================================================== */
@media (max-width: 1100px) {
  .hero-image {
    object-position: 76% 42%;
  }

  .hero-identity {
    /* Below this width the photo is always fitted on height. */
    --hero-hand-guide: 62.7%;
    /* Narrower than the name, so the tagline keeps its 4 balanced lines. */
    max-width: 6.6em;
    font-size: clamp(2.55rem, 4.4vw, 3.35rem);
  }
}
@media (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) {
  .hero {
    height: 100svh;
    min-height: 40rem;
  }

  /*
    Model was too centered. Lower X shifts her toward the right of the frame
    (~10 points from the shared 76% tablet framing). Identity untouched.
  */
  .hero-image {
    object-position: 66% 42%;
  }

  .hero-identity {
    --hero-hand-guide: 62.7%;
    max-width: 6.6em;
    font-size: clamp(3.15rem, 5.6vw, 3.85rem);
  }
}
@media (max-width: 700px) {
  .hero {
    /* One screen tall — never taller than the viewport. */
    height: 100svh;
    min-height: 24rem;
    max-height: 100svh;
  }

  .hero-image {
    /*
      Cover already fills the box. Extra scale crops more left/right landscape
      while transform-origin keeps the hand (and thus the rule) fixed in Y.
      Transition disabled here: the base 10s transform transition would otherwise
      animate this zoom in over ten seconds on every load.
      Horizontal frame: model on the right with body visible. +5 points vs the
      prior 64% recenters her slightly (photo shifts left). Zoom unchanged.
    */
    object-position: 69% 40%;
    transform: scale(1.2);
    transform-origin: 69% 62.7%;
    transition: none;
  }

  .hero:hover .hero-image {
    transform: scale(1.2);
  }

  .hero-overlay {
    background:
      radial-gradient(
        circle at 82% 48%,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.03) 16%,
        rgba(255, 255, 255, 0) 40%
      ),
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.48) 36%,
        rgba(0, 0, 0, 0.14) 70%,
        rgba(0, 0, 0, 0.04) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.04),
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.18)
      );
  }

  .hero-inner {
    width: min(1320px, 94%);
  }

  .hero-identity {
    /* ~35px lockup −5% then −10%; left edge follows the shared sandwich alignment. */
    --hero-hand-guide: 62.7%;
    max-width: 8.4em;
    font-size: min(1.8703125rem, 4.7025vh);
  }

  /*
    The markup <br> forces two blocks; at this scale that cannot fit in 3 lines
    on a 390px screen. Hide it here so the slogan wraps naturally to 3 lines.
    Restore the word space that the <br> used to separate the two phrases.
  */
  .hero-tagline br {
    display: none;
  }

  .hero-tagline span::before {
    content: " ";
  }

  .hero-scroll {
    bottom: 1.1rem;
    font-size: 1.5rem;
  }
}
/*
  iPad / tablet landscape — keep slogan on 2 lines, nudge identity and photo
  right for visual balance. Excludes phone landscape (max-height ≤ 500) and
  desktop (> 1366). Does not touch iPad portrait.
*/
@media (orientation: landscape) and (min-width: 701px) and (max-width: 1366px) and (min-height: 501px) {
  .hero-image {
    /* ~5 points toward the right vs desktop 78% / tablet 76%. */
    object-position: 73% 42%;
  }

  .hero-identity {
    --hero-hand-guide: max(62.7svh, 42svh + 11.65vw);
    /* Widest tagline line ≈ 12.08em → stays on its own <br> (2 lines). */
    max-width: 12.2em;
  }
}
/*
  Phones in landscape (e.g. iPhone 12 Pro 844×390) are wider than 700px, so
  they would otherwise inherit the tablet identity scale. Scope by height so
  iPad landscape is untouched.
*/
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .hero {
    height: 100svh;
    min-height: 0;
    max-height: 100svh;
  }

  .hero-image {
    object-position: 76% 42%;
    transform: none;
    transform-origin: center center;
  }

  .hero:hover .hero-image {
    transform: scale(1.04);
  }

  .hero-identity {
    /* Wide short viewport → photo fitted on width; use the shared guide. */
    --hero-hand-guide: max(62.7svh, 42svh + 11.65vw);
    max-width: min(48vw, 12.2em);
    /* Phone landscape: +10% vs previous clamp, proportions unchanged. */
    font-size: clamp(1.155rem, 6.05vh, 1.672rem);
  }

  /* Restore the markup <br> so the slogan stays on its intentional 2 lines. */
  .hero-tagline br {
    display: revert;
  }

  .hero-tagline span::before {
    content: none;
  }

  .hero-scroll {
    bottom: 0.65rem;
    font-size: 1.35rem;
  }
}
/* ==========================================================
   PHILOSOPHY
========================================================== */
.philosophy{

  background:var(--black);

  padding:35px 30px 20px;

  border-top:1px solid var(--line);

}
.philosophy .container{

  max-width:900px;

  margin:auto;

  text-align:center;

}
.philosophy h2{

  margin-bottom:3rem;

}
.philosophy p{

  font-family:"Cormorant Garamond",serif;

  color:var(--white);

  font-size:clamp(1.55rem,3.05vw,2.7rem);

  line-height:1.35;

  margin-bottom:28px;

}
.philosophy p:last-child{

  margin-bottom:0;

}
/* ==========================================================
   ABOUT PREVIEW
========================================================== */
.about-preview{

  width:min(1320px,92%);

  margin:8rem auto;

  display:grid;

  grid-template-columns:1fr .9fr;

  gap:5rem;

  align-items:center;

}
.about-preview__content{

  max-width:620px;

  margin-left:auto;

}
.about-preview__content h2{

  margin-bottom:2rem;

  font-family:var(--font-display);

  font-size:clamp(2.2rem,3.15vw,3.3rem);

  font-weight:300;

  line-height:1.12;

  letter-spacing:.02em;

}
.about-preview__content p{

  margin-bottom:1.7rem;

  font-size:1.08rem;

  line-height:1.9;

  color:rgba(255,255,255,.82);

}
.about-preview__image{

  display:flex;

  justify-content:flex-start;

}
.about-preview__image img{

  display:block;

  width:68%;

  max-width:420px;

  height:auto;

  transition:transform .45s ease;

  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 2%,
      #000 98%,
      transparent 100%
    );

  -webkit-mask-composite:source-in;

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 2%,
      #000 98%,
      transparent 100%
    );

}
.about-preview__image:hover img{

  transform:scale(1.015);

}
.button{

  display:inline-block;

  margin-top:1rem;

  padding:1rem 2.6rem;

  border:1px solid rgba(255,255,255,.32);

  text-decoration:none;

  text-transform:uppercase;

  letter-spacing:.18em;

  font-size:.82rem;

  transition:all .3s ease;

}
.button:hover{

  border-color:#fff;

  background:rgba(255,255,255,.03);

}
@media (max-width:1100px){

  .about-preview{

    grid-template-columns:1fr;

    gap:4rem;

    text-align:center;

  }

  .about-preview__content{

    max-width:640px;

    margin:0 auto;

  }

  .about-preview__image{

    justify-content:center;

  }

  .about-preview__image img{

    width:74%;

    max-width:420px;

  }

}
@media (max-width:700px){

  .about-preview{

    margin:6rem auto;

    gap:3rem;

  }

  .about-preview__content h2{

    line-height:1.15;

  }

  .about-preview__image img{

    width:74%;

    max-width:380px;

  }

}
/* ==========================================================
   FEATURED CREATIONS — boutique window (2×2 photographic grid)
========================================================== */
.gallery {
  width: min(1100px, 92%);
  margin: 8rem auto;
}
.gallery-title {
  max-width: 900px;
  margin: 0 auto 4rem;

  text-align: center;

  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.15vw, 3.3rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: 0.05em;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.2vw, 2.75rem);
  align-items: stretch;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
}
.gallery-item {
  display: block;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.gallery-image {
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.45s ease;

  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 2%,
      #000 98%,
      transparent 100%
    );

  -webkit-mask-composite: source-in;

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 2%,
      #000 98%,
      transparent 100%
    );

  mask-composite: intersect;
}
.gallery-item:hover .gallery-image,
.gallery-item:focus-visible .gallery-image {
  transform: scale(1.02);
}
.gallery-item:focus-visible {
  outline: 1px solid var(--color-text-muted);
  outline-offset: 4px;
}
@media (max-width: 900px) {
  .gallery {
    margin: 6rem auto;
  }

  .gallery-title {
    margin-bottom: 3.25rem;
  }

  .gallery-grid {
    gap: clamp(1.1rem, 3.5vw, 1.75rem);
  }
}
@media (max-width: 420px) {
  .gallery-grid {
    gap: 0.9rem;
  }
}
/* ==========================================================
   COLLECTION CTA
========================================================== */
.collection-cta{

  max-width:900px;

  margin:8rem auto;

  padding:0 2rem;

  text-align:center;

}
.collection-cta h2{

  margin-bottom:2rem;

  font-family:var(--font-display);

  font-size:clamp(2.2rem,3.15vw,3.3rem);

  font-weight:300;

  line-height:.92;

  letter-spacing:.05em;

  #text-transform:uppercase;

}
.collection-cta p{

  max-width:650px;

  margin:0 auto 2.5rem;

  font-size:1.08rem;

  line-height:1.9;

  color:rgba(255,255,255,.82);

}
.button{

  display:inline-block;

  padding:1rem 2.6rem;

  border:1px solid rgba(255,255,255,.32);

  text-decoration:none;

  text-transform:uppercase;

  letter-spacing:.18em;

  font-size:.82rem;

  transition:all .3s ease;

}
.button:hover{

  border-color:#fff;

  background:rgba(255,255,255,.03);

}
/* ==========================================================
   CONTACT CTA
========================================================== */
.contact-cta{

  max-width:900px;

  margin:8rem auto;

  padding:0 2rem;

  text-align:center;

}
.contact-cta h2{

  margin-bottom:2rem;

  font-family:var(--font-display);

  font-size:clamp(2.2rem,3.15vw,3.3rem);

  font-weight:300;

  line-height:.92;

  letter-spacing:.05em;

  #text-transform:uppercase;

}
.contact-cta p{

  max-width:650px;

  margin:0 auto 2.5rem;

  font-size:1.08rem;

  line-height:1.9;

  color:rgba(255,255,255,.82);

}
/* ==========================================================
   HOME
========================================================== */
/*
  Les styles de la page d'accueil sont désormais répartis
  par composant :

  - hero.css
  - philosophy.css
  - about-preview.css
  - featured-creations.css
  - collection-cta.css
  - contact-cta.css

  Ce fichier est conservé pour accueillir d'éventuels styles
  communs à l'ensemble de la Home.
*/
/* ==========================================================
   SAFE AREA FOR FIXED HEADER (TABLETS)
========================================================== */
@media (min-width: 900px) and (max-width: 1200px){

  .about-preview,
  .gallery,
  .collection-cta,
  .contact-cta{

    width:min(1320px,calc(100% - 220px));

  }

}
/* ==========================================================
   CREATION
========================================================== */
/* =======================================================
   HERO
======================================================= */
.creation-layout{

    width:min(1500px,94%);
    margin:50px auto 70px;

    display:grid;
    grid-template-columns:64% 36%;

    gap:3rem;

    align-items:start;

}
.creation-hero{

    width:100%;

}
.creation-hero-image{

    margin:0;

}
.creation-hero-image img{

    display:block;

    width:100%;

    aspect-ratio:4 / 5;

    object-fit:cover;

    cursor:zoom-in;

}
/* ===========================
   MOBILE
=========================== */
@media (max-width:980px){

    .creation-layout{

        width:92%;

        grid-template-columns:1fr;

        gap:2rem;

        margin:30px auto 50px;

    }

}
/* =======================================================
   INFOS
======================================================= */
.creation-panel{

    display:flex;
    flex-direction:column;
    justify-content:center;

    height:100%;

    gap:1.5rem;

}
.creation-reference{

    margin:0;

    font-size:.82rem;

    letter-spacing:.40rem;

    text-transform:uppercase;

    color:#c8b28a;

}
.creation-status{

    margin:0;

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:.18rem;

    color:#8c8c8c;

}
.creation-description{

    margin:0;

    font-size:1.15rem;

    line-height:1.8;

    color:#f2f2f2;

}
.creation-story h2{

    display:none;

}
.creation-story p{

    margin:0;

    line-height:1.9;

    color:#bdbdbd;

}
.creation-meta{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:1rem;

}
.creation-meta h3{

    margin:0 0 .35rem;

    font-size:.70rem;

    letter-spacing:.14rem;

    text-transform:uppercase;

    color:#888;

}
.creation-meta p{

    margin:0;

    color:#fff;

}
.creation-tags{

    display:none;

}
/* ===========================
   PHOTOS DE DÉTAIL
=========================== */
.creation-details-gallery{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:.8rem;

}
.detail-photo{

    border:none;

    background:none;

    padding:0;

    cursor:pointer;

}
.detail-photo img{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    display:block;

    transition:.35s;

}
.detail-photo:hover img{

    transform:scale(1.03);

}
/* ===========================
   BOUTON
=========================== */
.creation-button{

    align-self:flex-start;

    padding:1rem 2rem;

    border:1px solid #c8b28a;

    color:#fff;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.18rem;

    transition:.3s;

}
.creation-button:hover{

    background:#c8b28a;

    color:#111;

}
/* ===========================
   MOBILE
=========================== */
@media(max-width:980px){

    .creation-panel{

        gap:1.2rem;

    }

    .creation-meta{

        grid-template-columns:1fr;

    }

    .creation-button{

        width:100%;

        text-align:center;

    }

}
/* =======================================================
   CRÉATIONS ASSOCIÉES
======================================================= */
.related-creations{

    width:min(1500px,94%);
    margin:5rem auto 6rem;

}
.related-header{

    margin-bottom:2rem;
    text-align:center;

}
.related-header h2{

    margin:0;

    font-size:1rem;

    font-weight:300;

    letter-spacing:.35rem;

    text-transform:uppercase;

    color:#c8b28a;

}
.related-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2rem;

}
.related-card{

    position:relative;

    display:block;

    overflow:hidden;

    text-decoration:none;

    color:#fff;

    background:#111;

}
.related-card img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    display:block;

    transition:transform .6s ease;

}
.related-card:hover img{

    transform:scale(1.04);

}
.related-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:1.8rem;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.70),

        rgba(0,0,0,.15) 55%,

        transparent

    );

}
.related-reference{

    margin:0;

    font-size:.82rem;

    letter-spacing:.28rem;

    text-transform:uppercase;

    color:#fff;

}
.related-status{

    margin:.45rem 0 0;

    font-size:.70rem;

    letter-spacing:.15rem;

    text-transform:uppercase;

    color:#d5d5d5;

}
/* ===========================
   MOBILE
=========================== */
@media (max-width:980px){

    .related-grid{

        grid-template-columns:1fr;

        gap:1.5rem;

    }

}
/* ==========================================================
   CREATION PAGE — dedicated viewing mode
========================================================== */
.creation-page {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 80rem;
  min-height: 100svh;
  margin-inline: auto;
  padding: clamp(4.5rem, 7vw, 5.5rem) clamp(1.25rem, 3.5vw, 3rem)
    clamp(2rem, 5vw, 4.5rem);
  color: var(--color-text);
}
.creation-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(1.75rem, 4vw, 4.5rem);
  min-height: calc(100svh - clamp(6.5rem, 12vw, 10rem));
}
.creation-page__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: calc(100svh - clamp(6.5rem, 12vw, 10rem));
}
.creation-page__photo-button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.creation-page__cover-image {
  display: block;
  box-sizing: border-box;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100svh - clamp(6.5rem, 12vw, 10rem));
  object-fit: contain;
  object-position: center center;
}
.creation-page__content {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding-block: clamp(0.25rem, 1vw, 0.75rem);
}
.creation-page__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  min-width: 0;
}
.creation-page__meta {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.creation-page__reference {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text);
}
.creation-page__availability {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.creation-page__description {
  margin: 0;
  max-width: 34rem;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--color-text);
}
.creation-page__details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 0.65rem;
  width: 100%;
  margin-top: auto;
}
.creation-page__detail {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  min-height: 0;
}
.creation-page__detail .creation-page__photo-button {
  width: 100%;
}
.creation-page__detail-image {
  display: block;
  box-sizing: border-box;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(24vh, 13rem);
  object-fit: contain;
  object-position: center center;
}
/* Narrow viewports — stack editorial columns */
@media (max-width: 900px) {
  .creation-page {
    /* Extra top space so the close control sits in the page margin, clear of the image */
    padding-top: clamp(5.25rem, 14vw, 6.25rem);
    padding-inline: 1.5rem;
  }

  .creation-page__layout {
    grid-template-columns: 1fr;
    align-items: start;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    min-height: 0;
  }

  .creation-page__cover {
    height: auto;
  }

  .creation-page__cover,
  .creation-page__cover-image {
    max-height: min(78svh, 42rem);
  }

  .creation-page__content {
    height: auto;
    padding-block: 0;
  }

  .creation-page__details {
    margin-top: 0;
    gap: 0.45rem;
  }

  .creation-page__detail-image {
    max-height: min(18vh, 9rem);
  }
}
/* Phone / tablet landscape — keep full photographs visible */
@media (max-height: 560px) and (orientation: landscape) {
  .creation-page {
    padding-block: clamp(3.5rem, 10vw, 4rem) 1rem;
    padding-inline: 1.5rem;
  }

  .creation-page__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: stretch;
    gap: clamp(1rem, 3vw, 2rem);
    min-height: calc(100svh - 4.5rem);
  }

  .creation-page__cover,
  .creation-page__cover-image {
    max-height: calc(100svh - 4.5rem);
  }

  .creation-page__content {
    height: 100%;
    gap: 0.9rem;
    padding-block: 0;
  }

  .creation-page__copy {
    gap: 0.9rem;
  }

  .creation-page__description {
    font-size: 1.05rem;
    line-height: 1.6;
  }

  .creation-page__details {
    margin-top: auto;
    gap: 0.35rem;
  }

  .creation-page__detail-image {
    max-height: min(22svh, 7rem);
  }
}
@media (max-width: 480px) {
  .creation-page__details {
    gap: 0.35rem;
  }

  .creation-page__detail-image {
    max-height: min(16vh, 7.5rem);
  }
}
/* ==========================================================
   MEDIA
========================================================== */
/* ==========================================================
   IMAGE VIEWER — reusable fullscreen photograph viewer
========================================================== */
.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  margin: 0;
  padding: 0;

  background: #000000;
  touch-action: none;
}
.image-viewer[hidden] {
  display: none !important;
}
.image-viewer__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 3vw, 2rem);
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
@media (max-width: 900px) {
  .image-viewer__stage {
    padding-top: clamp(4.5rem, 12vw, 5.5rem);
  }
}
.image-viewer__stage:active {
  cursor: grabbing;
}
.image-viewer__image {
  display: block;
  box-sizing: border-box;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
html.has-image-viewer,
html.has-image-viewer body {
  overflow: hidden;
}
/* ==========================================================
   COLLECTION
========================================================== */
/* ==========================================================
   COLLECTION — static boutique geometry
   Card sizes come from src/utils/collectionLayout.ts
========================================================== */
.collection {
  --collection-header-offset: 56px;
  --collection-available: calc(100svh - var(--collection-header-offset));
  --collection-row-height: calc(var(--collection-available) / 7);
  --collection-breathing: calc(var(--collection-available) / 7);

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(var(--collection-breathing) * 0.12);

  width: 100%;
  max-width: 100%;
  height: var(--collection-available);
  max-height: var(--collection-available);
  padding-block: calc(var(--collection-breathing) * 0.2);
  padding-inline: clamp(0.5rem, 1.5vw, 1.25rem);
  overflow: hidden;
}
.collection-rack {
  position: relative;
  display: flex;
  flex: 0 0 var(--collection-row-height);
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: var(--collection-row-height);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  /*
   * touch-action must also be set on cards (the actual hit target).
   * pan-y on the rack alone is ignored when the finger lands on a child,
   * and iOS Safari then steals the gesture (no pointermove).
   */
  touch-action: none;
}
.collection-rack.is-dragging {
  user-select: none;
}
.collection-rack__track {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  box-sizing: border-box;
  height: 100%;
  min-width: 0;
  margin-inline: 0;
  overflow: hidden;
  touch-action: none;
}
.collection-rack__track.is-centered {
  margin-inline: auto;
}
.collection-card {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  /* Hit target for touch — required for iOS Pointer Events delivery. */
  touch-action: none;
}
.collection-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}
.collection-card__image {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}
.collection-card--placeholder {
  pointer-events: none;
}
.collection-card--creation.collection-card--active {
  cursor: pointer;
}
/* Compact the Collection header to the visible back-arrow content. */
html.has-collection .site-header {
  height: auto;
  min-height: 0;
  padding-block: 0.35rem;
}
html.has-collection .main {
  padding-top: var(--collection-header-offset, 56px);
}
/* ==========================================================
   LEGAL
========================================================== */
/* ==========================================================
   LEGAL PAGE
========================================================== */
.legal-page{

  width:min(900px,92%);

  margin:8rem auto;

}
.legal-page__container{

  width:100%;

}
.legal-page h1{

  margin-bottom:4rem;

  text-align:center;

  font-family:var(--font-display);

  font-size:clamp(2.55rem,3.65vw,3.8rem);

  font-weight:300;

  line-height:.92;

  letter-spacing:.05em;

}
.legal-section{

  margin-bottom:3.8rem;

}
.legal-section:last-child{

  margin-bottom:0;

}
.legal-section h2{

  margin-bottom:1.2rem;

  font-family:var(--font-display);

  font-size:1.5rem;

  font-weight:300;

  letter-spacing:.04em;

}
.legal-section p{

  margin-bottom:1rem;

  font-size:1.05rem;

  line-height:1.9;

  color:rgba(255,255,255,.82);

}
.legal-section p:last-child{

  margin-bottom:0;

}
.legal-section a{

  color:inherit;

  text-decoration:underline;

  text-decoration-color:rgba(255,255,255,.35);

  transition:.3s;

}
.legal-section a:hover{

  text-decoration-color:#fff;

}
@media (max-width:700px){

  .legal-page{

    margin:6rem auto;

  }

  .legal-page h1{

    font-size:clamp(2.2rem,8.5vw,3.1rem);

    margin-bottom:3rem;

  }

  .legal-section{

    margin-bottom:3rem;

  }

  .legal-section h2{

    font-size:1.3rem;

  }

  .legal-section p{

    font-size:1rem;

    line-height:1.8;

  }

}
/* ==========================================================
   CONTACT
========================================================== */
/* ==========================================================
   CONTACT PAGE
========================================================== */
.contact-page{

  width:min(900px,92%);

  margin:8rem auto;

}
.page-header{

  max-width:900px;

  margin:0 auto 4.5rem;

  text-align:center;

}
.page-title{

  display:inline-block;

  margin-bottom:1.5rem;

  font-size:.82rem;

  font-weight:500;

  letter-spacing:.22em;

  text-transform:uppercase;

  color:rgba(255,255,255,.70);

}
.page-heading{

  margin:0;

  font-family:var(--font-display);

  font-size:clamp(2.6rem,3.8vw,4rem);

  font-weight:300;

  line-height:1.10;

  letter-spacing:.01em;

}
.contact-page__intro{

  max-width:700px;

  margin:0 auto 4.5rem;

}
.contact-page__intro p{

  margin-bottom:1.5rem;

  font-size:1.1rem;

  line-height:1.9;

  color:rgba(255,255,255,.82);

}
.contact-page__intro p:last-child{

  margin-bottom:0;

}
.contact-page__actions{

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:1.8rem;

}
/* ==========================================================
   CONTACT CARDS
========================================================== */
.contact-card{

  width:min(520px,100%);

  padding:1.5rem 2rem;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:.55rem;

  border:1px solid rgba(255,255,255,.28);

  transition:
    border-color .3s ease,
    background .3s ease,
    transform .3s ease;

}
.contact-card:hover{

  border-color:rgba(255,255,255,.75);

  background:rgba(255,255,255,.03);

  transform:translateY(-2px);

}
.contact-card__title{

  font-size:.78rem;

  letter-spacing:.18em;

  text-transform:uppercase;

}
.contact-card__subtitle{

  font-family:var(--font-display);

  font-size:1.55rem;

  letter-spacing:.02em;

  color:rgba(255,255,255,.92);

}
/* ==========================================================
   MOBILE
========================================================== */
@media (max-width:700px){

  .contact-page{

    margin:6rem auto;

  }

  .page-header{

    margin-bottom:3rem;

  }

  .page-heading{

    font-size:clamp(2.2rem,8vw,3.2rem);

  }

  .contact-page__intro{

    margin-bottom:3rem;

  }

  .contact-page__intro p{

    font-size:1rem;

    line-height:1.8;

  }

  .contact-card{

    padding:1.25rem 1rem;

  }

  .contact-card__subtitle{

    font-size:1.2rem;

    word-break:break-word;

  }

}
/* ==========================================================
   ABOUT
========================================================== */
/* ==========================================================
   ABOUT
========================================================== */
/* ==========================================================
   ABOUT - INTRODUCTION
========================================================== */
.about-page{

  width:min(1320px,92%);
  margin:8rem auto;

}
/* ==========================================================
   PAGE HEADER
========================================================== */
.page-header{

  max-width:1100px;

  margin:0 auto 7rem;

  text-align:center;

}
.page-title{

  display:inline-block;

  margin-bottom:1.5rem;

  font-size:1rem;

  font-weight:500;

  letter-spacing:.22em;

  text-transform:uppercase;

  color:rgba(255,255,255,.70);

}
.page-heading{

  max-width:1100px;

  margin:0 auto;

  font-family:var(--font-display);

  font-size:clamp(2.8rem,4vw,4.2rem);

  font-weight:300;

  line-height:1.10;

  letter-spacing:.01em;

}
.about-section:first-of-type{

  margin-bottom:8rem;

}
/* ==========================================================
   TEXT
========================================================== */
.about-text{

  max-width:840px;

  margin:0 auto;

}
.about-text p{

  margin-bottom:1.7rem;

  font-size:1.08rem;

  line-height:1.9;

  color:rgba(255,255,255,.82);

}
.about-text p:last-child{

  margin-bottom:0;

}
/* ==========================================================
   TABLET
========================================================== */
@media (max-width:1100px){

  .about-page{

    margin:6rem auto;

  }

  .page-header{

    margin-bottom:5rem;

  }

  .about-section:first-of-type{

    margin-bottom:6rem;

  }

  .about-text{

    max-width:760px;

  }

}
/* ==========================================================
   MOBILE
========================================================== */
@media (max-width:700px){

  .about-page{

    margin:5rem auto;

  }

  .page-header{

    margin-bottom:4rem;

  }

  .page-heading{

    font-size:clamp(2.2rem,8vw,3.2rem);

  }

  .about-text{

    max-width:100%;

  }

  .about-text p{

    font-size:1rem;

    line-height:1.8;

  }

}
/* ==========================================================
   ABOUT - STORY
========================================================== */
.about-section{

  margin-bottom:8rem;

}
/* ==========================================================
   TITRES
========================================================== */
.about-title{

  max-width:1000px;

  margin:0 auto 3.5rem;

  text-align:center;

  font-family:var(--font-display);

  font-size:clamp(2.55rem,3.5vw,3.8rem);

  font-weight:300;

  line-height:1.12;

  letter-spacing:.02em;

}
/* ==========================================================
   GRID
========================================================== */
.about-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:5rem;

  align-items:start;

}
.about-grid--reverse{

  direction:rtl;

}
.about-grid--reverse>*{

  direction:ltr;

}
/* ==========================================================
   TEXT
========================================================== */
.about-grid__text{

  max-width:620px;

  margin:0 auto;

}
.about-grid__text p{

  margin-bottom:1.7rem;

  font-size:1.08rem;

  line-height:1.9;

  color:rgba(255,255,255,.82);

}
.about-grid__text p:last-child{

  margin-bottom:0;

}
/* ==========================================================
   IMAGES
========================================================== */
.about-grid__image{

  display:flex;

  justify-content:center;

  align-items:flex-start;

}
.about-photo{

  display:block;

  width:auto;

  max-width:100%;

  max-height:520px;

  height:auto;

  transition:transform .45s ease;

  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 2%,
      #000 98%,
      transparent 100%
    );

  -webkit-mask-composite:source-in;

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 2%,
      #000 98%,
      transparent 100%
    );

}
.about-grid:hover .about-photo{

  transform:scale(1.015);

}
/* ==========================================================
   SIGNATURE
========================================================== */
.about-signature{

  margin-top:2rem;

  text-align:center;

  font-size:.82rem;

  letter-spacing:.22em;

  text-transform:uppercase;

  color:rgba(255,255,255,.70);

}
/* ==========================================================
   TABLET
========================================================== */
@media (max-width:1100px){

  .about-section{

    margin-bottom:7rem;

  }

  .about-title{

    margin-bottom:3rem;

  }

  .about-grid{

    grid-template-columns:1fr;

    gap:3rem;

  }

  .about-grid--reverse{

    direction:ltr;

  }

  .about-grid__text{

    max-width:760px;

  }

  .about-grid__text p{

    text-align:center;

  }

  .about-photo{

    max-height:460px;

  }

}
/* ==========================================================
   MOBILE
========================================================== */
@media (max-width:700px){

  .about-section{

    margin-bottom:6rem;

  }

  .about-title{

    margin-bottom:2.5rem;

    font-size:clamp(2rem,8vw,3rem);

  }

  .about-grid{

    gap:2.5rem;

  }

  .about-grid__text{

    max-width:100%;

  }

  .about-grid__text p{

    font-size:1rem;

    line-height:1.8;

    text-align:left;

  }

  .about-photo{

    max-width:90%;

    max-height:none;

  }

}
/* ==========================================================
   ABOUT - ENDING
========================================================== */
.about-ending{

  max-width:900px;

  margin:7rem auto 4rem;

  text-align:center;

}
.about-ending .about-title{

  margin:0;

  font-family:var(--font-display);

  font-size:clamp(2rem,2.8vw,2.7rem);

  font-weight:300;

  line-height:1.25;

  letter-spacing:.01em;

  color:var(--color-text);

}
/* ==========================================================
   CTA
========================================================== */
.about-cta{

  display:flex;

  justify-content:center;

  margin:0 auto;

}
.about-cta .button{

  display:inline-flex;

  justify-content:center;

  align-items:center;

}
/* ==========================================================
   TABLET
========================================================== */
@media (max-width:1100px){

  .about-ending{

    margin:6rem auto 3.5rem;

  }

}
/* ==========================================================
   MOBILE
========================================================== */
@media (max-width:700px){

  .about-ending{

    margin:5rem auto 3rem;

  }

  .about-ending .about-title{

    font-size:clamp(1.8rem,8vw,2.4rem);

  }

}
/* ==========================================================
   RESET
========================================================== */
*{

  margin:0;
  padding:0;

  box-sizing:border-box;

}
html{

  scroll-behavior:smooth;

  -webkit-font-smoothing:antialiased;

}
body{

  background:var(--color-background);

  color:var(--color-text);

  font-family:var(--font-body);

  line-height:var(--leading-normal);

  overflow-x:hidden;

  text-rendering:optimizeLegibility;

}
img{

  display:block;

  width:100%;

}
a{

  color:inherit;

  text-decoration:none;

}
h1,
h2,
h3{

  font-family:var(--font-display);

  font-weight:var(--weight-regular);

}
.container{

  width:min(92%,var(--content-width));

  margin:auto;

}