:root {
  color-scheme: light;
  --paper: #f7f5ef;
  --ink: #101010;
  --muted: #6f6b63;
  --shadow: rgba(24, 21, 16, 0.18);
  --index-background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.92), transparent 34%),
    radial-gradient(circle at 88% 76%, rgba(223,218,206,.55), transparent 32%),
    #f7f5ef;
  --composition-background:
    radial-gradient(circle at 20% 12%, rgba(255,255,255,.98), transparent 28%),
    radial-gradient(circle at 84% 84%, rgba(218,213,200,.4), transparent 30%),
    linear-gradient(112deg, rgba(255,255,255,.28), transparent 35%),
    #f7f5ef;
  --panel-background: #ffffff;
  --hairline: rgba(16,16,16,.16);
  --nav-background: rgba(247,245,239,.86);
  --texture-line: rgba(36,31,23,.035);
  --browser-shadow: 0 36px 100px rgba(16,16,16,.18);
  --chrome-dot: #c9c6bf;
  --button-fill: #101010;
  --button-text: #ffffff;
  --letter-fill: #101010;
  --letter-stroke: #f7f5ef;
  --letter-shadow:
    0 0 0.018em rgba(16,16,16,.9),
    0 0.018em 0.035em rgba(16,16,16,.22);
}

:root[data-visit-theme="night"] {
  color-scheme: dark;
  --paper: #000000;
  --ink: #f7f5ef;
  --muted: #b9b5ad;
  --shadow: rgba(255,255,255,.08);
  --index-background: #000000;
  --composition-background: #000000;
  --panel-background: #080808;
  --hairline: rgba(255,255,255,.18);
  --nav-background: rgba(0,0,0,.88);
  --texture-line: rgba(255,255,255,.035);
  --browser-shadow: 0 36px 100px rgba(0,0,0,.58);
  --chrome-dot: #5d5d5d;
  --button-fill: #f7f5ef;
  --button-text: #000000;
  --letter-fill: #ffffff;
  --letter-stroke: #101010;
  --letter-shadow:
    0 0 0.022em rgba(255,255,255,.82),
    0 0.018em 0.04em rgba(255,255,255,.2);
}

* { box-sizing: border-box; }

html {
  min-width: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

body { margin: 0; }
button, a { font: inherit; }

/* Index */
.mockup-index {
  min-height: 100vh;
  padding: clamp(22px, 5vw, 72px);
  background: var(--index-background);
}

.mockup-index__layout {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(420px, 1.22fr);
  gap: clamp(30px, 6vw, 88px);
  width: min(1420px, 100%);
  min-height: calc(100vh - clamp(44px, 10vw, 144px));
  margin: 0 auto;
  align-items: center;
}

.mockup-index__eyebrow {
  margin: 0 0 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.mockup-index h1 {
  margin: 0;
  font-size: clamp(4rem, 8.8vw, 10rem);
  font-weight: 400;
  line-height: .76;
  letter-spacing: -.075em;
}

.mockup-index__description {
  max-width: 38rem;
  margin: 38px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.4vw, 1.32rem);
  line-height: 1.5;
}

.mockup-index__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  margin-top: 34px;
  align-items: center;
}

.mockup-button {
  display: inline-flex;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  background: var(--button-fill);
  color: var(--button-text);
  align-items: center;
  text-decoration: none;
}

.mockup-link {
  color: inherit;
  text-underline-offset: 4px;
}

.mockup-browser {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: var(--panel-background);
  box-shadow: var(--browser-shadow);
}

.mockup-browser__bar {
  display: flex;
  height: 42px;
  padding: 0 14px;
  border-bottom: 1px solid var(--hairline);
  gap: 7px;
  align-items: center;
}

.mockup-browser__bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--chrome-dot);
}

.mockup-browser__bar strong {
  margin-left: 9px;
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mockup-browser iframe {
  display: block;
  width: 100%;
  height: min(76vh, 860px);
  border: 0;
  background: var(--paper);
}

/* Composition */
.composition-page {
  min-height: 100vh;
  overflow: hidden;
  background: var(--composition-background);
}

.composition-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: .18;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, var(--texture-line) 0, var(--texture-line) 1px, transparent 1px, transparent 4px);
}

.composition-nav {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  width: 100%;
  min-height: 48px;
  padding: 0 clamp(14px, 2.6vw, 34px);
  border-bottom: 1px solid var(--hairline);
  background: var(--nav-background);
  backdrop-filter: blur(14px);
  align-items: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.composition-nav a { color: inherit; text-decoration: none; }

.composition {
  position: relative;
  z-index: 1;
  width: min(1680px, 100vw);
  height: calc(100dvh - 48px);
  min-height: 700px;
  margin: 48px auto 0;
  overflow: hidden;
  isolation: isolate;
}

.composition-word,
.composition-images {
  position: absolute;
  inset: 0;
}

.composition-letter {
  position: absolute;
  z-index: var(--lz);
  left: var(--dx);
  top: var(--dy);
  color: var(--letter-fill);
  font-size: clamp(9rem, 17.5vw, 20rem);
  font-weight: 900;
  line-height: .7;
  letter-spacing: -.11em;
  -webkit-text-stroke: clamp(4px, .34vw, 6px) var(--letter-stroke);
  text-stroke: clamp(4px, .34vw, 6px) var(--letter-stroke);
  paint-order: stroke fill;
  text-shadow: var(--letter-shadow);
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.composition-letter.is-outline,
.composition-letter.is-emphasis {
  color: var(--letter-fill);
}

.composition-piece {
  --x: 0%;
  --y: 0%;
  --w: 18%;
  --r: 0deg;
  --float-x: 0px;
  --float-y: 5px;
  --duration: 7s;
  --delay: 0s;
  position: absolute;
  z-index: var(--z, 30);
  left: var(--x);
  top: var(--y);
  width: var(--w);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  animation: composition-drift var(--duration) ease-in-out var(--delay) infinite alternate;
  filter: drop-shadow(0 18px 23px var(--shadow));
  transform-origin: center;
}

.composition-piece:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 7px;
}

.composition-piece__surface {
  position: relative;
  display: block;
  transition: transform 190ms ease, filter 190ms ease;
  transform-origin: center;
}

.composition-piece img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.composition-piece[data-effect="lift"]:hover .composition-piece__surface,
.composition-piece[data-effect="lift"]:focus-visible .composition-piece__surface {
  transform: translateY(-12px) scale(1.025);
}

.composition-piece[data-effect="zoom"]:hover .composition-piece__surface,
.composition-piece[data-effect="zoom"]:focus-visible .composition-piece__surface {
  transform: scale(1.085);
}

.composition-piece[data-effect="tilt"]:hover .composition-piece__surface,
.composition-piece[data-effect="tilt"]:focus-visible .composition-piece__surface {
  transform: perspective(900px) rotateX(-5deg) rotateY(8deg) scale(1.035);
}

.composition-piece[data-effect="glow"]:hover .composition-piece__surface,
.composition-piece[data-effect="glow"]:focus-visible .composition-piece__surface {
  filter: drop-shadow(0 0 25px rgba(16,16,16,.34));
  transform: scale(1.03);
}

.composition-piece.is-clicking .composition-piece__surface {
  animation: composition-click 320ms cubic-bezier(.2,1.2,.3,1);
}

.composition-note,
.composition-signature {
  position: absolute;
  z-index: 70;
  margin: 0;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .13em;
  text-transform: uppercase;
  pointer-events: none;
}

.composition-note--top { top: 3.5%; left: 2.2%; }
.composition-note--bottom { right: 2.2%; bottom: 3.5%; text-align: right; }
.composition-signature { left: 2.2%; bottom: 3.5%; }

.composition-lightbox[hidden] { display: none; }
.composition-lightbox {
  position: fixed;
  z-index: 30000;
  inset: 0;
  display: grid;
  padding: clamp(18px,4vw,48px);
  background: rgba(0,0,0,.93);
  place-items: center;
}

.composition-lightbox img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 48px);
  max-height: calc(100dvh - 48px);
  object-fit: contain;
  transform: rotate(var(--full-rotation,0deg)) scale(.88);
  opacity: 0;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease;
}

.composition-lightbox.is-open img {
  transform: rotate(var(--full-rotation,0deg)) scale(1);
  opacity: 1;
}

.composition-lightbox button {
  position: absolute;
  z-index: 1;
  top: max(14px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: rgba(0,0,0,.4);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  place-items: center;
}

.is-embedded .composition-nav { display: none; }
.is-embedded .composition { margin-top: 0; height: 100dvh; }

@keyframes composition-drift {
  from { transform: translate3d(calc(-1 * var(--float-x)), calc(-1 * var(--float-y)), 0) rotate(var(--r)); }
  to { transform: translate3d(var(--float-x), var(--float-y), 0) rotate(var(--r)); }
}

@keyframes composition-click {
  0% { transform: scale(1); }
  48% { transform: scale(1.13) rotate(-1.3deg); }
  100% { transform: scale(1); }
}

@media (max-width: 900px) {
  .mockup-index { padding: 22px; }
  .mockup-index__layout { grid-template-columns: 1fr; align-items: start; }
  .mockup-browser iframe { height: 720px; }
}

@media (min-width: 701px) and (max-width: 900px) {
  .composition-letter--o { left: 23% !important; }
  .composition-letter--g { left: 76% !important; }
}

@media (max-width: 700px) {
  .composition-page { overflow-x: hidden; overflow-y: auto; }
  .composition-nav { grid-template-columns: 1fr auto 1fr; }
  .composition {
    width: 100%;
    height: 3000px;
    min-height: 3000px;
    overflow: hidden;
  }

  .composition-letter {
    left: var(--mx);
    top: var(--my);
    font-size: clamp(10rem, 47vw, 14rem);
    letter-spacing: -.1em;
  }

  .composition-piece {
    left: var(--mx);
    top: var(--my);
    width: var(--mw);
  }

  .composition-note--top { top: 1.3%; left: 5%; }
  .composition-note--bottom { right: 5%; bottom: 1.3%; }
  .composition-signature { left: 5%; bottom: 1.3%; }

  .is-embedded .composition { height: 3000px; }
}

@media (max-width: 430px) {
  .composition { height: 2850px; min-height: 2850px; }
  .composition-letter { font-size: 50vw; }
  .composition-note,
  .composition-signature { font-size: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .composition-piece { animation: none; transform: rotate(var(--r)); }
  .composition-piece__surface,
  .composition-lightbox img { transition: none; }
}