/* ===============  Base  =============== */
:root {
  --page-max: 1100px;      /* overall page width cap for index pages */
  --gap: 18px;             /* space between tiles */
  --thumb-height: 150px;   /* visible thumbnail height (adjust to taste) */
  --text: #111;
  --muted: #666;
  --border: #d8d8d8;
  --bg: #ffffff;
  --thumb-bg: #eeeeee;     /* letterbox background */

  /* Works page vertical padding (Option B uses these) */
  --work-pad-top: 10px;       /* tune to taste */
  --work-pad-bottom: 12px;    /* tune to taste */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;
}

/* Generic page wrappers (index pages) */
header, main, footer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 18px;
}

/* Center the gallery heading and the small instruction line (index page) */
header { text-align: center; }

header h2 {
  margin: 0 0 6px 0;
  font-size: 20px;
  font-weight: 650;
}

header p {
  margin: 0;
  color: var(--muted);
}

/* ===============  Index grid  =============== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--gap);
  margin-top: 14px;
}

/* Cards on index */
.card {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Thumbnails on index */
.card img {
  display: block;
  width: 100%;
  height: var(--thumb-height);
  object-fit: contain;           /* full artwork, never distorted */
  background: var(--thumb-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Title under thumbnail (index) */
.card .title {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
  color: var(--text);

  /* 2-line clamp */
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==============  Artwork page: two-column layout  ============== */

/* Works page container overrides (uses real top/bottom padding) */
main.artwork-layout {
  max-width: 1200px;
  min-height: 100vh;
  margin: 0 auto;

  /* Real top/bottom padding + safe-area comfort on iOS */
  padding: var(--work-pad-top) 12px var(--work-pad-bottom);
  padding-top:    calc(var(--work-pad-top)    + env(safe-area-inset-top));
  padding-bottom: calc(var(--work-pad-bottom) + env(safe-area-inset-bottom));

  display: grid;
  grid-template-columns: minmax(0,1fr) 380px;  /* image flexible, caption fixed */
  gap: 20px;
  align-items: start;                           /* top-aligned by default */
}

/* Left pane with image + overlay arrows */
.artwork-pane {
  position: relative;
  min-width: 0;                /* allow the image to shrink inside the grid cell */
}

/* Full image scaling: cap by viewport height minus page padding */
.artwork-pane img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;

  /* Fit in one viewport while respecting top/bottom padding */
  max-height: calc(100vh - var(--work-pad-top) - var(--work-pad-bottom));

  /* tiny visual balance */
  margin: 2px auto 4px;

  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--thumb-bg);
}

/* Overlay nav arrows */
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px; line-height: 42px;
  text-align: center;
  font-size: 28px;
  color: #fff;
  text-decoration: none;
  background: rgba(0,0,0,0.28);
  border-radius: 22px;
  user-select: none;
}
.nav-prev { left: 10px; }
.nav-next { right: 10px; }
.nav-arrow:hover { background: rgba(0,0,0,0.42); }

/* Right metadata column (base: phones/tablets = no top cushion) */
.caption {
  display: block;          /* keep top-aligned */
  max-width: 380px;
  margin: 0;               /* placed by grid */
  text-align: left;
  padding: 0 6px 0 6px;    /* no top pad on narrow screens; keep 6px L/R inset */
}

/* Add the 36px top cushion only on wide screens */
@media (min-width: 800px) {
  .caption { padding-top: 36px; }
}

/* Title “hair more space” */
.caption .work-title {
  font-size: 22px;
  font-weight: 650;
  margin: 4px 0 10px 0;    /* subtle separation from top edge */
  text-align: left;
}

.caption .meta {
  margin: 0 0 4px 0;
  font-size: 18px;
  line-height: 1.35;
}
.caption .meta span { color: var(--muted); }
.caption .note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 17px;
}
.caption .back {
  margin-top: 14px;
  font-size: 14px;
}
.caption .back a {
  color: #0b57d0;
  text-decoration: none;
}
.caption .back a:hover { text-decoration: underline; }

/* Narrow screens: stack image above metadata
   (lowered breakpoint so laptops stay 2‑column) */
@media (max-width: 700px) {
  main.artwork-layout {
    grid-template-columns: 1fr;    /* single column */
    padding: 0 10px;               /* tighter on phones */
  }
  .caption {
    padding-top: 0;                /* remove top cushion on small screens */
    max-width: 680px;
    margin: 8px auto 0;
  }
  .artwork-pane img {
    max-height: 70vh;              /* a bit shorter on small screens */
  }
  .nav-arrow {
    width: 38px; height: 38px; line-height: 36px; font-size: 24px;
  }
}

/* Simple next/previous text nav (if you use it later) */
.nav {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  font-size: 14px;
}
.nav a {
  color: #0b57d0;
  text-decoration: none;
}
.nav a:hover { text-decoration: underline; }

/* ===============  Very small screens  =============== */
@media (max-width: 520px) {
  :root { --thumb-height: 130px; }
  header, main, footer { padding: 14px; }
}