/* Hallmark · shape: brand boards, ink-blue ground with white sheets · genre: atmospheric · theme: custom · job: hire · idea: "one curve of light, redrawn from a different number in every place, the way one business gets many versions" · vibe: "luminous, exact, modern identity studio" · material: the arc is the brand's own artwork and the user's reference, so it may stand alone
 * paper: oklch(13% 0.05 270) · accent: oklch(70% 0.2 42) · display: Rethink Sans · body: Hanken Grotesk · hero: a live arc of light across the whole first screen, bending towards the pointer · nav: wordmark left, links and one action right · footer: one quiet line · imagery: the studio's own concept work and trailer · signature: the live arc
 * axes: dark/grotesk-medium/warm · posture: arc as surface, by the user's reference · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V5 · weakest: S, a gradient alone could be any studio; the concept work and the two-open six-locked preview tie it to this one */
/* Hallmark · waive 81 · the hero and close carry the page's text over the brand's own arc artwork · the user asked for this look from their reference video */
/* Hallmark · waive 83 · a gallery of the studio's own concept work on a hire page · the work is the page and it is labelled as concepts */
@import url("./tokens.css");
@import url("./base.css");

@font-face {
  font-family: "Rethink Sans";
  src: url("assets/fonts/rethink-sans-var.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

html { scroll-behavior: smooth; }

body { line-height: 1.5; }

h1, h2 {
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: 1;
}

h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-section); }

h3 {
  font-size: var(--text-title);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.1;
}

figure, dl, dd { margin: 0; }

.container {
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.skip {
  position: absolute;
  left: var(--space-md);
  top: calc(-1 * var(--space-3xl));
  z-index: var(--z-toast);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
}

.skip:focus-visible { top: var(--space-md); }

/* Nav */

.site-nav {
  position: absolute;
  z-index: var(--z-sticky-nav);
  inset: env(safe-area-inset-top, 0px) 0 auto;
}

.site-nav--solid { position: relative; background: var(--color-paper); }

.site-nav__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-xl);
  padding-block: var(--space-lg);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-outlier);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.wordmark--small { gap: var(--space-xs); font-size: var(--text-md); }

.site-nav nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-lg);
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-lg);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
}

.site-nav nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity var(--dur-micro) var(--ease-out);
}

.site-nav nav a:hover { opacity: 0.72; }

.site-nav__action {
  padding-inline: var(--space-md);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-pill);
}

/* Hero */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  background: var(--color-paper) url("assets/work/arc-hero.webp") center / cover no-repeat;
  overflow: clip;
}

/* The arc fades into the ground, so no section ever cuts it with a straight line. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: var(--space-4xl);
  background: linear-gradient(transparent, var(--color-paper));
  pointer-events: none;
}

.hero__arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease-out);
}

.hero__arc.is-live { opacity: 1; }

.hero__body {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
  padding-top: calc(var(--space-3xl) + var(--space-xl));
  padding-bottom: var(--space-2xl);
}

.hero h1 { max-width: 11.5em; }

.hero__lede { font-size: var(--text-lead); line-height: 1.35; color: var(--color-ink); }

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--space-lg);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-paper);
  font: 600 var(--text-md) / 1 var(--font-body);
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.btn:hover { background: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }

.hero__pause, .loop-toggle {
  position: absolute;
  z-index: var(--z-raised);
  min-height: 44px;
  padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  font: 500 var(--text-sm) / 1 var(--font-body);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}

.hero__pause:hover, .loop-toggle:hover { background: var(--color-paper-3); }
.hero__pause:active, .loop-toggle:active { transform: translateY(1px); }
.hero__pause:disabled, .loop-toggle:disabled { opacity: 0.55; cursor: not-allowed; }

.hero__pause {
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  bottom: var(--space-lg);
}

html:not(.js) .hero__pause, html:not(.js) .loop-toggle { display: none; }

/* Trailer */

.trailer { padding-block: var(--section-gap-s); }

.trailer__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-xl) var(--gap-columns);
  align-items: end;
}

.trailer h2 { grid-column: 1 / -1; max-width: 15em; font-size: var(--text-display-s); }

.trailer__grid > p { color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.4; max-width: 28em; }

.trailer__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-paper-2);
}

/* Work */

.work { padding-bottom: var(--section-gap-s); }

.work__head {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.work__head h2 { font-size: var(--text-display-s); }

.work__head p { max-width: 38em; color: var(--color-ink-2); }

.board { display: grid; gap: var(--space-lg); }

/* Each figure grows by its aspect ratio, so every row is one even height. */
.board__row { display: flex; gap: var(--gap-board); }

.board__row figure {
  position: relative;
  flex: var(--ar) 1 0;
  min-width: 0;
}

.board__row img, .board__row video {
  width: 100%;
  aspect-ratio: var(--ar);
  object-fit: cover;
  background: var(--color-paper-2);
}

figcaption {
  margin-top: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.3;
}

.loop-toggle { top: var(--space-sm); right: var(--space-sm); }

/* White sheet: prices */

.sheet {
  background: var(--color-sheet);
  color: var(--color-sheet-ink);
  padding-block: var(--section-gap-s);
}

.sheet :focus-visible { outline-color: var(--color-cobalt); }

.sheet h2 { max-width: 14em; margin-bottom: var(--space-2xl); font-size: var(--text-display-s); }

.price-group {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-lg) var(--gap-columns);
  padding-block: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-sheet-ink);
}

.price-group__intro { display: grid; gap: var(--space-sm); align-content: start; }

.price-group__intro p { max-width: 26em; color: var(--color-sheet-2); }

.price-rows > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-lg);
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-sheet-rule);
}

.price-rows > div:first-child { padding-top: 0; }
.price-rows > div:last-child { border-bottom: 0; padding-bottom: 0; }

.price-rows dt { min-width: 0; }

.price-rows dd {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Preview */

.preview {
  padding-block: var(--section-gap-s);
  background:
    linear-gradient(var(--color-sheet), transparent 1px),
    linear-gradient(var(--color-paper), transparent 20%, transparent 80%, var(--color-paper)),
    var(--color-paper) url("assets/work/arc-preview.webp") center / cover no-repeat;
}

.preview__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-xl) var(--gap-columns);
  align-items: center;
}

.preview__copy { display: grid; gap: var(--space-lg); }

.preview__copy h2 { font-size: var(--text-display-s); }

.preview__lede { max-width: 26em; font-size: var(--text-lead); line-height: 1.4; }

.preview__list > div {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.preview__list dt { font-weight: 600; }

.preview__list dd { color: var(--color-ink-2); }

.locked {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-board);
}

.frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-paper-3);
}

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

.frame.is-locked img {
  filter: blur(14px);
  transform: scale(1.2);
}

.frame.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-lock);
  -webkit-mask: url("assets/lock.svg") center / clamp(20px, 2.4vw, 34px) no-repeat;
  mask: url("assets/lock.svg") center / clamp(20px, 2.4vw, 34px) no-repeat;
}

/* Statement */

.statement { padding-block: var(--section-gap-s); }

.statement .container { display: grid; gap: var(--space-xl); }

.statement__big {
  max-width: 16em;
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: 1.04;
  text-wrap: balance;
}

.statement__rest {
  max-width: 34em;
  color: var(--color-ink-2);
  font-size: var(--text-lead);
  line-height: 1.4;
}

/* Close */

.close {
  display: flex;
  align-items: flex-end;
  min-height: min(90svh, 820px);
  background:
    linear-gradient(var(--color-paper), transparent 30%),
    var(--color-paper) url("assets/work/arc-close.webp") center / cover no-repeat;
}

.close__body {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-3xl) var(--space-2xl);
}

.close h2 { max-width: 15em; font-size: var(--text-display-s); }

.close__email {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 6.4vw, 7.25rem);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: 1;
  white-space: nowrap;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.12em;
  transition: opacity var(--dur-micro) var(--ease-out);
}

.close__email:hover { opacity: 0.78; }

/* Footer */

/* A thin line of the arc's colours marks the footer's top edge. */
.site-foot {
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--color-paper-3), var(--color-cobalt) 45%, var(--color-focus) 82%, var(--color-accent)) 1;
}

.site-foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 2fr) minmax(0, 4fr);
  gap: var(--space-xl) var(--gap-columns);
  padding-block: var(--space-2xl) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.site-foot__brand { display: grid; align-content: start; justify-items: start; gap: var(--space-sm); }

.site-foot__brand .wordmark { color: var(--color-ink); }

.site-foot__links, .site-foot__contact {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-2xs);
  font-style: normal;
}

.site-foot__links a, .site-foot__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--color-ink);
  text-decoration: none;
  transition: opacity var(--dur-micro) var(--ease-out);
}

.site-foot__links a:hover, .site-foot__contact a:hover { opacity: 0.72; }

.site-foot__contact span { min-height: 24px; }

.site-foot__legal {
  grid-column: 1 / -1;
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-muted);
}

/* Privacy */

.legal { padding-block: var(--space-3xl) var(--section-gap-s); }

.legal__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-xl) var(--gap-columns);
  align-items: start;
}

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

.legal__text { display: grid; gap: var(--space-sm); max-width: 44rem; }

.legal__text h2 {
  max-width: none;
  margin: var(--space-lg) 0 0;
  font-size: var(--text-title);
  letter-spacing: -0.022em;
  line-height: 1.1;
}

.legal__text h2:first-child { margin-top: 0; }

.legal__date { margin-top: var(--space-lg); color: var(--color-sheet-2); font-size: var(--text-sm); }

/* Narrower screens */

@media (max-width: 60rem) {
  .hero { background-image: url("assets/work/arc-hero-m.webp"); }
  .trailer__grid, .work__head, .price-group, .preview__grid, .legal__grid, .site-foot__grid { grid-template-columns: minmax(0, 1fr); }
  .site-foot__links a, .site-foot__contact a { min-height: 44px; }
  .hero__pause { top: auto; }
}

@media (max-width: 40rem) {
  .site-nav__row { padding-block: var(--space-md); }
  .site-nav nav { gap: 0 var(--space-md); padding-left: var(--space-md); }
  .site-nav nav { padding-right: var(--space-md); }
  .site-nav__action { display: none !important; }
  .hero__body { padding-top: calc(var(--space-4xl) + var(--space-lg)); padding-bottom: var(--space-3xl); }
  .hero__pause { right: var(--gutter); bottom: var(--space-md); }
  .board__row { flex-direction: column; gap: var(--space-lg); }
  .board__row figure { flex: none; }
  .locked { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .close {
    min-height: 0;
    background:
      linear-gradient(var(--color-paper), transparent 18%),
      var(--color-paper) url("assets/work/arc-close-m.webp") center / cover no-repeat;
  }
  .close__body { padding-top: calc(var(--space-4xl) + var(--space-3xl)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__arc, .btn, .close__email, .site-nav nav a { transition: none; }
}