/* ==========================================================================
   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;
  /* the gap between the logos straddles the background seam at 50% */
  left: calc(461 * 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-rr {
  position: absolute;
  left: 0;
  top: calc(16.8 * var(--u));
  width: calc(228.5 * var(--u));
  height: auto;
}

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

.hero .tagline {
  position: absolute;
  left: calc(237.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(311.5 * var(--uc)); /* sketch 282.3 + caption */
}

.contact-block {
  position: absolute;
  left: 0;
  top: calc(21.5 * 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.roxane { text-align: right; padding-right: calc(22 * var(--uc)); }
.contact-col.joris  { text-align: left;  padding-left:  calc(22 * 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-sketch {
  width: 100%;
  height: auto;
}

.contact-figure figcaption {
  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 holds the logos, footer holds the contact details; equal heights
   keep the centred COMING SOON at the true middle of the page. Each block's
   content hugs its rule (logos above the top rule, contacts below the
   bottom rule), echoing the main site's header/footer. */
.page-soon .site-header,
.page-soon .site-footer {
  position: relative;
  height: calc(170 * var(--uc));
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* logos + rule hug the top edge; rule + contacts hug the bottom edge */
.page-soon .site-header { justify-content: flex-start; padding-top: calc(26 * var(--uc)); }
.page-soon .site-footer { justify-content: flex-end; padding-bottom: calc(26 * var(--uc)); }

.page-soon .header-rule {
  position: static;
  margin-top: calc(22 * var(--uc));
  width: calc(100% - 240 * var(--u));
}

.page-soon .footer-rule {
  position: static;
  margin: 0 0 calc(22 * var(--uc));
  width: calc(100% - 240 * var(--u));
}

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

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

.soon-title {
  font-size: calc(24 * 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;
}

/* the two logos, same lock-up geometry as the home page, inverted to black */
.soon-logos {
  position: relative;
  width: calc(305 * var(--uc));
  height: calc(66.9 * var(--uc));
}

.soon-logos img {
  position: absolute;
  height: auto;
  filter: invert(1);
}

.soon-logos .logo-rr {
  left: 0;
  top: calc(10.9 * var(--uc));
  width: calc(148.5 * var(--uc));
}

.soon-logos .logo-svw {
  left: calc(188.1 * var(--uc));
  top: 0;
  width: calc(117 * var(--uc));
}

/* contact: two people, each with the name right above the email */
.soon-contact {
  display: flex;
  justify-content: center;
  gap: calc(70 * var(--uc));
  text-align: center;
  font-size: calc(12 * var(--uc));
  line-height: calc(14.4 * var(--uc));
}

.soon-name { font-weight: 700; margin-bottom: calc(3 * var(--uc)); }

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

/* ==========================================================================
   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 */
  .soon-title { font-size: calc(16 * var(--u)); letter-spacing: 0.23em; text-indent: 0.23em; }

  .soon-logos {
    width: calc(187 * var(--u));
    height: calc(41.1 * var(--u));
  }

  .soon-logos .logo-rr {
    top: calc(6.5 * var(--u));
    width: calc(92 * var(--u));
  }

  .soon-logos .logo-svw {
    left: calc(115 * var(--u));
    width: calc(72 * var(--u));
  }

  .soon-contact {
    flex-direction: column;
    align-items: center;
    gap: calc(16 * var(--u));
    font-size: calc(10.5 * var(--u));
    line-height: calc(13 * var(--u));
  }

  .soon-name { margin-bottom: calc(2 * var(--u)); }

  .page-soon .site-header,
  .page-soon .site-footer {
    height: calc(150 * var(--u));
  }

  .page-soon .site-header { padding-top: calc(22 * var(--u)); }
  .page-soon .site-footer { padding-bottom: calc(22 * var(--u)); }

  .page-soon .header-rule { margin-top: calc(18 * var(--u)); }
  .page-soon .footer-rule { margin: 0 0 calc(18 * var(--u)); }

  .page-soon .header-rule,
  .page-soon .footer-rule {
    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 1s 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-rr {
    left: 0;
    top: calc(9.3 * var(--u));
    width: calc(131.3 * var(--u));
  }

  .hero .logo-svw {
    left: calc(164.3 * var(--u));
    top: 0;
    width: calc(102.7 * 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 figcaption {
    margin-top: calc(10 * 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.roxane { padding-right: calc(17.7 * var(--u)); padding-left: 0; }
  .contact-col.joris  { padding-left:  calc(17.7 * var(--u)); padding-right: 0; }

  .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)); }
}