/* ===========================================================
   HERO — typography as architecture.
   Full viewport. The wordmark is set oversized and offset,
   with the second line indented and allowed to run past the
   right edge of the grid on large screens.
=========================================================== */

.hero{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(28px, 5vh, 56px);
  padding-top: 140px;
}

.hero__type{
  position: relative;
  z-index: 2;
}

.hero__line{
  font-family: var(--display);
  font-variation-settings: 'wdth' 118, 'wght' 640;
  font-size: var(--t-mega);
  line-height: .84;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
/* second line offset — breaks the left grid edge deliberately */
.hero__line--2{ padding-left: clamp(14px, 10vw, 210px); }

/* The statement sits in an unexpected place: tucked into the
   right column, optically aligned to the wordmark's x-height. */
.hero__statement{
  margin-top: clamp(28px, 5vh, 54px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: var(--gap);
  align-items: end;
}
.hero__statement p{
  grid-column: 7 / 12;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  line-height: 1.35;
  color: var(--ink-70);
  max-width: 34ch;
  text-wrap: balance;
}
.hero__role{
  grid-column: 1 / 6;
  align-self: end;
}

.hero__foot{
  margin-top: clamp(34px, 7vh, 76px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

/* scroll cue */
.hero__scroll{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-45);
}
.hero__scroll .rule{
  display: block;
  width: 54px; height: 1px;
  background: var(--line-2);
  position: relative;
  overflow: hidden;
}
.hero__scroll .rule::after{
  content:'';
  position: absolute; inset: 0;
  background: var(--ink);
  transform: translateX(-100%);
  animation: cue 2.6s var(--ease-out) infinite;
}
@keyframes cue{
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce){
  .hero__scroll .rule::after{ animation: none; transform: none; opacity: .5; }
}

@media (max-width: 760px){
  .hero{ min-height: 92vh; min-height: 92svh; padding-top: 120px; }
  .hero__line--2{ padding-left: clamp(10px, 5vw, 40px); }
  .hero__statement p{ grid-column: 1 / -1; margin-top: 4px; }
  .hero__role{ grid-column: 1 / -1; }
  .hero__foot{ flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Art-direction pass: turn the opening into a cover, then hand off to work. */
.hero{
  min-height: 112vh;
  min-height: 112svh;
  padding-top: 160px;
  padding-bottom: clamp(28px, 5vh, 60px);
  overflow: clip;
}
.hero::before{
  content: 'CREATIVE / DIRECTION';
  position: absolute;
  left: calc(var(--pad) * -.3);
  top: 16%;
  z-index: 0;
  white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(3.5rem, 14.5vw, 15rem);
  font-weight: 650;
  letter-spacing: -.075em;
  line-height: .72;
  color: transparent;
  -webkit-text-stroke: 1px rgba(20,18,14,.11);
  transform: rotate(-4deg);
  pointer-events: none;
}
.hero__line{
  font-size: clamp(4rem, 15.2vw, 16.5rem);
  line-height: .76;
  letter-spacing: -.06em;
}
.hero__line--2{
  padding-left: clamp(14px, 1.6vw, 26px);
  margin-right: calc(var(--pad) * -1);
}
.hero__statement{ margin-top: clamp(34px, 6vh, 72px); }
.hero__statement p{
  grid-column: 8 / 13;
  font-size: clamp(1.1rem, 1.8vw, 1.55rem);
  line-height: 1.28;
}
.hero__role{ grid-column: 1 / 5; }
.hero__foot{ margin-top: clamp(38px, 8vh, 96px); }

/* Image-first bridge into the selected-work index. */
.hero-bridge{
  position: relative;
  min-height: clamp(360px, 66vw, 900px);
  background: var(--fang-bg);
  overflow: hidden;
}
.hero-bridge__figure,
.hero-bridge__figure .fig{ width: 100%; height: 100%; min-height: inherit; }
.hero-bridge__figure .fig{ aspect-ratio: auto; background: var(--fang-bg-2); }
.hero-bridge__figure .ph{
  --ph-ratio: 21/9;
  background:
    repeating-linear-gradient(135deg, rgba(239,234,224,.045) 0 1px, transparent 1px 11px),
    var(--fang-bg-2);
  border-color: var(--fang-line);
}
.hero-bridge__figure .ph::before{ border-color: var(--crimson); }
.hero-bridge__figure .ph::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,9,8,.18), rgba(10,9,8,.04) 60%, rgba(10,9,8,.5));
  pointer-events: none;
}
.hero-bridge__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: clamp(22px, 4vw, 64px) var(--pad);
  color: var(--fang-ink);
  pointer-events: none;
}
.hero-bridge__meta{
  font-size: var(--t-meta);
  letter-spacing: .15em;
  color: var(--crimson);
}

@media (max-width: 760px){
  .hero{ min-height: 100vh; min-height: 100svh; padding-top: 120px; }
  .hero::before{ top: 24%; font-size: 22vw; left: -24vw; transform: rotate(-8deg); }
  .hero__line{ font-size: clamp(3.7rem, 18vw, 6rem); line-height: .78; }
  .hero__line--2{
    padding-left: 0;
    margin-right: 0;
    font-size: clamp(2.5rem, 12.1vw, 4.5rem);
  }
  .hero__statement p{ grid-column: 1 / -1; }
  .hero__role{ grid-column: 1 / -1; }
  .hero-bridge{ min-height: 132vw; }
  .hero-bridge__figure .ph{ --ph-ratio: 3/4; }
  .hero-bridge__overlay{ align-items: flex-end; }
}