/* ==========================================================================
   Lily Ray Ingram — theme stylesheet
   ========================================================================== */

:root {
  --bg: #fbfaf7;
  --ink: #1b1a18;
  --muted: #8d877d;
  --faint: #bdb7ac;
  --rule: #e6e2da;

  --font: "Times New Roman", Tinos, Times, "Liberation Serif", serif;

  --sidebar-w: 280px;
  --pad: 56px;
  --work-h: clamp(300px, 66vh, 860px);
  --gap: clamp(48px, 6vw, 112px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --caption-space: 96px; /* room under the reel for up to five caption lines */

  /* WordPress sets this while the admin bar shows (logged in); full-height layouts subtract it. */
  --admin-bar: var(--wp-admin--admin-bar--height, 0px);
}

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

html { -webkit-text-size-adjust: 100%; }

/* "html body" rather than "body": uiXpress loads html,body { font-family: … } on the
   public site for logged-in users, and this needs to outrank it. */
html body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: var(--admin-bar) auto 0 0;
  width: var(--sidebar-w);
  padding: var(--pad) 0 var(--pad) var(--pad);
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.site-title {
  margin: 0;
  font-size: 23px;
  font-weight: 400;
  letter-spacing: .3em;
  line-height: 1.25;
  text-transform: uppercase;
}

.site-tagline {
  margin: 10px 0 0;
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
}

.site-nav { margin-top: 64px; }

.nav-list { list-style: none; margin: 0; padding: 0; }

/* "~" not "+": stays right even if something (such as a script) sits between sections. */
.nav-section ~ .nav-section { margin-top: 28px; }

.nav-list-collections { margin-top: 7px; }

.nav-list li + li { margin-top: 7px; }

.nav-label {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
}

.nav-list a {
  position: relative;
  display: inline-block;
  color: var(--muted);
  transition: color .25s var(--ease);
}

.nav-list a:hover,
.nav-list a[aria-current="page"] { color: var(--ink); }

.nav-list a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -22px; top: 50%;
  width: 12px; height: 1px;
  background: var(--ink);
}

.nav-list .nav-year {
  margin-left: 6px;
  font-size: 14px;
  font-style: italic;
  color: var(--faint);
}

.site-footer {
  margin-top: auto;
  font-size: 13px;
  color: var(--faint);
}

.site-footer p { margin: 0; }
.site-footer p + p { margin-top: 4px; }
.site-footer a:hover { color: var(--ink); }

/* Tight line box so the credit sits exactly --pad from the bottom, matching the left inset. */
.site-footer .site-credit { margin-top: 10px; line-height: 1; }

.menu-toggle { display: none; }
.menu-toggle-close { display: none; }
.site-header.is-open .menu-toggle-open { display: none; }
.site-header.is-open .menu-toggle-close { display: inline; }

/* Pencil wraps WordPress-owned content in a <div>; keep it out of the way of the layout. */
.inline-region { display: inline; }

/* --------------------------------------------------------------------------
   Main
   -------------------------------------------------------------------------- */

.site-main {
  margin-left: var(--sidebar-w);
  min-height: calc(100vh - var(--admin-bar));
  min-height: calc(100svh - var(--admin-bar));
}

/* --------------------------------------------------------------------------
   Horizontal reel of works (front page, collections)
   -------------------------------------------------------------------------- */

.reel {
  height: calc(100vh - var(--admin-bar));
  height: calc(100svh - var(--admin-bar));
  display: flex;
  flex-direction: column;
}

.reel-track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--gap);
  /* Bottom padding leaves room for the captions that hang below the images. */
  padding: 0 var(--gap) var(--caption-space) calc(var(--pad) + 24px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
}

.reel-track::-webkit-scrollbar { display: none; }
.reel-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.reel-track.is-dragging a { pointer-events: none; }

.work {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: start;
  scroll-margin-left: calc(var(--pad) + 24px);
  opacity: 0;
  transform: translateY(8px);
  animation: rise .9s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

.work-link { display: block; }

.work-image {
  height: var(--work-h);
  width: auto;
  max-width: none;
  box-shadow: 0 1px 2px rgba(40, 32, 20, .06), 0 14px 30px -18px rgba(40, 32, 20, .35);
  transition: opacity .4s var(--ease);
  user-select: none;
  -webkit-user-drag: none;
}

.work-link:hover .work-image { opacity: .9; }

/* Captions hang below the image, outside the work's height, so every image is
   centred on the same line however many caption lines a work has. */
.work-caption {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

.work-title { font-style: italic; color: var(--ink); }

.work-end {
  flex: 0 0 auto;
  align-self: center;
  padding-right: var(--gap);
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
}

.work-end a { border-bottom: 1px solid var(--rule); }
.work-end a:hover { color: var(--ink); border-color: var(--ink); }

.reel-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 var(--pad) var(--pad) calc(var(--pad) + 24px);
  font-size: 14px;
  color: var(--muted);
}

.reel-title { margin: 0; font-size: 14px; font-weight: 400; font-style: italic; color: var(--ink); }

.reel-count { font-variant-numeric: tabular-nums; letter-spacing: .08em; }

.reel-progress {
  flex: 1;
  height: 1px;
  background: var(--rule);
  position: relative;
  overflow: hidden;
}

.reel-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--ink);
  transition: width .2s linear;
}

.reel-nav { display: flex; gap: 6px; }

.reel-btn {
  appearance: none;
  border: 0;
  background: none;
  padding: 6px 8px;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transition: opacity .2s;
}

.reel-btn:disabled { opacity: .2; cursor: default; }

@keyframes rise { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Single work
   -------------------------------------------------------------------------- */

.single {
  min-height: calc(100vh - var(--admin-bar));
  min-height: calc(100svh - var(--admin-bar));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--gap);
  align-items: center;
  padding: var(--pad) var(--pad) var(--pad) calc(var(--pad) + 24px);
}

.single-figure { margin: 0; display: flex; justify-content: center; }

.single-image {
  max-height: calc(100vh - var(--admin-bar) - var(--pad) * 2);
  max-height: calc(100svh - var(--admin-bar) - var(--pad) * 2);
  width: auto;
  box-shadow: 0 1px 2px rgba(40, 32, 20, .06), 0 18px 40px -22px rgba(40, 32, 20, .4);
}


.single-meta { font-size: 15px; color: var(--muted); }

.single-meta h1 {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  color: var(--ink);
}

.single-meta dl { margin: 0; }
.single-meta dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.single-meta dd { margin: 0; }

.single-status { margin-top: 22px; display: flex; align-items: center; gap: 8px; }
.single-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.single-status.is-available::before { background: #6b7b5e; }
.single-status.is-sold::before { background: #a2483c; }

.single-desc { margin-top: 22px; line-height: 1.6; }
.single-desc p { margin: 0 0 1em; }

.single-actions { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule); }
.single-actions a { color: var(--ink); border-bottom: 1px solid var(--rule); transition: border-color .2s; }
.single-actions a:hover { border-color: var(--ink); }

/* Previous left, next right. Long titles can't run together: there's always a
   24px gap, and when both don't fit, "next" drops to its own right-aligned line. */
.single-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 40px;
  font-size: 14px;
  line-height: 1.4;
}

.single-pager > :last-child { margin-left: auto; text-align: right; }

.single-pager a:hover, .single-back:hover { color: var(--ink); }
.single-back { display: inline-block; margin-top: 14px; font-size: 14px; }

/* Hover magnifier (built by main.js on devices with a mouse): a circle that
   follows the cursor and shows the drawing at full resolution. */
.single-lens {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: clamp(180px, 18vw, 260px);
  height: clamp(180px, 18vw, 260px);
  border: 4px solid var(--bg);
  border-radius: 50%;
  pointer-events: none;
  background-color: var(--bg);
  background-repeat: no-repeat;
  /* Cream rim plus a fine dark outline, so the lens reads clearly over pale paper. */
  box-shadow: 0 0 0 1px rgba(27, 26, 24, .22), inset 0 0 0 1px rgba(27, 26, 24, .1), 0 22px 48px -14px rgba(40, 32, 20, .55);
  opacity: 0;
  transition: opacity .18s var(--ease);
  will-change: transform;
}

.single-lens.is-visible { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .single-image { cursor: none; }
}

.single-close {
  position: fixed;
  top: calc(var(--admin-bar) + var(--pad) - 14px);
  right: calc(var(--pad) - 14px);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 30px;
  line-height: 1;
  color: var(--muted);
  transition: color .2s var(--ease);
}

.single-close:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Text pages (About, CV, Contact)
   -------------------------------------------------------------------------- */

.page {
  max-width: 640px;
  padding: calc(var(--pad) + 4px) var(--pad) calc(var(--pad) * 2) calc(var(--pad) + 24px);
}

.page-title {
  margin: 0 0 48px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
}

.page p { margin: 0 0 1.1em; line-height: 1.65; }
.page .pencil-richtext > :last-child { margin-bottom: 0; }
.page-text + .page-text, .lede + .page-text { margin-top: 1.1em; }
.page-text a { border-bottom: 1px solid var(--rule); }
.page-text a:hover { border-color: var(--ink); }

.lede { margin-bottom: 1.1em; }
.lede p { font-size: 22px; line-height: 1.45; }

.page-portrait { margin: 48px 0; }

/* Fixed 3:2 frame: a replacement image of any shape is cropped, never resized. */
.page-portrait-frame { aspect-ratio: 3 / 2; overflow: hidden; background: var(--rule); }
.page-portrait-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.page-portrait figcaption { margin-top: 10px; }
.page-portrait-caption p { margin: 0; font-size: 13px; line-height: 1.5; font-style: italic; color: var(--muted); }
.page-portrait-caption em { font-style: normal; }

.cv-section + .cv-section { margin-top: 44px; }

.cv-section h2 {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  font-weight: 400;
  font-style: italic;
}

/* CV entries are Pencil rich-text lists; a leading bold year becomes the year column. */
.cv-entries ul { list-style: none; margin: 0; padding: 0; }

.cv-entries li {
  position: relative;
  padding: 5px 0 5px 80px;
  font-size: 16px;
  line-height: 1.5;
}

.cv-entries li > strong:first-child {
  position: absolute;
  left: 0;
  width: 64px;
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.cv-entries em { color: var(--ink); }

/* Optional blocks (CV sections, Contact blocks, About caption and closing text).
   Empty ones reach the page only for Pencil editors (visitors never get them),
   and stay hidden until Pencil's edit mode is on, then show as a box to fill in. */
.lr-optional:has(.lr-optional-content:empty) { display: none; }
.pencil-selection-active .lr-optional:has(.lr-optional-content:empty) { display: block; }

.pencil-selection-active .lr-optional-content:empty {
  display: block;
  min-height: 44px;
  border: 1px dashed var(--faint);
}

.pencil-selection-active .lr-optional-content:empty::before {
  content: "Empty: click to add. Hidden on the site until filled.";
  display: block;
  padding: 11px 12px;
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
}
.cv-entries p { margin: 0; }

.cv-download { display: inline-block; margin-top: 48px; font-size: 14px; border-bottom: 1px solid var(--rule); }
.cv-download:hover { border-color: var(--ink); }

.contact-block { margin-bottom: 40px; }
.contact-block h2 { margin: 0 0 6px; font-size: 13px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.contact-block p { margin: 0; }
.contact-block-text p { margin: 0; }
.contact-block a { border-bottom: 1px solid var(--rule); }
.contact-block a:hover { border-color: var(--ink); }


/* --------------------------------------------------------------------------
   Page transitions
   The content column fades in on every page load and, when an internal link
   is followed, main.js adds .is-leaving to fade it out first. The sidebar
   never animates, so it reads as fixed between pages.
   -------------------------------------------------------------------------- */

/* Opacity only: movement would push the page past the window and flash a scrollbar.
   "backwards" only holds the start frame, so .is-leaving can still transition afterwards. */
.site-main { animation: page-in .35s var(--ease) backwards; }

.is-leaving .site-main {
  opacity: 0;
  transition: opacity .14s ease-out;
}

@keyframes page-in { from { opacity: 0; } }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --sidebar-w: 240px; --pad: 40px; }
}

@media (max-width: 1200px) {
  .single { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .single-image { max-height: 72vh; max-height: 72svh; }
  .single-meta { max-width: 520px; }
}

@media (max-width: 820px) {
  :root { --pad: 20px; --work-h: clamp(260px, 58svh, 640px); --gap: 36px; }

  .site-header {
    position: sticky;
    inset: auto;
    top: 0;
    width: auto;
    padding: 18px var(--pad);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background: var(--bg);
  }

  .site-title { font-size: 17px; }
  .site-tagline { display: none; }

  .menu-toggle {
    display: block;
    appearance: none;
    border: 0;
    background: none;
    padding: 6px 0;
    font: inherit;
    font-size: 15px;
    font-style: italic;
    color: var(--ink);
    cursor: pointer;
  }

  .site-nav { display: none; flex-basis: 100%; margin-top: 0; padding: 32px 0 12px; }
  .site-header.is-open { position: fixed; inset: 0; align-content: flex-start; }
  .site-header.is-open + .site-main { padding-top: 64px; }
  .site-header.is-open .site-nav { display: block; }
  .site-header.is-open .site-footer { display: block; position: absolute; left: var(--pad); bottom: var(--pad); }
  .nav-list a { font-size: 20px; }
  .nav-list a[aria-current="page"]::before { display: none; }
  .site-footer { display: none; }

  .site-main { margin-left: 0; }

  .reel { height: calc(100svh - var(--admin-bar) - 64px); }
  .reel-track { padding-left: var(--pad); cursor: auto; }
  .work { scroll-margin-left: var(--pad); }
  .work-image { max-width: calc(100vw - var(--pad) * 3); height: auto; max-height: var(--work-h); }
  .reel-bar { padding: 0 var(--pad) 24px; gap: 18px; }
  .reel-title, .reel-title-region { display: none; }

  .single { position: relative; grid-template-columns: 1fr; padding: 52px var(--pad) 48px; min-height: 0; gap: 28px; }
  .single-close { position: absolute; top: 4px; right: calc(var(--pad) - 12px); }
  .single-image { max-height: 70svh; }

  .page { padding: 24px var(--pad) 64px; }
  .page-title { margin-bottom: 32px; }
  .lede { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-main { animation: none; }
  .is-leaving .site-main { opacity: 1; transition: none; }
  .work { animation: none; opacity: 1; transform: none; }
  * { scroll-behavior: auto !important; }
}