/* ==========================================================================
   Roxane Rombouts x Studio Van Weddingen
   Desktop design canvas: 1440 x 900  ->  1u = 100vw / 1440
   Mobile design canvas:   375 x 812  ->  1u = 100vw / 375 (capped at 480px)
   Fonts: adobe-garamond-pro-bold (Typekit kit ssf1clb), Minion Pro (local)
   ========================================================================== */

@font-face {
  font-family: "Minion Pro";
  src: url("../fonts/MinionPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --u: clamp(0.625px, calc(100vw / 1440), 99px);
  /* content unit: page content never shrinks below full design size */
  --uc: max(calc(100vw / 1440), 1px);
  --garamond: "adobe-garamond-pro-bold", "Adobe Garamond Pro", Georgia, serif;
  --minion: "Minion Pro", "adobe-garamond-pro-bold", Georgia, serif;
  --black: #000;
  --grey: #696767;
  --quote: #4d4d4d;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--garamond);
  color: var(--black);
  background: #fff;
}

a { color: inherit; text-decoration: none; }
img { display: block; }

.page {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Header  (desktop: rule x 120->1320 at y 98.9, wordmark 18u, nav 12u)
   ========================================================================== */

.site-header {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  height: calc(120 * var(--uc));
}

.header-rule {
  position: absolute;
  left: calc(120 * var(--u));
  width: calc(100% - 240 * var(--u));
  top: calc(98.9 * var(--uc));
  border-top: 1px solid currentColor;
  opacity: 0.9;
}

.wordmark {
  position: absolute;
  left: calc(120 * var(--u));
  top: calc(75.4 * var(--uc));
  font-size: calc(18 * var(--uc));
  line-height: 1.271;
  letter-spacing: 0;
  white-space: nowrap;
}

/* inner pages: full-size lowercase x, 9px gaps (0.5em) */
.wordmark .sep { margin: 0 0.5em; }

/* home page: small uppercase X on the baseline, same 9px gaps (1em of 0.5em) */
.page-home .wordmark .sep {
  font-size: 0.5em;
  text-transform: uppercase;
  margin: 0 1em;
}

.lang {
  position: absolute;
  top: calc(79.6 * var(--uc));
  right: calc(118.7 * var(--u));
  font-size: calc(12 * var(--uc));
  line-height: 1.271;
  letter-spacing: 0.04em;
  word-spacing: 0.16em;
}

.lang .active { font-weight: 700; }

/* right-anchored row: text keeps full size, the gaps compress with the window */
.site-nav {
  position: absolute;
  top: calc(101.8 * var(--uc));
  right: calc(120 * var(--u));
  display: flex;
  font-size: calc(12 * var(--uc));
  line-height: 1.271;
  letter-spacing: 0;
}

.site-nav a { white-space: nowrap; }
.site-nav .nav-story   { margin-left: max(calc(71.4 * var(--u)), 55px); }
.site-nav .nav-contact { margin-left: max(calc(45 * var(--u)), 35px); }
.site-nav .active { font-weight: 700; }
.site-nav a:hover { opacity: 0.6; }

/* ==========================================================================
   Footer (inner pages, desktop: rule y 820.1, copyright 10u, disclaimer 10u)
   ========================================================================== */

.site-footer {
  margin-top: auto;
  flex: 0 0 auto;
  position: relative;
  text-align: center;
}

.footer-rule {
  margin: 0 auto;
  width: calc(100% - 240 * var(--u));
  border-top: 1px solid var(--black);
}

.copyright {
  margin-top: calc(4.6 * var(--uc));
  font-family: var(--minion);
  font-size: calc(10 * var(--uc));
  line-height: 1.35;
}

.disclaimer {
  display: inline-block;
  margin-top: calc(3.9 * var(--uc));
  margin-bottom: calc(42.5 * var(--u));
  font-size: calc(10 * var(--uc));
  line-height: 1.271;
}

.disclaimer:hover { opacity: 0.6; }

/* mobile-only footer bits hidden on desktop */
.lang-footer, .slider-dots { display: none; }

/* ==========================================================================
   HOME
   ========================================================================== */

/* the home canvas fills the viewport but never gets shorter than 560 design
   px: below that the page simply scrolls, so the composition stays intact */
.page-home {
  color: #fff;
  height: 100svh;
  min-height: calc(560 * var(--uc));
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }

/* desktop: static split background, brick left / interior right */
.hero-bg .bg {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  background-size: cover;
  background-position: center;
}
.hero-bg .bg-1 { left: 0;   background-image: url("../images/background-1.jpg"); }
.hero-bg .bg-2 { left: 50%; background-image: url("../images/background-2.jpg"); }

/* hero lock-up: logos + tagline grouped as one fixed-geometry block, so
   their internal distances never change; only the group follows the
   viewport (its centre sits at 58% of the height, as in the design) */
.hero {
  position: absolute;
  z-index: 5;
  left: calc(506 * var(--u));
  top: 58%;              /* 522 / 900, relative to the page canvas */
  transform: translateY(-50%);
  width: calc(469.4 * var(--u));
  height: calc(149.6 * var(--u));
}

.hero .logo-svw {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(180 * var(--u));
  height: auto;
}

.hero .logo-rr {
  position: absolute;
  left: calc(240.9 * var(--u));
  top: calc(16.8 * var(--u));
  width: calc(228.5 * var(--u));
  height: auto;
}

.hero .tagline {
  position: absolute;
  left: calc(234.5 * var(--u));
  transform: translateX(-50%);
  top: calc(128 * var(--u));
  font-size: calc(17 * var(--u));
  line-height: 1.271;
  letter-spacing: 0.253em;
  white-space: nowrap;
}

/* home footer: white rule + centred copyright over the photography */
.home-footer {
  position: absolute;
  z-index: 5;
  left: 0;
  width: 100%;
  top: 95.022%;          /* 855.2 / 900, relative to the page canvas */
  text-align: center;
}

.home-footer .footer-rule {
  border-top-color: #fff;
  opacity: 0.9;
}

/* border-box: left padding of 2 x 17.6 centres the text 17.6 to the right,
   without the box ever extending past the viewport */
.home-footer .copyright {
  padding-left: calc(35.2 * var(--u));
}

/* ==========================================================================
   OUR STORY  (desktop: portrait x 295.7 y 274.6 w 304.8 h 429.6,
               text column x 839.3 w 292, heading y 246.5)
   ========================================================================== */

.story-main {
  position: relative;
  display: flex;
  flex: 1 0 auto;
  /* minimum breathing room to header and footer on short windows */
  padding: calc(30 * var(--uc)) 0;
}

/* fixed-proportion plate, centred in the space between header and footer;
   kept narrower than the header rule (1200u at the 901px breakpoint = 750px) */
.story-plate {
  position: relative;
  margin: auto;
  width: calc(736.9 * var(--uc));   /* portrait 304.8 + gap 140 + text 292.1 */
  height: calc(460.5 * var(--uc));
}

.story-portrait {
  position: absolute;
  left: 0;
  top: calc(28.1 * var(--uc));
  width: calc(304.8 * var(--uc));
  height: calc(429.6 * var(--uc));
  object-fit: cover;
}

.story-text {
  position: absolute;
  left: calc(444.8 * var(--uc));   /* 140px gap to the portrait */
  top: 0;
  width: calc(292.1 * var(--uc));
  font-size: calc(12 * var(--uc));
  line-height: calc(14.4 * var(--uc));
}

.story-text h1 {
  font-size: calc(12 * var(--uc));
  line-height: calc(14.4 * var(--uc));
  font-weight: 700;
  margin-bottom: calc(14.2 * var(--uc));
}

.story-text p {
  text-align: justify;
  margin-bottom: calc(14.4 * var(--uc));
}

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

.story-text .quote {
  font-style: italic;
  color: var(--quote);
}

.story-text .who {
  font-style: normal;
  color: var(--black);
}

/* ==========================================================================
   CONTACT  (desktop: block centred on x 502.5, sketch x 780 y 265.4 w 368)
   ========================================================================== */

.contact-main {
  position: relative;
  display: flex;
  flex: 1 0 auto;
  /* minimum breathing room to header and footer on short windows */
  padding: calc(30 * var(--uc)) 0;
}

/* fixed-proportion plate, centred in the space between header and footer;
   kept narrower than the header rule (1200u at the 901px breakpoint = 750px) */
.contact-plate {
  position: relative;
  margin: auto;
  width: calc(744 * var(--uc));    /* block 330 + gap 46 + figure 368 */
  height: calc(346.5 * var(--uc));
}

.contact-block {
  position: absolute;
  left: 0;
  top: calc(39 * var(--uc));       /* centred against the sketch */
  width: calc(330 * var(--uc));
  font-size: calc(12 * var(--uc));
  line-height: calc(14.4 * var(--uc));
}

.contact-title {
  font-size: calc(12 * var(--uc));
  line-height: calc(14.4 * var(--uc));
  font-weight: 700;
  text-align: center;
  margin-bottom: calc(26.6 * var(--uc));
}

.contact-cols {
  position: relative;
  display: flex;
}

.contact-cols .col-divider {
  position: absolute;
  left: calc(166.8 * var(--uc));
  top: calc(20.3 * var(--uc));
  height: calc(31.4 * var(--uc));
  border-left: 1px solid var(--black);
}

.contact-col { width: 50%; }
.contact-col.joris  { text-align: right; padding-right: calc(22 * var(--uc)); }
.contact-col.roxane { text-align: left;  padding-left:  calc(25.5 * var(--uc)); }

.contact-col .name {
  font-weight: 700;
  margin-bottom: calc(4.6 * var(--uc));
}

.contact-col .role { line-height: calc(12 * var(--uc)); }
.contact-col .role em { font-style: italic; }

.contact-col .mail,
.contact-col .tel,
.contact-col .insta { display: block; line-height: calc(12 * var(--uc)); }
.contact-col .tel { font-size: calc(11 * var(--uc)); }
.contact-col.roxane .tel { font-size: calc(10 * var(--uc)); }

.contact-col .insta {
  margin-top: calc(5.7 * var(--uc));
  font-size: calc(11 * var(--uc));
  color: var(--grey);
}

.contact-col a:hover { opacity: 0.6; }

.team-title {
  font-size: calc(12 * var(--uc));
  line-height: calc(14.4 * var(--uc));
  font-weight: 700;
  text-align: center;
  margin-top: calc(56.3 * var(--uc));
}

.team-line {
  text-align: center;
  margin-top: calc(19.6 * var(--uc));
  line-height: calc(14.4 * var(--uc));
}

.team-line + .team-line { margin-top: calc(6.6 * var(--uc)); }

.team-line .name { font-weight: 700; }
.team-line em { font-style: italic; }

.contact-figure {
  position: absolute;
  left: calc(376 * var(--uc));     /* 46px gap to the contact block */
  top: 0;
  width: calc(368 * var(--uc));
}

.contact-figure .facade-photo { display: none; }

.contact-figure .facade-sketch {
  width: 100%;
  height: calc(317.3 * var(--uc));
  object-fit: contain;
}

.contact-figure figcaption {
  position: relative;
  left: calc(9.2 * var(--uc));
  margin-top: calc(14 * var(--uc));
  text-align: center;
  font-style: italic;
  font-size: calc(12 * var(--uc));
  letter-spacing: 0.01em;
}

/* ==========================================================================
   COMING SOON  (sober standalone page: centred wordmark, centred statement)
   ========================================================================== */

/* header and footer are exact mirrors: same height, rules inset 98.9 from
   either edge with equal side margins, so the centred plate sits at the
   true middle of the page */
.page-soon .site-header { height: calc(66 * var(--uc)); }
.page-soon .header-rule { top: calc(45 * var(--uc)); }

.page-soon .site-footer {
  position: relative;
  height: calc(66 * var(--uc));
}

.page-soon .footer-rule {
  position: absolute;
  bottom: calc(45 * var(--uc));
  left: calc(120 * var(--u));
  width: calc(100% - 240 * var(--u));
  margin: 0;
}

.soon-main {
  position: relative;
  display: flex;
  flex: 1 0 auto;
}

.soon-plate {
  margin: auto;
  text-align: center;
}

.soon-title {
  font-size: calc(17 * var(--uc));
  font-weight: 400;
  line-height: 1.271;
  letter-spacing: 0.253em;
  text-indent: 0.253em;   /* balance the trailing letter-space */
  white-space: nowrap;
}

/* ==========================================================================
   MOBILE  (design canvas 375 x 812; breakpoint 900px; canvas capped 480px)
   ========================================================================== */

@media (max-width: 900px) {

  :root {
    --u: clamp(0.8px, calc(100vw / 375), 1.28px);
    --uc: clamp(0.8px, calc(100vw / 375), 1.28px);
  }

  /* plates dissolve on mobile: children flow as normal stacked blocks */
  .story-plate, .contact-plate { display: contents; }
  .story-main, .contact-main { display: block; padding: 0; }

  /* coming soon: scaled to the mobile type sizes, mirrored header/footer */
  .soon-title { font-size: calc(11.5 * var(--u)); letter-spacing: 0.23em; text-indent: 0.23em; }

  .page-soon .site-header { height: calc(42 * var(--u)); }
  .page-soon .header-rule { top: calc(28 * var(--u)); }

  .page-soon .site-footer {
    height: calc(42 * var(--u));
    padding: 0;
  }

  .page-soon .footer-rule {
    bottom: calc(28 * var(--u));
    left: calc(40 * var(--u));
    width: calc(295 * var(--u));
  }

  /* centred, capped canvas for content; backgrounds stay full-bleed */
  .site-header, .site-footer, .story-main, .contact-main,
  .hero, .home-footer {
    width: calc(375 * var(--u));
    margin-left: auto;
    margin-right: auto;
    left: auto;
    right: auto;
  }

  /* ---- header: wordmark 12.3u centred, nav distributed, rule y 68.2 ---- */

  .site-header { position: relative; height: calc(100 * var(--u)); }

  .wordmark {
    left: 50%;
    transform: translateX(-50%);
    top: calc(50.2 * var(--u));
    font-size: calc(12.3 * var(--u));
  }

  /* mobile: small uppercase X on every page */
  .wordmark .sep {
    font-size: 0.5em;
    text-transform: uppercase;
    margin: 0 1em;
  }

  .header-rule {
    left: calc(40 * var(--u));
    width: calc(295 * var(--u));
    top: calc(68.2 * var(--u));
  }

  .site-nav {
    top: calc(72.6 * var(--u));
    left: 0;
    right: 0;
    display: block;
    font-size: calc(10.15 * var(--u));
  }

  .site-nav a { position: absolute; }
  .site-nav .nav-home    { left: calc(70.1 * var(--u)); }
  .site-nav .nav-story   { left: calc(161.7 * var(--u)); margin-left: 0; }
  .site-nav .nav-contact { left: calc(255.9 * var(--u)); margin-left: 0; }

  .lang { display: none; }

  /* ---- mobile footer: NL FR EN above rule, copyright below ---- */

  .lang-footer {
    display: block;
    text-align: center;
    font-size: calc(8.83 * var(--u));
    letter-spacing: 0.04em;
    word-spacing: 0.16em;
    margin-bottom: calc(3.4 * var(--u));
  }

  .lang-footer .active { font-weight: 700; }

  .site-footer .footer-rule { width: calc(295 * var(--u)); }

  .site-footer .copyright {
    margin-top: calc(2.4 * var(--u));
    font-size: calc(8.67 * var(--u));
    margin-bottom: calc(16 * var(--u));
  }

  .disclaimer { display: none; }

  .site-footer { margin-top: auto; padding-top: calc(26 * var(--u)); }

  /* ---- HOME: full-screen slider background, 2 s interval ---- */

  .hero-bg .bg {
    width: 100%;
    left: 0;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
  }

  .hero-bg .bg.visible { opacity: 1; }

  .hero {
    left: 50%;
    top: 50.326%;        /* 408.65 / 812, relative to the page canvas */
    transform: translateY(-50%);
    margin: 0 0 0 calc(-134.5 * var(--u));
    width: calc(267 * var(--u));
    height: calc(85.9 * var(--u));
  }

  .hero .logo-svw {
    left: 0;
    top: 0;
    width: calc(102.7 * var(--u));
  }

  .hero .logo-rr {
    left: calc(135.7 * var(--u));
    top: calc(9.3 * var(--u));
    width: calc(131.3 * var(--u));
  }

  .hero .tagline {
    left: calc(134.5 * var(--u));
    top: calc(73.5 * var(--u));
    font-size: calc(9.77 * var(--u));
  }

  .slider-dots {
    display: flex;
    position: absolute;
    z-index: 5;
    left: 50%;
    transform: translateX(-50%);
    top: 91.071%;        /* 739.5 / 812, relative to the page canvas */
    gap: calc(5.4 * var(--u));
    align-items: center;
  }

  .slider-dots .dot {
    width: calc(20.2 * var(--u));
    height: calc(2.7 * var(--u));
    background: #fff;
    transform: scaleY(0.375);
    transition: transform 0.3s;
  }

  .slider-dots .dot.active { transform: scaleY(1); }

  .home-footer {
    top: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(375 * var(--u));
  }

  .page-home .home-footer {
    top: 94.409%;        /* 766.6 / 812, relative to the page canvas */
    bottom: auto;
  }

  .page-home .lang-footer {
    position: static;
    margin-bottom: calc(0.8 * var(--u));
  }

  .page-home .footer-rule { width: calc(295 * var(--u)); border-top-color: #fff; }

  .page-home .copyright {
    padding-left: 0;
    margin-top: calc(1 * var(--u));
    font-size: calc(8.67 * var(--u));
  }

  /* ---- OUR STORY: stacked ---- */

  .story-main { min-height: 0; }

  .story-portrait {
    position: static;
    display: block;
    margin: calc(21 * var(--u)) auto 0;
    width: calc(295 * var(--u));
    height: calc(415 * var(--u));
  }

  .story-text {
    position: static;
    margin: calc(28.3 * var(--u)) auto 0;
    width: calc(295 * var(--u));
    font-size: calc(13.33 * var(--u));
    line-height: calc(16 * var(--u));
  }

  .story-text h1 {
    font-size: calc(13.33 * var(--u));
    line-height: calc(16 * var(--u));
    margin-bottom: calc(15.8 * var(--u));
  }

  .story-text p { margin-bottom: calc(16 * var(--u)); }

  /* ---- CONTACT: stacked ---- */

  .contact-main { min-height: 0; }

  .contact-figure {
    position: static;
    margin: calc(21 * var(--u)) auto 0;
    width: calc(295 * var(--u));
  }

  .contact-figure .facade-sketch { display: none; }

  .contact-figure .facade-photo {
    display: block;
    width: 100%;
    height: calc(312.8 * var(--u));
    object-fit: cover;
  }

  .contact-figure figcaption {
    left: 0;
    margin-top: calc(1.6 * var(--u));
    font-size: calc(8.33 * var(--u));
    letter-spacing: 0.2em;
  }

  .contact-block {
    position: static;
    margin: calc(71.8 * var(--u)) auto 0;
    width: calc(295 * var(--u));
    font-size: calc(10.87 * var(--u));
    line-height: calc(13 * var(--u));
  }

  .contact-title {
    font-size: calc(13.33 * var(--u));
    line-height: calc(16 * var(--u));
    margin-bottom: calc(19 * var(--u));
  }

  .contact-cols .col-divider {
    left: calc(151.3 * var(--u));
    top: calc(19 * var(--u));
    height: calc(28.5 * var(--u));
  }

  .contact-col.joris  { padding-right: calc(17.7 * var(--u)); }
  .contact-col.roxane { padding-left:  calc(20.3 * var(--u)); }

  .contact-col .name { margin-bottom: calc(4.4 * var(--u)); }
  .contact-col .role { line-height: calc(11 * var(--u)); }
  .contact-col .mail, .contact-col .tel { line-height: calc(11.6 * var(--u)); }
  .contact-col .tel { font-size: calc(9.97 * var(--u)); }
  .contact-col.roxane .tel { font-size: calc(9.07 * var(--u)); }

  .contact-col .insta {
    margin-top: calc(5.4 * var(--u));
    font-size: calc(9.97 * var(--u));
    line-height: calc(12.7 * var(--u));
  }

  .team-title { display: none; }

  .team-line {
    font-size: calc(10.37 * var(--u));
    line-height: calc(12.4 * var(--u));
    margin-top: calc(25 * var(--u));
  }

  .team-line + .team-line { margin-top: calc(9 * var(--u)); }
}