/* Culture Blender — visual direction 1.0
   Rule set: one type size, one statement size, no interface material.
   Colour comes from the photographs. The page stays silent. */

:root {
  --paper: #ffffff;
  --ink: #0b0b0b;
  --mute: #9b9a97;
  --rule: #e7e6e2;
  --slot: #f1f0ec;

  --font: "Neue Haas Grotesk Text Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: 13px;
  --lead: 1.3;
  --track: 0.012em;
  --statement: clamp(28px, 3.6vw, 56px);

  --margin: 14px;
  --gutter: 14px;
  --header: 76px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header) + 24px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text);
  font-weight: 400;
  line-height: var(--lead);
  letter-spacing: var(--track);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
}

ul,
ol {
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--mute);
}

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

.mute {
  color: var(--mute);
}

.skip-link {
  position: absolute;
  left: var(--margin);
  top: -40px;
  background: var(--paper);
  padding: 4px 0;
  z-index: 20;
}

.skip-link:focus {
  top: 8px;
}

/* ---------- Grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--margin);
}

/* ---------- Header: an address line, not a navigation bar ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  padding-block: 12px 14px;
  align-items: start;
}

.site-name {
  grid-column: 1 / span 3;
  font-weight: 700;
}

.site-what {
  grid-column: 4 / span 3;
}

.site-where {
  grid-column: 7 / span 3;
  color: var(--mute);
}

.site-nav {
  grid-column: 10 / span 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-nav a[aria-current="page"] {
  color: var(--mute);
}

/* ---------- Sections ---------- */

main > section {
  padding-bottom: clamp(96px, 16vw, 240px);
}

.label {
  color: var(--mute);
}

.statement {
  font-size: var(--statement);
  line-height: 1.04;
  letter-spacing: -0.022em;
}

.prose p + p {
  margin-top: 1em;
}

.prose {
  max-width: 44em;
}

/* ---------- Plates (images) ---------- */

.plate figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5em;
  padding-top: 8px;
}

.plate figcaption span:first-child {
  color: var(--ink);
}

.plate figcaption span {
  color: var(--mute);
}

/* A slot is a plate that the page draws. It has the same ratios as a photograph. */
.slot {
  display: flex;
  align-items: flex-end;
  padding: 10px;
}

/* A plate that waits for a photograph. Remove the element when the image exists. */
.plate--pending .slot {
  background: var(--slot);
  color: var(--mute);
}

/* System plates: brand work that is not a photograph. Type in a plate belongs to the work. */
.slot--paper {
  background: var(--paper);
  border: 1px solid var(--rule);
  align-items: center;
  justify-content: center;
}

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

.slot--bands {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}

.slot--bands span {
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding: 10px;
}

.mark {
  display: flex;
  align-items: center;
  gap: 0.32em;
  font-size: clamp(22px, 3.2vw, 46px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.mark i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--ink);
}

.line {
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.15;
  letter-spacing: 0;
}

.ratio-4x5 {
  aspect-ratio: 4 / 5;
}

.ratio-3x2 {
  aspect-ratio: 3 / 2;
}

.ratio-1x1 {
  aspect-ratio: 1 / 1;
}

/* ---------- Opening ---------- */

.opening {
  padding-top: clamp(8px, 2vw, 28px);
  align-items: start;
}

.opening .plate {
  grid-column: 1 / span 7;
}

/* A brand studio leads with its line, so the statement has four columns. */
.opening-text {
  grid-column: 9 / span 4;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.opening-text .prose {
  max-width: 30em;
}

/* ---------- Work: an uneven sequence, like a printed lookbook ---------- */

.work {
  row-gap: clamp(72px, 11vw, 168px);
  align-items: start;
}

.work-note {
  grid-column: 1 / span 4;
}

.work-note .label {
  margin-bottom: 1em;
}

.work-link {
  margin-top: 1.4em;
}

.work .plate-b {
  grid-column: 6 / span 7;
}

.work .plate-c {
  grid-column: 1 / span 5;
}

.work .plate-d {
  grid-column: 7 / span 3;
}

.work .plate-e {
  grid-column: 10 / span 3;
}

.work .plate-f {
  grid-column: 1 / span 3;
}

.work .plate-g {
  grid-column: 5 / span 4;
  margin-top: clamp(40px, 9vw, 140px);
}

/* ---------- Credit sheets: all facts use this one format ---------- */

.sheet {
  display: grid;
  grid-template-columns: minmax(7.5em, max-content) minmax(0, 1fr);
  column-gap: var(--gutter);
  row-gap: 2px;
}

.sheet dt {
  color: var(--mute);
}

.sheet .gap {
  grid-column: 1 / -1;
  height: 1em;
}

.practice,
.studio,
.contact {
  row-gap: 40px;
  align-items: start;
}

.section-label {
  grid-column: 1 / span 3;
  color: var(--mute);
}

.section-body {
  grid-column: 4 / span 5;
}

.section-side {
  grid-column: 10 / span 3;
}

.section-body .statement + .prose,
.section-body .statement + .sheet {
  margin-top: 28px;
}

.section-body .prose + .sheet,
.section-body .sheet + .prose {
  margin-top: 28px;
}

/* ---------- Footer ---------- */

.site-footer {
  padding-block: 14px;
  border-top: 1px solid var(--rule);
  color: var(--mute);
  row-gap: 6px;
}

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

.site-footer a:hover {
  color: var(--mute);
}

.site-footer > :nth-child(1) {
  grid-column: 1 / span 3;
}

.site-footer > :nth-child(2) {
  grid-column: 4 / span 3;
}

.site-footer > :nth-child(3) {
  grid-column: 7 / span 3;
}

.site-footer > :nth-child(4) {
  grid-column: 10 / span 3;
}

/* ---------- Direction guide ---------- */

.guide section {
  row-gap: 28px;
  align-items: start;
  padding-bottom: clamp(72px, 10vw, 140px);
}

.guide .guide-intro {
  padding-top: clamp(8px, 2vw, 28px);
}

.guide .section-body.wide {
  grid-column: 4 / span 9;
}

/* The intro has the statement, so its body is one column wider. */
.guide .guide-intro .section-body {
  grid-column: 4 / span 6;
}

.guide .rules a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rules {
  counter-reset: rule;
  display: grid;
  row-gap: 10px;
  max-width: 44em;
}

.rules li {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
}

.rules li::before {
  counter-increment: rule;
  content: counter(rule, decimal-leading-zero);
  color: var(--mute);
}

.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 28px;
  max-width: 60em;
}

.pair h3 {
  color: var(--mute);
  margin-bottom: 8px;
}

.pair li + li {
  margin-top: 4px;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 28px var(--gutter);
}

.swatch {
  width: 132px;
}

.swatch i {
  display: block;
  aspect-ratio: 4 / 5;
  margin-bottom: 8px;
  border: 1px solid var(--rule);
}

.type-specimen {
  display: grid;
  row-gap: 22px;
  max-width: 44em;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  max-width: 420px;
}

.social-grid > * {
  aspect-ratio: 4 / 5;
  background: var(--slot);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  color: var(--mute);
  font-size: 11px;
}

.social-grid > .has-image {
  padding: 0;
}

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

.social-grid > .text-post {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  align-items: flex-start;
}

/* ---------- Project page ----------
   Order: the idea as the statement, the facts, the lead plate,
   three notes, the plates, the credits, the way back. */

.project-opening {
  padding-top: clamp(8px, 2vw, 28px);
  padding-bottom: clamp(48px, 6vw, 96px);
  row-gap: 40px;
  align-items: start;
}

.project-opening .statement {
  grid-column: 1 / span 7;
}

.project-opening .sheet,
.project-opening .aside {
  grid-column: 9 / span 4;
}

.project-lead .plate {
  grid-column: 4 / span 9;
}

.notes {
  row-gap: 28px;
  align-items: start;
}

.note {
  grid-column-end: span 3;
}

.note h3 {
  color: var(--mute);
  margin-bottom: 8px;
}

.project-plates {
  row-gap: clamp(72px, 11vw, 168px);
  align-items: start;
}

.project-credits,
.project-next {
  row-gap: 40px;
  align-items: start;
}

/* A link that goes on to another page has an underline. */
.more {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A type plate: a large specimen at the top, its label at the bottom. */
.slot--type {
  background: var(--paper);
  border: 1px solid var(--rule);
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.specimen {
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.035em;
}

/* Placement of a plate on the 12 columns of a project page:
   "from-N" is the first column, "span-N" is the number of columns. */
.from-1 { grid-column-start: 1; }
.from-2 { grid-column-start: 2; }
.from-3 { grid-column-start: 3; }
.from-4 { grid-column-start: 4; }
.from-5 { grid-column-start: 5; }
.from-6 { grid-column-start: 6; }
.from-7 { grid-column-start: 7; }
.from-8 { grid-column-start: 8; }
.from-9 { grid-column-start: 9; }
.from-10 { grid-column-start: 10; }

.span-3 { grid-column-end: span 3; }
.span-4 { grid-column-end: span 4; }
.span-5 { grid-column-end: span 5; }
.span-6 { grid-column-end: span 6; }
.span-7 { grid-column-end: span 7; }
.span-8 { grid-column-end: span 8; }
.span-9 { grid-column-end: span 9; }
.span-12 { grid-column-end: span 12; }

/* "drop" moves a plate down, so that a row of plates does not make one line. */
.drop {
  margin-top: clamp(40px, 9vw, 140px);
}

/* ---------- Small screens ---------- */

@media (max-width: 820px) {
  :root {
    --header: 64px;
  }

  .project-opening .statement,
  .project-opening .sheet,
  .project-opening .aside,
  .project-lead .plate,
  .notes > .note,
  .project-plates > .plate {
    grid-column: 1 / -1;
  }

  .project-plates {
    row-gap: 56px;
  }

  .project-credits,
  .project-next {
    row-gap: 16px;
  }

  .drop {
    margin-top: 0;
  }

  .site-name {
    grid-column: 1 / span 7;
  }

  .site-what,
  .site-where {
    display: none;
  }

  .site-nav {
    grid-column: 8 / span 5;
    align-items: flex-end;
  }

  .opening .plate,
  .opening-text,
  .work-note,
  .work .plate-b,
  .section-label,
  .section-body,
  .section-side,
  .guide .section-body.wide,
  .guide .guide-intro .section-body {
    grid-column: 1 / -1;
  }

  .opening {
    row-gap: 36px;
  }

  .opening-text {
    max-width: 30em;
  }

  .work .plate-c {
    grid-column: 1 / -1;
  }

  .work .plate-d {
    grid-column: 1 / span 7;
  }

  .work .plate-e {
    grid-column: 6 / span 7;
  }

  .work .plate-f {
    grid-column: 1 / span 7;
  }

  .work .plate-g {
    grid-column: 4 / span 9;
    margin-top: 0;
  }

  .practice,
  .studio,
  .contact,
  .guide section {
    row-gap: 16px;
  }

  .site-footer > * {
    grid-column: 1 / -1 !important;
  }

  .pair {
    grid-template-columns: 1fr;
  }

  .swatch {
    width: calc(50% - var(--gutter) / 2);
  }
}