#hero.exp-documentary {
    --doc-yellow: #ffca28;
    min-height: var(--section-height, calc(100svh - var(--nav-h, 64px)));
    padding: var(--section-pad, clamp(130px, 15vh, 155px)) 0 max(76px, var(--section-pad, 0px));
    align-items: center;
    background: var(--section-bg, #061b0d);
}

#hero.exp-documentary > .exp-backdrop {
    inset: -36px 0 -36px 18%;
    width: 82%;
    height: calc(100% + 72px);
}

#hero.exp-documentary > .exp-backdrop img {
    object-position: var(--doc-focus-x, 52%) var(--doc-focus-y, 83%);
}

#hero.exp-documentary .exp-shade {
    background:
        linear-gradient(90deg, var(--section-gradient, #061b0d) 12%, rgb(5 24 11 / var(--overlay, .84)) 34%, #05180b28 63%, transparent 85%),
        linear-gradient(0deg, #04180ded, transparent 28%, transparent 74%, #04180d69);
}

#hero.exp-documentary .exp-inner {
    width: 100%;
    max-width: var(--content-max, 1366px);
    padding: 0 var(--section-x, 24px);
}

#hero.exp-documentary .exp-title {
    width: min(56%, var(--title-width, 860px));
    max-width: none;
    font-size: clamp(39px, 4.4vw, var(--title-size, 86px));
    font-weight: var(--title-weight, 400);
    letter-spacing: var(--title-space, -.025em);
    line-height: 1;
    text-transform: none;
    text-wrap: balance;
}

#hero.exp-documentary .exp-title em {
    position: relative;
    isolation: isolate;
    display: table;
    margin: .12em 0 0;
    padding: .07em .72em .13em .22em;
    font-family: inherit;
    font-size: clamp(33px, 4.15vw, var(--doc-brush-size, 78px));
    font-style: italic;
    line-height: 1;
    color: var(--doc-brush-text, #14240a);
}

#hero.exp-documentary .exp-title em:not(:has(.exp-doc-brush)) {
    color: var(--section-accent, var(--doc-yellow));
}

#hero.exp-documentary .exp-doc-brush {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    fill: var(--doc-brush, var(--doc-yellow));
    pointer-events: none;
}

#hero.exp-documentary .exp-script {
    font-family: var(--doc-subtitle-font, Georgia, serif) !important;
    font-size: clamp(26px, 3.2vw, var(--doc-subtitle-size, 58px));
    font-style: italic;
    letter-spacing: -.025em;
    color: var(--doc-subtitle-color, #fff);
    margin: .18em 0 .45em;
    max-width: 55%;
    text-wrap: balance;
}

#hero.exp-documentary .exp-inner > .exp-description {
    max-width: min(48%, 56ch);
    color: inherit;
    font-size: clamp(16px, 1.42vw, 25px);
    line-height: 1.38;
    margin: 22px 0;
}

#hero.exp-documentary .exp-points {
    max-width: 55%;
    font-size: clamp(13px, 1.08vw, 19px);
    gap: 12px 0;
}

#hero.exp-documentary .exp-point-icon svg {
    width: clamp(25px, 2.7vw, 46px);
    height: clamp(25px, 2.7vw, 46px);
    color: var(--doc-yellow);
}

#hero.exp-documentary .exp-actions {max-width: 64%; flex-wrap: wrap;}
#hero.exp-documentary .exp-button {
    background: var(--button-bg, linear-gradient(#ffdc61, #ffc21d));
    transition: background .3s, translate .3s, box-shadow .3s;
}
#hero.exp-documentary .exp-button:hover {background: var(--button-hover, #ffdb60);}
#hero.exp-documentary .exp-button:hover {translate: 0 -2px;}
#hero.exp-documentary .exp-button > :last-child {transition: translate .3s;}
#hero.exp-documentary .exp-button:hover > :last-child {transform: translateX(4px);}
#hero.exp-documentary .exp-secondary {
    background: var(--button-bg, #05190aa8);
    border-color: var(--doc-button-border, var(--doc-yellow));
}
#hero.exp-documentary .exp-secondary:hover {background: var(--button-hover, #203a18);}
#hero.exp-documentary .exp-secondary svg {color: var(--doc-yellow);}

#hero.exp-documentary .exp-camera-frame {
    position: absolute;
    z-index: 1;
    width: 35%;
    height: 48%;
    left: clamp(44%, var(--doc-frame-x, 53%), 57%);
    top: clamp(10%, var(--doc-frame-y, 27%), 48%);
    color: #fffeeece;
    pointer-events: none;
}

.exp-documentary .exp-camera-frame i {
    position: absolute;
    width: clamp(21px, 3.6vw, 65px);
    aspect-ratio: 1;
    border: solid currentColor;
    border-width: 2px 0 0 2px;
}
.exp-documentary .exp-camera-frame i:nth-child(2) {right: 0; rotate: 90deg;}
.exp-documentary .exp-camera-frame i:nth-child(3) {right: 0; bottom: 0; rotate: 180deg;}
.exp-documentary .exp-camera-frame i:nth-child(4) {bottom: 0; rotate: 270deg;}

.exp-documentary .exp-camera-rec {
    position: absolute;
    z-index: 1;
    top: clamp(20px, 5%, 60px);
    right: 5%;
    display: flex;
    align-items: center;
    gap: .55em;
    font: 500 clamp(14px, 1.5vw, 25px)/1 var(--font-sans, sans-serif);
    color: #fff;
    text-shadow: 0 1px 5px #000;
    pointer-events: none;
}
.exp-documentary .exp-camera-rec::before {
    content: "";
    width: .75em;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fa2d25;
}

#hero.exp-documentary .exp-scroll-cue {
    position: absolute;
    z-index: 2;
    left: 50%;
    right: auto;
    bottom: 16px;
    translate: -50% 0;
    display: grid;
    justify-items: center;
    gap: 9px;
    margin: 0;
    color: #fff;
    letter-spacing: .18em;
}
#hero.exp-documentary .exp-scroll-cue svg {color: var(--doc-yellow);}

@media (max-width: 900px) {
    #hero.exp-documentary .exp-title {width: 66%;}
    #hero.exp-documentary .exp-points {max-width: 62%;}
}

@media (max-width: 650px) {
    #hero.exp-documentary {padding: max(250px, 40svh, var(--section-pad, 0px)) 0 102px;}
    #hero.exp-documentary > .exp-backdrop {
        inset: -36px 0 auto;
        width: 100%;
        height: max(340px, 48svh);
        mask-image: linear-gradient(#000 68%, transparent);
    }
    #hero.exp-documentary .exp-shade {background: linear-gradient(0deg, var(--section-gradient, #061b0d) 37%, rgb(5 24 11 / var(--overlay, .84)) 57%, transparent 86%);}
    #hero.exp-documentary .exp-title,
    #hero.exp-documentary .exp-script,
    #hero.exp-documentary .exp-inner > .exp-description,
    #hero.exp-documentary .exp-points,
    #hero.exp-documentary .exp-actions {width: 100%; max-width: 100%;}
    #hero.exp-documentary .exp-title {font-size: clamp(32px, 9.2vw, var(--title-size, 55px));}
    #hero.exp-documentary .exp-points {flex-wrap: wrap;}
    #hero.exp-documentary .exp-points li {padding-inline: 8px;}
    #hero.exp-documentary .exp-actions {display: grid;}
    #hero.exp-documentary .exp-camera-frame {
        width: 60%; height: min(180px, 18%);
        left: clamp(0%, calc(var(--doc-frame-x, 53%) - 38%), 30%);
        top: clamp(0%, calc(var(--doc-frame-y, 27%) - 17%), 17%);
    }
}

@media (max-width: 900px) {
    #hero.exp-documentary .exp-inner {padding-inline: 16px 12px;}
}

@media (max-width: 480px) {
    #hero.exp-documentary .exp-inner {padding-inline: 12px 10px;}
}