/*
  OBRAZA — styles.css
  ---------------------------------------------------------------
  One stylesheet for every page: index.html (home = hero only), work.html, about.html,
  contact.html, privacy.html, terms.html, 404.html.

  HOW TO SWAP THINGS:
  • Logo: replace the hero <span class="wordmark__text" data-split> in index.html with
    <img class="wordmark__logo" src="/assets/logo.svg" alt="Obraza">. .wordmark__logo is styled below.
    Keep view-transition-name: wordmark on whatever replaces it so the page-to-page morph still works.
  • Formspree ID: contact.html → form action="https://formspree.io/f/xppqrapb".
  • Films: work.html → each <video> src + poster.

  Palette is black and white only: --paper, --ink, --rule, --muted. Nothing else.

  Sections:
     1. Tokens                 6. Page header + sections    11. Legal + 404 pages
     2. Base                   7. Work + albums             12. Scroll reveals
     3. Intro sequence         8. About                     13. Media queries
     4. Page transitions       9. Contact
     5. Home hero             10. Footer
*/

/* =========================================================
   1. Tokens
   Archivo (variable wght 400–800, wdth 100–115) and IBM Plex Mono 400/500,
   from Google Fonts, self-hosted (latin subset) — no third-party requests.
   ========================================================= */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 115%;
  font-display: swap;
  src: url("assets/fonts/archivo-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/plexmono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/plexmono-500-latin.woff2") format("woff2");
}

:root {
  /* colour */
  --paper: #FFFFFF;
  --ink: #0B0B0B;
  --rule: #E6E6E6;
  --muted: #6F6F6F;

  /* type */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --vt-out: 200ms;          /* page transition: old page leaves */
  --vt-in: 360ms;           /* page transition: new page arrives (total length) */
  --fb-out: 180ms;          /* fallback transition: fade out before navigating */
  --fb-in: 240ms;           /* fallback transition: fade in on arrival */
  --glide: 850ms;           /* intro: wordmark glides from centre into the hero */

  /* layout */
  --max: 960px;
  --gutter: 20px;
  --edge: 22px;             /* distance of corner rows / headers from the viewport edge */
  --pad: clamp(100px, 12vw, 140px);
}

/* =========================================================
   2. Base
   ========================================================= */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

::selection { background: var(--ink); color: var(--paper); }

.mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wrap {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--max);
  margin: 0 auto;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* Visually hidden, still read by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.btn {
  display: inline-block;
  padding: 16px 26px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { background: var(--paper); color: var(--ink); }
/* Secondary: inverse of the primary, inverts back on hover */
.btn--ghost { background: var(--paper); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn:disabled { opacity: 0.5; cursor: progress; }

/* Inline outline icons (envelope, Instagram): 16px, follow the text colour */
.icon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   3. Intro sequence (home only, first page of a visit)
   Active only while <html> has .intro (set inline in index.html's <head>), so without JS
   or with reduced motion nothing here applies and the hero is simply there.
   script.js §1 drives it:  .intro             → hero hidden, page white
                            .intro.is-playing  → small centred wordmark rises in, mono line builds
                            .intro.is-released → scrolling back on (wordmark re-measured for the new width)
                            .intro.is-landing  → line fades, wordmark glides into place, rest staggers in
   Timings for the word build live in script.js (INTRO.steps).
   ========================================================= */

.intro body { overflow: hidden; }                  /* no scrolling / scrollbar while it plays */
.intro.is-released body { overflow-y: auto; }      /* released first at hand-off, then re-measured */

/* Wordmark: hidden until script.js has shrunk + centred it (inline transform), then the
   letters rise through their masks. At landing the transform is released → it glides home. */
.intro:not(.is-playing) .wordmark { visibility: hidden; }
.intro .wm-char { transform: translateY(110%); }
.intro.is-playing .wm-char {
  transform: none;
  transition: transform 0.7s var(--ease);
  transition-delay: calc(250ms + var(--i) * 50ms);   /* 250ms of pure white first */
}
.intro.is-landing .wordmark__text {
  transition: transform var(--glide) var(--ease) 100ms;
}

/* Everything else in the hero waits, then staggers in as the wordmark travels */
.intro .hero-fade { opacity: 0; transform: translateY(16px); }
.intro .hero-soft { opacity: 0; }                  /* bottom contact row: opacity only */
.intro .hero__body { border-top-color: transparent; }
.intro.is-landing .hero-fade {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  transition-delay: calc(var(--d) * 85ms);           /* last of 7 lands at ~960ms, as the glide ends */
}
.intro.is-landing .hero-soft {
  opacity: 1;
  transition: opacity 0.45s var(--ease);
  transition-delay: calc(var(--d) * 85ms);           /* last of 7 lands at ~960ms, as the glide ends */
}
.intro.is-landing .hero__body {
  border-top-color: var(--rule);
  transition: border-color 0.45s var(--ease) 85ms;
}

/* The word-building line under the small wordmark. The two hidden sizers give the box the
   width (and, on narrow phones, the height) of the longest step, so the text grows to the
   right from a fixed left edge and nothing re-centres or shifts between steps. */
.intro-line { display: none; }
.intro .intro-line {
  display: grid;
  position: fixed;
  left: 50%;
  top: 60%;                                        /* replaced by script.js with the real spot */
  z-index: 10;
  width: max-content;
  max-width: calc(100vw - var(--gutter) * 2);
  transform: translateX(-50%);
  color: var(--muted);
  pointer-events: none;
}
.intro-line > * { grid-area: 1 / 1; }
.intro-line__sizer { visibility: hidden; }
.intro.is-landing .intro-line { opacity: 0; transition: opacity 0.2s linear; }

/* =========================================================
   4. Page transitions
   Native cross-document View Transitions (Chrome, Edge, Safari): the old page fades
   out rising 12px, the new one fades in from 12px below, and the OBRAZA. wordmark
   morphs between the home hero and the subpage header (shared view-transition-name).
   Browsers without it get the .vt-fallback fade (class set in each page's <head>;
   click handling in script.js §4). Reduced motion: none of this runs.
   ========================================================= */

@view-transition { navigation: auto; }

.wordmark__text,
.site-header__home { view-transition-name: wordmark; }

::view-transition-old(root) { animation: vt-out var(--vt-out) var(--ease) both; }
::view-transition-new(root) { animation: vt-in var(--vt-in) var(--ease) both; }
::view-transition-group(wordmark) {
  animation-duration: var(--vt-in);
  animation-timing-function: var(--ease);
}

@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

/* Fallback: fade in on arrival; fade out (script.js adds .is-leaving) before navigating */
.vt-fallback body { animation: fb-in var(--fb-in) var(--ease) backwards; }
.vt-fallback.is-leaving body { opacity: 0; transition: opacity var(--fb-out) var(--ease); }
@keyframes fb-in { from { opacity: 0; } }

/* =========================================================
   5. Home hero (index.html — the whole page)
   Four corners frame the centred wordmark: labels on top, email + Instagram below.
   ========================================================= */

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

.hero__top,
.hero__bottom { flex: none; }
.hero__top { padding-top: var(--edge); }
.hero__bottom { padding-bottom: var(--edge); }

.hero__top .wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  color: var(--muted);
}
.hero__label { min-width: 0; }      /* left label wraps instead of colliding */
.hero__label--end { flex: none; white-space: nowrap; text-align: right; }

/* One row; if both don't fit, the handle drops under the email, still left-aligned */
.hero__bottom .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px 16px;
}
.corner-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.corner-link:hover { color: var(--ink); }

.hero__inner {
  margin-block: auto;               /* centres the wordmark group between the corner rows */
  padding-block: 24px;
}

.wordmark {
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 115%;
  font-variation-settings: "wdth" 115;
  font-size: clamp(3rem, 17vw, 10.75rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  margin-left: -0.04em;
  white-space: nowrap;
}
.wordmark__text { display: inline-block; }
.wordmark__logo { width: 100%; height: auto; }   /* used once the logo SVG replaces the text */

/* Letter mask spans (created by script.js from [data-split]) */
.wm-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.04em;
  margin-bottom: -0.04em;
}
.wm-char { display: inline-block; will-change: transform; }

.hero__body {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.hero__tag {
  font-size: clamp(1.75rem, 6.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.hero__sub {
  margin-top: 12px;
  max-width: 30ch;
  color: var(--muted);
  font-size: 17px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* =========================================================
   6. Page header (subpages + legal) and shared section structure
   ========================================================= */

.site-header { padding-top: var(--edge); }
.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.site-header__home {
  display: inline-block;            /* tight box for the wordmark morph */
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 115%;
  font-variation-settings: "wdth" 115;
  font-size: 20px;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.site-nav { display: flex; gap: 20px; }
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-nav__current { color: var(--muted); }

/* The header already draws a rule, so the first section under it doesn't. */
.page-main > .section:first-child .wrap { border-top: 0; }

.section .wrap {
  border-top: 1px solid var(--rule);
  padding-top: var(--pad);
  padding-bottom: var(--pad);
}

.section__head { margin-bottom: 48px; }

.eyebrow {
  position: relative;
  display: flex;
  gap: 14px;
  padding-top: 14px;                /* 2px mark + 12px gap above the label */
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);                /* the word leads… */
}
.eyebrow::before {                  /* short mark that anchors each section */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--ink);
}
.eyebrow__idx { color: var(--muted); }   /* …the number recedes */

.h2 {
  margin-top: 18px;
  font-size: clamp(2.5rem, 10vw, 4.75rem);
  font-weight: 700;
  font-stretch: 108%;
  font-variation-settings: "wdth" 108;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.caption {
  margin-top: 12px;
  color: var(--muted);
}

/* =========================================================
   7. Work: album index (work.html) and album pages (work/*.html)
   ========================================================= */

/* Index: grid of album covers with a plain title under each */
.albums {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px 20px;
}
.album__link { display: block; text-decoration: none; }
.album__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--rule);
}
.album__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
@media (hover: hover) {
  .album__link:hover .album__media img { transform: scale(1.03); }
}
.album__title {
  display: block;
  margin-top: 12px;
  font-size: 17px;
  color: var(--ink);
}

/* Album page */
.back-link {
  display: inline-block;
  margin-bottom: 32px;
  color: var(--muted);
  text-decoration: none;
}
.back-link:hover { color: var(--ink); }
.album-head .h2 { margin-top: 0; }
.album-lede { margin-top: 0; margin-bottom: 56px; }   /* caption sits between the title and the films */

.album-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 56px;
}
.album-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;              /* landscape crops on every screen size */
  object-fit: cover;
  background: var(--rule);
}

.media {
  width: 100%;
  height: auto;                     /* lets the width/height attributes reserve space without fixing height */
  aspect-ratio: var(--ar);          /* each <video> sets --ar to its footage's real ratio, e.g. 4 / 3 */
  object-fit: cover;
  background: var(--ink);
}

.film + .film { margin-top: 56px; }   /* two big films stacked */

.photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 56px;
}
.photos img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--rule);
}

.lede {
  margin-top: 40px;
  max-width: 40em;
  font-size: 19px;
  line-height: 1.5;
}

/* =========================================================
   8. About (about.html): About, What we do, How it works
   ========================================================= */

.statement {
  font-size: clamp(1.4rem, 5.4vw, 2.25rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.02em;
}

/* What we do + How it works blocks */
.cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 48px;
}
.col {
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}
.col p { margin-top: 10px; color: var(--muted); max-width: 34ch; }

.steps { margin-bottom: 0; }
.step__n { display: block; margin-bottom: 18px; color: var(--ink); }

/* =========================================================
   9. Contact (contact.html)
   ========================================================= */

.form { display: grid; gap: 36px; max-width: 640px; }
.field { display: grid; gap: 8px; }
.label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.input {
  width: 100%;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  -webkit-appearance: none;
  appearance: none;
}
/* Focus state for fields is the thicker underline (shown for mouse and keyboard). */
.input:focus { outline: none; border-bottom-width: 2px; padding-bottom: 11px; }
.input:focus-visible { outline: none; }
textarea.input { resize: vertical; min-height: 112px; line-height: 1.45; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 4px;
}
.form__status { color: var(--ink); text-transform: none; letter-spacing: 0.02em; font-size: 13px; }
.form__status:empty { display: none; }

.form__note { font-size: 14px; color: var(--muted); }
.form__note a { color: var(--ink); text-underline-offset: 3px; }

.direct {
  display: grid;
  gap: 6px;
  margin-top: 64px;
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.direct a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  user-select: text;
}
.direct__text {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease);
}
.direct a:hover .direct__text { background-size: 100% 1px; }

/* =========================================================
   10. Footer (every page except 404)
   ========================================================= */

.footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 12px;
  border-top: 1px solid var(--rule);
}
.footer__legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-bottom: 32px;
  color: var(--muted);
}
.footer__links { display: flex; gap: 20px; }
.footer__links a { text-decoration: none; }
.footer__links a:hover,
.footer__links a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   11. Legal + 404 pages
   privacy.html / terms.html use .site-header; 404.html uses the smaller .page-top.
   ========================================================= */

.page-top { padding-top: var(--edge); }
.page-top .wrap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.page-top a { text-decoration: none; }
.page-top__home {
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 115%;
  font-variation-settings: "wdth" 115;
  font-size: 20px;
  letter-spacing: -0.04em;
  text-transform: none;
}

.legal .wrap {
  padding-top: var(--pad);
  padding-bottom: var(--pad);
}
.legal__title { margin-top: 18px; }
.legal__date { margin-top: 20px; color: var(--muted); }
.legal__body { max-width: 680px; margin-top: 56px; }
.legal__body h2 {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body p,
.legal__body ul { margin-top: 14px; }
.legal__body ul { padding-left: 1.1em; list-style: square; }
.legal__body li + li { margin-top: 6px; }
.legal__body a { text-underline-offset: 3px; overflow-wrap: anywhere; }

/* =========================================================
   12. Scroll reveals (JS only — hidden states need .js on <html>)
   ========================================================= */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Grids reveal left to right within each row (script.js sets --r = position in its row) */
.js [data-stagger] > .reveal { transition-delay: calc(var(--r, 0) * 80ms); }

/* =========================================================
   13. Media queries
   Phones ≤560px · tablet/desktop ≥768px · wide ≥1000px · reduced motion
   ========================================================= */

/* ---------- Phones: tighter rhythm, stacked home buttons (text stays left-aligned, as on desktop) ---------- */
@media (max-width: 560px) {
  :root { --pad: 44px; }

  /* Home: exactly one viewport tall; buttons stacked, full width, big tap targets */
  .hero { height: 100svh; min-height: max-content; }
  .hero__actions { flex-direction: column; gap: 10px; }
  .hero__actions .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
  }

  /* Shared section rhythm */
  .section__head { margin-bottom: 24px; }
  .h2 { margin-top: 14px; }

  /* Work */
  .album-grid { margin-top: 40px; }     /* last label → photos */
  .album-lede { margin-bottom: 40px; }   /* caption → first film */
  .film + .film { margin-top: 36px; }   /* label → next film */
  .photos { margin-top: 32px; gap: 8px; }
  .lede { margin-top: 28px; }

  /* About */
  .cols { margin-bottom: 32px; }
  .col { padding: 22px 0; }

  /* Contact */
  .direct { margin-top: 40px; }

}

/* ---------- Tablet / desktop ---------- */
@media (min-width: 768px) {
  :root { --gutter: 32px; --edge: 32px; }
  .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }

  /* About page reads as one page: ~60% of the usual section spacing */
  .page-about { --pad: clamp(60px, 7.2vw, 84px); }

  /* Work: 3 covers per row; album photos 4 per row */
  .albums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; }
  .album-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
}

/* ---------- Wide: home buttons sit to the right of the tagline ---------- */
@media (min-width: 1000px) {
  .hero__body {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "tag actions" "sub actions";
    align-items: end;
    column-gap: 40px;
  }
  .hero__tag { grid-area: tag; }
  .hero__sub { grid-area: sub; }
  .hero__actions { grid-area: actions; margin-top: 0; flex-wrap: nowrap; }
}

/* ---------- Reduced motion: no transitions, everything visible, instant navigation ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .corner-link, .direct__text, .album__media img { transition: none; }
}