/* Wayne Bodie Books — approved creative-studio homepage hero, October 23, 2026.
   Scoped to .studio-hero. Original navigation, site sections and global styles preserved. */
.studio-hero {
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(96px, 10.5vh, 112px) 0 clamp(38px, 4.2vh, 52px);
  background: #05070A;
}
.studio-hero::after { content: none; }
.studio-hero-visual {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
  pointer-events: none;
}
.studio-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 48%;
}
.studio-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(5, 7, 10, .99) 0%,
      rgba(5, 7, 10, .98) 15%,
      rgba(5, 7, 10, .9) 29%,
      rgba(5, 7, 10, .76) 38%,
      rgba(5, 7, 10, .5) 49%,
      rgba(5, 7, 10, .2) 63%,
      rgba(5, 7, 10, .04) 79%),
    linear-gradient(180deg, rgba(5, 7, 10, .13), transparent 40%, rgba(5, 7, 10, .15));
}
.studio-hero .hero-content {
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  padding-bottom: 0;
}
.studio-hero-copy { max-width: 740px; }
.studio-hero-overline,
.studio-hero-identity {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  white-space: normal;
}
.studio-hero .studio-hero-overline {
  margin: 0 0 7px;
  max-width: none;
  font-size: clamp(11px, .84vw, 14px);
  line-height: 1.5;
  letter-spacing: .37em;
  color: var(--gold-hi);
}
.studio-hero .studio-hero-identity {
  margin: 0;
  max-width: none;
  font-size: clamp(10px, .83vw, 13px);
  letter-spacing: .33em;
  line-height: 1.6;
  color: var(--warm-white);
}
.studio-hero-identity span {padding-inline: .35em; color: var(--gold);}
.studio-hero-rule {
  display: block;
  width: 83px;
  height: 1px;
  background: var(--gold);
  margin: clamp(13px, 1.4vw, 17px) 0 clamp(11px, 1.25vw, 17px);
}
.studio-hero h1 {
  max-width: none;
  margin: 0;
  font: 500 clamp(72px, 5.65vw, 98px)/.96 var(--display);
  letter-spacing: -.048em;
  color: var(--warm-white);
  text-wrap: nowrap;
  overflow: visible;
}
.studio-hero h1 span,
.studio-hero h1 em {display: block; white-space: nowrap;}
.studio-hero h1 em {
  font-weight: 500;
  font-style: italic;
  letter-spacing: -.042em;
  line-height: 1.09;
  padding-top: .035em;
  padding-right: .09em;
  padding-bottom: .135em;
  overflow: visible;
  background: linear-gradient(175deg, var(--gold-hi) 15%, #C89546 91%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.studio-hero .studio-hero-description {
  max-width: 535px;
  margin: clamp(12px, 1.35vw, 18px) 0 0;
  font: 400 clamp(18px, 1.44vw, 23px)/1.39 var(--display);
  letter-spacing: .014em;
  color: var(--warm-white);
  text-wrap: pretty;
}
.studio-hero .studio-hero-actions { margin-top: clamp(22px, 2.1vw, 28px); gap: 15px; }
.studio-hero .studio-hero-actions .btn {
  min-height: 58px;
  padding-inline: clamp(21px, 2.05vw, 33px);
  gap: clamp(16px, 2.7vw, 36px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .17em;
}
.studio-hero .studio-hero-actions .btn:not(.gold) {
  border-color: rgba(201,170,104,.83);
  background: rgba(5,7,10,.57);
}
.studio-hero .studio-hero-actions .btn span {font-size: 19px;font-weight:400;line-height:1;color:inherit;}
.studio-hero .studio-hero-actions .btn:not(.gold) span {color:var(--gold-hi);}
.studio-hero .studio-hero-actions .btn:focus-visible {outline:2px solid var(--gold-hi);outline-offset:4px;}
@media (max-width: 1200px) and (min-width: 901px) {
  .studio-hero-copy {max-width: 630px;}
  .studio-hero h1 {font-size: clamp(70px,6.75vw,88px);}
  .studio-hero::before {background:linear-gradient(90deg,rgba(5,7,10,.98) 0%,rgba(5,7,10,.93) 21%,rgba(5,7,10,.78) 39%,rgba(5,7,10,.23) 70%,rgba(5,7,10,.07));}
}
@media (max-width: 900px) {
  .studio-hero {min-height: 940px; padding: 155px 0 370px; align-items: flex-start;}
  .studio-hero .hero-content {padding-bottom:0;}
  .studio-hero-copy {max-width:700px;}
  .studio-hero h1 {font-size:clamp(69px,10.5vw,92px);}
  .studio-hero-visual {
    top:33%;
    /* Blend the photograph naturally into the black opening on mobile. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.14) 35px, rgba(0,0,0,.62) 115px, #000 190px);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.14) 35px, rgba(0,0,0,.62) 115px, #000 190px);
  }
  .studio-hero-visual img {object-position: 72% 52%;}
  .studio-hero .studio-hero-actions {margin-top:36px;}
  .studio-hero::before {
    background: linear-gradient(180deg,
       #05070A 0%,
       rgba(5,7,10,.98) 13%,
       rgba(5,7,10,.96) 33%,
       rgba(5,7,10,.78) 52%,
       rgba(5,7,10,.2) 70%,
       rgba(5,7,10,.04) 100%);
  }
  .studio-hero .studio-hero-description {max-width: 560px;}
}
@media (max-width: 720px) {
  .studio-hero {min-height: 850px; padding: 129px 0 350px;}
  .studio-hero-visual {top:44%;}
  .studio-hero-visual img {object-position:center 43%;}
  .studio-hero-copy {max-width:560px;}
  .studio-hero .studio-hero-overline {font-size:10px;letter-spacing:.27em;margin-bottom:9px;}
  .studio-hero .studio-hero-identity {font-size:9px;letter-spacing:.18em;}
  .studio-hero-identity span {padding-inline:.18em;}
  .studio-hero-rule {width:66px;margin:16px 0 20px;}
  .studio-hero h1 {font-size:clamp(57px,14.35vw,87px);line-height:.96;letter-spacing:-.052em;}
  .studio-hero h1 em {padding-bottom:.19em;}
  .studio-hero .studio-hero-description {max-width:470px;margin-top:18px;font-size:clamp(17px,4.3vw,21px);line-height:1.38;}
  .studio-hero .studio-hero-actions {margin-top:43px;gap:10px;}
  .studio-hero .studio-hero-actions .btn {min-height:49px;padding:0 17px;font-size:9px;letter-spacing:.12em;gap:13px;}
  .studio-hero .studio-hero-actions .btn span {font-size:16px;}
}
@media (max-width: 370px) {
  .studio-hero {min-height: 850px;}
  .studio-hero h1 {font-size:clamp(49px,14vw,57px);}
  .studio-hero .studio-hero-identity {font-size:8.5px;letter-spacing:.1em;}
  .studio-hero .studio-hero-actions .btn {padding-inline:12px;gap:9px;}
}
@media (prefers-reduced-motion:reduce) {
 .studio-hero .studio-hero-actions .btn {transition:none;}
}

/* RC3 compact laptop viewport polish: keep the CTA row inside the first-screen composition. */
@media (min-width: 901px) and (max-height: 760px) {
  .studio-hero { padding-top: 90px; padding-bottom: 28px; }
  .studio-hero h1 { font-size: clamp(66px, 5.15vw, 88px); }
  .studio-hero .studio-hero-description { margin-top: 12px; }
  .studio-hero .studio-hero-actions { margin-top: 18px; }
}