/* C06 Home opening: the original landing-beach photograph (bytes unaltered) with the About page's own opening.
   The photo's upper 52% is a uniform rgb(1,1,1) overhang, so the hero field uses the same value and the frame dissolves
   into the page; the copy may overlap that dark band only (never the lit window, which starts at 51.8% of photo height). */
.qd-hero{background:#010101;color:#fff;overflow:hidden}
.qd-hero-in{max-width:132rem;margin:0 auto;padding:clamp(1.75rem,6vw,3rem) var(--qd-gut) 0}
.qd-hero-copy{position:relative;z-index:1;max-width:34rem}
.qd-hero-k{margin:0 0 1rem;font:500 .75rem/1.5 var(--qd-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--qd-quiet-w)}
.qd-hero-t{margin:0 0 1.1rem;font:400 clamp(1.95rem,1.35rem + 2.4vw,3.4rem)/1.1 var(--qd-serif);text-wrap:balance}
.qd-hero-body p{margin:0 0 .45em;font:400 clamp(1.125rem,1.02rem + .35vw,1.3rem)/1.5 var(--qd-serif);color:rgba(255,255,255,.84)}
.qd-hero-links{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.75rem;margin:1.6rem 0 0}
.qd-hero-links a{color:#fff;display:inline-flex;align-items:center;gap:.55em;min-height:44px;font:500 .78rem/1.3 var(--qd-mono);letter-spacing:.13em;text-transform:uppercase;text-underline-offset:.35em}
.qd-hero-enter{border:1px solid rgba(255,255,255,.62);padding:0 1.15em;text-decoration:none}
.qd-hero-enter:hover{background:#fff;color:#000!important}
.qd-hero-links a:focus-visible{outline:2px solid #fff;outline-offset:4px}
.qd-hero-art{margin:0}
.qd-hero-art img{display:block;width:100%;height:auto}
#qd-collection{scroll-margin-top:0}
#qd-collection:focus{outline:none}
/* phone / narrow: copy first, then the photograph full-bleed, pulled up under the copy by 0.6 x the photo width
   (that stays inside the dark overhang: lit window begins 0.69 x photo width below the photo's top).
   Width is capped at 52.5svh (= 70svh tall) so tablets in portrait do not get a full-screen-plus photo. */
@media (max-width:899.98px){
  .qd-hero{--qd-hero-w:min(100vw,52.5svh)}
  .qd-hero-art{margin:calc(-.6 * var(--qd-hero-w)) calc(-1 * var(--qd-gut)) 0;display:flex;justify-content:center}
  .qd-hero-art img{width:var(--qd-hero-w);max-width:none}
}
/* desktop and larger: the whole portrait beside the type; photo height leaves the top of the first story visible. */
@media (min-width:900px){
  .qd-hero-in{display:grid;grid-template-columns:minmax(0,34rem) auto;justify-content:center;column-gap:clamp(3rem,7vw,9rem);align-items:end;padding-top:0}
  .qd-hero-copy{padding-bottom:calc(var(--qd-hero-h) * .22)}
  .qd-hero{--qd-hero-h:min(calc(100svh - 12.5rem),1536px)}
  .qd-hero-art img{height:var(--qd-hero-h);width:auto;max-width:none}
}
/* large screens: the type grows with the photograph so the opening does not read as a small caption beside it. */
@media (min-width:1800px){
  .qd-hero-in{grid-template-columns:minmax(0,44rem) auto}
  .qd-hero-copy{max-width:44rem}
  .qd-hero-t{font-size:clamp(3.4rem,2.3vw,4.6rem)}
  .qd-hero-body p{font-size:clamp(1.3rem,.85vw,1.6rem)}
  .qd-hero-links a{font-size:clamp(.78rem,.5vw,.95rem)}
  .qd-hero-k{font-size:clamp(.75rem,.45vw,.9rem)}
}