/* Ephe — site styles. Content lives in content/*.json (edited through Pages CMS). */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
/* Layout: full-bleed intro → interlude → [ book of chapters, one chapter at a time | 24 gap | index 168, sticky at 24 ].
   Chapters sit side by side like pages; switching slides sideways, reading inside a chapter scrolls down.
   Single light look on purpose (white page, black ink), per the brief. */
:root {
  --paper: #FFFFFF;
  --ink: #111111;
  --mute: #9A9893;
  --ph-1: #E7E5E0; --ph-2: #E2E0DA; --ph-3: #EAE8E3; --ph-4: #DFDDD7;
  --ph-intro: #D6D4CE; --ph-chapter: #D9D7D1;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; /* free stand-in for Suisse Int'l */
  --gutter: 24px;
  --toc: 168px;
  --col-gap: 16px;
  --in-gap: 16px; /* same as the column gap */
  --group-gap: 72px;
  --section-gap: 160px;
  --turn: 420ms;
  color-scheme: light;
}
html { background: var(--paper); }
[hidden] { display: none !important; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 18px; font-weight: 460;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; cursor: pointer; }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
img { display: block; width: 100%; height: auto; }
.toc a:hover, .thumb:hover .thumb-title {
  text-decoration: underline; text-decoration-color: var(--mute); text-decoration-thickness: 1px; text-underline-offset: 2px;
}

/* Intro — one image, edge to edge, nothing on it */
.intro { display: block; width: 100%; height: 100vh; height: 100svh; background: var(--ph-intro); object-fit: cover; }
img.intro { background: var(--paper); } /* no grey flash behind a real photo */

/* Grid: row 1 interlude, row 2 book + index (index starts at the top of the chapter image) */
.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--toc);
  column-gap: var(--col-gap);
  row-gap: 120px;
  align-items: start;
  padding-inline: var(--gutter);
  padding-block: 40px var(--section-gap); /* intro → interlude */
}
body:not([data-view="home"]) .shell { padding-top: 24px; row-gap: 0; }
.interlude { grid-column: 1; grid-row: 1; max-width: 460px; }
main { grid-column: 1; grid-row: 2; min-width: 0; }

/* Index (right column) */
.toc {
  grid-column: 2; grid-row: 2;
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 24px);
  display: flex; flex-direction: column; gap: 18px; /* one empty line between groups */
  padding-left: 16px;
}
.toc .num { display: inline-block; width: 26px; } /* number column: titles and their works start on one line */
.toc .works { padding-left: 26px; }
.toc .label { cursor: default; display: block; margin-bottom: 8px; } /* half a line under Garden Poetics: a heading, not its own group */
.toc a.is-current { text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.toc .name { display: block; font-size: 28px; line-height: 30px; letter-spacing: -0.01em; }

/* Book: chapters as pages */
.book { position: relative; overflow-x: clip; }
.panel { display: flex; flex-direction: column; gap: var(--group-gap); }
.panel.is-turning { transition: transform var(--turn) cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.chapter-image, .group { scroll-margin-top: 24px; }
.group { display: flex; flex-direction: column; gap: var(--in-gap); }
.masonry { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--col-gap); align-items: start; }
.masonry .col { display: flex; flex-direction: column; gap: var(--in-gap); min-width: 0; }
.ph { width: 100%; max-width: 100%; }
.info { display: flex; flex-direction: column; padding-bottom: 10px; }
.info .desc { margin-top: 18px; max-width: 380px; }
.work-title { align-self: flex-start; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Index page: one picture per work, centred on a common horizontal line */
#index-view { display: flex; flex-direction: column; gap: 48px; }
.sheet-label { margin-bottom: 14px; }
.sheet { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 12px; row-gap: 40px; align-items: center; padding-bottom: 25px; }
.thumb { position: relative; display: block; min-width: 0; }
.thumb-title { position: absolute; top: calc(100% + 6px); left: 0; white-space: nowrap; } /* caption hangs below so images centre exactly */

/* About / Contact */
.page-text { display: flex; flex-direction: column; gap: 22px; max-width: 560px; font-size: 16px; line-height: 22px; }
.page-text .line { display: block; }
.page-text a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Bar: phones only. Appears after the intro, sticks to the top, names what is on screen, opens the menu */
.bar { display: none; }
@media (max-width: 720px) {
  :root { --gutter: 16px; --col-gap: 10px; --in-gap: 10px; --group-gap: 56px; --section-gap: 112px; }
  .bar {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    position: sticky; top: 0; z-index: 30;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) var(--gutter) 12px;
    background: var(--paper);
  }
  .bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bar button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; flex: none; }
  .bar button:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
  .shell { grid-template-columns: minmax(0, 1fr); padding-top: 32px; row-gap: 64px; }
  body:not([data-view="home"]) .shell { padding-top: 16px; }
  main { grid-row: 2; }
  /* the index becomes a full-screen menu under the bar */
  .toc {
    position: fixed; inset: 0; z-index: 20; overflow-y: auto;
    padding: calc(env(safe-area-inset-top, 0px) + 72px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 32px);
    background: var(--paper); font-size: 16px; line-height: 26px;
  }
  body:not(.menu-open) .toc { display: none; }
  .toc .num { width: 30px; }
  .toc .works { padding-left: 30px; }
  .toc .name { font-size: 32px; line-height: 36px; }
  .sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; row-gap: 36px; }
}