/* HORIZON. Maryna Levytska, design pitch lane 1.
   The site as her landscapes: warm paper ground, level rules, airy archive grids.
   Palette is hers: warm off-white paper, ink, warm grey metadata, hairline horizons.
   2026-07-29 revision: the work page centers the project list over a hover
   cover; project pages drop header, footer, and left list for a Soth-like
   back link, corner block, and worded gallery controls.
   2026-07-30 revision: the footer is retired everywhere; back and the corner
   block hug the screen edges; gallery photos grow to all but 3.5% top and
   bottom with prev/next/close tracking the photo; index rows always divide
   evenly; descriptions run justified at grid width; the Crimea overlay and
   the contact invite line are gone; the corner reads title, caption, then a
   lowercase gallery/index switch.
   2026-08-03 revision: client-picked main photos cover the work page and its
   header floats transparent over them; gallery photos sit centered-right with
   the right margin kept for close/next (the description frame stays middle);
   the index hover frame is wider and bolder with its lines always inside the
   gaps, and the grids align right of the corner rail.
   2026-08-12 revision (convergence): the index adopts the ALBUM column model
   (capped reading columns anchored right), the type adopts the DIPTYCH rhythm
   (1.7 body leading, 21px wordmark, 1.5 statement leading), Studio Diaries
   follows Maryna's numbered folder order with twelve new frames, and sitter
   names in captions never break across lines. */

:root {
  --paper: #f8f6f1;
  --ink: #111111;
  --black: #000000;
  --soft: #8b8478;
  --grey: #8b8478;
  --grey-2: #8b8478;
  --label: #8b8478;
  --hairline: #e3dfd7;
  --ghost: #eeece6;
  --gutter: 4vw;
  --rail: 13rem;
  --settle: 450ms;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: #eae6dd; }

img, video { display: block; }

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

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

/* ---------- header, identical on every page ---------- */

.site-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.8rem var(--gutter);
}

.wordmark {
  font-size: 1.3125rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.site-head nav a {
  margin-left: 2.4rem;
  font-size: 1.0625rem;
  color: var(--ink);
}

.site-head nav a:hover,
.site-head nav a:focus-visible { font-style: italic; }

.site-head nav a[aria-current="page"] { color: var(--grey); }

.site-head--over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

/* ---------- landing, unchanged by the 07-27 revision ---------- */

.landing {
  height: 100vh;
  height: 100svh;
}

.landing-fig {
  margin: 0;
  height: 100%;
}

.landing-fig picture,
.landing-fig img {
  width: 100%;
  height: 100%;
}

.landing-fig img { object-fit: cover; }

/* ---------- work page: the list centered over the ground, the hovered
   project's picture fading in behind it, uncropped, as large as fits ---------- */

.work-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.work-landing {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22rem;
}

.plist {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.plist a {
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--black);
}

.plist a:hover,
.plist a:focus-visible { font-style: italic; }

.work-stage {
  position: absolute;
  inset: 0;
}

.work-pic {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

.work-pic.is-on { opacity: 1; }

/* the hover picture runs screen-wide, exactly like the landing image */
.work-pic picture {
  width: 100%;
  height: 100%;
}

.work-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- project pages: no header, no rail; a back link top-left ---------- */

.back-link {
  position: fixed;
  top: 0.9rem;
  left: 0.7rem;
  z-index: 6;
  padding: 0.2rem 0.6rem 0.2rem 0;
  background: var(--paper);
  font-size: 1.15625rem;
  line-height: 1.4;
  color: var(--soft);
}

.back-link:hover,
.back-link:focus-visible { font-style: italic; }

.pmain {
  padding: 0 var(--gutter);
}

/* ---------- corner block: caption or title above the Gallery / Index toggle ---------- */

/* wide enough that a sitter's name can hold one row */
.corner {
  position: fixed;
  left: 0.7rem;
  bottom: 0.9rem;
  width: auto;
  min-width: var(--rail);
  max-width: 24rem;
  z-index: 6;
  padding: 0.3rem 0.6rem 0 0;
  background: var(--paper);
}

.corner-line {
  margin: 0 0 0.35rem;
  font-size: 1.15625rem;
  line-height: 1.4;
  color: var(--ink);
}

.corner-caption { color: var(--soft); }

.corner-caption[hidden] { display: none; }

.view-toggle {
  margin: 0;
  font-size: 1.15625rem;
  line-height: 1.4;
}

.view-toggle .vt-sep { color: var(--grey-2); }

.view-toggle button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--grey);
  cursor: pointer;
}

.view-toggle button:hover,
.view-toggle button:focus-visible { font-style: italic; }

/* bold is the second permitted weight: it marks the chosen view */
.view-toggle button.is-active {
  color: var(--ink);
  font-weight: 700;
  cursor: default;
}

/* ---------- gallery view: one frame at a time, a quiet warm room ---------- */

.view-gallery .iview { display: none; }

.view-index .gallery { display: none; }

.gallery {
  position: relative;
  height: 100vh;
  height: 100svh;
}

/* about 3.5% breathes above and below; the photo takes the rest and sits
   centered on the right, keeping margin room for close and next */
.g-stage {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 3.5svh 3.4rem;
}

/* the description frame alone stays centered in the middle */
.g-frame.g-desc { margin-inline: auto; }

.g-frame {
  display: none;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.g-frame.is-on { display: flex; }

.g-frame picture {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.g-frame img {
  max-width: 100%;
  max-height: 93svh;
  width: auto;
  height: auto;
  background: var(--ghost);
}

.g-frame--film { width: 100%; }

.g-frame--film video {
  width: 100%;
  max-width: calc(93svh * 1.7778);
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--ghost);
  margin-inline: auto;
}

.g-desc {
  max-width: 34em;
  text-align: justify;
}

.g-frame.g-desc.is-on { display: block; }

.g-desc .statement {
  color: var(--ink);
  margin-bottom: 1.1rem;
}

/* worded controls hug the current photo; JS measures the frame and moves
   them as the aspect ratio changes */
.g-prev,
.g-next,
.g-close {
  position: fixed;
  z-index: 7;
  background: none;
  border: 0;
  padding: 0.4rem 0.5rem;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--grey);
  cursor: pointer;
}

.g-prev:hover, .g-prev:focus-visible,
.g-next:hover, .g-next:focus-visible,
.g-close:hover, .g-close:focus-visible { font-style: italic; }

.g-prev,
.g-next {
  top: 50%;
  transform: translateY(-50%);
}

.g-prev { left: 0.4rem; }

.g-next { right: 0.4rem; }

.g-close {
  top: 3.5svh;
  right: 0.4rem;
}

/* ---------- index view: airy uncropped grids on the ground ---------- */

.iview { padding: 4.6rem 0 3.5svh; }

.iview .gal {
  position: relative;
  display: block;
  min-width: 0;
}

.iview .gal img {
  width: 100%;
  height: auto;
  background: var(--ghost);
}

/* the one sanctioned frame: a bold black line appears around the photo on
   hover, always inside the margins, never over a photo; opacity only */
.iview .gal::after {
  content: "";
  position: absolute;
  inset: -14px;
  border: 3px solid var(--black);
  opacity: 0;
  transition: opacity var(--settle) ease;
  pointer-events: none;
}

@media (hover: hover) {
  .iview .gal:hover::after { opacity: 1; }
}

.iview .gal:focus-visible { outline: none; }

.iview .gal:focus-visible::after { opacity: 1; }

/* Studio Diaries: rows share a height, widths follow each aspect ratio */

.sgrid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.8rem, 2.6vw, 3rem);
}

/* the last row grows to fill the width, so the grid always closes even;
   scale may change, aspect never does */
.sgrid .gal {
  flex-grow: calc(var(--ar, 1) * 100);
  flex-basis: calc(var(--ar, 1) * clamp(16rem, 24vw, 22rem));
}

/* Irish Landscapes: uniform aspects; flex rows of three whose last row
   widens to fill, keeping the grid even top and bottom */

.igrid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.8rem, 2.6vw, 3rem);
}

.igrid .gal {
  flex: 1 1 calc((100% - 2 * clamp(1.8rem, 2.6vw, 3rem)) / 3);
}

/* On My Way Home: three diptychs per row; the gaps are wide enough that the
   hover frame's lines always land in the margins, never on a canvas */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 2.2vw, 2.6rem);
}

/* Fragments: the three films in one row, centered region of the page */

.iview--films {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - 11.1rem);
}

.fgrid-note {
  margin: 0 0 1.4rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--grey);
}

.fgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 2vw, 2.2rem);
  align-items: center;
}

.fgrid figure { margin: 0; }

.fgrid video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--ghost);
}

/* the grids and their descriptions sit on the right side of the page in
   capped reading columns (the album model), clear of the corner rail */

.iview .sgrid,
.iview .igrid,
.iview .grid-3,
.iview .fgrid,
.iview .fgrid-note,
.iview .iview-desc {
  max-width: min(66rem, calc(100% - var(--rail)));
  margin-left: auto;
}

.iview .grid-3,
body[data-project="on-my-way-home"] .iview .iview-desc {
  max-width: min(72rem, calc(100% - var(--rail)));
}

.iview .fgrid,
.iview .fgrid-note,
body[data-project="fragments"] .iview .iview-desc {
  max-width: min(78rem, calc(100% - var(--rail)));
}

/* the description sits at the bottom, under the grid, as wide as the grid */

.iview-desc {
  margin-top: clamp(2.2rem, 5vh, 3.4rem);
  text-align: justify;
}

.statement {
  font-size: 1.16rem;
  line-height: 1.5;
  color: var(--soft);
  margin: 0 0 1rem;
  text-align: justify;
}

/* ---------- contact ---------- */

.contact {
  padding: 14vh var(--gutter) 8vh;
}

/* the text block centers against the portrait and reads justified;
   the contact lines themselves stay flush left */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 30em) minmax(0, 1fr);
  column-gap: 8vw;
  max-width: 1400px;
  margin-inline: auto;
  align-items: center;
}

.contact-text { text-align: justify; }

.contact-text .bio {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--ink);
  margin: 0 0 1.4rem;
}

.contact-lines {
  text-align: left;
  margin-top: 3.2rem;
  display: grid;
  grid-template-columns: 7rem max-content;
  row-gap: 0.55rem;
  align-items: baseline;
}

.c-label {
  font-size: 0.8125rem;
  color: var(--label);
}

.contact-lines a {
  color: var(--grey);
}

.contact-lines a:hover,
.contact-lines a:focus-visible { font-style: italic; }

.contact-fig { margin: 0; }

.contact-fig img {
  width: 100%;
  height: auto;
  background: var(--ghost);
}

/* ---------- middle widths ---------- */

@media (max-width: 1100px) {
  .igrid .gal {
    flex-basis: calc((100% - clamp(1.8rem, 2.6vw, 3rem)) / 2);
  }
}

/* ---------- small screens ---------- */

@media (max-width: 760px) {
  :root { --gutter: 6vw; }

  .site-head { padding-top: 1.4rem; }

  .site-head nav a { margin-left: 1.6rem; }

  /* touch and no-hover devices: titles simply navigate, no picture behind */
  .work-stage { display: none; }

  .pmain { padding-bottom: 6rem; }

  .corner {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    padding: 0.7rem var(--gutter) 1rem;
  }

  .corner-line { margin-bottom: 0.4rem; }

  /* the bottom bar needs room; the 3.5% ideal yields to legibility here */
  .g-stage { padding: 3.2rem 1.4rem 9rem; }

  .g-frame img { max-height: calc(100svh - 13rem); }

  .g-frame--film video { max-width: 100%; }

  .iview { padding-top: 4rem; }

  .sgrid { gap: clamp(1.2rem, 4vw, 1.8rem); }

  .sgrid .gal { flex-basis: calc(var(--ar, 1) * 12rem); }

  .igrid .gal { flex-basis: 100%; }

  /* small screens: the grids take the full width again */
  .iview .sgrid,
  .iview .igrid,
  .iview .grid-3,
  .iview .fgrid,
  .iview .fgrid-note,
  .iview .iview-desc {
    max-width: none;
    margin-left: 0;
  }

  .grid-3 { grid-template-columns: 1fr; }

  .fgrid { grid-template-columns: 1fr; }

  .iview--films { min-height: 0; }

  .contact { padding-top: 10vh; }

  .contact-grid {
    grid-template-columns: 1fr;
    row-gap: 4.5rem;
  }

  .contact-fig { order: 2; }
}

/* ---------- reduced motion: everything is instant ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}