/* ========================================
   CHATEAU PICORON — Oulipian Redesign
   THE CONSTRAINT: 3×3 · NO SCROLL · FOLD
   Pos 0 = mascot. Pos 8 = logo. Always.
   7 cells fold. Each is one headline.
   Hover reveals. Click folds.
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Space+Mono:wght@400;700&display=swap');

@font-face {
  font-family: 'Bourrasque';
  src: url('../assets/fonts/Bourrasque-45Ouest.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

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

:root {
  --cream: #faf9f7;
  --charcoal: #1a1715;
  --gold: #96824a;
  --muted: #8a8580;
  --line: rgba(26, 23, 21, 0.1);
  --mono: 'Space Mono', monospace;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --display: 'Bourrasque', 'Cormorant Garamond', Georgia, serif;
  --bar-h: 34px;
}

html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--cream);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* Hide default cursor on desktop only */
@media (hover: hover) and (pointer: fine) {
  *, *::before, *::after { cursor: none !important; }
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 52px;
  height: 52px;
  background: url('../assets/misc/bird-cursor.jpg') center/contain no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
}


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

.page {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}


/* ===========================
   THE GRID
   =========================== */

.grid {
  flex: 1;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 0;
  min-height: 0;
  position: relative;
}

/* ===========================
   LEAF PANEL — the page beneath the grid
   Sits inside the grid, behind all cells.
   Cells that fold away become transparent,
   revealing this panel underneath.
   Mascot, back, logo cells stay on top.
   =========================== */

.cell--fixed { z-index: 3; }
.cell.cell--stay {
  z-index: 3;
  border: 1px solid transparent;
  background-color: #FEF3B5 !important;
}

/* On leaf pages, staying cells show their reveal text */
.cell--stay .reveal {
  opacity: 1 !important;
  position: static !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: auto;
  left: auto;
  bottom: auto;
  margin-top: clamp(10px, 2vh, 22px);
}
.cell.cell--away {
  background: transparent !important;
  z-index: 0;
  pointer-events: none;
}

/* Leaf panel: 3x3 grid mirroring the main grid.
   Content fills the folded-away cells. Stay cells are empty. */
.leaf-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.leaf-panel.active {
  opacity: 1;
  pointer-events: auto;
}

.leaf-cell {
  padding: clamp(12px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(4px, 0.6vh, 8px);
  overflow: hidden;
}

.leaf-cell--empty { background: transparent !important; }

.leaf-cell h1 {
  font-family: var(--display);
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 400;
  line-height: 1.1;
}

.leaf-cell .leaf-subtitle {
  font-family: var(--mono);
  font-size: clamp(8px, 0.85vw, 10px);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

.leaf-cell h2 {
  font-family: var(--display);
  font-size: clamp(13px, 1.4vw, 17px);
  font-weight: 400;
  line-height: 1.2;
}

.leaf-cell p {
  font-family: var(--serif);
  font-size: clamp(15px, 1.65vw, 20px);
  line-height: 1.5;
  color: var(--charcoal);
}

.leaf-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leaf-cell iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.leaf-cell--img {
  padding: 0 !important;
}

.leaf-cell .leaf-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.leaf-cell .leaf-meta dt {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.leaf-cell .leaf-meta dd {
  font-family: var(--serif);
  font-size: 13px;
  margin-bottom: 6px;
}

.leaf-cell .leaf-cta {
  display: inline-block;
  align-self: center;
  padding: 8px 20px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1.5px solid var(--charcoal);
  transition: all 0.4s;
}

.leaf-cell .leaf-cta:hover {
  background: var(--charcoal);
  color: var(--cream);
}

/* Logo cell on leaf pages */
.is-logo-leaf img {
  height: clamp(65px, 12vh, 110px);
  width: auto;
  opacity: 0.9;
}

/* Summary content displayed in a stay-tile (e.g. bottom-right cell 8
   override on Ouvipo / Terroir leaves). Mimics leaf-cell typography. */
.is-leaf-summary {
  padding: clamp(14px, 2vw, 28px) !important;
  gap: clamp(6px, 1vh, 10px) !important;
}
.is-leaf-summary h2 {
  font-family: var(--display);
  font-size: clamp(15px, 1.8vw, 22px);
  font-weight: 400;
  line-height: 1.2;
}
.is-leaf-summary p {
  font-family: var(--serif);
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.5;
  color: var(--charcoal);
}


/* ===========================
   PRESS TILES — leaf-press
   Each tile = a publication wordmark + pull quote + dated link.
   =========================== */
.press-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.4vh, 14px);
  text-align: center;
  width: 100%;
  height: 100%;
}
.leaf-cell img.press-logo {
  width: auto;
  height: auto;
  max-height: clamp(22px, 5vh, 42px);
  max-width: 55%;
  object-fit: contain;
  filter: grayscale(1) brightness(0);
  opacity: 0.85;
}
.press-tile p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(12px, 1.3vw, 16px);
  line-height: 1.4;
  color: var(--charcoal);
  margin: 0;
}
.press-tile .press-link {
  display: inline-block;
  font-family: var(--mono);
  font-size: clamp(8px, 0.85vw, 10px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  transition: color 0.2s;
}
.press-tile .press-link:hover { color: var(--charcoal); }


/* ===========================
   CELL
   =========================== */

.cell {
  background-color: var(--cream);
  overflow: hidden;
  position: relative;
  z-index: 2;
  transition: background-color 5s cubic-bezier(0.12, 0, 0.2, 1);
}

.cell:hover,
.cell.tapped {
  background-color: var(--cell-color, var(--cream));
  transition: background-color 0.2s ease;
}

.cell__content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 2vw, 28px);
  text-align: center;
  gap: clamp(6px, 1vh, 14px);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: relative;
}


/* ===========================
   FIXED CELLS — mascot & logo
   Always visible, never fold.
   =========================== */

.cell--fixed {
  background: var(--cream);
}

/* Mascot (top-left) */
.is-mascot-fixed {
  gap: 0 !important;
}

.is-mascot-fixed img {
  height: clamp(55px, 11vh, 130px);
  width: auto;
}



/* ===========================
   HEADLINE CELLS
   One word. Hover reveals more.
   =========================== */

.is-headline {
  gap: clamp(4px, 0.8vh, 10px) !important;
  position: relative;
}

.headline {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.15;
}

.reveal {
  position: absolute;
  bottom: clamp(10px, 2.5vh, 24px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 88%;
  font-family: var(--serif);
  font-size: clamp(15px, 1.7vw, 20px);
  font-weight: 300;
  font-style: italic;
  color: var(--charcoal);
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  text-align: center;
}

.cell:hover .reveal,
.cell.tapped .reveal {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0.1s;
}

.reveal a {
  display: block;
  line-height: 1.7;
  opacity: 0.65;
  transition: opacity 0.3s;
  font-style: normal;
  font-family: var(--mono);
  font-size: clamp(10px, 1.15vw, 13px);
}

/* Variant: place the reveal text above the headline instead of below.
   Used on tiles whose bottom edge sits under the centre logo overlay
   (e.g. Wines on home), so the body copy never collides with it. */
.is-reveal-top .reveal {
  top: clamp(10px, 2.5vh, 24px);
  bottom: auto;
}

.reveal a:hover { opacity: 1; }

/* Clickable headline */
.is-headline[style*="pointer"] .headline,
.is-headline.clickable .headline {
  cursor: pointer;
}


/* ===========================
   PHOTO CELLS
   =========================== */

.is-photo {
  padding: 0 !important;
  overflow: hidden;
}

.is-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(80%) contrast(1.05);
  transition: filter 5s cubic-bezier(0.12, 0, 0.2, 1);
}

.is-photo img[src$="visit-sign.jpg"] {
  object-position: center 85%;
}

.is-photo:hover img {
  filter: grayscale(0%) contrast(1);
  transition: filter 0.2s ease;
}

.is-photo:hover .photo-word { opacity: 1; }


/* ===========================
   LOGO CENTRE — wordmark on home centre tile.
   Stays inside its cell, fits via object-fit: contain.
   No overflow tricks — keeps the splash flip clean and
   the layout predictable.
   =========================== */

/* The grid-logo-overlay floats above every cell on home, so the
   wordmark is never clipped by hover, splash, or fold animations.
   Visible only when body has .is-home-page (toggled in JS). */
.grid-logo-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38%;
  max-width: 38%;
  height: auto;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.5s ease 0.2s;
}

body.is-home-page .grid-logo-overlay { opacity: 1; }
body.splash-active .grid-logo-overlay,
body.splash-ready .grid-logo-overlay { opacity: 0; transition: none; }

@media (max-width: 640px) {
  .grid-logo-overlay { width: 32%; max-width: 32%; }
}

/* Legacy class kept as a no-op fallback so old content references
   still render (the overlay above is the actual wordmark on home). */
.is-logo-center {
  padding: 2% !important;
  overflow: hidden;
}
.is-logo-center img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  visibility: hidden;
}


/* ===========================
   PASTEL FILLER CELLS
   Empty cells coloured solid pastel that swap to
   the other pastel on hover so the grid stays alive.
   Also used for section-indicator headline cells.
   =========================== */

.cell:has(.is-pastel-y) {
  background-color: #FEF3B5 !important;
  transition: background-color 4s cubic-bezier(0.12, 0, 0.2, 1);
}
.cell:has(.is-pastel-y):hover,
.cell:has(.is-pastel-y).tapped {
  background-color: #B5DEF4 !important;
  transition: background-color 0.25s ease;
}

.cell:has(.is-pastel-b) {
  background-color: #B5DEF4 !important;
  transition: background-color 4s cubic-bezier(0.12, 0, 0.2, 1);
}
.cell:has(.is-pastel-b):hover,
.cell:has(.is-pastel-b).tapped {
  background-color: #FEF3B5 !important;
  transition: background-color 0.25s ease;
}


/* ===========================
   ILLUSTRATION — map drawing
   Cropped to show just the drawing
   =========================== */

.is-illo {
  padding: 6% !important;
  overflow: hidden;
}

.is-illo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}


/* ===========================
   WINE PHOTO CELLS
   Bottle fills the cell. Click to explore.
   =========================== */

.is-wine-photo {
  padding: 0 !important;
  cursor: pointer;
  overflow: hidden;
}

.is-wine-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.3s ease;
}

.is-wine-photo img[src$="never-odd-or-even.png"] {
  object-position: center 70%;
}

.is-wine-photo img[src$="i-did-did-i.jpeg"] {
  object-position: center 70%;
}

.is-wine-photo img[src$="bon-nobel.png"] {
  object-position: center 38%;
}

/* On hover: photo disappears, pastel bg shows, white name appears */
.cell:hover .is-wine-photo img,
.cell.tapped .is-wine-photo img {
  opacity: 0;
}

.wine-photo-name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: clamp(20px, 3vw, 36px);
  font-weight: 400;
  color: var(--charcoal);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 2;
  padding: 16px;
  line-height: 1.2;
}

.cell:hover .wine-photo-name,
.cell.tapped .wine-photo-name {
  opacity: 1;
}


/* ===========================
   CONSTRAINT BAR
   =========================== */

.constraint-bar {
  height: var(--bar-h);
  background: #FEF3B5;
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(7px, 0.8vw, 9px);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.5;
  user-select: none;
  padding: 0 16px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.3s;
}

.constraint-bar:hover { opacity: 0.75; }
.constraint-bar .dot { opacity: 0.35; margin: 0 4px; }


/* ===========================
   FOOTER
   =========================== */

.footer {
  background: #B5DEF4;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(12px, 2vw, 32px);
  min-height: 42px;
  font-family: var(--mono);
  font-size: clamp(9px, 1.1vw, 13px);
  letter-spacing: 0.1em;
  gap: clamp(8px, 1.5vw, 20px);
  flex-wrap: wrap;
}

.footer, .footer a, .footer__copy { color: #000; opacity: 1; }

.footer a { transition: opacity 0.3s; }
.footer a:hover { opacity: 0.7; }

.footer__left,
.footer__right {
  display: flex;
  gap: clamp(12px, 2vw, 28px);
  align-items: center;
}


/* ===========================
   RESPONSIVE
   =========================== */

/* ===========================
   TABLET (< 900px)
   =========================== */
@media (max-width: 900px) {
  .cell__content { padding: clamp(10px, 1.5vw, 18px); }
  .headline { font-size: clamp(24px, 4vw, 40px); }
  .is-illo { padding: 4% !important; }
}

/* ===========================
   MOBILE (< 640px)
   Grid becomes scrollable 3×3 with minimum cell sizes.
   Leaf panels stack vertically.
   =========================== */
@media (max-width: 640px) {
  /* Allow scrolling on mobile */
  html, body { overflow: auto; }

  .page {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .grid {
    grid-template: repeat(3, minmax(140px, 1fr)) / repeat(3, 1fr);
    min-height: 80vh;
  }

  .cell__content {
    padding: 10px;
    gap: 4px;
  }

  .headline {
    font-size: clamp(16px, 5vw, 24px);
  }

  .reveal {
    font-size: 13px;
    bottom: 6px;
    width: 92%;
    line-height: 1.4;
  }

  .reveal a {
    font-size: 11px;
    line-height: 1.7;
  }

  .title-label {
    font-size: 7px;
    top: 6px;
  }

  .is-mascot-fixed img {
    height: clamp(40px, 10vw, 70px);
  }

  .is-illo {
    padding: 6% !important;
  }

  /* Wine cells */
  .wine-photo-name {
    font-size: clamp(14px, 4vw, 20px);
  }

  /* Leaf panel — stack content in single column */
  .leaf-panel {
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  }

  .leaf-cell {
    padding: 8px;
    gap: 3px;
  }

  .leaf-cell h1 { font-size: clamp(16px, 4vw, 20px); }
  .leaf-cell h2 { font-size: clamp(12px, 2.6vw, 15px); }
  .leaf-cell p { font-size: clamp(14px, 3.4vw, 17px); line-height: 1.45; }
  .leaf-cell .leaf-subtitle { font-size: 8px; }
  .leaf-cell .leaf-meta dt { font-size: 7px; }
  .leaf-cell .leaf-meta dd { font-size: 11px; margin-bottom: 4px; }
  .leaf-cell .leaf-cta { font-size: 8px; padding: 6px 14px; }

  .is-logo-leaf img {
    height: clamp(40px, 8vh, 60px);
  }

  /* Constraint bar + footer */
  .constraint-bar {
    font-size: 7px;
    letter-spacing: 0.1em;
    height: 24px;
  }

  .footer {
    font-size: 8px;
    min-height: 36px;
    padding: 6px 10px;
    gap: 6px;
  }

  /* Hide cursor dot on touch devices */
  .cursor-dot { display: none; }
}

/* ===========================
   SMALL MOBILE (< 400px)
   =========================== */
@media (max-width: 400px) {
  .grid {
    grid-template: repeat(3, minmax(120px, 1fr)) / repeat(3, 1fr);
  }

  .headline { font-size: clamp(12px, 4vw, 18px); }
  .cell__content { padding: 6px; }
  .reveal { display: none; } /* Too small to show reveal text */

  .footer__right { display: none; } /* Simplify footer */
}


/* ===========================
   SPLASH FLIP
   Each cell starts covered by a pastel-blue front
   that flips away in 3D, revealing the cell content
   already laid out underneath. One card at a time.
   =========================== */

@keyframes splashCoverFlip {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

body.splash-active { background: #B5DEF4; }
body { transition: background-color 0.9s ease 0.2s; }

/* Perspective lives on each cell so flips don't share a vanishing point. */
body.splash-active .cell,
body.splash-active .cell--fixed { perspective: 900px; }

/* The blue front sitting on top of each cell. */
body.splash-active .cell::before,
body.splash-active .cell--fixed::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #B5DEF4;
  z-index: 10;
  pointer-events: none;
  transform-origin: center;
  transform: rotateY(0deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Once the page is fully loaded, flip each cover sequentially. */
body.splash-ready .cell::before,
body.splash-ready .cell--fixed::before {
  animation: splashCoverFlip 0.7s cubic-bezier(0.55, 0.05, 0.25, 1) forwards;
}

/* Centre-out clockwise: 4 → 1 → 2 → 5 → 8 → 7 → 6 → 3 → 0 */
body.splash-ready .cell[data-pos="4"]::before { animation-delay: 0.05s; }
body.splash-ready .cell[data-pos="1"]::before { animation-delay: 0.18s; }
body.splash-ready .cell[data-pos="2"]::before { animation-delay: 0.31s; }
body.splash-ready .cell[data-pos="5"]::before { animation-delay: 0.44s; }
body.splash-ready .cell[data-pos="8"]::before { animation-delay: 0.57s; }
body.splash-ready .cell[data-pos="7"]::before { animation-delay: 0.70s; }
body.splash-ready .cell[data-pos="6"]::before { animation-delay: 0.83s; }
body.splash-ready .cell[data-pos="3"]::before { animation-delay: 0.96s; }
body.splash-ready .cell[data-pos="0"]::before { animation-delay: 1.09s; }

/* Hide chrome until grid is revealed */
.constraint-bar,
.footer { transition: opacity 0.6s ease; }
body.splash-active .constraint-bar,
body.splash-active .footer { opacity: 0; }
body.splash-ready .constraint-bar,
body.splash-ready .footer { opacity: 1; transition-delay: 1.3s; }