/* Ognjan Dzevrnja Art — v2
   Photo boards retain measured proportions. Flowing text and responsive project grids
   keep copy readable independently of the image compositions. */

@font-face {
  font-family: Montserrat;
  src: url(../assets/fonts/Montserrat.woff2) format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Cardo;
  src: url(../assets/fonts/Cardo-Regular.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #f1f2f2;          /* never white */
  --ink: #2a2b2b;
  --ink-muted: #2c2c2e;   /* eyebrow + pin */
  --gold-heading: #a47139;
  --gold-accent: #aa723f; /* genuinely a different gold from the heading */
  --contact-ink: #4f5050;
  --contact-head: #3a3a3a;

  /* Montserrat is wght 400. The PDF's subsets are all named "Montserrat-Thin" and report
     usWeightClass 100, but the outlines measure Regular — Illustrator stamps the variable
     font's default-instance name onto every subset. */
  --mont-weight: 400;
  --track-display: 0.034em;
  --track-spaced: 0.330em;   /* ABOUT / CONTACT, with the literal spaces removed */
  --lh: 1.2;              /* universal */
  --lh-title: 1.057;      /* project titles only: 58px on a 55px face */
  /* PDF text boxes include different ascender space than browser line boxes.
     Each font needs its own optical offset; a shared negative shift put every
     extracted run visibly above the artwork in both formats. */
  --txt-shift-mont: 0.10em;
  --txt-shift-cardo: 0.28em;
  --maxw: 1200px;
  --page-gutter: 20px;
  --section-gap: clamp(5rem, 9vw, 8rem);
  --copy-gap: 2rem;
  --heading-content-gap: 2.5rem;
  --project-title-gap: clamp(1.25rem, 2vw, 1.75rem);
  --project-location-gap: clamp(1.5rem, 2.5vw, 2rem);
  --project-palette-gap: clamp(1.75rem, 3vw, 2.5rem);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Cardo, Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
main {
  width: min(calc(100% - 2 * var(--page-gutter)), var(--maxw));
  margin-inline: auto;
  overflow: clip;
  container: site / inline-size;
}

/* ---- board framework ---------------------------------------------------- */
.board {
  position: relative;
  width: 100%;
  container-type: inline-size;   /* makes 1cqw = 1% of board width, so PDF sizes map 1:1 */
  overflow: hidden;              /* photos bleed off the edges by design */
  background: var(--bg);
}
.board > * { position: absolute; }
.board.m { display: none; }

/* All sections share main's 1200px content width and its 20px viewport gutters. */
main > section { width: 100%; margin-inline: 0; }

/* The placement box carries the animation... */
.tile {
  display: block;
  overflow: hidden;
  /* independent vars so assemble (--tx/--ty/--s/--rot) and parallax (--py) never fight */
  transform: translate3d(var(--tx, 0px), calc(var(--ty, 0px) + var(--py, 0px)), 0)
             scale(var(--s, 1)) rotate(var(--rot, 0deg));
  backface-visibility: hidden;
}
/* ...the image inside carries only what the design baked in: its crop and, for the gold
   hero texture, a 90deg rotation. Default state fills the box exactly. */
.tile img {
  position: absolute;
  max-width: none;   /* a rotated img is deliberately wider than its window */
  display: block;
  /* PDF has no notion of "cover": `Do` maps the whole image onto its rect, so a source
     whose aspect differs from its box is stretched. Almost every photo is placed at ~its
     native aspect, but the gold hero texture is a 2.0 source squashed into 1.775 — a
     deliberate 12% distortion. Cropping instead would show the wrong part of it. */
  object-fit: fill;
}
/* ...except where we deliberately swapped in a master framed differently from the board:
   Mudra's hero and apt-4's raw photos. Those get cropped back, not stretched. */
.tile img[data-fit] { object-fit: cover; }

.txt {
  margin: 0;
  white-space: nowrap;
  line-height: 1;
  transform-origin: left top;
}
/* letter-spacing is set per run from the measured source — not a token */
.txt.mont {
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: var(--mont-weight);
  transform: translateY(var(--txt-shift-mont));
}
.txt.cardo {
  font-family: Cardo, Georgia, serif;
  transform: translateY(var(--txt-shift-cardo));
}

/* recolourable vector marks */
.mono, .pin {
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;    mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}
.mono { -webkit-mask-image: url(../assets/monogram.svg); mask-image: url(../assets/monogram.svg); }
.pin  { -webkit-mask-image: url(../assets/pin.svg);      mask-image: url(../assets/pin.svg); }

.dot { border-radius: 50%; aspect-ratio: 1; }

/* ---- project column ------------------------------------------------------
   A flowed, centred stack. The source boards centre this block and let it grow
   outward — that is why 1-line and 2-line subtitles sit at different absolute y. */
.col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(-50%);   /* --top is the stack's centre, not its top */
  padding-inline: 0 clamp(1.5rem, 4cqw, 3rem);
}
.col__title {
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: var(--mont-weight);
  font-size: clamp(1.5rem, var(--title), 2.625rem);
  line-height: var(--lh-title);
  letter-spacing: var(--track-display);
  color: var(--ink);
}
.col__sub {
  margin: var(--project-title-gap) 0 0;
  font-size: clamp(1rem, var(--sub), 1.25rem);
  line-height: var(--lh);
  letter-spacing: 0.042em;
  color: var(--ink);
  text-wrap: balance;
}
.col__loc {
  margin: var(--project-location-gap) 0 0;
  display: flex;
  align-items: center;
  gap: 0.42em;
  font-size: clamp(.875rem, var(--loc), 1rem);
  line-height: var(--lh);
  letter-spacing: 0.043em;
  color: var(--ink);
}
.col__loc .pin {
  position: static;
  color: var(--ink-muted);
  width: 0.7em;
  height: 1em;
  flex: none;
}
.col__dots {
  margin: var(--project-palette-gap) 0 0;
  display: flex;
  gap: calc(var(--pitch) - var(--dot));
}
.col__dots span {
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  flex: none;
}

/* ---- video ---------------------------------------------------------------- */
.board.video {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-top: var(--section-gap);
  container-type: normal;
}
.board.video > * { position: static; }
.video__wrap {
  position: relative;
  width: 100%;
  max-width: 1360px;
  aspect-ratio: 16/9;
  background: #000;
}
.video__wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(52px, 7vw, 84px); height: clamp(52px, 7vw, 84px);
  border: 0; border-radius: 50%;
  background: rgba(241, 242, 242, .82);
  backdrop-filter: blur(2px);
  cursor: pointer;
  transition: background-color .2s ease, scale .2s ease;
}
.play:hover { background: rgba(241, 242, 242, .96); }
.play:active { scale: .97; }
.play[hidden] { display: none; }
.play:disabled { cursor: wait; }
.play::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-left: 22px solid var(--ink);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  transform: translateX(3px);
}
.playing .play { display: none; }
.video__status { margin: 1rem 0 0; font-size: 1rem; line-height: 1.5; text-align: center; }
.video__status[hidden] { display: none; }

/* ---- breakpoint ----------------------------------------------------------- */
.board.project--grid {
  display: grid;
  grid-template-columns: var(--copy-width) minmax(0, 1fr);
  align-items: center;
}
.project--grid > .col {
  position: relative;
  left: auto !important; top: auto !important; width: auto !important;
  transform: none;
  min-width: 0;
  padding-block: 1.5rem;
}
.project--grid > .project__art { position: relative; }
@container site (width < 64rem) {
  .board.project--grid { grid-template-columns: minmax(0, 1fr); }
  .project--grid > .col { padding: 0 0 clamp(2rem, 5vw, 3rem); }
  .project--grid .col__sub { max-width: 38ch; }
}
@media (max-width: 767px) {
  .board.d { display: none; }
  .board.m { display: block; }
}

/* ---- motion --------------------------------------------------------------- */
/* Images remain visible until animation setup succeeds in main.js. */

@media (prefers-reduced-motion: reduce) {
  .board[data-anim] .tile {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;   /* the img keeps its own baked-in rotation */
  }
  .board .dot, .col__dots span { transform: none !important; }
}

/* ---- contact ---------------------------------------------------------------
   Contact uses the source typography and mark, but is intentionally more compact
   than the full-height PDF board so the page closes without a large empty field. */
.board.contact {
  aspect-ratio: auto !important;
  min-height: 0;
  overflow: visible;
  padding: 0 0 clamp(3rem, 5vw, 5rem);
  margin-top: var(--section-gap);
}
.board.contact > * { position: static; }
.contact__in {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.contact__head {
  margin: 0 0 clamp(2rem, 3.5vw, 3rem);
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: var(--mont-weight);
  line-height: 1;
  letter-spacing: var(--track-spaced);   /* the source types it with literal spaces */
  text-indent: var(--track-spaced);      /* trailing space would push it off-centre */
  font-size: clamp(1.5rem, 3.5vw, 2.625rem);
  color: var(--contact-head);
}
.contact__details {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact__line { margin: 0; font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.5; color: var(--contact-ink); }
.contact__line a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; overflow-wrap: anywhere; color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.contact__line a:hover, .contact__line a:focus-visible { border-bottom-color: currentColor; }
.contact__logo {
  display: block;
  height: auto;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  flex: none;
  filter: invert(31%);
  width: clamp(3.5rem, 8vw, 6rem);
}
@media (max-width: 767px) {
  .board.contact { padding: 0 0 3.5rem; }
  .contact__head { margin-bottom: 2.25rem; }
  .contact__logo { margin-bottom: 2rem; }
}

/* ---- separation between projects -------------------------------------------
   Each project is its own page in the source, so the design never had to answer
   what sits between two of them. Stacked into one scroll they collide: photos
   bleed to a board's edge and land straight on the next project's. A gap gives
   each project its own field again. */
.board.pstart { margin-top: var(--section-gap); }
@media (max-width: 767px) {
  .board.pstart { margin-top: var(--section-gap); }
}

/* ---- the hero "O." draws itself on load ------------------------------------
   The mark is a filled calligraphic outline, so there is no stroke to dash along;
   an earlier conic sweep just cut a straight radial edge across it. Instead the
   hero mark is inline SVG whose fill is masked by its computed centreline. The
   ring and its nearby finishing swash draw in separate phases so their endpoints
   cannot reveal one another out of order. main.js drives it;
   the emitted HTML is already fully drawn, so no-JS and reduced-motion are safe. */
.mono--svg { background: none; -webkit-mask-image: none; mask-image: none; }
.mono--svg svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Flowing copy preserves the editorial composition without shrinking body text. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 1rem; top: 1rem; z-index: 100;
  padding: .75rem 1rem; background: var(--bg); color: var(--ink);
  transform: translateY(-200%);
  clip-path: inset(50%);
}
.skip-link:focus { transform: translateY(0); clip-path: none; }
:focus-visible { outline: 2px solid var(--gold-heading); outline-offset: 5px; }
.text-section { container-type: inline-size; }
.prose { min-width: 0; font-size: clamp(1rem, 1.35vw, 1.125rem); line-height: 1.5; letter-spacing: .02em; }
.prose p { margin: 0; max-width: 62ch; text-wrap: pretty; }
.prose p + p { margin-top: 1em; }
.intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--copy-gap); row-gap: var(--heading-content-gap);
  padding: 0;
  margin-top: var(--section-gap);
}
.intro__heading, .about__heading {
  margin: 0; font-family: Montserrat, system-ui, sans-serif;
  font-size: clamp(1.75rem, 3.54vw, 2.625rem); font-weight: var(--mont-weight);
  line-height: 1.16; letter-spacing: var(--track-display);
}
.intro__heading { grid-column: 1; grid-row: 1; }
.intro__copy { grid-column: 2; grid-row: 2; }
.intro__portrait {
  grid-column: 1; grid-row: 2; width: 100%; height: auto; align-self: start;
  aspect-ratio: 1; object-fit: cover; object-position: 50% 36%;
}
.intro__availability { margin: 1.25rem 0 0; font-size: 1rem; line-height: 1.5; color: #8d5d2d; }
.about { margin-top: var(--section-gap); padding: 0; }
.about__heading { margin-bottom: var(--heading-content-gap); letter-spacing: var(--track-spaced); }
.about__top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--copy-gap); align-items: center; }
.about__hands { width: 100%; height: auto; display: block; }
.about__bottom { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--copy-gap); margin-top: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.about__bottom > .prose { padding-top: 0; }
.about__collage { width: 100%; }
.project--flow { aspect-ratio: auto; }
.project--flow > .col {
  position: relative; left: auto !important; top: auto !important; width: 100% !important;
  transform: none; padding: 0 0 clamp(2rem, 5vw, 3rem);
}
.project--flow .col__title { font-size: clamp(1.5rem, var(--title), 2.625rem); }
.project--flow .col__sub { max-width: 38ch; }
.project--flow > .project__art { position: relative; }

/* Keep letter-spaced headings whole when text is enlarged on a narrow screen. */
@container site (width < 16rem) {
  .about__heading, .contact__head { letter-spacing: .06em; text-indent: .06em; }
}

/* Tablets keep readable prose alongside the portrait; headings remain in flow. */
@media (max-width: 1023px) {
  :root { --heading-content-gap: 2rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .intro { padding-inline: 0; }
  .intro__portrait { aspect-ratio: 3 / 4; }
  .about { padding-inline: 0; }
  .about__top { align-items: start; }
  .about__bottom { grid-template-columns: 1fr 1fr; margin-top: 2.5rem; }
  .about__bottom > .prose { padding-top: 0; }
}
@media (max-width: 767px) {
  .intro { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .intro__heading, .intro__copy, .intro__availability { margin-inline: 0; }
  .intro__heading { grid-column: 1; grid-row: 1; }
  .intro__break { display: none; }
  .intro__copy { grid-column: 1; grid-row: 2; }
  .intro__portrait { grid-column: 1; grid-row: 3; }
  .about { padding: 0; }
  .about__top, .about__bottom { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .about__bottom { margin-top: 1em; }
  .about__bottom > .prose { padding-top: 0; }
  .about__collage { margin-top: 1.5rem; }
  .prose { font-size: 1rem; }
}

/* Preview guides never affect the dimensions or spacing being inspected. */
.layout-guides__edges {
  display: none;
  position: fixed;
  inset-block: 0;
  left: 50%;
  width: min(calc(100% - 2 * var(--page-gutter)), var(--maxw));
  transform: translateX(-50%);
  box-shadow: inset 2px 0 #d52d46, inset -2px 0 #d52d46;
  z-index: 110;
  pointer-events: none;
}
[data-layout-guides] .layout-guides__edges { display: block; }
[data-layout-guides] main > section {
  position: relative;
  outline: 1px dashed #1675bb;
  outline-offset: -1px;
}
[data-layout-guides] main > section::before {
  content: attr(data-guide-label);
  position: absolute;
  top: 0; left: 0;
  z-index: 90;
  padding: 3px 5px;
  background: #eaf5ff;
  color: #135781;
  font: 10px/1.3 system-ui, sans-serif;
  letter-spacing: .04em;
  pointer-events: none;
}
.layout-guides__panel {
  position: fixed;
  left: 50%; bottom: 12px;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: 12px/1.4 system-ui, sans-serif;
  text-align: center;
}
.layout-guides__width { color: #b31e35; }
.layout-guides__legend { color: #135781; }
.layout-guides__panel button {
  padding: 6px 10px;
  border: 1px solid #bbb;
  border-radius: 3px;
  background: #f1f2f2;
  color: #222;
  font: inherit;
  cursor: pointer;
}
@media print {
  .layout-guides__edges, .layout-guides__panel { display: none !important; }
  [data-layout-guides] main > section { outline: none; }
  [data-layout-guides] main > section::before { display: none; }
}

/* The hero preserves its artwork while readable copy is independent of PDF text runs. */
.hero__name, .hero__eyebrow, .hero__tagline { margin: 0; text-align: center; }
.hero__name { font-family: Montserrat, system-ui, sans-serif; font-weight: 400; letter-spacing: .03em; line-height: 1.17; font-size: clamp(1.625rem, 3.54cqw, 2.75rem); }
.hero__eyebrow { font-family: Montserrat, system-ui, sans-serif; font-size: clamp(.75rem, 1.98cqw, 1.5rem); letter-spacing: .32em; text-indent: .32em; }
.hero__tagline { font-size: clamp(1rem, 1.875cqw, 1.4375rem); line-height: 1.35; letter-spacing: .035em; text-wrap: balance; }
.hero--desktop .hero__name { left: 30%; top: 11%; width: 40%; }
.hero--desktop .hero__eyebrow { left: 32%; top: 32%; width: 36%; }
.hero--desktop .hero__tagline { left: 34%; top: 82%; width: 34%; }
.hero--desktop > .hero__art { position: relative; }
.hero__actions {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem;
  margin-top: calc(1.5rem + 20px); z-index: 50;
}
.hero__button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; max-width: 100%; padding: .75rem 1rem;
  border: 1px solid var(--ink); color: var(--ink); background: var(--bg);
  font: 400 .8125rem/1.4 Montserrat, system-ui, sans-serif;
  text-align: center; text-decoration: none; overflow-wrap: anywhere;
  transition: background-color .2s ease, color .2s ease;
}
.hero__button--primary { background: var(--ink); color: var(--bg); }
.hero__button:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.hero__button:hover { background: var(--ink); color: var(--bg); }
.hero__button--primary:hover { background: var(--bg); color: var(--ink); }
@container site (width >= 64rem) {
  .hero--desktop { padding-bottom: 20px; }
  .hero--desktop > .hero__actions { position: absolute; left: 32%; bottom: 0; width: 38%; margin-top: 0; }
}
.project, #contact { scroll-margin-top: 20px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.hero--mobile { padding-top: 2rem; }
.hero--mobile > * { position: relative; }
.hero--mobile .hero__name { font-size: clamp(1.5rem, 6.3cqw, 2.5rem); }
.hero--mobile .hero__eyebrow { font-size: .75rem; margin-top: 1.25rem; }
.hero__stage { position: relative; margin-top: 2rem; }
.hero--mobile .hero__tagline {
  position: absolute;
  left: 47.25%; top: 55%; width: 52.5%;
  font-size: clamp(1rem, 4.074cqw, 1.5rem);
  line-height: 1.3; letter-spacing: .02em;
  text-align: left; z-index: 50;
}
.project-gallery { margin-top: 1.5rem; }
.col__dots { gap: .375rem; }
.col__dots span { width: clamp(24px, var(--dot), 38px); height: auto; aspect-ratio: 1; }
.col__loc { flex-wrap: wrap; justify-content: center; }
.contact__details, .contact__line { max-width: 100%; }
.contact__line a { display: inline-block; padding-block: .625rem; }
@container site (width < 42rem) {
  .board.hero--desktop { display: none; }
  .board.hero--mobile { display: block; }
}
@container site (width < 16rem) {
  .hero__name, .intro__heading { overflow-wrap: anywhere; }
}
@container site (width < 19rem) {
  .hero--mobile .hero__tagline {
    position: relative; top: auto; left: auto; width: 100%; margin-top: 1.5rem;
    font-size: 1rem; text-align: center;
  }
}

/* One work component for the CMS; existing compositions and new galleries share a grid. */
.project { margin-top: var(--section-gap); }
.project .board.pstart { margin-top: 0; }
.editorial__lead { display: grid; grid-template-columns: 34% minmax(0, 1fr); align-items: center; }
.editorial__lead > .col { position: relative; transform: none; min-width: 0; --dot: 32px; }
.editorial__lead .col__title { font-size: clamp(1.5rem, 2.8vw, 2.125rem); text-transform: uppercase; }
.editorial__lead .col__sub { font-size: 1.125rem; max-width: 34ch; }
.editorial__lead .col__loc { font-size: .875rem; }
.editorial__photo { margin: 0; min-width: 0; }
.editorial__photo img { display: block; width: 100%; height: auto; }
.editorial__gallery { columns: 2; column-gap: 24px; margin-top: 24px; }
.editorial__gallery .editorial__photo { break-inside: avoid; margin-bottom: 24px; }
@container site (width < 64rem) {
  .editorial__lead { grid-template-columns: minmax(0, 1fr); }
  .editorial__lead > .col { padding: 0 0 clamp(2rem, 5vw, 3rem); }
}
@media (max-width: 767px) {
  .editorial__gallery { columns: 1; }
}