/* Direction A, "Product": Apple product-page energy applied to a person.
   Brand layer over the house kit (tokens.css). One ink, one paper, one grotesk.
   Every scene uses the same idea: a frame opens to full-bleed as you scroll.
   --p (0..1) drives the opening. Defaults are the
   finished state so JS-off and reduced motion read correctly. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../assets/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0a0a0a;
  --paper: #ffffff;
  --mist: #f5f5f7;              /* the one grey section */
  --ink-60: color-mix(in srgb, var(--ink) 60%, transparent);
  --grey: #6e6e73;              /* secondary text on white and mist */
  --on-dark-60: rgba(255, 255, 255, .62);
  --on-dark-18: rgba(255, 255, 255, .18);
  --accent: #ffffff;            /* selection text only; no colour accent anywhere */
  --sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--sans);
  --font-text: var(--sans);
  --font-label: var(--sans);
  --display-weight: 600;
  --display-tracking: -.055em;
  --tight: -.055em;
}

html { background: var(--paper); }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;          /* 18px on the 1440 frame */
  line-height: 1.4;
  letter-spacing: -.011em;
  font-feature-settings: "ss01" 0;
}
::selection { background: var(--ink); color: #fff; }

/* ---------- Header ---------- */
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-h);
  padding-inline: var(--pad);
  background: transparent;
  font-size: 1rem;
  letter-spacing: -.015em;
}
.head.is-scrolled { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); }
.head__name { font-weight: 600; }
.head__nav { display: flex; gap: 2rem; }
.head__name, .head__nav { position: relative; z-index: 1; }

/* ---------- Buttons: one solid ink button, sentence case ---------- */
.btn.btn--ink {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
  line-height: 1.2;
  padding: .875rem 1.375rem;
  background: var(--ink);
  color: #fff;
}
.btn.btn--big { font-size: 1.375rem; padding: 1.375rem 2.25rem; }
@media (hover: hover) {
  .btn.btn--ink:hover { padding: .875rem 1.625rem; }
  .btn.btn--big:hover { padding: 1.375rem 2.625rem; }
}

/* ---------- Scenes (shared) ---------- */
.scene { position: relative; --p: 1; --q: 1; }
.scene .stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.frame {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 2;
  overflow: hidden;
  clip-path: inset(
    calc(var(--t0) * (1 - var(--p)))
    calc(var(--r0) * (1 - var(--p)))
    calc(var(--b0) * (1 - var(--p)))
    calc(var(--l0) * (1 - var(--p)))
  );
}
.frame picture, .frame img { display: block; width: 100%; height: 100%; }
.frame img {
  object-fit: cover;
  /* While framed, the picture slides down into the window so the subject sits in it */
  transform: translateY(calc(var(--t0) * (1 - var(--p)) * var(--shift, .5))) scale(calc(1.12 - .12 * var(--p)));
  transform-origin: 50% 0%;
}

/* Motion mode: tall sections, sticky stages, everything starts closed */
.hk-motion .scene { --p: 0; --q: 0; }
.hk-motion .scene .stage { position: sticky; top: 0; }
.hk-motion .hero { height: 230vh; height: 230svh; }
.hk-motion .strip { height: 330vh; height: 330svh; }

/* ---------- Hero ---------- */
.hero .stage { --t0: 26rem; --l0: 14vw; --r0: 14vw; --b0: 2rem; --shift: .42; }
.hero { --p: 0; --q: 0; }  /* static hero shows the designed first view */
.hero__head {
  position: relative;
  z-index: 1;
  padding: calc(var(--header-h) + .75rem) var(--pad) 0;
  transform: translateY(calc(var(--p) * -4rem));
  opacity: calc(1 - var(--p) * 2.4);
}
.hero__name {
  font-size: 14rem;
  font-weight: 600;
  letter-spacing: var(--tight);
  line-height: .84;
  margin-left: -.045em;
  white-space: nowrap;
}
.hero__name > span { display: inline-block; }
.hero__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-top: 2.25rem;
}
.hero__line { max-width: 33rem; font-size: 1.375rem; line-height: 1.32; letter-spacing: -.018em; font-weight: 450; }
.hero .frame img { object-position: 70% 20%; }   /* face and the laptop stickers carry the frame, not the blurred wall */

/* ---------- Intro statement ---------- */
.intro { padding: 13rem var(--pad) 12rem; }
.intro__text {
  max-width: 76rem;
  font-size: 4.25rem;
  font-weight: 550;
  letter-spacing: -.045em;
  line-height: 1.04;
}

/* ---------- Work ---------- */
.work { background: var(--ink); color: #fff; }
.work__lead {
  padding: 11rem var(--pad) 7rem;
  font-size: 4.25rem;
  font-weight: 550;
  letter-spacing: -.045em;
  line-height: 1.04;
}
/* ---------- Index (Direction B): every project, one huge row each ---------- */
.all { position: relative; padding: 11rem var(--pad) 12rem; background: var(--paper); }
.all__lead {
  font-size: 4.25rem; font-weight: 550; letter-spacing: -.045em; line-height: 1.04;
  margin-bottom: 4.5rem; max-width: 60rem;
}
.index { position: relative; }
.index::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink);
  transform-origin: 0 50%; transform: scaleX(var(--sx, 1));
}
.row { position: relative; }
.row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #e4e4e4;
  transform-origin: 0 50%; transform: scaleX(var(--sx, 1));
}
.row-link {
  display: flex; align-items: flex-start; gap: 1.5rem;
  padding: 1.5rem 0 1.25rem;
  transition: padding-left var(--dur-slow) var(--ease);
}
/* The mask needs room under the baseline: at .12em the "j" of joon11ee was cut off and read "ioon11ee". */
.row-mask { display: block; overflow: hidden; padding-bottom: .26em; margin-bottom: -.26em; flex: none; }
.row-title {
  display: block;
  font-size: 7.5rem; font-weight: 600; line-height: .92; letter-spacing: -.055em;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.row-meta {
  display: flex; flex-direction: column; gap: .15rem;
  max-width: 17rem; margin-top: .7rem;
  font-size: 1rem; line-height: 1.3; color: var(--grey);
  transition: color var(--dur) var(--ease);
}
.row-meta span:first-child { color: var(--ink); }
.row-toggle, .row-panel { display: none; }
@media (hover: hover) and (min-width: 1024px) {
  .index.is-hovering .row-title, .index.is-hovering .row-meta, .index.is-hovering .row-meta span:first-child { color: #d4d4d4; }
  .index .row.is-on .row-title, .index .row.is-on .row-meta span:first-child { color: var(--ink); }
  .index .row.is-on .row-meta { color: var(--grey); }
  .index .row.is-on .row-link { padding-left: 2.5rem; }
}
.preview { position: fixed; left: 0; top: 0; width: 18.5rem; z-index: 50; pointer-events: none; visibility: hidden; }
.preview-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); }
.pv { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path .6s var(--ease); }
.pv.is-on { clip-path: inset(0 0 0 0); }
.pv img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.18); transition: transform 1s var(--ease); }
.pv.is-on img { transform: scale(1); }

/* ---------- Photo: Direction C's film strip, black film on white paper ---------- */
.strip { background: var(--paper); --s: 0; }
.strip .stage { background: var(--paper); }
.strip__head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem;
  padding: calc(var(--header-h) + 2.5rem) var(--pad) 0;
}
.strip__title { font-size: 9.5rem; font-weight: 600; letter-spacing: var(--tight); line-height: .86; white-space: nowrap; margin-left: -.04em; }
.strip__line { max-width: 24rem; font-size: 1.1875rem; line-height: 1.38; color: var(--grey); padding-bottom: .5rem; }
.strip__view { position: absolute; left: 0; right: 0; bottom: 4.5rem; height: 52svh; --h: 52svh; overflow-x: auto; scrollbar-width: none; }
.strip__view::-webkit-scrollbar { display: none; }
.hk-motion .strip__view { overflow: visible; }
.film {
  --hole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Crect x='7' y='2' width='10' height='8' rx='1.2' fill='%23ffffff'/%3E%3C/svg%3E");
  display: flex; width: max-content; height: 100%;
  padding-inline: var(--pad);
  transform: translateX(calc(var(--s) * var(--dist, 0) * -1px));
}
.cell { height: 100%; display: flex; flex-direction: column; flex: none; }
.cell__film {
  position: relative;
  height: calc(var(--h) - 2.5rem);
  padding: 2.25rem .375rem;
  background-color: var(--ink);
  background-image: var(--hole), var(--hole);
  background-repeat: repeat-x, repeat-x;
  background-position: 0 .35rem, 0 calc(100% - .35rem);
  background-size: 1.5rem .75rem, 1.5rem .75rem;
}
.cell__film img { display: block; height: 100%; aspect-ratio: 3 / 2; width: auto; object-fit: cover; }
.edge {
  position: absolute; left: .875rem; right: .875rem;
  display: flex; justify-content: space-between;
  font-family: var(--sans); font-variant-numeric: tabular-nums; text-transform: uppercase;
  font-size: max(.625rem, 9px); line-height: 1; letter-spacing: .08em;
  color: rgba(255, 255, 255, .5);
}
.edge--t { top: 1.375rem; }
.edge--b { bottom: 1.375rem; }
.cell__cap { margin-top: .75rem; padding-left: .375rem; font-size: .9375rem; color: var(--grey); white-space: nowrap; }
.strip__bar { position: absolute; left: var(--pad); right: var(--pad); bottom: 2rem; height: 1px; background: rgba(10, 10, 10, .12); }
.strip__bar span { position: absolute; inset: 0; background: var(--ink); transform: scaleX(var(--s)); transform-origin: 0 50%; }

/* ---------- Contact ---------- */
.contact { padding: 12rem var(--pad) 2.5rem; }
.contact__grid { display: grid; grid-template-columns: 1fr 22rem; gap: 4rem; align-items: end; }
.contact__title { font-size: 10.5rem; font-weight: 600; letter-spacing: var(--tight); line-height: .88; margin-left: -.04em; }
.contact__photo { width: 22rem; height: 28rem; }
.contact__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; }
.contact__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; margin-top: 5rem; }
.contact__line { max-width: 30rem; font-size: 1.375rem; line-height: 1.32; letter-spacing: -.018em; }
.foot {
  display: flex;
  gap: 2.5rem;
  margin-top: 9rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(10, 10, 10, .14);
  font-size: .9375rem;
  color: var(--grey);
}
.foot > :first-child { color: var(--ink); font-weight: 600; margin-right: auto; }

/* SplitText line/word masks: room for descenders */
.nw-mask, .cl-mask { padding-bottom: .14em; margin-bottom: -.14em; }

/* ---------- Mobile (375 frame) ---------- */
@media (max-width: 1023px) {
  body { font-size: 1.0625rem; }
  .head__nav { gap: 1rem; }
  .head { font-size: .875rem; }
  .btn.btn--ink { font-size: 1.0625rem; }

  .hero .stage { --l0: var(--pad); --r0: var(--pad); --b0: var(--pad); --shift: .85; }
  .hero__name { font-size: 7rem; line-height: .86; white-space: normal; }
  .hero__name > span { display: block; }
  .hero__row { flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-top: 1.25rem; }
  .hero__line { font-size: 1.1875rem; max-width: 21rem; }
  .hero .frame img { object-position: 50% 6%; }

  .intro { padding: 7rem var(--pad) 7rem; }
  .intro__text { font-size: 2.25rem; line-height: 1.08; letter-spacing: -.04em; }

  .work__lead { padding: 6rem var(--pad) 4rem; font-size: 2.25rem; }
  .all { padding: 6rem var(--pad) 6rem; }
  .all__lead { font-size: 2.25rem; margin-bottom: 2.5rem; }
  .row-link { flex-direction: column; gap: .5rem; padding: 1.1rem 2.5rem 1rem 0; }
  .rows-js .row-link { pointer-events: none; }   /* JS: the toggle owns the tap; no JS: the row is a plain link */
  .row-title { font-size: 3.25rem; white-space: normal; line-height: .95; }
  .row-meta { margin-top: 0; max-width: none; font-size: .9375rem; }
  .rows-js .row-toggle {
    display: block; position: absolute; left: 0; right: 0; top: 0; height: 100%;
    max-height: var(--row-head, 6rem); background: none; border: 0; cursor: pointer; z-index: 2;
  }
  .row-toggle::before, .row-toggle::after {
    content: ""; position: absolute; right: .25rem; top: 1.9rem; width: 1rem; height: 1.5px; background: var(--ink);
    transition: transform var(--dur-slow) var(--ease);
  }
  .row-toggle::after { transform: rotate(90deg); }
  .row-toggle[aria-expanded="true"]::after { transform: rotate(0deg); }
  .rows-js .row-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
  .row.is-open .row-panel { grid-template-rows: 1fr; }
  .row-panel-in { overflow: hidden; min-height: 0; }
  .row-panel-in img { width: 72%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; margin-top: .25rem; background: #eee; }
  .row-panel-in a { display: inline-block; margin: .25rem 0 .5rem; padding-block: .7rem; font-size: .9375rem; text-decoration: underline; text-underline-offset: .25em; }
  .preview { display: none; }

  .strip__head { flex-direction: column; align-items: flex-start; gap: 1rem; padding-top: calc(var(--header-h) + .5rem); }
  .strip__title { font-size: 4.5rem; white-space: normal; }
  .strip__line { font-size: 1rem; max-width: 20rem; }
  .strip__view { height: 50svh; --h: 50svh; bottom: 3.5rem; }
  .cell__film { padding: 1.75rem .3rem; background-size: 1.25rem .625rem, 1.25rem .625rem; background-position: 0 .3rem, 0 calc(100% - .3rem); }
  .edge { left: .6rem; right: .6rem; }
  .edge--t { top: 1.05rem; } .edge--b { bottom: 1.05rem; }
  .cell__cap { font-size: .875rem; }
  .strip__bar { bottom: 1.75rem; }

  .contact { padding: 7rem var(--pad) 2rem; }
  .contact__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact__title { font-size: 4.4rem; }
  .contact__photo { width: 12rem; height: 15rem; }
  .contact__row { flex-direction: column; align-items: flex-start; gap: 2rem; margin-top: 2.5rem; }
  .contact__line { font-size: 1.1875rem; }
  .btn.btn--big { font-size: 1.25rem; padding: 1.125rem 1.75rem; }
  .foot { flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 5rem; }
  .foot > :first-child { width: 100%; }
}

/* Reduced motion: scenes are static, launches show finished, strip swipes natively */
@media (prefers-reduced-motion: reduce) {
  .scene { --p: 1; --q: 1; }
  .hero { --p: 0; --q: 0; }
  .frame img { transform: translateY(calc(var(--t0) * (1 - var(--p)) * var(--shift, .5))); }
  .pv, .pv img, .row-link { transition: none; }
  .pv img { transform: none; }
}

/* Boot curtain: covers first paint while the kit initialises (removed if the bundle fails) */
.hk-js .hk-curtain.is-boot { transform: scaleY(1); }