/*
 * Our corrections to Depo Luxe's carried pages. Their stylesheet is theirs, byte for byte; this file is linked after it
 * on the pages that need a rule of ours (content/pages.json, head).
 *
 * The visor's films are websites, not footage: a film covering the window lost its sides on any window that is not
 * 16:9 (and the first square films most of their top and bottom), so a film and the still before it are fitted whole,
 * never cropped: no side of a page is cut (Lorenzo, 2026-10-23: "full width, the sides should not be cut off").
 */
.visor-videos img, .visor-videos video { object-fit: contain; }

/* The studio name lifts through the ceiling; the menu settles into its place.
 * Individual translate is separate from the reference's GSAP transforms. */
#Header { overflow: clip; }
#Header > .holder .title,
#Header > .holder .claim { transition: translate .75s cubic-bezier(.65,0,.2,1), opacity .45s; }
body:has(.page-about) #Header > .holder .title,
body:has(.page-about) #Header > .holder .claim { transform: none !important; opacity: 1 !important; }
body:has(.page-about) #Header > .holder nav { transform: none !important; }
#Header > .holder nav { transition: translate .75s cubic-bezier(.65,0,.2,1); }
.qw-header-compact #Header > .holder .title,
.qw-header-compact #Header > .holder .claim { translate: 0 -130px; opacity: 0 !important; pointer-events: none; }
.qw-header-compact #Header > .holder nav { translate: 0 var(--qw-nav-lift, -50px); }
body:has(.page-about) #Header { font-size: clamp(16px, 1.4vw, 22px); }
body:has(.page-about) #Header__blur > .top { visibility: visible; --size: 145px; --opacity: .88; }

/* Large, complete website frames rather than tiny cropped fragments. Keep the
 * original six arrangements and scroll choreography, with generous media sizes. */
.page-about .block-title.--type_1,
.page-about .block-title.--type_2 { --img-size: clamp(180px, 27vw, 440px); --img-height: clamp(130px, 18vw, 300px); }
.page-about .block-title.--type_3 { --img-size: clamp(150px, 20vw, 330px); --img-height: clamp(110px, 14vw, 230px); --gap: 1.5vw !important; }
.page-about .block-title.--type_4 { --img-size: clamp(260px, 43vw, 680px); --img-height: clamp(180px, 28vw, 440px); }
.page-about .block-title.--type_5 { --img-size: clamp(170px, 21vw, 350px); --img-height: clamp(120px, 16vw, 260px); --gap: 1.5vw !important; }
.page-about .block-title.--type_6 { --img-size: clamp(240px, 39vw, 650px); --img-height: clamp(170px, 26vw, 430px); }
.page-about .block-title.--type_1 .media > figure { height: var(--img-height); }
.page-about .block-title.--type_2 .media { grid-template-columns: repeat(12,1fr); grid-template-rows: repeat(12,1fr); }
.page-about .block-title .media > figure { background: #090909; }
.page-about .block-title .media > figure img,
.page-about .block-title .media > figure video { object-fit: contain; }
.page-about .block-title h2.body { position: relative; z-index: 2; text-shadow: 0 2px 12px #000, 0 0 35px #000; }
@media(max-width:760px) {
  body:has(.page-about) #Header { font-size: 15px; }
  #Header > .holder { max-width: calc(100vw - 36px); }
  #Header > .holder .claim { line-height: 1.25; }
  .page-about .block-title.--type_1 { --img-size: 44vw; --img-height: 31vw; }
  .page-about .block-title.--type_3,
  .page-about .block-title.--type_5 { --img-size: 40vw; --img-height: 28vw; }
  .page-about .block-title.--type_3 .media,
  .page-about .block-title.--type_5 .media { display: grid; grid-template-columns: repeat(2, 40vw); gap: 18vh 7vw; align-content: center; }
  .page-about .block-title.--type_3 .media > figure,
  .page-about .block-title.--type_5 .media > figure { margin: 0 !important; }
  .page-about .block-title.--type_4 { --img-size: 76vw; --img-height: 51vw; }
  .page-about .block-title.--type_6 { --img-size: 49vw; --img-height: 35vw; }
}
@media(prefers-reduced-motion:reduce) {
  #Header > .holder .title, #Header > .holder .claim, #Header > .holder nav { transition: none; }
}

/* All three header rows share the same edges. The tagline distributes its
 * spacing across the row rather than protruding beyond, or floating within it. */
#Header > .holder{width:clamp(320px,36vw,560px);max-width:calc(100vw - 36px)}
#Header > .holder .title,#Header > .holder nav,#Header > .holder .claim{width:100%;box-sizing:border-box;margin-left:0;margin-right:0}
#Header > .holder .claim{font-size:clamp(12px,.98vw,16px);line-height:1.35;text-align:justify;text-align-last:justify}

/* Qwarter's own AI and advisory chapter, appended to the carried Approach. */
.qw-ai{box-sizing:border-box;width:100%;padding:190px clamp(24px,5vw,100px) 60px;background:#000;color:#eeece6;font:400 22px/1.45 "EB Garamond",Georgia,serif;position:relative;isolation:isolate}
.qw-ai *{box-sizing:border-box}.qw-ai h2,.qw-ai h3,.qw-ai h4,.qw-ai p,.qw-ai ol{margin:0;font-weight:400}.qw-ai em{font-weight:400}.qw-ai a{color:inherit;text-decoration:none}.qw-ai a:focus-visible{outline:1px solid currentColor;outline-offset:8px}
.qw-ai__eyebrow{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #4c4b47;padding-top:20px;margin-bottom:85px;font:12px/1.5 monospace;letter-spacing:.05em;text-transform:uppercase;color:#bcb9b2}
.qw-ai__introduction{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,7vw,130px);padding-bottom:100px}
.qw-ai__introduction h2{font-size:clamp(48px,5.6vw,92px);line-height:1.02;letter-spacing:-.035em}.qw-ai__introduction p,.qw-ai__thesis p{max-width:710px;margin-bottom:28px;color:#c7c4bd;font-size:25px;line-height:1.45}.qw-ai p.qw-ai__lead{font-size:clamp(28px,2.6vw,40px);line-height:1.2;color:#eeece6;letter-spacing:-.015em}
.qw-ai__thesis{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,7vw,130px);border-top:1px solid #33332f;padding:55px 0 80px}.qw-ai__thesis h3{font-size:clamp(42px,4vw,66px);font-style:normal;line-height:1}
.qw-ai__lab{padding:70px 0 90px;border-top:1px solid #33332f}.qw-ai__lab-heading{display:grid;grid-template-columns:.6fr 1.4fr 1fr;gap:40px;align-items:start}.qw-ai__label{display:block;font:12px/1.6 monospace;letter-spacing:.06em;text-transform:uppercase;color:#bcb9b2}.qw-ai__lab-heading h3{font-size:clamp(42px,4.4vw,72px);line-height:1.02;letter-spacing:-.025em}.qw-ai__lab-heading>p{font-size:23px;color:#c7c4bd;line-height:1.3;padding-top:8px}
.qw-labs{--lab-gap:clamp(16px,2vw,36px);list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 var(--lab-gap);margin-top:75px!important}
.qw-labs li{position:relative;min-width:0;padding:0}
.qw-labs li::before{content:"";position:absolute;top:37px;height:1px;background:#55534c;left:0;right:calc(-1 * var(--lab-gap))}.qw-labs li:last-child::before{right:0}.qw-labs li::after{content:"";position:absolute;top:33px;left:0;height:9px;width:9px;border-radius:50%;background:#eeece6}.qw-labs .qw-labs__today::after{background:#000;border:1px solid #eeece6}
.qw-labs__year{display:block;font:12px/1.5 monospace;letter-spacing:.06em;color:#bcb9b2;margin-bottom:46px}
.qw-labs figure{margin:0 0 28px}.qw-labs__picture{display:block;aspect-ratio:4/3;overflow:hidden;background:#141412;border:1px solid #ffffff12}.qw-labs__picture img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .7s cubic-bezier(.2,.65,.3,1)}
/* Keep the photograph's paper border outside the shared picture frame. */
.qw-labs__picture--menlo img{scale:1.16}
.qw-labs__picture:hover img,.qw-labs__picture:focus-visible img{transform:scale(1.025)}.qw-labs figcaption{margin-top:12px;min-height:34px;font:10px/1.6 monospace;color:#aaa79e;letter-spacing:.015em}
.qw-labs h4{font-size:clamp(30px,2.6vw,44px);line-height:1.1;margin-bottom:18px}.qw-labs p{font-size:clamp(19px,1.5vw,24px);line-height:1.4;color:#c7c4bd;max-width:28ch}
.qw-labs__mark{display:grid;place-items:center;background:radial-gradient(ellipse at center,#21211e,#090909 75%)}.qw-labs__mark span{display:block;width:40%;aspect-ratio:1;background:#eeece6;mask:url('/design/qwarter/q-mark.svg') center/contain no-repeat}
.qw-ai .qw-labs__link{display:inline-flex;align-items:center;gap:24px;margin-top:24px;border-bottom:1px solid #77756e;font-size:21px;padding-bottom:3px}
@media(max-width:1280px) and (min-width:641px){.qw-labs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:60px}.qw-labs li:nth-child(2n)::before{right:0}.qw-labs figcaption{min-height:0}.qw-labs .qw-labs__today{grid-column:1/-1;width:calc((100% - var(--lab-gap))/2);justify-self:center}}
@media(max-width:640px){.qw-labs{display:block;margin-top:52px!important;border-left:1px solid #55534c}.qw-labs li,.qw-labs li:last-child{padding:0 0 48px 24px}.qw-labs li:last-child{padding-bottom:0}.qw-labs li::before{display:none}.qw-labs li::after{top:4px;left:-5px}.qw-labs__year{margin-bottom:22px}.qw-labs figure{margin-bottom:23px}.qw-labs figcaption{min-height:0}.qw-labs h4{font-size:35px}.qw-labs p{font-size:22px;max-width:none}.qw-labs__mark span{width:32%}}
@media(prefers-reduced-motion:reduce){.qw-labs__picture img{transition:none}.qw-labs__picture:hover img,.qw-labs__picture:focus-visible img{transform:none}}
.qw-ai__principles{border-top:1px solid #55534c;display:grid;grid-template-columns:repeat(3,1fr);gap:65px;padding:32px 0 75px}.qw-ai__principles p{font-size:24px;line-height:1.3;margin-top:17px;max-width:350px}.qw-ai__contact{border-top:1px solid #33332f;padding:35px 0;display:flex;justify-content:space-between;align-items:baseline;gap:25px}.qw-ai__contact p{font-style:normal;color:#bcb9b2}.qw-ai__contact a{font-size:30px;border-bottom:1px solid #77756e;padding-bottom:5px}.qw-ai__contact a span{margin-left:35px}
@media(max-width:1000px){.qw-ai__lab-heading{grid-template-columns:1fr 2fr}.qw-ai__lab-heading>p{grid-column:2}.qw-ai__principles{gap:30px}}
@media(max-width:640px){.qw-ai{padding-top:165px}.qw-ai__eyebrow{margin-bottom:55px;font-size:11px}.qw-ai__introduction,.qw-ai__thesis{grid-template-columns:1fr;gap:35px;padding-bottom:45px}.qw-ai__introduction p,.qw-ai__thesis p{font-size:23px}.qw-ai__lab{padding:45px 0 60px}.qw-ai__lab-heading{display:block}.qw-ai__lab-heading h3{margin:25px 0}.qw-ai__lab-heading>p{font-size:23px}.qw-ai__principles{grid-template-columns:1fr;gap:30px;padding-bottom:45px}.qw-ai__principles p{font-size:24px}.qw-ai__contact{align-items:start;flex-direction:column}.qw-ai__contact a{font-size:27px}.qw-ai__contact a span{margin-left:15px}}

/* Qwarter uses upright typography throughout. */
body, body * { font-style: normal !important; }