/* ————————————————————————————————
   COSSY — one set, every hour
   Fraunces (display/body) + Archivo (labels)
———————————————————————————————— */

:root {
  /* day-arc tones — body background morphs between these */
  --dawn:  #f6f1e7;
  --noon:  #eef0e4;
  --dusk:  #f0e2d8;
  --night: #191b18;

  --bg: var(--dawn);
  --ink: #1c211c;
  --pine: #2f4b3a;
  --pistachio: #cfe0b8;
  --blush: #e6c9b8;
  --paper: #fbf8f1;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Archivo", Helvetica, sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  font-weight: 340;
  font-optical-sizing: auto;
  color: var(--ink);
  background: var(--bg);
  transition: background 1.1s var(--ease-out), color 1.1s var(--ease-out);
  overflow-x: hidden;
  cursor: none;
}
@media (hover: none), (max-width: 760px) { body { cursor: auto; } }

body.is-night { color: #efe9dc; }

::selection { background: var(--pine); color: var(--paper); }

img { display: block; width: 100%; height: 100%; object-fit: cover; }

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

em { font-style: italic; font-weight: 380; }

/* ————— grain overlay ————— */
body::after {
  content: "";
  position: fixed; inset: -50%;
  pointer-events: none;
  z-index: 200;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 9s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 20% { transform: translate(3%, -4%); }
  40% { transform: translate(-3%, 3%); } 60% { transform: translate(4%, 2%); }
  80% { transform: translate(-2%, -3%); }
}

/* ————— cursor ————— */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--pine);
  pointer-events: none;
  z-index: 300;
  transform: translate(-50%, -50%);
  transition: width .35s var(--ease-out), height .35s var(--ease-out),
              opacity .3s, background .3s;
  mix-blend-mode: multiply;
}
body.is-night .cursor { background: var(--pistachio); mix-blend-mode: screen; }
.cursor.is-big { width: 56px; height: 56px; opacity: .45; }
@media (hover: none), (max-width: 760px) { .cursor { display: none; } }

/* ————— loader ————— */
.loader {
  position: fixed; inset: 0;
  background: var(--pine);
  color: var(--paper);
  z-index: 400;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1rem;
  transition: clip-path 1s var(--ease-out) .1s;
  clip-path: inset(0 0 0 0);
}
.loader.is-done { clip-path: inset(0 0 100% 0); }
.loader__word { display: flex; overflow: hidden; }
.loader__word span {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 10vw, 8rem);
  font-weight: 560;
  letter-spacing: 0.04em;
  transform: translateY(110%);
  animation: rise .9s var(--ease-out) forwards;
}
.loader__word span:nth-child(2) { animation-delay: .07s; }
.loader__word span:nth-child(3) { animation-delay: .14s; }
.loader__word span:nth-child(4) { animation-delay: .21s; }
.loader__word span:nth-child(5) { animation-delay: .28s; }
@keyframes rise { to { transform: translateY(0); } }
.loader__tag {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadein .8s ease .7s forwards;
}
@keyframes fadein { to { opacity: .75; } }

/* ————— nav ————— */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem clamp(1.2rem, 4vw, 3rem);
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: transform .5s var(--ease-out);
}
.nav.is-hidden { transform: translateY(-110%); }
.nav__logo {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 560;
  letter-spacing: .05em;
  text-transform: none;
}
.nav__logo sup { font-size: .5em; }
.nav__links { display: flex; gap: 2rem; }
.nav__links a { position: relative; padding-bottom: 2px; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta {
  border: 1px solid currentColor;
  border-radius: 99px;
  padding: .6rem 1.2rem;
  transition: background .35s, color .35s;
}
.nav__cta:hover { background: var(--pine); border-color: var(--pine); color: var(--paper); }
body.is-night .nav__cta:hover { background: var(--pistachio); border-color: var(--pistachio); color: var(--ink); }
@media (max-width: 760px) { .nav__links { display: none; } }

/* ————— reveal base ————— */
.reveal {
  opacity: 0;
  transform: translateY(2.2rem);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ————— hero ————— */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 8.5rem clamp(1.2rem, 4vw, 3rem) 4rem;
  display: flex; flex-direction: column;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  align-self: flex-start;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 99px;
  padding: .55rem 1.1rem;
  margin-bottom: 2.2rem;
}
.hero__badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pine);
  animation: pulse 2.4s ease infinite;
}
@keyframes pulse { 50% { opacity: .25; } }

.hero__title {
  font-size: clamp(3.2rem, 11.5vw, 10.5rem);
  font-weight: 460;
  line-height: 0.96;
  letter-spacing: -0.015em;
  position: relative;
  z-index: 3;
}
.hero__line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.06em; }
.hero__line--italic { font-style: italic; font-weight: 340; color: var(--pine); }
body.is-night .hero__line--italic { color: var(--pistachio); }
.hero__word {
  display: inline-block;
  transform: translateY(115%) rotate(3deg);
  animation: heroword 1.1s var(--ease-out) forwards;
  animation-delay: calc(1.15s + var(--d, 0) * 0.09s);
}
.hero__word[data-i="1"] { --d: 1; } .hero__word[data-i="2"] { --d: 2; }
.hero__word[data-i="3"] { --d: 3; } .hero__word[data-i="4"] { --d: 4; }
.hero__word[data-i="5"] { --d: 5; }
@keyframes heroword { to { transform: translateY(0) rotate(0); } }

.hero__images { position: absolute; inset: 0; pointer-events: none; }
.hero__img {
  position: absolute;
  overflow: hidden;
  border-radius: 2px;
  background: var(--pistachio); /* holds the layout if an image is slow */
  animation: imgin 1.4s var(--ease-out) both;
}
.hero__img img { transform: scale(1.12); transition: transform 1.4s var(--ease-out); }
@keyframes imgin { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero__img--a { width: min(30vw, 380px); aspect-ratio: 3/4; right: 6vw; top: 16vh; animation-delay: 1.5s; z-index: 2; }
.hero__img--b { width: min(20vw, 250px); aspect-ratio: 3/4; right: 30vw; top: 44vh; animation-delay: 1.7s; z-index: 1; background: var(--blush); }
.hero__img--c { width: min(15vw, 190px); aspect-ratio: 3/4; right: 12vw; bottom: 4vh; animation-delay: 1.9s; z-index: 4; background: var(--dusk); }

.hero__intro {
  margin-top: auto;
  max-width: 34ch;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  position: relative; z-index: 3;
}
.hero__scroll {
  margin-top: 2.6rem;
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--sans);
  font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
  opacity: .7;
}
.hero__scroll-line {
  width: 64px; height: 1px; background: currentColor;
  transform-origin: left;
  animation: scrollline 2.2s var(--ease-out) infinite;
}
@keyframes scrollline { 0% { transform: scaleX(0); } 55% { transform: scaleX(1); } 100% { transform: scaleX(0); transform-origin: right; } }

@media (max-width: 760px) {
  .hero { padding-top: 7rem; }
  .hero__images {
    position: static;
    display: flex;
    gap: .75rem;
    margin-top: 2.4rem;
    pointer-events: auto;
  }
  .hero__img,
  body.no-anim .hero__img--a, body.no-anim .hero__img--b {
    position: static;
    width: 50%;
    top: auto; right: auto; bottom: auto;
  }
  .hero__img--b { margin-top: 2.2rem; }
  .hero__img--c { display: none; }
  .hero__intro { max-width: 100%; margin-top: 2.6rem; }
}

/* ————— marquee ————— */
.marquee {
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  padding: 1.1rem 0;
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  white-space: nowrap;
}
.marquee__track { display: inline-flex; animation: marquee 28s linear infinite; }
.marquee__track span { padding-right: 1rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ————— manifesto ————— */
.manifesto {
  padding: clamp(6rem, 14vh, 11rem) clamp(1.2rem, 6vw, 8rem);
}
.manifesto__kicker, .section-kicker {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 1.6rem;
}
.manifesto__text {
  font-size: clamp(1.7rem, 4.4vw, 3.6rem);
  line-height: 1.22;
  font-weight: 380;
  max-width: 24ch;
}
.manifesto__text em { color: var(--pine); }
body.is-night .manifesto__text em { color: var(--pistachio); }
.manifesto__text .w { opacity: .12; transition: opacity .5s ease; }
.manifesto__text .w.is-lit { opacity: 1; }

/* ————— sections shared ————— */
.section-title {
  font-size: clamp(2.4rem, 6.5vw, 5.4rem);
  font-weight: 440;
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.section-title em { font-weight: 340; }

/* ————— the day ————— */
.day { padding: 2rem clamp(1.2rem, 4vw, 3rem) 6rem; }
.day__head { margin-bottom: clamp(3rem, 8vh, 6rem); }

.chapter {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(3rem, 9vh, 7rem) 0;
  position: relative;
}
.chapter--flip .chapter__img { order: 3; }
.chapter--flip .chapter__copy { order: 2; }
.chapter--flip .chapter__time { order: 1; text-align: left; }

.chapter__time {
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  opacity: .3;
  text-align: right;
}
.chapter__time span { font-size: .45em; vertical-align: .55em; letter-spacing: .04em; }

.chapter__img {
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 2px;
  background: var(--pistachio);
  position: relative;
}
.chapter__img img { transition: transform 1.2s var(--ease-out); }
.chapter:hover .chapter__img img { transform: scale(1.05); }
.chapter__img figcaption {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 2rem 1.2rem .9rem;
  font-family: var(--sans);
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: #fdfbf6;
  background: linear-gradient(transparent, rgba(15,18,14,.55));
}
.chapter__copy h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 440;
  margin-bottom: .9rem;
}
.chapter__copy p { line-height: 1.55; max-width: 30ch; opacity: .85; }

@media (max-width: 900px) {
  .chapter, .chapter--flip { grid-template-columns: 1fr; gap: 1.4rem; }
  .chapter__time, .chapter--flip .chapter__time { text-align: left; order: 1; }
  .chapter__img, .chapter--flip .chapter__img { order: 2; max-width: 480px; }
  .chapter__copy, .chapter--flip .chapter__copy { order: 3; }
}

/* ————— lookbook ————— */
.lookbook { padding: 4rem clamp(1.2rem, 4vw, 3rem) 7rem; }
.lookbook__head { margin-bottom: clamp(3rem, 8vh, 5rem); }
.lookbook__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2.4rem);
}
.look {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  border-radius: 2px;
  background: var(--blush);
}
.look--tall { margin-top: clamp(2rem, 6vh, 5rem); }
.look img { transition: transform 1.1s var(--ease-out), filter 1.1s var(--ease-out); }
.look:hover img { transform: scale(1.07); filter: saturate(1.1); }
.look figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.1rem 1rem;
  font-family: var(--sans);
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: #fdfbf6;
  background: linear-gradient(transparent, rgba(15,18,14,.6));
  transform: translateY(100%);
  transition: transform .55s var(--ease-out);
}
.look figcaption span { display: block; opacity: .7; margin-bottom: .2rem; }
.look:hover figcaption { transform: translateY(0); }
@media (max-width: 760px) {
  .lookbook__grid { grid-template-columns: repeat(2, 1fr); }
  .look--tall { margin-top: 1.4rem; }
}

/* ————— fabric ————— */
.fabric {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(4rem, 12vh, 9rem) clamp(1.2rem, 4vw, 3rem);
}
.fabric__media {
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 2px;
  background: var(--pistachio);
}
.fabric__copy .section-title { margin-bottom: 2.6rem; }
.fabric__list { list-style: none; }
.fabric__list li {
  display: flex; gap: 1.4rem;
  padding: 1.6rem 0;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.fabric__list li span { font-size: 1.3rem; font-style: italic; color: var(--pine); }
body.is-night .fabric__list li span { color: var(--pistachio); }
.fabric__list h4 { font-size: 1.2rem; font-weight: 460; margin-bottom: .4rem; }
.fabric__list p { line-height: 1.5; opacity: .8; max-width: 42ch; }
@media (max-width: 900px) { .fabric { grid-template-columns: 1fr; } .fabric__media { max-width: 480px; } }

/* ————— drop ————— */
.drop {
  text-align: center;
  padding: clamp(5rem, 15vh, 10rem) clamp(1.2rem, 4vw, 3rem);
}
.drop__title {
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  font-weight: 440;
  line-height: 1.02;
  margin-bottom: 3rem;
}
.drop__title em { color: var(--pine); }
body.is-night .drop__title em { color: var(--pistachio); }
.drop__form {
  display: inline-flex;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 99px;
  padding: .4rem .4rem .4rem 1.6rem;
  gap: 1rem;
  max-width: 92vw;
}
.drop__form input {
  border: 0; outline: 0; background: transparent;
  font-family: var(--sans);
  font-size: .95rem;
  color: inherit;
  width: min(260px, 46vw);
}
.drop__form input::placeholder { color: inherit; opacity: .45; }
.drop__form button {
  border: 0;
  border-radius: 99px;
  background: var(--pine);
  color: var(--paper);
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .9rem 1.6rem;
  cursor: none;
  transition: background .3s, transform .3s var(--ease-out);
  position: relative;
  overflow: hidden;
}
@media (hover: none), (max-width: 760px) { .drop__form button { cursor: pointer; } }
.drop__form button:hover { transform: scale(1.04); }
.drop__btn-sent { position: absolute; inset: 0; display: grid; place-items: center; background: var(--pine); transform: translateY(100%); transition: transform .45s var(--ease-out); }
.drop__form.is-sent .drop__btn-sent { transform: none; }
.drop__note { margin-top: 1.4rem; font-family: var(--sans); font-size: .74rem; letter-spacing: .12em; opacity: .55; text-transform: uppercase; }

/* ————— footer ————— */
.footer {
  padding: 4rem clamp(1.2rem, 4vw, 3rem) 0;
  overflow: hidden;
}
.footer__meta {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-family: var(--sans);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  opacity: .6;
  padding-bottom: 2rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.footer__wordmark {
  font-size: clamp(5rem, 22vw, 22rem);
  font-weight: 560;
  letter-spacing: .02em;
  line-height: .78;
  text-align: center;
  transform: translateY(14%);
  opacity: .95;
}

/* ————— debug: ?no-anim jumps everything to final state ————— */
body.no-anim *, body.no-anim *::before, body.no-anim *::after { animation: none !important; }
body.no-anim .hero__word { transform: none; }
body.no-anim .hero__img { clip-path: inset(0 0 0 0); }
body.no-anim .reveal { opacity: 1; transform: none; transition: none; }
body.no-anim .manifesto__text .w { opacity: 1; }
body.no-anim .loader { display: none; }
/* pin vh-based sizes so a tall-window full-page capture stays faithful */
body.no-anim .hero { min-height: 900px; }
body.no-anim .hero__img--a { top: 144px; }
body.no-anim .hero__img--b { top: 396px; }
body.no-anim .hero__img--c { bottom: 36px; }

/* ————— reduced motion ————— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__word { transform: none; }
  .manifesto__text .w { opacity: 1; }
}