@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: italic; font-display: swap; src: url("fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/jost-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/jost-latin-400-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --ink: #0b0a08;
  --ink-2: #13100c;
  --ivory: #efe8da;
  --mute: #a99f8d;
  --brass: #c8a76a;
  --brass-light: #e6cf9f;
  --line: rgba(200, 167, 106, .28);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 300;
  font-variant-numeric: lining-nums;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--brass-light); outline-offset: 4px; }
img, svg { display: block; }

.label {
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--brass);
}

/* Header */
.top {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem var(--gutter);
}

.top img { width: 1.75rem; height: auto; }

.lang { display: flex; gap: 1.5rem; font-size: .75rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; }
.lang a { padding: .25rem 0; color: var(--mute); border-bottom: 1px solid transparent; transition: color .3s; }
.lang a:hover { color: var(--ivory); }
.lang a[aria-current] { color: var(--ivory); border-bottom-color: var(--brass); }

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem var(--gutter) 5rem;
  text-align: center;
  overflow: hidden;
  background: var(--ink) url("grain.jpg") center / cover;
}

.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2s; }
.hero canvas.on { opacity: 1; }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 65% at 50% 46%, rgba(11, 10, 8, .5), rgba(11, 10, 8, .66) 70%, rgba(11, 10, 8, .9)),
    linear-gradient(to bottom, transparent 60%, var(--ink));
}

.hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.hero .mark { width: clamp(4.5rem, 12vh, 7rem); height: auto; overflow: visible; }
.hero .wordmark { width: clamp(9rem, 22vh, 12.5rem); height: auto; margin: 1.5rem 0 clamp(2.5rem, 7vh, 4.5rem); }
.hero .label { margin-bottom: 1.25rem; }

h1 {
  max-width: 13em;
  font-family: var(--serif);
  font-size: clamp(2.75rem, 7.5vw, 5.75rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-wrap: balance;
}

h1 em { color: var(--brass-light); }

.cue {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 4rem;
  background: var(--line);
  overflow: hidden;
}

.cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brass-light);
  transform: translateY(-100%);
}

/* Manifesto */
.manifesto {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(7rem, 22vh, 13rem) var(--gutter);
}

.manifesto p {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 300;
  line-height: 1.18;
}

/* Principles */
.principles {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(6rem, 18vh, 11rem);
}

.principles > .label { margin-bottom: 2.5rem; }

.principles ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding: 0;
  list-style: none;
}

.principles li { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.principles .num { display: block; margin-bottom: 2.5rem; font-family: var(--serif); font-size: 1.125rem; font-style: italic; color: var(--brass); }
.principles h2 { margin-bottom: .75rem; font-family: var(--serif); font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 300; line-height: 1.15; }
.principles p { color: var(--mute); }

/* Wallinvent: a wall that opens as you scroll */
.wall-stage { position: relative; background: var(--ink-2); }

.wall-sticky {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
}

.wall-content {
  width: 100%;
  max-width: 46rem;
  padding: 5rem var(--gutter);
  text-align: center;
}

.wall-content .label { margin-bottom: 1.5rem; }

.wall-content h2 {
  margin-bottom: 1.25rem;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 300;
  line-height: 1.08;
}

.wall-content .lead { color: var(--mute); }

.facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 2rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ivory);
}

.awards {
  margin-top: 1.25rem;
  font-family: var(--serif);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--brass-light);
}

.more {
  display: inline-block;
  margin-top: 2.25rem;
  padding-bottom: .375rem;
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--brass);
  transition: color .3s, border-color .3s;
}

.more:hover { color: var(--brass-light); border-color: var(--brass-light); }

.panels { display: none; }
.wall-name { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .js .wall-stage { height: 280vh; height: 280svh; }
  .js .wall-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; }

  .js .panels {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    pointer-events: none;
  }

  .js .panels span {
    background-color: #2a1c12;
    background-image:
      linear-gradient(to right, rgba(255, 225, 170, .1), transparent 3%, transparent 94%, rgba(0, 0, 0, .55)),
      url("grain.jpg");
    background-size: 100% 100%, 600% 100%;
    box-shadow: 1px 0 0 rgba(0, 0, 0, .7), inset 1px 0 0 rgba(255, 225, 170, .06);
    will-change: transform;
  }

  .js .panels span:nth-child(1) { background-position: 0 0, 0% 0; }
  .js .panels span:nth-child(2) { background-position: 0 0, 20% 0; }
  .js .panels span:nth-child(3) { background-position: 0 0, 40% 0; }
  .js .panels span:nth-child(4) { background-position: 0 0, 60% 0; }
  .js .panels span:nth-child(5) { background-position: 0 0, 80% 0; }
  .js .panels span:nth-child(6) { background-position: 0 0, 100% 0; }

  .js .wall-name {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: clamp(3rem, 11vw, 9rem);
    font-weight: 300;
    letter-spacing: .02em;
    color: var(--ivory);
    text-shadow: 0 2px 40px rgba(0, 0, 0, .7);
    pointer-events: none;
  }

  /* Entrance and reveal */
  .js .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .principles li:nth-child(2) { transition-delay: .15s; }
  .js .principles li:nth-child(3) { transition-delay: .3s; }

  .js .mark path { animation: assemble 1.8s var(--ease) .2s both; }
  .js .mark path:nth-child(1) { --from: translateX(-2.25rem); }
  .js .mark path:nth-child(2) { --from: translateX(2.25rem); }
  .js .mark path:nth-child(3) { --from: translateY(2.25rem); animation-delay: .45s; }
  .js .hero .wordmark, .js .hero .label, .js h1 { animation: rise 1.6s var(--ease) both; }
  .js .hero .wordmark { animation-delay: 1s; }
  .js .hero .label { animation-delay: 1.25s; }
  .js h1 { animation-delay: 1.4s; }

  .cue::after { animation: fall 3s var(--ease) infinite; }
}

@keyframes assemble { from { opacity: 0; transform: var(--from); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
@keyframes fall { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

/* Contact */
.contact {
  padding: clamp(7rem, 24vh, 14rem) var(--gutter);
  text-align: center;
}

.contact .label { margin-bottom: 2rem; }

.contact h2 {
  margin-bottom: 1.5rem;
  font-family: var(--serif);
  font-size: clamp(3.25rem, 9vw, 6.5rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1;
}

.email {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 300;
  color: var(--brass-light);
  background: linear-gradient(var(--brass), var(--brass)) left bottom / 100% 1px no-repeat;
  padding-bottom: .125rem;
  transition: background-size .6s var(--ease);
}

.email:hover { background-size: 0 1px; background-position: right bottom; }

/* Footer */
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem var(--gutter);
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--mute);
}

footer img { width: 9rem; height: auto; }

@media (max-width: 760px) {
  .principles ol { grid-template-columns: 1fr; }
  .principles .num { margin-bottom: 1rem; }
  .wall-content { padding-block: 4.5rem 2rem; }
  .wall-content .lead, .awards { font-size: 1rem; }
  .facts { flex-direction: column; align-items: center; margin-top: 1.25rem; }
  .awards { margin-top: 1rem; }
  .more { margin-top: 1.5rem; }
}