:root {
  --bg: #ffffff;
  --ink: #111111;
  --muted: #666666;
  --line: rgba(0,0,0,0.1);
  --panel: #F6F1E9;
  --header-height: 60px;
  --teaser-w: 24px;
  --panel-offset: 24px; /* header keeps 24px beyond teaser when closed */
}

/* Portrait Text App Trial (assuming available locally or via system) */
@font-face {
  font-family: 'Portrait Text App Trial';
  src: local('Portrait Text App Trial'), local('PortraitText-App-Trial');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ABC Diatype webfont */
@font-face {
  font-family: 'ABCDiatype';
  src: url('./ABC Diatype copy/ABCDiatype-Regular-Trial.woff2') format('woff2'),
       url('./ABC Diatype copy/ABCDiatype-Regular-Trial.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ABCDiatype';
  src: url('./ABC Diatype copy/ABCDiatype-Medium-Trial.woff2') format('woff2'),
       url('./ABC Diatype copy/ABCDiatype-Medium-Trial.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ABCDiatype';
  src: url('./ABC Diatype copy/ABCDiatype-Bold-Trial.woff2') format('woff2'),
       url('./ABC Diatype copy/ABCDiatype-Bold-Trial.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'ABCDiatype', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Header */
.site-header {
  position: fixed;
  top: 0; left: 0;
  right: var(--panel-offset);
  height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px 0 24px; /* always 24px from the active edge */
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  z-index: 10;
  transition: right 400ms cubic-bezier(.2,.8,.2,1), padding 400ms cubic-bezier(.2,.8,.2,1);
}
.site-brand { font-size: 14px; font-weight: 700; color: #000; text-decoration: none; transition: color 150ms ease; letter-spacing: -0.01em; }
.site-brand:hover { color: #AB896C; }
.panel-about, .panel-close, .title { transition: color 150ms ease; }
.panel-about:hover, .panel-close:hover, .title:hover { color: #AB896C; }
.title { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; z-index: 1; color: #000000; }
.filters { display: flex; gap: 8px; align-items: center; margin-left: auto; z-index: 2; }
.select { padding: 6px 10px; border: 1px solid rgba(0,0,0,0.25); background: transparent; border-radius: 4px; color: #000; font-size: 14px; font-weight: 700; }
.select { font-family: 'ABCDiatype', system-ui; letter-spacing: -0.01em; }

/* Gallery */
.gallery {
  position: relative;
  height: 100vh;
  padding-top: var(--header-height);
  display: flex; flex-direction: row; align-items: flex-end;
  gap: 24px;
  overflow-x: scroll; overflow-y: hidden; /* force visible scrollbar */
  padding-left: 0; padding-right: calc(24px + 40px); padding-bottom: 24px; /* 24px + 40px teaser */
  scroll-behavior: smooth;
  transition: gap 800ms cubic-bezier(.25,.46,.45,.94);
}
.gallery-grid {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(25vw - 1px),
    rgba(0,0,0,0.06) calc(25vw - 1px),
    rgba(0,0,0,0.06) calc(25vw)
  );
  z-index: 1;
}
.gallery > * { position: relative; z-index: 2; }
.door-figure { 
  position: relative; 
  flex: 0 0 auto; 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
  margin: 0; 
  padding: 0;
}
.door-figure:first-child {
  margin-left: 24px;
}
.door-figure:not(:last-child)::after {
  content: '';
  position: absolute;
  right: calc(-24px / 2); /* center in the gap */
  top: calc(-100vh);
  height: 200vh;
  width: 1px;
  background: rgba(0,0,0,0.15);
  z-index: 1;
}
body.panel-open .door-figure:not(:last-child)::after {
  right: calc(-16px / 2); /* adjust for smaller gap */
}
.door-id { position: absolute; top: -24px; left: 0; font-size: 13px; color: var(--ink); }
.door {
  flex: 0 0 auto;
  height: 65vh;
  width: auto;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 0;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: height 800ms cubic-bezier(.25,.46,.45,.94), opacity 300ms ease;
  transform: translateZ(0); /* GPU acceleration */
  backface-visibility: hidden;
  cursor: pointer;
  margin: 0;
  padding: 0;
  display: block;
}
.door:hover { 
  transform: scale(1.02); 
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  transition: height 400ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.gallery .door.pressing { opacity: 0.5 !important; filter: brightness(0.7) saturate(0.95) contrast(0.95) !important; }
.gallery .door.clicked { opacity: 0.8 !important; filter: brightness(0.85) saturate(0.95) contrast(0.96) !important; }

/* Scale down individual doors when panel opens */
body.panel-open .door {
  height: 32.5vh; /* 50% of 65vh */
}
body.panel-open .door-figure {
  transform-origin: center bottom;
}

/* Panel */
/* Panel */
.panel {
  position: fixed; top: 0; right: 0; height: 100%; width: 0; min-width: 0; max-width: none;
  background: #000;
  color: #fff;
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
  overflow: hidden; /* text reflows as width changes */
  --panel-w: 0px; /* updated live via JS for fluid typography */
  transition: width 350ms cubic-bezier(.25,.46,.45,.94);
  will-change: width;
  z-index: 20;
}
.panel-content-copy, .meta-table, .index-table {
  transition: font-size 450ms cubic-bezier(.25,.46,.45,.94), line-height 450ms cubic-bezier(.25,.46,.45,.94);
}
/* Fluid typography responding to panel width */
.panel { --panel-w: 30vw; }
/* panel-w is driven live via JS; the above states are not needed */
.panel-content-copy {
  color: #FFF;
  font-family: 'Portrait Text App Trial', serif;
  font-size: 1.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.1875rem; /* 112.903% */
}
.meta-key { font-size: clamp(12px, calc(var(--panel-w) / 40), 14px); }
.meta-val { font-size: clamp(14px, calc(var(--panel-w) / 30), 18px); }
.panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--header-height); border-bottom: 1px solid rgba(255,255,255,0.2); pointer-events: none; }
.panel.open { width: var(--panel-target); }
.panel-handle { display: none; }
.panel-close {
  position: absolute; top: 0; right: 0; height: var(--header-height);
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px;
  background: transparent; border: none; color: #fff; cursor: pointer;
  font-size: 14px; font-weight: 700; letter-spacing: 0em; line-height: 1.6;
}
#index-toggle { display: none; }
.panel-about {
  position: absolute; top: 0; left: 24px; height: var(--header-height);
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: #fff; cursor: pointer;
  font-size: 14px; font-weight: 700; letter-spacing: 0em; line-height: 1.6;
}

/* Slightly smaller arrow glyphs next to labels */
.arrow { font-size: 0.85em; display: inline-block; transform: translateY(0); }

/* Hover overlay above images between vertical lines */
#hover-overlay {
  position: fixed;
  left: 0; top: 0; width: 0; height: 0;
  background: rgba(171,137,108,0.2); /* #ab896c at 20% */
  pointer-events: none; /* enabled via JS when shown */
  opacity: 0;
  transition: opacity 150ms ease;
  z-index: 3; /* above gallery, below header (10) */
}
#hover-overlay.visible {
  opacity: 1;
}

#locked-overlay {
  position: fixed;
  left: 0; top: 0; width: 0; height: 0;
  background: rgba(171,137,108,0.2);
  pointer-events: none;
  opacity: 0;
  transition: left 800ms cubic-bezier(.25,.46,.45,.94), width 800ms cubic-bezier(.25,.46,.45,.94), height 800ms cubic-bezier(.25,.46,.45,.94), opacity 150ms ease;
  z-index: 4; /* above hover overlay */
}
#locked-overlay.visible { opacity: 1; }

/* Iconic arrows pointing to the pipe */
/* glyphs are provided inline in HTML to avoid duplicates */
.panel-content {
  position: absolute;
  top: calc(var(--header-height) + 10px);
  bottom: 24px;
  left: 0; right: 0;
  padding: 0 24px;
  font-weight: 400; margin: 0;
  overflow-y: scroll; /* force visible scrollbar */
  scrollbar-gutter: stable; /* keep scrollbar space visible even when idle */
}
.panel-content-copy { padding-bottom: 24px; }
/* Remove caret styling; switch to responsive text flow */
.panel-title-row { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 16px 0; }
.panel-title {
  color: #FFF;
  font-family: 'Portrait Text App Trial', serif;
  font-size: 5.9375rem; /* ~95px */
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.17813rem; /* ~ -2.85px */
  margin: 0;
}
.panel-title-aside { font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.6); line-height: 1; }
.panel-image { width: 100%; height: auto; object-fit: contain; border: none; background: #111; border-radius: 0; transform: scale(1); transform-origin: center top; transition: transform 800ms cubic-bezier(.25,.46,.45,.94); display: block; margin: 0; }
/* Add this class on first open only */
.panel-image.scale-enter { transform: scale(0.7); }
/* Scale down on closing */
.panel.closing .panel-image { transform: scale(0.7); }
.meta-table { margin-top: 30vh; }
/* Index table */
.index-table { font-size: 13px; line-height: 1.5; color: #fff; }
/* Explicit column layout for consistent alignment and spacing */
.index-header,
.index-row {
  display: grid;
  /* Fit entirely within the panel width using fractional columns */
  grid-template-columns:
    6rem /* ID */
    5.2fr /* Address (widest) */
    repeat(8, 1fr); /* Direction, Door Color, House Color, Condition, Objects, Plants, Visibility, Month */
  column-gap: 24px; /* even spacing after address */
  align-items: baseline; /* align multi-line cells on first-line baseline */
}
.index-header { font-weight: 700; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 15vh; }
.index-row { padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.15); }
.index-cell { text-align: left; white-space: normal; word-break: break-word; overflow: visible; text-overflow: clip; display: block; }
.index-header .index-cell { white-space: nowrap; overflow: visible; }
.index-row:first-child { margin-top: 7vw; }
.index-cell.address { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 24px; }
.index-header .index-cell.address { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 24px; }
.index-cell.id { min-width: 5.5rem; }
.meta-row { display: grid; grid-template-columns: 1fr 2fr; align-items: baseline; column-gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.15); }
.meta-key, .meta-val { line-height: 1.4; align-self: baseline; }
.meta-row:first-child { border-top: 1px solid rgba(255,255,255,0.15); }
.meta-key { font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.6); }
.meta-val { font-size: 13px; color: #fff; padding-left: 24px; }

/* Dim slightly when panel open */
body.panel-open .gallery { 
  filter: saturate(0.9) contrast(0.98); 
  gap: 16px;
  transition: gap 450ms cubic-bezier(.25,.46,.45,.94), filter 300ms ease;
}
/* For 30vw data panel, add teaser width so header meets panel face */
body.panel-open { --panel-target: 30vw; }
body.panel-open .site-header { right: calc(30vw + var(--teaser-w)); padding-right: 24px; }

/* Ensure end spacing also correct when panel open (teaser hidden behind panel) */
body.panel-open .gallery { padding-right: calc(30vw + 24px); }

/* About-open (50vw) - apply same push logic but stronger shrink */
body.about-open .gallery {
  filter: saturate(0.9) contrast(0.98);
  gap: 12px;
  padding-right: calc(50vw + 24px);
}
/* For 50vw about panel */
body.about-open { --panel-target: 50vw; }
body.about-open .site-header { right: calc(50vw + var(--teaser-w)); padding-right: 24px; }
body.about-open .door { height: 16.25vh; }
body.about-open .door-figure:not(:last-child)::after { right: calc(-12px / 2); }

/* Index-open (full width minus 24px) */
body.index-open { --panel-target: calc(100vw - 24px); }
body.index-open .site-header { opacity: 0; pointer-events: none; }
body.index-open .gallery { padding-right: calc((100vw - 24px) + 24px); }
body.index-open .door { height: 0vh; opacity: 0; }
body.index-open .door-figure:not(:last-child)::after { right: calc(-8px / 2); }
body.index-open .site-header { opacity: 0; pointer-events: none; }


/* Utilities */
.hidden { display: none !important; }

/* Panel teaser edge and vertical rectangular knob */
.panel-teaser {
  position: fixed; top: 0; height: 100%;
  right: calc(var(--panel-w, var(--panel-target, 0px)));
  width: 24px; background: #AB896C; z-index: 21;
  transition: right 350ms cubic-bezier(.25,.46,.45,.94);
}
.panel-teaser::after {
  content: '';
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 24px; background: #fff; border-radius: 0px;
}
/* Teaser follows panel via --panel-w/--panel-target; no transform needed */

/* ---------- Scrollbar styling ---------- */
/* Force scrollbars to always show, override system-level auto-hide */
* {
  scrollbar-width: thin; /* Firefox: force visible scrollbar */
}
*::-webkit-scrollbar {
  -webkit-appearance: none; /* override macOS auto-hide */
}

/* Dark vertical scrollbar for panel content */
.panel-content { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.5) rgba(0,0,0,0.15); }
.panel-content::-webkit-scrollbar { width: 8px; }
.panel-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.15); }
.panel-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.5); border-radius: 4px; }
.panel-content::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.7); }

/* Light horizontal scrollbar for gallery */
.gallery { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.35) rgba(0,0,0,0.05); scrollbar-gutter: stable; }
.gallery::-webkit-scrollbar { height: 8px; }
.gallery::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
.gallery::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.35); border-radius: 4px; }
.gallery::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.5); }