/* Bukas Studio — site
 *
 * Aperture, on a work-first portfolio structure. No JavaScript anywhere on this site.
 * Acid discipline: exactly one `color: var(--acid)` declaration exists in this
 * file, in `.on-ink .mark`. check.sh enforces the count. Acid on paper fails
 * contrast, so everywhere else acid is a fill, a rule or a border.
 */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure { max-width: var(--measure); }

/* ---- chrome ---------------------------------------------------------- */

.chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--rule);
}

.wordmark img { display: block; height: 2rem; width: auto; } /* horizontal lockup, DESIGN.md */

.chrome nav {
  display: flex;
  gap: var(--space-md);
  font-size: var(--text-sm);
}

.chrome nav a {
  text-decoration: none;
  color: var(--ink-2);
  padding-block: var(--space-xs);
  border-bottom: 2px solid transparent;
}

.chrome nav a:hover,
.chrome nav a:focus-visible { color: var(--ink); border-bottom-color: var(--acid); }

.chrome nav a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }

.foot {
  border-top: 2px solid var(--acid);
  margin-top: var(--space-3xl);
  padding-block: var(--space-xl) var(--space-2xl);
  font-size: var(--text-sm);
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
  justify-content: space-between;
}

.foot a { color: var(--ink); }

/* ---- ink sections ---------------------------------------------------- */

.on-ink {
  background: var(--ink);
  color: var(--ink-on-dk-2);
}

.on-ink h1, .on-ink h2, .on-ink h3 { color: var(--ink-on-dk); }

.on-ink a { color: var(--ink-on-dk); }

/* The only acid text on the site. Valid on ink only. */
.on-ink .mark { color: var(--acid); }

/* ---- focus ----------------------------------------------------------- */

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

.on-ink :focus-visible { outline-color: var(--acid); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- reveals --------------------------------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(1.25rem); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise {
      animation-name: rise;
      animation-duration: auto;
      animation-timing-function: var(--ease-out);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

/* ---- work grid ------------------------------------------------------- */

.work {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl) var(--space-lg);
  padding: var(--space-xl) 0 var(--space-2xl);
  list-style: none;
  margin: 0;
}

@media (min-width: 56rem) {
  .work { grid-template-columns: repeat(2, 1fr); }

  /* Three projects in a 2-up grid leaves an orphan on row 2. The newest work
     spans the full width instead, so the row reads as emphasis and not as a
     gap. At four projects, delete this rule. */
  .work > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.cell { display: block; text-decoration: none; }

.frame {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--paper-2);
  border-radius: var(--radius);
}

.frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

.label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule);
}

.name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
}

.what { color: var(--ink-2); font-size: var(--text-sm); }

.status {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.cell:hover .label,
.cell:focus-visible .label { border-top-color: var(--acid); }

/* ---- hover preview -----------------------------------------------------
 * Three composed 16:9 frames per project: the hero <img> underneath, then
 * frame 2 on ::before, then frame 3 on ::after. Each crossfades in once and
 * holds. Nothing scrolls, so timing does not depend on cell width -- the
 * full-width third cell behaves identically to the two half-width ones.
 *
 * Sequenced with transition-delay rather than keyframes: a transition ends
 * and stays, so "play once and hold" is the default behaviour, and leaving
 * reverses both layers together over 400ms with no delay instead of cutting.
 *
 * `background-image` is NOT declared here. Each .cell sets --f2 and --f3 as
 * inline url()s and the substitution happens in index.html's <style> block,
 * because a relative url() carried through a custom property resolves
 * against the stylesheet that SUBSTITUTES it, not the one that defines it.
 * Declaring it here would resolve every path relative to assets/ and 404.
 *
 * The @media line below must stay BYTE-IDENTICAL to its twin in index.html.
 * If they diverge, phones silently start downloading all six frames and
 * check.sh cannot detect it. That gate is the whole point of this technique.
 * --------------------------------------------------------------------- */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cell .frame::before,
  .cell .frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    transition-property: opacity;
    transition-duration: 400ms;
    transition-timing-function: linear;
  }

  .cell:hover .frame::before,
  .cell:focus-visible .frame::before {
    opacity: 1;
    transition-duration: 1100ms;
    transition-delay: 1.8s;
  }

  .cell:hover .frame::after,
  .cell:focus-visible .frame::after {
    opacity: 1;
    transition-duration: 1100ms;
    transition-delay: 4.4s;
  }
}

/* ---- case study ------------------------------------------------------ */

.study-head { padding-block: var(--space-2xl) var(--space-xl); }

.study-head h1 { font-size: var(--text-display-s); }

.lede {
  font-size: var(--text-lg);
  color: var(--ink-2);
  max-width: var(--measure);
  margin: var(--space-md) 0 0;
}

.bleed { margin: 0 0 var(--space-2xl); }

.credits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-lg);
  margin: 0 0 var(--space-3xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}

.credits dt {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.credits dd { margin: var(--space-xs) 0 0; }

.credits dd a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--acid);
  text-underline-offset: 0.15em;
}

.credits dd a:hover,
.credits dd a:focus-visible { text-decoration-color: var(--ink); }

.shot {
  margin: 0 0 var(--space-3xl);
}

.bleed img,
.shot img { width: 100%; border-radius: var(--radius); }

.shot figcaption {
  max-width: var(--measure);
  margin-top: var(--space-md);
  color: var(--ink-2);
  font-size: var(--text-sm);
}

.on-ink .shot figcaption { color: var(--ink-on-dk-2); }

.band { padding-block: var(--space-3xl); }

.band h2 { font-size: var(--text-2xl); max-width: var(--measure); }

.band p { max-width: var(--measure); }

/* About: the one photograph on the site that is not client work. Phone:
   above the words. Wider: beside them, on the right. No shadow, the site's
   2px radius, nothing else. */
.who { display: grid; gap: var(--space-lg); }
.portrait { margin: 0; width: min(18rem, 70%); }
.portrait img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--paper-2); }
@media (min-width: 48rem) {
  .who { grid-template-columns: minmax(0, var(--measure)) 18rem; justify-content: space-between; align-items: start; }
  .portrait { width: 100%; order: 2; }
}

.next {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-xl);
  border-top: 2px solid var(--acid);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  letter-spacing: -0.03em;
  text-decoration: none;
}

.next span:last-child {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--ink-2);
}

/* ---- service --------------------------------------------------------- */

.price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-display-s);
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
}

.on-ink .price { color: var(--ink-on-dk); }

.price-note {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-lg);
}

.terms {
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-sm);
  max-width: var(--measure);
}

.terms li {
  padding-left: var(--space-md);
  border-left: 2px solid var(--acid);
}

/* ---- home statement --------------------------------------------------- */
/* The gap line: the one claim the site makes about itself, before the work. */
.statement { padding-block: var(--space-2xl) var(--space-lg); }
.statement h1 { font-size: var(--text-display-s); max-width: 18ch; }
.statement .gap {
  text-decoration: underline;
  text-decoration-color: var(--acid);
  text-decoration-thickness: 0.16em;
  text-underline-offset: 0.1em;
  text-decoration-skip-ink: none;
}
.statement p { max-width: 46ch; margin: var(--space-md) 0 0; font-size: var(--text-lg); color: var(--ink-2); }
.statement .statement-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font-size: var(--text-md); color: var(--ink); }
.statement-links a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--acid);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.statement-links a:hover, .statement-links a:focus-visible { text-decoration-color: var(--ink); }

/* ---- service: steps --------------------------------------------------- */
/* Numbered because the order is the information. */
.steps { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-xl); counter-reset: step; }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } }
.steps li { counter-increment: step; padding-top: var(--space-md); border-top: 2px solid var(--ink); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-md);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.steps h3 { font-size: var(--text-lg); }
.steps p { margin: var(--space-sm) 0 0; color: var(--ink-2); }
.steps li:first-child { border-top-color: var(--acid); }

/* ---- service: questions ----------------------------------------------- */
/* Native <details>: opens without JavaScript, keyboard and screen reader
   behaviour come free. The plus is drawn, two bars, the upright one folds
   flat when open. */
.faq { margin-top: var(--space-xl); max-width: 48rem; border-bottom: 1px solid var(--rule); }
.faq details { border-top: 1px solid var(--rule); }
.faq summary {
  position: relative;
  display: block;
  padding: var(--space-md) 2.5rem var(--space-md) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 1rem;
  height: 2px;
  background: var(--ink);
  transition: transform 200ms var(--ease-out);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover::before, .faq summary:hover::after { background: var(--ink-2); }
.faq details p { margin: 0; padding: 0 2.5rem var(--space-md) 0; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }