/* TURNER / LIGHT — one continuous rolling page.
   Design DNA transposed from juliencalot.com: off-white ground, black ink,
   condensed-black display type, tiny bold uppercase labels, fluid sizes
   relative to a 1800px base screen, zero radius. */

:root {
  --base-w: 1800;
  --color-bg: #fafafa;
  --color-black: #000;
  --color-grey-off: #8a8a8a;
  --color-white: #fff;
  --color-sun: #e8a33d;

  --pad-global: max(20px, calc(20 / var(--base-w) * 100vw));

  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-body: "Barlow", Arial, sans-serif;

  --fs-info: max(9px, calc(9 / var(--base-w) * 100vw));
  --fs-title-medium: max(19px, calc(19 / var(--base-w) * 100vw));
  --fs-logo: max(30px, calc(34 / var(--base-w) * 100vw));
  --fs-text: max(12px, calc(12.5 / var(--base-w) * 100vw));

  --ease-swift: cubic-bezier(.74, .05, .18, .93);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* always come to rest flush on a painting — never between two */
  scroll-snap-type: y mandatory;
}

body {
  background: var(--color-bg);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: var(--fs-text);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- type utilities ---------- */

.text-info {
  font-family: var(--font-body);
  font-size: var(--fs-info);
  line-height: 1.4;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
}

.text-info.grey { color: var(--color-grey-off); }

.title-display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1;
}

.title-medium { font-size: var(--fs-title-medium); }
.title-hero { font-size: max(44px, 6.5vw); }

/* ---------- loader ---------- */

.loader-container {
  z-index: 9999;
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 22px;
  transition: transform .8s var(--ease-swift), opacity .8s var(--ease-swift);
}

.loader-container.done {
  transform: translateY(-100%);
  opacity: .4;
  pointer-events: none;
}

.loader-sun { width: 130px; height: auto; }

.loader-progress {
  font-family: var(--font-display);
  font-size: var(--fs-title-medium);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

/* ---------- header (white ink + difference blend stays legible
              over both the off-white intro and dark paintings) ---------- */

.header {
  z-index: 900;
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: var(--pad-global);
  mix-blend-mode: difference;
  color: var(--color-white);
  pointer-events: none;
}

.navbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: auto;
}

.navbar-left {
  display: flex;
  align-items: flex-start;
  gap: max(40px, 4vw);
}

.navbar-logo {
  font-family: var(--font-display);
  font-size: var(--fs-logo);
  line-height: .85;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: block;
}

.navbar-logo .logo-line { display: block; }
.navbar-logo .logo-line.small {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-info);
  letter-spacing: .18em;
  margin-bottom: .45em;
}

.navbar-links {
  display: flex;
  flex-direction: column;
  gap: max(3px, calc(3 / var(--base-w) * 100vw));
  padding-top: 2px;
}

.navbar-link {
  font-family: var(--font-body);
  font-size: var(--fs-info);
  line-height: 1.2;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
  transition: opacity .4s;
  width: fit-content;
}

.navbar-link:hover { opacity: .6; }
.navbar-link:active { opacity: 1; }

/* ---------- gallery sections: one painting per viewport ---------- */

.gallery-section {
  position: relative;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.gallery-section img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ---------- hero overlay on the first painting ---------- */

.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  padding: var(--pad-global);
  color: var(--color-black);
  pointer-events: none;
}

.hero-overlay .title-hero { text-shadow: 0 0 34px rgba(250, 250, 250, .8); }

.hero-sub .text-info {
  font-size: max(11px, calc(11.5 / var(--base-w) * 100vw));
  text-shadow: 0 0 14px rgba(250, 250, 250, .9);
}

.hero-sub { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }

.hero-scroll {
  position: absolute;
  bottom: 26px;
  right: var(--pad-global);
  animation: bob 2.2s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ---------- clickable work title (info lives behind it) ---------- */

.work-title {
  z-index: 850;
  position: fixed;
  left: var(--pad-global);
  bottom: var(--pad-global);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: min(560px, 74vw);
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 4px 26px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}

.work-title.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.work-title.switching { opacity: 0; transform: translateY(8px); }

.work-title-text {
  font-size: max(26px, calc(34 / var(--base-w) * 100vw));
  line-height: 1.02;
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}

.work-title:hover .work-title-text { border-bottom-color: rgba(255, 255, 255, .75); }

.work-title-counter { letter-spacing: .1em; }

body.panel-open .work-title { opacity: 0; pointer-events: none; }

/* ---------- info panel (opens from the title) ---------- */

.info-panel {
  z-index: 860;
  position: fixed;
  left: var(--pad-global);
  bottom: var(--pad-global);
  width: min(400px, calc(100vw - 2 * var(--pad-global)));
  max-height: min(66vh, 580px);
  overflow-y: auto;
  background: var(--color-white);
  padding: 22px;
  box-shadow: 0 14px 45px rgba(0, 0, 0, .22);
  display: flex;
  flex-direction: column;
  gap: 9px;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

body.panel-open .info-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.panel-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  font-family: var(--font-body);
  transition: opacity .3s;
}

.panel-close:hover { opacity: .5; }

.panel-note, .panel-period {
  font-size: max(11.5px, calc(12 / var(--base-w) * 100vw));
  line-height: 1.55;
}

.panel-divider {
  border-top: 1px solid var(--color-black);
  margin-top: 4px;
  padding-top: 4px;
}

.panel-nga {
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 2px;
  width: fit-content;
}

.panel-nga:hover { opacity: .6; }

.panel-credit {
  margin-top: 6px;
  font-size: 8px;
  letter-spacing: .08em;
}

/* ---------- responsive ---------- */

@media (max-width: 767px) {
  .navbar-left { gap: 0; flex-direction: column; }
  .navbar-links { display: none; }
  .work-title { left: 14px; bottom: 16px; max-width: calc(100vw - 28px); }
  .work-title-text { font-size: 24px; }
  .info-panel {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-height: 52svh;
    padding: 16px;
  }
  .panel-note, .panel-period { font-size: 11.5px; }
  .hero-sub { max-width: calc(100vw - 40px); }
}