/* ============================================================
   TURTLENECK TACTICS, Apparel for the Morally Flexible.
   Editorial typography design system, ported verbatim from the
   Humble King Apparel build (retired 2026-07-24) and re-dressed
   with this brand's copy and concept. Standalone client showcase.
   Design base: words.html (LITERALLYJUSTWORDS.COM)
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --cream: #F5F0E8;
  --black: #0A0A0A;
  --gold: #C9A84C;
  --gold-dim: #8A7233;
  --ink: #1A1A1A;
  --warm-gray: #B8B0A2;
  --light-cream: #FAF7F2;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background: var(--cream);
  color: var(--black);
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
  cursor: crosshair;
}

::selection {
  background: var(--gold);
  color: var(--black);
}

/* ════════════════════════════════════════════
   LOADER
   ════════════════════════════════════════════ */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
#loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#loader .loader-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 12vw, 10rem);
  color: var(--cream);
  letter-spacing: 0.3em;
  overflow: hidden;
}
#loader .loader-text span {
  display: inline-block;
  transform: translateY(120%);
  animation: loaderReveal 0.5s forwards;
}
@keyframes loaderReveal {
  to { transform: translateY(0); }
}
#loader .loader-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--gold);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  margin-top: 1.5rem;
  opacity: 0;
  animation: fadeIn 0.5s 1.2s forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

/* ════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 3rem;
  mix-blend-mode: difference;
}
nav .logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  color: var(--cream);
  letter-spacing: 0.4em;
}
nav .nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}
nav .nav-links a {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  color: var(--cream);
  text-decoration: none;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  position: relative;
}
nav .nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
nav .nav-links a:hover::after { width: 100%; }

nav .season-note {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.75rem;
  color: var(--cream);
  letter-spacing: 0.2em;
  font-style: italic;
}

/* ════════════════════════════════════════════
   HERO, MASSIVE TYPE
   ════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: var(--black);
  padding: 2rem;
}

.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 18vw, 16rem);
  color: var(--cream);
  line-height: 0.85;
  text-align: center;
  letter-spacing: -0.02em;
  position: relative;
}
.hero-title .word {
  display: block;
  overflow: hidden;
}
.hero-title .word span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}

.hero-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2.5vw, 1.8rem);
  color: var(--gold);
  font-style: italic;
  margin-top: 2rem;
  letter-spacing: 0.15em;
  opacity: 0;
  text-align: center;
}

.hero-rule {
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin-top: 2rem;
  transform: scaleX(0);
  transform-origin: center;
}

.hero-scroll-cue {
  position: absolute;
  bottom: 3rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--warm-gray);
  opacity: 0;
  animation: fadeIn 0.5s 2.5s forwards;
}
.hero-scroll-cue::after {
  content: '';
  display: block;
  width: 1px;
  height: 40px;
  background: var(--gold);
  margin: 0.8rem auto 0;
  animation: scrollPulse 2s infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ════════════════════════════════════════════
   COLLECTION LINES SECTION
   ════════════════════════════════════════════ */
.cover-lines {
  padding: 10rem 3rem;
  background: var(--cream);
  position: relative;
}
.cover-lines .section-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 4rem;
}

.cover-line-item {
  border-top: 1px solid rgba(10,10,10,0.1);
  padding: 3rem 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 3rem;
  align-items: baseline;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.cover-line-item.visible {
  opacity: 1;
  transform: translateY(0);
}
.cover-line-item .num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.85rem;
  color: var(--gold);
  font-style: italic;
}
.cover-line-item h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  font-style: italic;
  transition: letter-spacing 0.5s ease;
}
.cover-line-item:hover h2 {
  letter-spacing: 0.05em;
}
.cover-line-item .page-ref {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--warm-gray);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ════════════════════════════════════════════
   SCATTER TEXT SECTION
   ════════════════════════════════════════════ */
.scatter-section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--black);
}
.scatter-word {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(5rem, 15vw, 14rem);
  color: var(--cream);
  position: absolute;
  white-space: nowrap;
  line-height: 1;
  will-change: transform, opacity;
}
.scatter-word span {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}

/* ════════════════════════════════════════════
   HORIZONTAL SCROLL, EDITORIAL SPREADS
   ════════════════════════════════════════════ */
.horizontal-wrapper {
  height: 400vh;
  position: relative;
}
.horizontal-track {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  overflow: hidden;
}
.h-panel {
  min-width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 8vw;
  position: relative;
  flex-shrink: 0;
}

.h-panel:nth-child(1) { background: var(--cream); }
.h-panel:nth-child(2) { background: var(--black); color: var(--cream); }
.h-panel:nth-child(3) { background: var(--gold); color: var(--black); }
.h-panel:nth-child(4) { background: var(--light-cream); }

.h-panel .spread-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.6em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  opacity: 0.5;
}
.h-panel .spread-headline {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 900;
  line-height: 1;
  max-width: 70%;
}
.h-panel .spread-body {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.8;
  max-width: 500px;
  margin-top: 2rem;
  font-style: italic;
  opacity: 0.8;
}
.h-panel .spread-pull {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-top: 2rem;
  letter-spacing: 0.05em;
  line-height: 1.1;
  max-width: 80%;
}

.h-panel .testimonial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
  max-width: 900px;
}
.h-panel .testimonial-item {
  border-top: 1px solid rgba(10,10,10,0.12);
  padding-top: 1.5rem;
}
.h-panel .testimonial-item blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.9rem, 1.1vw, 1.1rem);
  font-style: italic;
  line-height: 1.7;
  color: #3A3530;
  margin-bottom: 1rem;
}
.h-panel .testimonial-item cite {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-dim);
  font-style: normal;
}

/* ════════════════════════════════════════════
   MANIFESTO SECTION, SCALING TEXT
   ════════════════════════════════════════════ */
.manifesto {
  min-height: 300vh;
  position: relative;
  background: var(--cream);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.manifesto-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 2rem;
}
.manifesto-word {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  letter-spacing: 0.3em;
  position: absolute;
  white-space: nowrap;
  transition: font-size 0.1s linear;
  will-change: transform, font-size;
  color: var(--black);
}

/* ════════════════════════════════════════════
   ABOUT / BRAND STORY
   ════════════════════════════════════════════ */
.about {
  padding: 12rem 3rem;
  background: var(--black);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.about-inner {
  max-width: 800px;
  margin: 0 auto;
}
.about .kicker {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.6em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 3rem;
}
.about h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1.1;
  margin-bottom: 3rem;
}
.about .body-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  line-height: 2;
  color: rgba(245,240,232,0.75);
  columns: 2;
  column-gap: 3rem;
  column-rule: 1px solid rgba(201,168,76,0.2);
}
.about .pull-quote {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-style: italic;
  color: var(--gold);
  text-align: center;
  margin: 5rem 0;
  padding: 3rem;
  border-top: 1px solid rgba(201,168,76,0.3);
  border-bottom: 1px solid rgba(201,168,76,0.3);
  line-height: 1.4;
}

/* ════════════════════════════════════════════
   MARQUEE / TICKER
   ════════════════════════════════════════════ */
.marquee-section {
  padding: 2rem 0;
  background: var(--gold);
  overflow: hidden;
  position: relative;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 20s linear infinite;
}
.marquee-track span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--black);
  white-space: nowrap;
  padding: 0 2rem;
  letter-spacing: 0.15em;
}
.marquee-track span::after {
  content: '✦';
  margin-left: 2rem;
  color: rgba(10,10,10,0.4);
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ════════════════════════════════════════════
   QUIET STATEMENT SECTION
   ════════════════════════════════════════════ */
.letter-rain {
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.letter-rain .center-text {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--cream);
  text-align: center;
  font-style: italic;
  z-index: 2;
  position: relative;
  max-width: 600px;
  line-height: 1.4;
}
.letter-rain .center-text em {
  color: var(--gold);
  font-style: normal;
}
.falling-letter {
  position: absolute;
  font-family: 'Bebas Neue', sans-serif;
  color: rgba(245,240,232,0.06);
  font-size: 4rem;
  pointer-events: none;
  will-change: transform;
  animation: fall linear infinite;
}
@keyframes fall {
  0% { transform: translateY(-100px) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(calc(100vh + 100px)) rotate(20deg); opacity: 0; }
}

/* ════════════════════════════════════════════
   CTA SECTION
   ════════════════════════════════════════════ */
.cta-section {
  padding: 15rem 3rem;
  background: var(--cream);
  text-align: center;
  position: relative;
}
.cta-section .cta-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 12vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}
.cta-section .cta-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-style: italic;
  color: var(--warm-gray);
  margin-bottom: 3rem;
}
.cta-button {
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.4em;
  padding: 1.2rem 4rem;
  border: 2px solid var(--black);
  background: transparent;
  color: var(--black);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.4s ease;
}
.cta-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--black);
  transform: translateY(101%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-button:hover { color: var(--cream); }
.cta-button:hover::before { transform: translateY(0); }
.cta-button span { position: relative; z-index: 1; }

/* ════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════ */
footer {
  background: var(--black);
  color: var(--cream);
  padding: 4rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}
footer .footer-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.3em;
}
footer .footer-copy {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: var(--warm-gray);
  text-transform: uppercase;
}
footer .footer-note {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--gold);
}

/* ════════════════════════════════════════════
   DECORATIVE ELEMENTS
   ════════════════════════════════════════════ */
.divider-ornament {
  text-align: center;
  padding: 4rem 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  color: var(--gold);
  letter-spacing: 1em;
}

.vertical-text {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--warm-gray);
  mix-blend-mode: difference;
  z-index: 50;
  pointer-events: none;
}

/* ════════════════════════════════════════════
   GRAIN OVERLAY
   ════════════════════════════════════════════ */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
}

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 768px) {
  nav { padding: 1rem 1.5rem; }
  nav .nav-links { display: none; }
  .cover-line-item {
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
  }
  /* The ported build hid this cell on mobile because it held a category
     label. Here it holds the price, so it stays, moved under the name
     in the gold accent instead of dropping out of the layout. */
  .cover-line-item .page-ref {
    grid-column: 2;
    margin-top: 0.6rem;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--gold);
  }
  .about .body-text { columns: 1; }
  .h-panel { padding: 3rem 1.5rem; }
  .h-panel .spread-headline { max-width: 100%; }
  .h-panel .testimonial-grid { grid-template-columns: 1fr; }
  /* The side rail shrinks to a hairline strip on the edge rather than
     being switched off, it carries the brand line, so it stays. */
  .vertical-text {
    right: 0.25rem;
    font-size: 0.42rem;
    letter-spacing: 0.32em;
    opacity: 0.75;
  }
}

/* ════════════════════════════════════════════
   COLLECTION DECK + TAGS
   The ported cover-line grid is num | headline | ref, which leaves
   nowhere for this brand's product copy, and the product copy is
   the point of the piece. These two rows drop into column 2 under
   the headline, set in the system's existing DM Sans / warm-gray
   register so the list still reads as one editorial index.
   ════════════════════════════════════════════ */
.cover-line-item .line-body {
  grid-column: 2;
  margin-top: 1.1rem;
  max-width: 54ch;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(10, 10, 10, 0.62);
}
.cover-line-item .line-tags {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 1.1rem;
}
.cover-line-item .line-tags span {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--warm-gray);
}
.cover-line-item .line-tags .tag-accent { color: var(--gold); }

@media (max-width: 720px) {
  .cover-line-item .line-body,
  .cover-line-item .line-tags { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════
   NARROW VIEWPORTS, STACK THE SPREADS
   The ported build drives the four spreads as a horizontal scroll-jack
   sized in viewport units. That assumes a wide window; in a narrow pane
   the panels outgrow 100vw, the script's travel no longer matches the
   track, and the spreads arrive clipped and drifting. Below 900px the
   hijack is switched off (the script bails to match) and the spreads
   simply stack and read top-to-bottom.
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
  .horizontal-wrapper { height: auto; }
  .horizontal-track {
    position: static;
    height: auto;
    flex-direction: column;
    overflow: visible;
    transform: none !important;
  }
  .h-panel {
    min-width: 0;
    width: 100%;
    height: auto;
    min-height: 78vh;
    padding: 3.5rem 1.5rem;
  }
  .h-panel .spread-headline {
    max-width: 100%;
    font-size: clamp(1.9rem, 8vw, 3rem);
  }
  .h-panel .spread-pull {
    max-width: 100%;
    font-size: clamp(1.7rem, 7.5vw, 2.6rem);
  }
  .h-panel .spread-body { max-width: 100%; }

  /* Both of these were running edge-to-edge with no gutter. */
  .loader-sub { padding: 0 1.5rem; }
  .hero-scroll-cue {
    width: 100%;
    padding: 0 1.5rem;
    text-align: center;
  }
  .hero { padding: 2rem 1.5rem 5rem; }

  .scatter-word { font-size: clamp(3rem, 17vw, 8rem); }
  .cover-lines, .about-inner, .cta-section { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* A panel must never exceed the viewport, at any width; this is the cap
   the original was missing (it set only a min-width floor). */
.h-panel { max-width: 100vw; }
.h-panel .spread-headline,
.h-panel .spread-pull { overflow-wrap: break-word; }