/* RESET */

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

/* COLORS */

:root {
  --bg: #f6f1ea;
  --black: #111111;
  --accent: #ff3c00;
  --green: #3fa35c;
  --light: #f5f5f5;
}

/* FONTS */

@font-face {
  font-family: "Neude";
  src: url("./assets/fonts/Neude.ttf") format("truetype");
}

/* BODY */

body {
  background: var(--bg);
  color: var(--black);
  font-family: "futura-pt", sans-serif;
  line-height: 1.6;
}

.body {
  max-width: 900px;
  margin: 0 auto;
}

.body-example {
  margin-top: 40px;
}

.body p {
  font-family: "Neude";
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

/* GLOBAL LAYOUT */

section {
  padding: 120px 12%;
}

h2 {
  font-family: "Neude";
  font-size: 48px;
  margin-bottom: 40px;
  letter-spacing: 2px;
  color: var(--accent);
}

footer {
  text-align: center;
  padding: 60px;
  font-size: 14px;
  color: #888;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 100px;
}

/* HERO */

.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: linear-gradient(135deg, #f6f1ea, #eae3d8);
}

.hero-text {
  font-family: "Neude";
  font-size: 18vw;
  letter-spacing: 1vw;
  transition: transform 0.2s linear;
  will-change: transform;
}

.hero-sub {
  margin-top: 20px;
  font-size: 20px;
  opacity: 0.7;
}

/* STATEMENT */

.statement {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(120deg, #000, #111, #000);
  color: white;
  text-align: center;
}

.statement-text {
  font-family: "Neude";
  font-size: 10vw;
  letter-spacing: 1vw;
  line-height: 1.1;
  transition: all 0.2s linear;
}

/* ORIGIN + CONTEXT */

.origin,
.context {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.origin p,
.context p {
  font-size: 20px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.lead {
  font-size: 30px;
  font-family: "Neude";
  letter-spacing: 2px;
  margin-bottom: 30px;
}

.context-text {
  position: relative;
  padding-left: 40px;
  margin-top: 40px;
  text-align: left;
}

.context-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--accent);
}

/* ORIGIN DESIGNER */

.origin-layout{
display:grid;
grid-template-columns:2fr 1fr;
gap:80px;
align-items:center;
margin-top:40px;
}


.origin-text{
text-align:left;
}

.origin-text p{
font-size:20px;
line-height:1.7;
margin-bottom:20px;
}

.origin-designer{
text-align:center;
}

.origin-designer img{
width:100%;
max-width:260px;
border-radius:4px;
filter:grayscale(100%);
}

.designer-caption{
font-size:14px;
margin-top:12px;
opacity:0.7;
letter-spacing:1px;
}

/* DISPLAY WORDS */

.display {
  background: black;
  color: white;
  text-align: center;
}

.word {
  display: inline-block;
  font-family: "Neude";
  font-size: 12vw;
  margin: 80px 0;
  letter-spacing: 0.5vw;
  transition: 0.4s;
}

.word span {
  display: inline-block;
  transition: transform 0.4s ease;
}

.word:hover {
  color: var(--accent);
  text-shadow:
    0 0 20px rgba(255, 60, 0, 0.6),
    0 0 40px rgba(255, 60, 0, 0.3);
  transform: scale(1.1) rotate(-2deg);
}

/* SCALE */

.scale-container {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.scale-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.scale-label {
  font-family: "futura-pt";
  font-size: 14px;
  letter-spacing: 2px;
  opacity: 0.6;
}

.scale {
  text-align: center;
}

.scale-word {
  font-family: "Neude";
  margin: 40px 0;
  transition:
    transform 0.2s ease,
    letter-spacing 0.2s ease,
    color 0.2s ease;
  will-change: transform;
}

.small {
  font-size: 40px;
}
.medium {
  font-size: 80px;
}
.large {
  font-size: 140px;
}
.huge {
  font-size: 220px;
}

/* NUMBERS */

.numbers {
  background: black;
  color: white;
  text-align: center;
}

.numbers-container {
  display: flex;
  justify-content: center;
  gap: 120px;
  margin-top: 80px;
}

.number {
  font-family: "Neude";
  font-size: 20vw;
  transition: transform 0.4s;
  cursor: pointer;
}

.number:hover {
  transform: scale(1.2) rotate(5deg);
  color: var(--accent);
}

/* LETTER ANALYSE */

.letter-analysis {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.analysis-intro {
  max-width: 900px;
  margin: 0 auto 80px auto;
  font-size: 20px;
  line-height: 1.7;
}

.letters {
  display: grid;
  grid-template-columns: repeat(3, 320px);
  justify-content: center;
  gap: 120px;
  margin-top: 60px;
}

/* letter */

.letter {
  position: relative;
  padding-top: 160px;
  text-align: center;
}

/* grid */

.letter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
}

.letter span {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translate(-50%, -50%);

  font-family: "Neude";
  font-size: 110px;
}

.letter p {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.7;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* NEUDE TEXT WALL */

.neude-text-wall {
  height: 100vh;
  overflow: hidden;
  background: #eae3d8;
  display: flex;
  align-items: center;
  position: relative;
}

.text-wall {
  position: absolute;
  left: -20vw;
  width: 140vw;
  font-family: "Neude";
  font-size: 2vw;
  line-height: 1.3;
  letter-spacing: 0.1em;
  transform: rotate(-12deg);
}

.text-wall p {
  margin: 0;
  margin-bottom: 3vw;
}

/* CHARACTER GRID */

.characters {
  background: var(--light);
  text-align: center;
}

.char-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 20px;
  font-family: "Neude";
  font-size: 60px;
  margin-top: 60px;
}

.char {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 10px;
  transition: all 0.25s ease;
}

.char:hover {
  transform: scale(1.4);
  color: var(--accent);
  background: rgba(0, 0, 0, 0.05);
}

/* FULLSCREEN LETTER VIEWER */

#letterViewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Neude";
  font-size: 40vw;
  opacity: 0;
  pointer-events: none;
  transition: 0.4s;
  z-index: 999;
}

#letterViewer.active {
  opacity: 1;
  pointer-events: auto;
}

/* ORIGIN IMAGE */

.origin-image {
  padding: 0;
  background: black;
  color: white;
}

.origin-image-container {
  position: relative;
  width: 100%;
}

.origin-image img {
  width: 100%;
  height: 90vh;
  object-fit: cover;
  display: block;
  filter: contrast(110%) brightness(90%);
}

.origin-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: 600px;
  padding: 60px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
}

.origin-caption h2 {
  color: white;
  margin-bottom: 20px;
}

.origin-caption p {
  font-size: 18px;
  line-height: 1.6;
  opacity: 0.9;
  margin-bottom: 10px;
}

.origin-location {
  font-size: 14px;
  letter-spacing: 1px;
  opacity: 0.7;
  margin-bottom: 10px;
}

/* POSTERS */

.poster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 80px;
}

.poster {
  position: relative;
  aspect-ratio: 2 / 3;
  padding: 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: 0.4s;
}

.poster:hover {
  transform: scale(1.02) rotate(-1deg);
}

/* POSTER 1 */

.poster-one {
  background: var(--accent);
  color: white;
}

.poster-one h3 {
  font-family: "Neude";
  font-size: 5vw;
  line-height: 0.9;
}

.poster-one p {
  font-size: 16px;
  letter-spacing: 3px;
  margin-top: 10px;
}

/* POSTER 2 */

.poster-two img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(110%) brightness(70%);
}

.poster-two .poster-text {
  position: relative;
  font-family: "Neude";
  font-size: 4vw;
  line-height: 0.9;
  color: white;
}

/* POSTER 3 */

.poster-three {
  background: black;
  color: white;
}

.poster-three h3 {
  font-family: "Neude";
  font-size: 7vw;
  line-height: 1;
}

.poster-three p {
  font-size: 16px;
  letter-spacing: 4px;
  margin-top: 10px;
}

/* WHY SECTION */

.why {
  max-width: 900px;
  margin: 0 auto;
}

.why p {
  font-size: 24px;
  line-height: 1.7;
  margin-bottom: 30px;
}