/* ── Lydia Lott — shared works grid ──
   One module, two consumers:
     home/content.md  → data-mode="landing"  data-tag="selected"  (staged reveal, selected only)
     works/content.md → data-mode="browser"  data-tag="all"       (full browse, no stagger)
   The grid + isolate + enlarged DOM is built by works-grid.js into #ll-root.
   Colour: accent is the dark red C64646 (replaces the old 0800FF blue). */

:root {
  --tile-bg: transparent;
  --caption-bg: transparent;
  --ink: #280900;
  --accent: #C64646;
  --lilac: #EDE9FF;
  --leaf: #D4ECC0;
  --tile-w: 320px;
  --tile-h: 248px;
  --caption-h: 46px;
  --gap: 18px;
  --row-gap: 13px;
  --display: 'jaf-lapture-display', 'Lapture Display', Georgia, serif;
  --caption: 'Garamond ATF Text', 'Cardo', Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; color: var(--ink); font-family: var(--caption); overflow: hidden; height: 100%; }
body { height: 100%; display: flex; flex-direction: column; }

.ll-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; min-width: 0; overflow: hidden; height: 100%; }

/* ── Top bar ── */
.ll-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 32px 16px;
  gap: 32px;
}
.ll-bar-left { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.ll-name {
  font-family: var(--display);
  font-size: 14pt;
  line-height: 20px;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.ll-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px 16px;
  align-items: baseline;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: opacity 800ms;
}
.ll-filters::-webkit-scrollbar { display: none; }
.ll-filter {
  font-family: var(--display);
  font-size: 14pt;
  line-height: 20px;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
}
.ll-filter.is-active { color: var(--accent); }
.ll-filter:hover { color: var(--accent); }

/* Orientation toggle — same size as the category filters (14pt) */
.ll-orient {
  font-family: var(--display);
  font-size: 14pt;
  line-height: 20px;
  display: flex;
  gap: 14px;
  white-space: nowrap;
  transition: opacity 800ms;
}
.ll-orient button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.ll-orient button.is-active { color: var(--accent); }

/* ── Landing reveal (mode="landing" only) ──
   name (t0) → images (t3s) → captions/details (t6s) → nav links (t9s) */
.ll-name { opacity: 0; transition: opacity 900ms; }
.ll-page.reveal-name .ll-name { opacity: 1; }
.ll-page.is-landing .ll-filters,
.ll-page.is-landing .ll-orient { opacity: 0; pointer-events: none; }
.ll-page.is-landing.reveal-nav .ll-filters,
.ll-page.is-landing.reveal-nav .ll-orient { opacity: 1; pointer-events: auto; }
.ll-page.is-landing .ll-caption { opacity: 0; transition: opacity 800ms; }
.ll-page.is-landing.reveal-captions .ll-caption { opacity: 1; }
/* Browser mode: everything visible from the start */
.ll-page:not(.is-landing) .ll-name { opacity: 1; }

/* ── Grid viewport ── */
.ll-viewport {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 32px 32px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ll-viewport::-webkit-scrollbar { display: none; }
.ll-grid { position: relative; }

/* tile */
.ll-tile {
  position: absolute;
  width: var(--tile-w);
  height: calc(var(--tile-h) + var(--caption-h));
  transition: opacity 220ms, filter 400ms, transform 900ms cubic-bezier(0.45, 0, 0.55, 1);
  cursor: pointer;
  top: 0;
  left: 0;
  opacity: 0;
}
.ll-grid.is-ready .ll-tile { opacity: 1; }

/* Non-selected category: dim but visible (15% opacity, blurred) */
.ll-grid.is-ready .ll-tile.is-dim { opacity: 0.15; filter: blur(3px); }
/* Selected tag: non-matching tiles invisible */
.ll-grid.is-ready.is-exclusive .ll-tile.is-dim { opacity: 0; filter: none; pointer-events: none; }

.ll-tile .ll-img {
  width: 100%;
  height: var(--tile-h);
  background: var(--tile-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ll-tile .ll-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.ll-tile .ll-caption {
  width: 100%;
  height: var(--caption-h);
  background: var(--caption-bg);
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-family: var(--caption);
  font-style: italic;
  font-size: 15px;
  line-height: 1.2;
  color: #000;
}

/* vertical mode */
.ll-page.is-vertical .ll-viewport { overflow-x: hidden; overflow-y: auto; }

/* ── In-grid isolate mode ──
   Click a work → it stays put on a lilac field, every other tile greys out,
   and a description panel takes over the two cells to its right (filling the
   right column first, then the left). A "+" opens enlarged mode. */
.ll-grid.is-isolating .ll-tile:not(.is-iso-active) {
  opacity: 0.12 !important;
  filter: grayscale(1) blur(1px);
  pointer-events: none;
}
.ll-tile.is-iso-active { z-index: 3; cursor: default; }
.ll-tile.is-iso-active .ll-img { background: transparent; }
.ll-tile.is-iso-active .ll-caption { opacity: 1 !important; }

.ll-iso2 {
  position: absolute;
  top: 0; left: 0;
  z-index: 4;
  display: none;
  padding: 16px calc(var(--gap) * 2) 16px 28px;
  opacity: 0;
  transition: opacity 420ms;
}
.ll-iso2.is-open { display: flex; gap: 24px; }
.ll-iso2.is-shown { opacity: 1; }

/* The "+" (enlarge) sits at the top of the panel's left edge */
/* Left rail: the "+" (enlarge) up top, prev/next chevrons further down */
.ll-iso2-aside { display: flex; flex-direction: column; padding-top: 2px; flex: 0 0 auto; }
.ll-iso2-nav { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; }

/* Thin chevrons (drawn from two borders). Top button points right (prev),
   bottom points left (next) — glyph only; functionality unchanged. */
.ll-chev {
  background: none; border: 0; padding: 6px; cursor: pointer; line-height: 0;
  opacity: 0.55; transition: opacity 160ms;
}
.ll-chev:hover { opacity: 1; }
.ll-chev::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink);
}
.ll-chev-r::before { transform: rotate(45deg); }
.ll-chev-l::before { transform: rotate(-135deg); }

.ll-iso2-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ll-iso2-title {
  font-family: var(--display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 14px;
}
/* Two columns that fill right-first ("as if they are two columns"):
   direction:rtl flows columns right→left; text inside is reset to ltr. */
.ll-iso2-desc {
  flex: 1 1 auto;
  min-height: 0;
  column-count: 2;
  column-gap: var(--gap);
  column-fill: auto;
  direction: rtl;
  font-family: 'Inter', var(--caption), sans-serif;
  font-size: 15px;
  line-height: 1.2;
  color: #000;
}
.ll-iso2-desc > * { direction: ltr; text-align: left; }
.ll-iso2-plus {
  width: 27px; height: 27px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
.ll-iso2-plus::before, .ll-iso2-plus::after {
  content: ''; position: absolute; background: var(--ink);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.ll-iso2-plus::before { width: 13px; height: 1px; }
.ll-iso2-plus::after { width: 1px; height: 13px; }
.ll-iso2-plus:hover { background: rgba(0, 0, 0, 0.06); }

/* Close (×) — only shown in vertical, where the panel is a bottom sheet.
   In horizontal, Esc / tapping the active tile / the grid background close it. */
.ll-iso2-close {
  display: none;
  position: absolute;
  top: 10px; right: 12px;
  width: 27px; height: 27px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  z-index: 2;
}
.ll-iso2-close::before, .ll-iso2-close::after {
  content: ''; position: absolute; background: var(--ink);
  left: 50%; top: 50%; width: 13px; height: 1px;
}
.ll-iso2-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.ll-iso2-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ── Vertical orientation: info panel as a full-width bottom sheet ──
   The beside-the-tile panel can't fit in 2–3 narrow columns, so in vertical
   mode (mobile always, plus the desktop Vertical toggle) the panel detaches
   from the grid and pins to the bottom of the viewport, full width. */
.ll-page.is-vertical .ll-iso2.is-open {
  position: fixed;
  top: auto;
  left: 0; right: 0; bottom: 0;
  width: auto;
  max-height: 50vh;
  background: #fff;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.14);
  border-top: 1px solid rgba(40, 9, 0, 0.12);
  padding: 22px 28px;
  overflow-y: auto;
  z-index: 50;
}
.ll-page.is-vertical .ll-iso2-close { display: block; }
/* Full-width sheet reads better as one left-aligned column than the
   two-column RTL flow designed for the narrow horizontal side-panel. */
.ll-page.is-vertical .ll-iso2-desc { column-count: 1; direction: ltr; }
/* Let other tiles be tapped to switch pieces (overrides the dimming below) */
.ll-page.is-vertical .ll-grid.is-isolating .ll-tile:not(.is-iso-active) {
  pointer-events: auto;
}

/* ── Enlarged mode ── */
.ll-enlarge {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #fff;
  display: none;
  padding: 96px 96px 24px;
  flex-direction: column;
}
.ll-enlarge.is-open { display: flex; }

.ll-enlarge-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ll-enlarge-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.ll-enlarge-caption {
  flex: 0 0 auto;
  background: transparent;
  font-family: var(--caption);
  font-style: italic;
  font-size: 15px;
  line-height: 1.3;
  color: #000;
  padding: 12px 20px;
  margin-top: 13px;
}

.ll-enlarge-close {
  position: absolute;
  top: 30px; right: 30px;
  width: 27px; height: 27px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  z-index: 2;
}
.ll-enlarge-close::before, .ll-enlarge-close::after {
  content: ''; position: absolute; background: var(--ink);
  left: 50%; top: 50%; width: 13px; height: 1px;
}
.ll-enlarge-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.ll-enlarge-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* prev/next chevrons on the right edge, vertically centred */
.ll-enlarge-nav {
  position: absolute;
  right: 30px;
  display: flex; flex-direction: column; gap: 14px;
  top: 50%; transform: translateY(-50%);
  z-index: 2;
}

/* ── Responsive ── */
@media (max-width: 720px) {
  :root { --tile-w: calc((100vw - 24px - 12px) / 2); --tile-h: calc(var(--tile-w) * 0.78); --caption-h: 40px; --gap: 12px; }
  .ll-bar { padding: 16px 12px 12px; flex-wrap: wrap; gap: 12px; }
  .ll-viewport { padding: 0 12px 24px; }
  .ll-filters { display: flex; flex-wrap: wrap; gap: 2px 16px; align-items: baseline; }
  .ll-filter { font-size: 14pt; line-height: 20px; }
  .ll-orient { display: none; }
  /* In-grid description can't fit two columns on a phone: stack as one full-width panel */
  .ll-iso2 { padding: 12px; }
  .ll-iso2.is-open { flex-direction: row; }
  .ll-iso2-desc { column-count: 1; direction: ltr; }
  .ll-enlarge { padding: 56px 16px 16px; }
  .ll-enlarge-close { top: 14px; right: 14px; }
  .ll-enlarge-nav { right: 10px; }
}

@media (max-width: 1200px) and (min-width: 721px) {
  .ll-filters { display: flex; flex-wrap: wrap; gap: 2px 16px; align-items: baseline; overflow: visible; }
}