/* ─────────────────────────────────────────────────────────────────
   style.css  –  Architecture Portfolio
   ───────────────────────────────────────────────────────────────── */

/* ── Reset ───────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Design tokens ───────────────────────────────────────────────── */
:root {
  --col-bg: #f5f2ed;
  --col-ink: #1c1c1a;
  --col-muted: #9a9690;
  --col-accent: #c4b49a;
  --col-line: rgba(28, 28, 26, 0.1);

  --rect-w: 280px;
  --rect-h: 400px;
  --sq-w: 280px;
  --sq-h: 267px;
  --gap: 28px;

  /* Safe fallback — main.js overwrites this after measuring the real header */
  --header-h: 80px;
}

/* ── Base ────────────────────────────────────────────────────────── */
html {
  height: 100%;
  overscroll-behavior: none;
}

body {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background: var(--col-bg);
  cursor: none;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: none;
  font-family: "Volte-light", sans-serif;
  line-height: 1;
  font-weight: 400;
}

/* ══════════════════════════════════════════════════════════════════
   FONTS
   ══════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Volte-light";
  src: url(fonts/Volte-Light.ttf);
}
@font-face {
  font-family: "FilosofiaOT-Regular";
  src: url(fonts/FilosofiaOT-Regular.ttf);
}
@font-face {
  font-family: "Apparel-Display";
  src: url(fonts/Apparel-Display-Light.ttf);
}

/* ══════════════════════════════════════════════════════════════════
   HEADER
   position:fixed so it always sits above the canvas viewport.
   z-index:100 keeps it above everything inside #viewport (z:1).
   ══════════════════════════════════════════════════════════════════ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* Desktop: three equal columns — nav | logo | lang */
  display: grid;
  grid-template-columns: 1fr minmax(0, 1fr) 1fr;
  align-items: center;
  padding: 1.4rem 3rem;
  background-color: #ebe9e6;
}

.panfield {
  background-color: #ebe9e6;
}

/* Desktop grid placement */
.el--1 {
  justify-self: start;
  align-self: center;
}
.el--2 {
  justify-self: center;
  align-self: center;
}
.el--3 {
  justify-self: end;
  align-self: center;
}

.main-nav {
  text-transform: uppercase;
  letter-spacing: 3px;
}

.main-nav-list {
  display: flex;
  gap: 2.8rem;
  list-style: none;
  padding: 0;
}

.main-nav-link:link,
.main-nav-link:visited {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-size: 0.72rem;
  color: #464645;
  transition: color 0.3s;
  padding: 0 0.25rem;
}

.main-nav-link:hover,
.main-nav-link:active {
  color: #000;
  cursor: none;
}

.main-nav-link::after {
  content: "";
  position: absolute;
  background-image: linear-gradient(90deg, rgb(0, 0, 0), rgba(0, 0, 255, 0));
  background-size: 100% 0.3px;
  background-repeat: no-repeat;
  height: 18px;
  width: 0;
  left: 0;
  bottom: -1.2rem;
  transition: width 0.3s;
}

.main-nav-link:hover::after {
  width: 100%;
}

.main-logo {
  padding: 0.2rem;
  display: flex;
  justify-content: center;
}

.montei-logo {
  height: 4rem;
}

.sec-nav {
  text-transform: uppercase;
  display: inline-block;
  letter-spacing: 3px;
}

/* ══════════════════════════════════════════════════════════════════
   CUSTOM CURSOR
   ══════════════════════════════════════════════════════════════════ */
#cur-dot {
  position: fixed;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: var(--col-ink);
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  will-change: left, top;
}

#cur-circle {
  position: fixed;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--col-ink);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0.28;
  will-change: left, top;
  transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}

body.is-dragging #cur-circle {
  width: 3.375rem;
  height: 3.375rem;
  opacity: 0.14;
}

/* ══════════════════════════════════════════════════════════════════
   DRAG HINT
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   VIEWPORT & CANVAS
   #viewport: fixed, starts below the header, z-index below header.
   #canvas:   large absolute world that JS translates to pan.
   ══════════════════════════════════════════════════════════════════ */
#viewport {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  touch-action: none;
  z-index: 1;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 8000px;
  height: 7000px;
  will-change: transform;
  background-color: #ebe9e6;
}

/* ══════════════════════════════════════════════════════════════════
   GRID
   JS sets width/height/marginLeft/marginTop after building boxes.
   ══════════════════════════════════════════════════════════════════ */
#grid {
  position: absolute;
  top: 50%;
  left: 50%;
}

/* ══════════════════════════════════════════════════════════════════
   BOXES
   ══════════════════════════════════════════════════════════════════ */
.box {
  position: absolute;
  overflow: hidden;
  background: #d8d4cc;
  will-change: transform;
  transform-origin: center center;
}

.box.portrait {
  width: var(--rect-w);
  height: var(--rect-h);
}
.box.square {
  width: var(--sq-w);
  height: var(--sq-h);
}

.box img {
  display: block;
  /* Slightly larger than the box so parallax shifting never exposes
     the box edges. The overflow:hidden on .box clips the excess. */
  width: 110%;
  height: 110%;
  margin: -5%; /* re-centres the oversized image */
  object-fit: cover;
  pointer-events: none;
  will-change: transform;
}

/* Box content wrapper */
.box-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  align-items: center;
  justify-content: center;
}

.box-content > img {
  flex: 1;
  min-height: 0;
}

/* Text box elements */
.box-content > p,
.box-content > h2,
.box-content > h3,
.box-content > blockquote {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 1.75rem 1.625rem;
  margin: 0;
}

.box-content > p {
  font-family: "Apparel-Display", serif;
  font-weight: 300;
  /* font-style: italic; */
  text-transform: uppercase;
  font-size: 10cqi; /*scales automatically with box*/
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--col-ink);
}

.box-content > h2 {
  font-family: "Syncopate", sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--col-ink);
  line-height: 1.6;
}

.box-content > h3 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--col-muted);
  line-height: 1.7;
}

.box-content > blockquote {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--col-ink);
  border-left: 1px solid var(--col-accent);
  padding-left: 1.25rem;
  margin-left: 1.625rem;
  margin-right: 1.625rem;
}

.box:has(.box-content > p),
.box:has(.box-content > h2),
.box:has(.box-content > h3),
.box:has(.box-content > blockquote) {
  background: #edeae4;
}

/* Hover label */
.box-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3.25rem 1.125rem 1rem;
  background: linear-gradient(
    to top,
    rgba(14, 12, 8, 0.65) 0%,
    transparent 100%
  );
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.38s ease, transform 0.38s ease;
  z-index: 2;
}

.box:hover .box-label {
  opacity: 1;
  transform: translateY(0);
}

.box-label-num {
  display: block;
  font-family: "Cormorant", serif;
  font-weight: 300;
  font-style: italic;
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  color: rgba(245, 242, 237, 0.55);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.box-label-title {
  display: block;
  font-family: "Syncopate", sans-serif;
  font-size: 0.53rem;
  letter-spacing: 0.18em;
  color: rgba(245, 242, 237, 0.9);
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER
   Starts hidden. main.js appends it to #canvas, switches
   display to grid, and sets left/top/width from pan limits.
   ══════════════════════════════════════════════════════════════════ */
.footer {
  position: relative;
  /* Hidden until JS moves it into the canvas */
  display: none;
  /* Once JS sets display:flex these rules activate —
     single centred column: social icons on top, text below */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 3rem;
  height: 150px; /*set in js*/
  background-color: #ebe9e6;
  /* border-top: 1px solid var(--col-line); */
  /* position/left/top/width all set by JS */
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--col-line) 30%,
    var(--col-line) 70%,
    transparent 100%
  );
}

.footer-centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.footer-address,
.footer-copy {
  font-family: "Volte-light", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--col-muted);
  white-space: nowrap;
}
.footer-note {
  font-family: "Volte-light", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--col-muted);
  white-space: nowrap;
}

.footer-email {
  font-family: "Volte-light", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  font-style: italic;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--col-ink);
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

.footer-email:hover {
  opacity: 0.6;
  cursor: none;
}

.footer-social {
  justify-self: end;
  align-self: center;
  display: flex;
  gap: 1.4rem;
  align-items: center;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
  transition: opacity 0.25s ease;
  cursor: none;
}

.footer-social-link:hover {
  opacity: 1;
  cursor: none;
}

.footer-icon {
  width: 1rem;
  height: 1rem;
  display: block;
}

/* ══════════════════════════════════════════════════════════════════
   GRAIN OVERLAY
   ══════════════════════════════════════════════════════════════════ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.03;
  mix-blend-mode: multiply;
}

/* ══════════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════════ */
@keyframes fade-up-center {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes pulse-line {
  0%,
  100% {
    transform: scaleY(1);
    opacity: 0.4;
  }
  50% {
    transform: scaleY(0.45);
    opacity: 0.15;
  }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════

   Box sizes and column counts are driven by JS (see CONFIG.BREAKPOINTS).
   These media queries handle everything else: header layout, footer
   layout, typography scaling, touch-device cursor, and spacing.

   Breakpoints mirror the JS CONFIG.BREAKPOINTS:
     ≥ 1200px   desktop   (5 cols, default styles)
     900–1199px laptop    (4 cols)
     600–899px  tablet    (3 cols)
     400–599px  phablet   (2 cols)
     < 400px    mobile    (2 cols, tightest)
   ══════════════════════════════════════════════════════════════════ */

/* ── Touch devices: restore auto cursor ─────────────────────────── */
@media (pointer: coarse) {
  body {
    cursor: auto;
  }
  a,
  button,
  .main-nav-link,
  .footer-social-link {
    cursor: pointer;
  }

  #cur-dot,
  #cur-circle {
    display: none;
  }
}

/* ── Laptop (≤ 1199px) ───────────────────────────────────────────── */
@media (max-width: 1199px) {
  .header {
    padding: 1.2rem 2rem;
  }
  .montei-logo {
    height: 3.2rem;
  }
  .main-nav-list {
    gap: 2rem;
  }
}

/* ── Tablet / mobile (≤ 899px) ──────────────────────────────────────
   Logo is always centred. EN/NL stays right next to logo in the
   same row. Nav links move to a second row below, horizontally
   centred and wrapping if needed. No hamburger needed.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .header {
    padding: 0.9rem 1.5rem 0.6rem;
    /* Two rows:
       Row 1: logo absolutely centred + lang pinned to the right
       Row 2: nav links spanning full width, centred
       We use a single-column layout for the grid rows and pull
       the logo out of flow with position:absolute so it always
       sits at exactly 50% of the header width, regardless of
       how wide the EN/NL text is.                               */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    position: relative; /* establishes containing block for logo */
  }

  /* Logo: absolutely centred relative to the full header width */
  .el--2 {
    position: absolute;
    top: 0.9rem;
    left: 50%;
    transform: translateX(-50%);
    /* Remove from grid flow */
    grid-column: unset;
    grid-row: unset;
  }

  /* Lang links: sit in row 1, pinned to the right edge */
  .el--3 {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    /* Enough min-height so this row is as tall as the logo row */
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    min-height: 2.8rem; /* keeps row 1 tall enough for the abs logo */
    display: flex;
    align-items: center;
  }

  /* Nav links: row 2, spanning full width, centred */
  .el--1 {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }

  .main-nav-list {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem 1.4rem;
    padding-bottom: 0.4rem;
  }

  .montei-logo {
    height: 2rem;
  } /* smaller so EN/NL has room */

  /* Extra space between logo row and nav row */
  .el--1 {
    padding-top: 0.5rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 0.65rem;
  }

  /* Footer: allow text to wrap on smaller screens */
  .footer {
    height: auto !important;
    min-height: 7.5rem;
    padding: 1.25rem 1.5rem;
    gap: 0.75rem;
  }

  .footer-address,
  .footer-copy,
  .footer-email {
    font-size: 0.58rem;
  }
}

/* ── Mobile (≤ 480px) ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .header {
    padding: 0.8rem 1rem 0.5rem;
  }

  /* Keep logo centred — update top offset to match smaller padding */
  .el--2 {
    top: 0.8rem;
  }

  /* Adjust lang row height to match smaller logo */
  .el--3 {
    min-height: 2rem;
  }

  .montei-logo {
    height: 1.6rem;
  } /* smaller to avoid EN/NL overlap */

  /* More breathing room above nav on mobile */
  .el--1 {
    padding-top: 0.4rem;
  }

  .main-nav-list {
    gap: 0.6rem 1rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 0.6rem;
  }

  .sec-nav {
    letter-spacing: 0.12em;
  }

  .footer {
    padding: 1rem 0.75rem;
    gap: 0.6rem;
  }

  .footer-address,
  .footer-copy,
  .footer-email {
    font-size: 0.5rem;
    letter-spacing: 0.1em;
  }

  .footer-icon {
    width: 0.875rem;
    height: 0.875rem;
  }
  .footer-social {
    gap: 0.9rem;
  }
}

/* ── Box label + text scale with JS box sizes (always 5 cols) ───────
   Breakpoints match CONFIG.BREAKPOINTS in main.js exactly.          */
@media (max-width: 1199px) {
  .box-label {
    padding: 2.5rem 0.9rem 0.75rem;
  }
  .box-label-num {
    font-size: 0.56rem;
  }
  .box-label-title {
    font-size: 0.48rem;
  }
  .box-content > p {
    font-size: 0.8125rem;
    padding: 1.25rem 1rem;
  }
  .box-content > h2 {
    font-size: 0.6rem;
    padding: 1.25rem 1rem;
  }
  .box-content > blockquote {
    font-size: 0.8125rem;
    padding: 1rem;
  }
}

@media (max-width: 768px) {
  .box-label {
    padding: 1.75rem 0.7rem 0.6rem;
  }
  .box-label-num {
    font-size: 0.5rem;
  }
  .box-label-title {
    font-size: 0.44rem;
  }
  .box-content > p {
    font-size: 0.75rem;
    padding: 1rem 0.875rem;
  }
  .box-content > h2 {
    font-size: 0.55rem;
    padding: 1rem 0.875rem;
  }
  .box-content > blockquote {
    font-size: 0.75rem;
    padding: 0.75rem 0.875rem;
  }
}

@media (max-width: 480px) {
  .box-label {
    padding: 1.25rem 0.5rem 0.4rem;
  }
  .box-label-num {
    font-size: 0.44rem;
  }
  .box-label-title {
    font-size: 0.4rem;
  }
  .box-content > p {
    font-size: 0.6875rem;
    line-height: 1.6;
    padding: 0.75rem 0.625rem;
  }
  .box-content > h2 {
    font-size: 0.5rem;
    padding: 0.75rem 0.625rem;
  }
  .box-content > blockquote {
    font-size: 0.6875rem;
    padding: 0.5rem 0.625rem;
  }
}

/* Drag hint 
#drag-hint {
  position: fixed;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 1;
  transition: opacity 1.4s ease;
  animation: fade-up-center 1.1s 0.5s ease both;
}

#drag-hint.hidden {
  opacity: 0;
}

#drag-hint span {
  font-family: "Cormorant", serif;
  font-weight: 300;
  font-style: italic;
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  color: var(--col-muted);
  text-transform: uppercase;
  white-space: nowrap;
}

#drag-hint-line {
  width: 1px;
  height: 2.125rem;
  background: var(--col-muted);
  opacity: 0.4;
  animation: pulse-line 2.2s ease-in-out infinite;
}
  

@media (max-width: 599px) {
  #drag-hint span {
    font-size: 0.5625rem;
  }
  #drag-hint-line {
    height: 1.5rem;
  }
}
  */