/* ==========================================================================
   ikonstudio — Swiss International Typographic Style

   The system, in one paragraph: a visible 12-column grid runs the height of
   the page; everything sits on it. Two typefaces only — Barlow Condensed
   (heavy, condensed, uppercase) for display and titles, Hanken Grotesk for
   prose and UI. One accent: red, used on exactly one line per headline and
   nowhere else. Every corner is square. Every divider is 1px.

   1. tokens  2. reset  3. grid overlay  4. type primitives  5. header
   6. hero    7. marquee  8. section bars  9. work mosaic  10. about
   11. services  12. contact  13. footer  14. motion  15. responsive
   ========================================================================== */

/* 1 ── tokens ─────────────────────────────────────────────────────────── */
:root {
  --paper:    #f8f7f4;
  --ink:      #0c0c0c;
  --ink-2:    #55534e;          /* prose */
  --ink-3:    #8c8981;          /* labels, meta */
  --red:      #e0001b;
  --rule:     #dedbd4;
  --rule-2:   #e9e6df;          /* inside dense tables */
  --grid:     rgb(12 12 12 / .055);

  --disp: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --shell: 1440px;
  --cols: 12;
  --pad: clamp(1.25rem, 3.34vw, 3rem);      /* 48px at 1440 — content blocks */
  --pad-bar: clamp(1rem, 1.67vw, 1.5rem);   /* 24px at 1440 — dense bars */
  --bar: 3.25rem;                            /* header / section bar height */

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* 2 ── reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, dl, dd, dt, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

svg[viewBox] {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.skip {
  position: absolute;
  left: -100vw;
  top: .5rem;
  z-index: 99;
  padding: .6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: .75rem;
}
.skip:focus { left: .75rem; }

/* 3 ── the page shell and its grid overlay ────────────────────────────── */
.page {
  position: relative;
  max-width: var(--shell);
  margin-inline: auto;
}

/* twelve faint verticals, the full height of the page */
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to right,
    var(--grid) 0 1px,
    transparent 1px calc(100% / var(--cols))
  );
}
.page > * { position: relative; z-index: 1; }

[id] { scroll-margin-top: var(--bar); }

/* 4 ── type primitives ────────────────────────────────────────────────── */

/* the display face: condensed, heavy, uppercase, tight */
.display {
  font-family: var(--disp);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .93;
}
.display em { font-style: normal; color: var(--red); }

/* the small tracked caps that label everything */
.lbl,
.sec__tag,
.sec__aside,
.head__meta,
.head__nav,
.case__cat,
.case__idx,
.case__year,
.svc__n,
.meta dt,
.hero__coords,
.foot p,
.stats dd,
.disc b,
.tag,
.btn {
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.4;
}

.lbl { color: var(--ink-3); font-weight: 400; }

/* buttons are rectangles. no radius anywhere on this page. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.4rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
  transition: background .25s var(--ease);
}
.btn i { font-style: normal; font-size: .9em; }
.btn:hover { background: var(--red); }

.btn--bare {
  background: none;
  color: var(--ink-3);
  padding-inline: 1rem;
}
.btn--bare:hover { background: none; color: var(--ink); }

/* 5 ── header ─────────────────────────────────────────────────────────── */
.head {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 3fr 5fr 4fr;
  align-items: center;
  min-height: var(--bar);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.head > * { padding-inline: var(--pad-bar); }
.head__meta,
.head__nav { border-left: 1px solid var(--rule); align-self: stretch; display: flex; align-items: center; }

.head__mark {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.head__meta { color: var(--ink-3); }

.head__nav { gap: clamp(1rem, 2.2vw, 2.25rem); justify-content: flex-end; }
.head__nav a { color: var(--ink-3); transition: color .25s var(--ease); }
.head__nav a:hover { color: var(--ink); }

/* 6 ── hero ───────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 8fr 4fr;
  border-bottom: 1px solid var(--rule);
}
.hero__main { padding: clamp(2.5rem, 5vw, 4.75rem) var(--pad) clamp(2.5rem, 4vw, 3.5rem); }
.hero__side { border-left: 1px solid var(--rule); padding: clamp(2.5rem, 5vw, 4.75rem) 0 2rem; }

/* § tag: number, hairline, caption */
.sec__tag { display: flex; align-items: center; gap: .9rem; color: var(--ink-3); }
.sec__tag i { display: block; width: clamp(2rem, 4vw, 4rem); height: 1px; background: var(--rule); }
.sec__tag b { font-weight: 500; color: var(--ink); letter-spacing: .18em; }

.hero__title {
  position: relative;
  width: fit-content;
  margin: clamp(1.5rem, 3vw, 2.75rem) 0 0;
  font-size: clamp(3.75rem, 11.4vw, 10.25rem);
  letter-spacing: -.005em;
}

/* the availability chip, offset into the display type */
.tag {
  position: absolute;
  top: 27.6%;
  left: 59%;
  transform: translateY(-50%);
  display: inline-flex;
  font-family: var(--sans);
  align-items: center;
  gap: .5rem;
  padding: .3rem .6rem;
  background: #eceae6;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}
.tag b { width: .375rem; height: .375rem; background: var(--red); border-radius: 50%; }

.hero__lede {
  max-width: 42ch;
  margin-top: clamp(1.75rem, 3.4vw, 2.75rem);
  color: var(--ink-2);
}

.hero__acts { display: flex; flex-wrap: wrap; align-items: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.hero__coords { margin-top: clamp(2rem, 4vw, 3.5rem); color: var(--ink-3); text-transform: none; }

/* --- discipline index --- */
.hero__side .lbl { padding-inline: 1.875rem; }
.disc { margin-top: 1.25rem; }
.disc li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-inline: 1.875rem;
  padding: .7rem 0;
  border-top: 1px solid var(--rule-2);
}
.disc li:last-child { border-bottom: 1px solid var(--rule-2); }
.disc span { font-size: .875rem; }
.disc b { font-weight: 400; color: var(--ink-3); }

/* --- stats box --- */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 1rem;
  margin: clamp(2.5rem, 5vw, 4.5rem) 1.875rem 0;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--rule);
}
.stats dt { font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1; }
.stats dd { margin-top: .3rem; color: var(--ink-3); }

/* 7 ── marquee ────────────────────────────────────────────────────────── */
.mq {
  overflow: hidden;
  height: 2.75rem;
  display: flex;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
}
.mq__track {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  width: max-content;
  animation: mq 52s linear infinite;
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
}
.mq__track span,
.mq__track i { white-space: nowrap; }
.mq__track i { color: var(--red); font-style: normal; font-size: .55rem; }
@keyframes mq { to { transform: translateX(-50%); } }

/* 8 ── section bars ───────────────────────────────────────────────────── */
.sec {
  position: relative;
  display: grid;
  grid-template-columns: 4fr 8fr;
  align-items: center;
  min-height: var(--bar);
  border-bottom: 1px solid var(--rule);
}
.sec > * { padding-inline: var(--pad-bar); }
/* the divider is drawn by the bar itself so bars without an aside keep it */
.sec::after {
  content: "";
  position: absolute;
  left: 33.3333%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}
.sec__aside {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--ink-3);
}
.sec .sec__tag { gap: 1.5rem; }

/* 9 ── work mosaic ────────────────────────────────────────────────────── */
.mosaic {
  display: grid;
  grid-template-columns: 8fr 4fr;
  border-bottom: 1px solid var(--rule);
}
.mosaic__side { display: grid; grid-template-rows: 1fr 1fr; }

.case {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;
  border-left: 1px solid var(--rule);
}
.case:first-child { border-left: 0; }
.mosaic__side .case { border-left: 1px solid var(--rule); }
.mosaic__side .case + .case { border-top: 1px solid var(--rule); }

/* the lead tile sets the row height; the two side tiles stretch to match */
.case--lead .case__art { aspect-ratio: 96 / 63; }
.case--wide .case__art { aspect-ratio: 96 / 39; }

/* artwork panels — colour lives only in here */
.case__art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  background: var(--t-bg);
  color: var(--t-fg);
}
.tile--stone { --t-bg: #e6e3db; --t-fg: #0c0c0c; }
.tile--cream { --t-bg: #efe8db; --t-fg: #0c0c0c; }
.tile--clay  { --t-bg: #e2cbc2; --t-fg: #0c0c0c; }
.tile--acid  { --t-bg: #dde64f; --t-fg: #0c0c0c; }
.tile--ink   { --t-bg: #0c0c0c; --t-fg: #f4f2ee; }

.case__idx {
  position: absolute;
  top: 1rem;
  left: 1.125rem;
  color: currentColor;
  opacity: .5;
}

.art--grid    { width: min(46%, 20rem); }
.case--lead .art--grid { width: min(46%, 28rem); }
.art--weights { width: min(64%, 18rem); }
.art--line    { width: min(72%, 30rem); stroke-width: 3; }

.art__word {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
}
.art__figure {
  font-size: clamp(3rem, 7vw, 6rem);
  letter-spacing: -.02em;
}
.art__figure i { font-style: normal; text-transform: lowercase; }

/* caption bar */
.case__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--pad-bar);
  border-top: 1px solid var(--rule);
}
.case__cat { display: block; color: var(--ink-3); }
.case__bar h3 { font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); letter-spacing: .01em; }
.case__year { color: var(--ink-3); white-space: nowrap; }
.case__year i { font-style: normal; }
.case:hover .case__year { color: var(--red); }
.case:hover .case__bar h3 { color: var(--red); }

/* 10 ── about ─────────────────────────────────────────────────────────── */
.about {
  display: grid;
  grid-template-columns: 3fr 9fr;
  border-bottom: 1px solid var(--rule);
}
.about__side { padding: clamp(2rem, 3.4vw, 3rem) var(--pad-bar) 3rem; }
.about__main {
  padding: clamp(2rem, 3.4vw, 3rem) var(--pad) 3.5rem;
  border-left: 1px solid var(--rule);
}

.about__card {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--t-bg);
  color: var(--t-fg);
}
svg.about__glyph { width: 44%; fill: currentColor; stroke: none; }
.about__cap {
  position: absolute;
  inset: auto 0 0;
  padding: .8rem 1.125rem;
  background: rgb(12 12 12 / .78);
  color: #f4f2ee;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.about__cap b { display: block; font-weight: 500; }

/* label-left / value-right rows */
.meta { margin-top: 2.5rem; }
.meta > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--rule-2);
}
.meta > div:first-child { border-top: 1px solid var(--rule-2); }
.meta dt { color: var(--ink-3); }
.meta dd { font-size: .8125rem; text-align: right; }
.meta a { border-bottom: 1px solid transparent; transition: border-color .25s var(--ease); }
.meta a:hover { border-color: currentColor; }

.about__title {
  font-size: clamp(2.5rem, 5.3vw, 4.75rem);
  letter-spacing: 0;
}

.about__copy {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--ink-2);
}
@media (min-width: 58rem) { .about__copy { grid-template-columns: 1fr 1fr; } }

.about__lbl { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

.clients {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 1rem;
  border-top: 1px solid var(--rule-2);
  border-left: 1px solid var(--rule-2);
}
@media (min-width: 46rem) { .clients { grid-template-columns: repeat(4, 1fr); } }
.clients li {
  padding: .9rem 1.125rem;
  border-right: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--ink-2);
}

/* 11 ── services ──────────────────────────────────────────────────────── */
.svc {
  display: grid;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 52rem) { .svc { grid-template-columns: 1fr 1fr; } }

.svc li {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  padding: clamp(1.75rem, 3vw, 2.5rem) var(--pad-bar);
  border-bottom: 1px solid var(--rule-2);
}
.svc li:nth-child(even) { border-left: 1px solid var(--rule); }
.svc li:nth-last-child(-n+2) { border-bottom: 0; }
.svc__n { color: var(--ink-3); flex: none; padding-top: .35rem; }
.svc h3 { font-size: clamp(1.1875rem, 1.9vw, 1.5rem); letter-spacing: .015em; }
.svc p { margin-top: .5rem; font-size: .875rem; color: var(--ink-2); max-width: 40ch; }

/* 12 ── contact ───────────────────────────────────────────────────────── */
.cta {
  display: grid;
  grid-template-columns: 7fr 5fr;
  border-bottom: 1px solid var(--rule);
}
.cta__main { padding: clamp(2.5rem, 5vw, 4.5rem) var(--pad) clamp(3rem, 5vw, 4.5rem); }
.cta__title {
  font-size: clamp(2.75rem, 6.6vw, 6rem);
  margin-bottom: clamp(2rem, 3.4vw, 3rem);
}
.cta .meta--wide {
  margin: 0;
  align-self: center;
  padding: clamp(2rem, 4vw, 3.5rem) var(--pad) clamp(2rem, 4vw, 3.5rem);
  border-left: 1px solid var(--rule);
}

/* 13 ── footer ────────────────────────────────────────────────────────── */
.foot {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  justify-content: space-between;
  padding: 1.4rem var(--pad-bar);
  color: var(--ink-3);
}
.foot p { text-transform: none; }

/* 14 ── motion ────────────────────────────────────────────────────────── */
/* the marquee is the only moving part on the page */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mq__track { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 15 ── responsive ────────────────────────────────────────────────────── */

/* twelve verticals are noise on a phone */
@media (max-width: 46rem)  { :root { --cols: 4; } }
@media (min-width: 46.01rem) and (max-width: 64rem) { :root { --cols: 6; } }

@media (max-width: 64rem) {
  .hero { grid-template-columns: 1fr; }
  .hero__side { border-left: 0; border-top: 1px solid var(--rule); padding-block: 2.5rem; }
  .hero__side .lbl { padding-inline: var(--pad); }
  .disc li,
  .stats { margin-inline: var(--pad); padding-inline: 0; }
  .tag { position: static; display: inline-flex; margin-top: 1rem; }

  .mosaic,
  .mosaic--pair { grid-template-columns: 1fr; }
  .mosaic__side { grid-template-rows: auto auto; }
  .case,
  .mosaic__side .case { border-left: 0; }
  .case + .case,
  .mosaic__side .case + .case,
  .mosaic__side { border-top: 1px solid var(--rule); }
  .case--lead .case__art,
  .case--wide .case__art,
  .mosaic__side .case__art { aspect-ratio: 3 / 2; }

  .about { grid-template-columns: 1fr; }
  .about__main { border-left: 0; border-top: 1px solid var(--rule); }
  .about__card { aspect-ratio: 16 / 9; }

  .cta { grid-template-columns: 1fr; }
  .cta .meta--wide { border-left: 0; border-top: 1px solid var(--rule); }
}

@media (max-width: 52rem) {
  .head { grid-template-columns: 1fr auto; row-gap: 0; }
  .head__meta { display: none; }

  .sec { grid-template-columns: 1fr; min-height: 0; }
  .sec::after { display: none; }
  .sec__tag { padding-block: .8rem; }
  .sec__aside {
    justify-content: flex-start;
    padding-block: .7rem;
    border-top: 1px solid var(--rule-2);
  }
  .svc li:nth-child(even) { border-left: 0; }
  .svc li:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule-2); }
  .svc li:last-child { border-bottom: 0; }
}

/* the nav cannot fit beside the wordmark below this — give it its own bar */
@media (max-width: 40rem) {
  .head { grid-template-columns: 1fr; }
  .head__nav {
    border-left: 0;
    border-top: 1px solid var(--rule);
    justify-content: space-between;
    gap: .5rem;
    padding-block: .7rem;
  }
}

@media (max-width: 30rem) {
  .head__nav { gap: .4rem; font-size: .625rem; }
  .btn { padding-inline: 1.1rem; }
  .btn--bare { padding-inline: .9rem; }
}

@media print {
  .head, .mq { display: none; }
  body { background: #fff; }
  .page::before { display: none; }
}