:root {
  --cream: #fbf8f0;
  --ink: #1e3325;
  --ink-soft: #4a5f4e;
  --rule: rgba(30, 51, 37, 0.18);
  --work-wash: rgba(121, 180, 140, 0.13);
  --p: 0;

  color-scheme: only light;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  color: var(--ink);
  background: var(--cream);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: var(--ink);
  background: rgba(121, 180, 140, 0.34);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.scene,
.scene-fg,
.finish {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.scene {
  z-index: -1;
}

.scene-fg {
  z-index: 2;
}

/* Keep the texture above both peak copies; otherwise the front copy's clip line becomes visible. */
.finish {
  z-index: 4;
}

.scene svg,
.scene-fg svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

svg.portrait {
  display: none;
}

.grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.35 0 0 0 0 0 0.27 0 0 0 0 0 0.17 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 100% at 50% 38%,
    transparent 58%,
    rgba(31, 51, 37, 0.14) 100%
  );
}

.glint {
  animation: glint-drift 42s ease-in-out infinite alternate;
}

@keyframes glint-drift {
  to {
    transform: translateX(20px);
  }
}

.cloud {
  animation: cloud-drift 120s ease-in-out infinite alternate;
}

@keyframes cloud-drift {
  to {
    transform: translateX(-52px);
  }
}

.wordmark {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(3.5rem, 12vw, 8rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.01em;
}

.tagline {
  margin-top: 0.9rem;
  color: var(--ink);
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  font-weight: 500;
}

.eyebrow {
  margin: 0.4rem 0 1.4rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.screen {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 24vh 1.5rem 0;
}

.hero {
  position: relative;
  z-index: 1;
  margin-left: 30vw;
}

.hero .tagline {
  margin-left: 8rem;
}

.cue {
  position: absolute;
  bottom: 2.4rem;
  left: 50%;
  z-index: 1;
  color: var(--ink-soft);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: calc(0.75 - var(--p));
  transform: translateX(-50%);
}

.works {
  position: relative;
  z-index: 5;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--cream);
}

.works-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 62rem;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 4.5rem 2.5rem 4rem;
}

.works h2 {
  margin-bottom: 2.6rem;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.flagship-row {
  margin-bottom: 3.5rem;
}

.oss-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
  margin-top: 0.85rem;
}

.works-foot {
  margin-top: auto;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(30, 51, 37, 0.14);
}

.tile {
  position: relative;
  display: block;
  min-height: 7rem;
  padding: 1.25rem 2.75rem 1.4rem 0;
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(90deg, var(--work-wash), transparent 72%)
    no-repeat;
  background-size: 0 100%;
  border-top: 1px solid var(--rule);
  transition:
    background-size 0.36s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s ease;
}

.tile--flagship {
  display: grid;
  grid-template-columns: minmax(12rem, 0.72fr) 1fr;
  align-items: baseline;
  min-height: auto;
  padding: 1.7rem 3rem 1.85rem 0;
  border-bottom: 1px solid var(--rule);
}

:where(.oss-grid .tile:nth-last-child(-n + 2)) {
  border-bottom: 1px solid var(--rule);
}

.tile-name {
  display: inline-flex;
  gap: 0.35em;
  align-items: baseline;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2;
}

.tile--flagship .tile-name {
  font-size: 1.4rem;
}

.tile-desc {
  display: block;
  margin-top: 0.4rem;
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.45;
}

.tile--flagship .tile-desc {
  margin-top: 0;
  max-width: 42ch;
}

.tile-arrow {
  display: inline-block;
  color: var(--ink-soft);
  font-size: 0.78em;
  transition:
    color 0.2s ease,
    transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

.corner {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
}

.tile:focus-visible,
.corner:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (hover: hover) {
  .tile:hover {
    background-size: 100% 100%;
    border-color: rgba(30, 51, 37, 0.28);
  }

  .tile:hover .tile-arrow {
    color: var(--ink);
    transform: translate(2px, -2px);
  }

  .corner:hover {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
  }
}

@media (max-width: 720px) {
  svg.landscape {
    display: none;
  }

  svg.portrait {
    display: block;
  }

  .hero {
    position: absolute;

    /* Keep the wordmark's line box on the portrait art's 545/1280 peak crossing line across browser chrome heights. */
    top: calc(50vh - max(13.1944vw, 7.4219vh) - max(3.22rem, 11.04vw));
    top: calc(50svh - max(13.1944vw, 7.4219svh) - max(3.22rem, 11.04vw));
    left: 26%;
    margin-left: 0;

    /* No stacking context here: the tagline must escape past the front peak copy. */
    z-index: auto;
  }

  .hero .tagline {
    margin-left: 3.5rem;

    /* The slope spans nearly the full width at this height, so unlike the wordmark
       the tagline rides above the front peak copy instead of sinking behind it.
       Mobile Safari otherwise composites the fixed artwork above this text. */
    position: relative;
    z-index: 3;
    transform: translateZ(0);
  }

  .works-inner {
    padding: 3rem 1.4rem;
  }

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

  .tile,
  .tile--flagship {
    display: block;
    min-height: auto;
    padding: 1.2rem 2.5rem 1.3rem 0;
    border-bottom: 0;
  }

  .tile--flagship,
  .oss-grid .tile:last-child {
    border-bottom: 1px solid var(--rule);
  }

  .tile--flagship .tile-desc {
    margin-top: 0.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glint,
  .cloud {
    animation: none;
  }

  .tile {
    transition: none;
  }

  .tile-arrow {
    transition: none;
  }
}