.about-page {
    --about-blue: #153f59;
    --about-ink: #183c50;
    --about-body: #426376;
    --about-green: #4b776d;
    --about-line: #d6e2e6;
    --about-mist: #f2f7f7;
}

.about-page a,
.about-page button {
    font-family: "Avenir Next", sans-serif;
}

.about-page figure,
.about-page dl,
.about-page ol {
    margin: 0;
}

.about-page img {
    max-width: 100%;
}

.about-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(7.4rem, 7vw, 10.6rem) 0 clamp(7rem, 7vw, 9.8rem);
    background: #f7fafb;
}

.about-hero::before {
    position: absolute;
    top: 0;
    right: 0;
    width: min(44vw, 67rem);
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--nhk-sea-green));
}

.about-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(38rem, 0.78fr);
    gap: clamp(5rem, 7vw, 10.4rem);
    align-items: center;
}

.about-hero__content {
    position: relative;
    z-index: 1;
}

.about-hero h1 {
    max-width: 76rem;
}

.about-hero__lead {
    max-width: 68rem;
    margin-top: 2.8rem !important;
    color: var(--about-body);
    font-size: 1.85rem;
    line-height: 1.72;
}

.about-hero__actions {
    margin-top: 3.6rem;
}

.about-hero__figure {
    position: relative;
    overflow: hidden;
    min-height: 62rem;
    border: 1px solid rgba(21, 63, 89, 0.15);
    border-radius: 1.8rem;
    background: #dbe5e7;
    box-shadow: 0 2.8rem 7rem rgba(19, 57, 78, 0.16);
}

.about-hero__figure picture,
.about-hero__figure img {
    display: block;
    width: 100%;
    height: 100%;
}

.about-hero__figure img {
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position: 50% 37%;
}

.about-hero__figure figcaption,
.about-leadership__figure figcaption {
    position: absolute;
    right: 1.6rem;
    bottom: 1.6rem;
    left: 1.6rem;
    padding: 1.05rem 1.3rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.8rem;
    color: #fff;
    background: rgba(15, 48, 65, 0.76);
    backdrop-filter: blur(8px);
    font-size: 1.2rem;
    line-height: 1.45;
}

.about-proof {
    border-top: 1px solid var(--about-line);
    border-bottom: 1px solid var(--about-line);
    background: #fff;
}

.about-proof dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-proof dl > div {
    min-width: 0;
    padding: 3.1rem clamp(1.8rem, 2.5vw, 3.7rem);
    border-left: 1px solid var(--about-line);
}

.about-proof dl > div:first-child {
    border-left: 0;
}

.about-proof dt {
    color: var(--about-blue);
    font-size: clamp(1.65rem, 1.4vw, 2rem);
    font-weight: 600;
    line-height: 1.3;
}

.about-proof dd {
    margin: 0.7rem 0 0;
    color: #64808f;
    font-size: 1.22rem;
    line-height: 1.45;
}

.about-origin__grid {
    display: grid;
    grid-template-columns: minmax(24rem, 0.7fr) minmax(0, 1.1fr) minmax(22rem, 0.55fr);
    gap: clamp(3.8rem, 5vw, 7rem);
    align-items: start;
}

.about-origin__copy p,
.about-modernisation__copy p,
.about-closing__copy > p {
    color: var(--about-body);
    font-size: 1.65rem;
    line-height: 1.78;
}

.about-origin__copy p + p,
.about-modernisation__copy p + p,
.about-closing__copy > p + p {
    margin-top: 2rem;
}

.about-origin__ownership {
    padding: 2.7rem 0 0 2.8rem;
    border-top: 1px solid var(--about-green);
    border-left: 1px solid var(--about-line);
}

.about-origin__ownership span {
    display: block;
    color: #68818e;
    font-size: 1.14rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.about-origin__ownership strong {
    display: block;
    margin-top: 1.4rem;
    color: var(--about-blue);
    font-size: clamp(2.2rem, 2.2vw, 3rem);
    font-weight: 500;
    line-height: 1.25;
}

.about-origin__ownership p {
    margin-top: 1.4rem;
    color: #587585;
    font-size: 1.34rem;
    line-height: 1.65;
}

.about-history {
    border-top: 1px solid var(--about-line);
    border-bottom: 1px solid var(--about-line);
    background: var(--about-mist);
}

.about-history__heading {
    max-width: 85rem;
}

.about-timeline {
    position: relative;
    margin-top: clamp(5.6rem, 7vw, 8.5rem) !important;
    padding: 0;
    list-style: none;
}

.about-timeline::before {
    position: absolute;
    top: 0.7rem;
    bottom: 0;
    left: 24rem;
    width: 1px;
    content: "";
    background: #b9cdd0;
}

.about-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 24rem minmax(0, 1fr);
    gap: clamp(4rem, 5vw, 7rem);
    padding-bottom: clamp(5.6rem, 7vw, 8.6rem);
}

.about-timeline__item:last-child {
    padding-bottom: 0;
}

.about-timeline__item::before {
    position: absolute;
    top: 0.45rem;
    left: 23.45rem;
    width: 1.1rem;
    height: 1.1rem;
    border: 0.25rem solid var(--about-mist);
    border-radius: 50%;
    content: "";
    background: var(--about-green);
    box-shadow: 0 0 0 1px #8aa9a7;
}

.about-timeline__date {
    padding-right: 3.8rem;
    text-align: right;
}

.about-timeline__date time {
    display: block;
    color: var(--about-blue);
    font-size: clamp(2rem, 2.1vw, 2.9rem);
    font-weight: 600;
    line-height: 1.2;
}

.about-timeline__date span {
    display: block;
    margin-top: 0.8rem;
    color: #6f8895;
    font-size: 1.15rem;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.about-timeline__body {
    max-width: 96rem;
}

.about-timeline__body h3 {
    margin: 0;
    color: var(--about-ink);
    font-size: clamp(2.35rem, 2.4vw, 3.25rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.about-timeline__body > p {
    max-width: 85rem;
    margin-top: 1.6rem;
    color: var(--about-body);
    font-size: 1.55rem;
    line-height: 1.75;
}

.about-timeline__feature-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 8.4;
    margin-top: 3.2rem;
    border-radius: 1.4rem;
    background: #d5e0e2;
}

.about-timeline__feature-image picture,
.about-timeline__feature-image img,
.about-timeline__gallery picture,
.about-timeline__gallery img {
    display: block;
    width: 100%;
    height: 100%;
}

.about-timeline__feature-image img {
    object-fit: cover;
    object-position: 50% 55%;
}

.about-timeline__feature-image figcaption,
.about-timeline__gallery figcaption {
    position: absolute;
    right: 1.3rem;
    bottom: 1.3rem;
    left: 1.3rem;
    padding: 0.9rem 1.1rem;
    border-radius: 0.6rem;
    color: #fff;
    background: rgba(13, 43, 59, 0.78);
    font-size: 1.08rem;
    line-height: 1.35;
}

.about-timeline__gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.8rem;
    margin-top: 3.2rem;
}

.about-timeline__gallery figure {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: 1.2rem;
    background: #d5e0e2;
}

.about-timeline__gallery img {
    object-fit: cover;
    object-position: center;
}

.about-inline-link,
.about-resource-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    color: var(--about-blue);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: underline;
    text-decoration-color: #8eb7b4;
    text-underline-offset: 0.35em;
}

.about-inline-link {
    margin-top: 2rem;
}

.about-inline-link svg,
.about-resource-links svg {
    width: 1.4rem;
    height: 1.4rem;
}

.about-leadership {
    background: #fff;
}

.about-leadership__grid {
    display: grid;
    grid-template-columns: minmax(36rem, 0.82fr) minmax(0, 1.08fr);
    gap: clamp(5rem, 8vw, 11.5rem);
    align-items: center;
}

.about-leadership__figure {
    position: relative;
    overflow: hidden;
    min-height: 69rem;
    border-radius: 1.7rem;
    background: #dbe5e7;
}

.about-leadership__figure picture,
.about-leadership__figure img {
    display: block;
    width: 100%;
    height: 100%;
}

.about-leadership__figure img {
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position: 50% 45%;
}

.about-leadership__content > h2 {
    max-width: 72rem;
}

.about-leader {
    display: grid;
    grid-template-columns: minmax(18rem, 0.43fr) minmax(0, 1fr);
    gap: 3rem;
    margin-top: 4.4rem;
    padding-top: 3.2rem;
    border-top: 1px solid var(--about-line);
}

.about-leader header h3 {
    margin: 0;
    color: var(--about-blue);
    font-size: 2.05rem;
    font-weight: 600;
    line-height: 1.35;
}

.about-leader header p {
    margin-top: 0.65rem;
    color: var(--about-green);
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.about-leader > p {
    color: var(--about-body);
    font-size: 1.48rem;
    line-height: 1.72;
}

.about-leader > a {
    grid-column: 2;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.7rem;
    color: var(--about-blue);
    font-size: 1.32rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.35em;
}

.about-archive {
    border-top: 1px solid var(--about-line);
    border-bottom: 1px solid var(--about-line);
    background: #eaf0f2;
}

.about-archive__grid {
    display: grid;
    grid-template-columns: minmax(30rem, 0.7fr) minmax(46rem, 1.15fr);
    gap: clamp(5rem, 7vw, 10rem);
    align-items: center;
}

.about-archive__disclaimer {
    margin-top: 2.8rem;
    padding: 2.4rem 0 2.4rem 2.7rem;
    border-left: 0.3rem solid var(--about-green);
    color: #294e62;
    font-size: 1.55rem;
    line-height: 1.72;
}

.about-archive__copy > p:last-child {
    margin-top: 2.2rem;
    color: #5d7785;
    font-size: 1.35rem;
    line-height: 1.7;
}

.about-archive__frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 1.5rem;
    background: #133d55;
    box-shadow: 0 2.4rem 6rem rgba(14, 45, 62, 0.18);
}

.about-archive__frame iframe,
.about-archive__frame img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.about-archive__frame img {
    object-fit: cover;
}

.about-archive__veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 2.2rem 2.4rem;
    color: #fff;
    background: linear-gradient(180deg, rgba(9, 31, 44, 0.52), rgba(9, 31, 44, 0.26) 48%, rgba(9, 31, 44, 0.72));
}

.about-archive__veil span {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-archive__veil strong {
    font-size: 2rem;
    font-weight: 500;
}

.about-archive__frame button {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.3rem;
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 1.35rem;
    font-weight: 600;
    cursor: pointer;
}

.about-archive__play {
    display: grid;
    width: 6.4rem;
    height: 6.4rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    background: rgba(21, 63, 89, 0.84);
    box-shadow: 0 1.2rem 3rem rgba(9, 30, 42, 0.3);
    transition: transform var(--motion-duration-fast) var(--motion-ease-out), background var(--motion-duration-fast) ease;
}

.about-archive__frame button:hover .about-archive__play {
    transform: scale(1.05);
    background: rgba(75, 119, 109, 0.94);
}

.about-archive__film figcaption {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem 0 0;
    color: #587483;
    font-size: 1.16rem;
    line-height: 1.5;
}

.about-archive__film figcaption a {
    flex: none;
    color: var(--about-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.about-modernisation__grid,
.about-closing__inner {
    display: grid;
    grid-template-columns: minmax(30rem, 0.68fr) minmax(0, 1.12fr);
    gap: clamp(5rem, 8vw, 11rem);
    align-items: start;
}

.about-resource-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 4.2rem;
    border: 1px solid var(--about-line);
    border-radius: 1.1rem;
    background: var(--about-line);
    overflow: hidden;
}

.about-resource-links a {
    min-height: 8.2rem;
    justify-content: space-between;
    padding: 1.7rem 2rem;
    background: #fff;
    text-decoration: none;
}

.about-resource-links a:hover {
    background: var(--about-mist);
}

.about-principles {
    border-top: 1px solid var(--about-line);
    border-bottom: 1px solid var(--about-line);
    background: #f8fafb;
}

.about-principles__heading {
    max-width: 78rem;
}

.about-principles ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 5.5rem !important;
    padding: 0;
    border-top: 1px solid var(--about-line);
    list-style: none;
}

.about-principles li {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 2.6rem;
    padding: 3.3rem clamp(2.2rem, 3.3vw, 4.8rem) 3.6rem 0;
    border-bottom: 1px solid var(--about-line);
}

.about-principles li:nth-child(even) {
    padding-left: clamp(2.2rem, 3.3vw, 4.8rem);
    border-left: 1px solid var(--about-line);
}

.about-principles li > span {
    color: var(--about-green);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.about-principles h3 {
    margin: 0;
    color: var(--about-blue);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.35;
}

.about-principles p {
    margin-top: 1.1rem;
    color: var(--about-body);
    font-size: 1.4rem;
    line-height: 1.68;
}

.about-closing {
    background: #edf5f4;
}

.about-closing__actions {
    margin-top: 3.7rem;
}

.about-page a:focus-visible,
.about-page button:focus-visible {
    outline: 0.3rem solid #e59c4b;
    outline-offset: 0.35rem;
}

@media (max-width: 1199px) {
    .about-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(34rem, 0.78fr);
        gap: 5.2rem;
    }

    .about-hero__figure {
        min-height: 56rem;
    }

    .about-origin__grid {
        grid-template-columns: minmax(22rem, 0.68fr) minmax(0, 1.2fr);
    }

    .about-origin__ownership {
        grid-column: 2;
        padding-top: 2.2rem;
    }

    .about-leadership__grid {
        gap: 5.5rem;
    }

    .about-leadership__figure {
        min-height: 61rem;
    }

    .about-leader {
        grid-template-columns: 1fr;
        gap: 1.7rem;
    }

    .about-leader > a {
        grid-column: 1;
    }

    .about-archive__grid {
        grid-template-columns: minmax(27rem, 0.72fr) minmax(40rem, 1.1fr);
        gap: 5rem;
    }

    .about-resource-links {
        grid-template-columns: 1fr;
    }

    .about-resource-links a {
        min-height: 6.6rem;
    }
}

@media (max-width: 899px) {
    .about-hero {
        padding-top: 5.4rem;
    }

    .about-hero__grid,
    .about-leadership__grid,
    .about-archive__grid,
    .about-modernisation__grid,
    .about-closing__inner {
        grid-template-columns: 1fr;
    }

    .about-hero__grid {
        gap: 4.8rem;
    }

    .about-hero__figure {
        min-height: 0;
        aspect-ratio: 4 / 5;
    }

    .about-hero__figure img {
        object-position: 50% 39%;
    }

    .about-proof dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-proof dl > div:nth-child(3) {
        border-left: 0;
    }

    .about-proof dl > div:nth-child(n + 3) {
        border-top: 1px solid var(--about-line);
    }

    .about-origin__grid {
        grid-template-columns: 1fr;
        gap: 3.2rem;
    }

    .about-origin__ownership {
        grid-column: 1;
        padding: 2.4rem 0 0;
        border-left: 0;
    }

    .about-timeline::before {
        left: 0.55rem;
    }

    .about-timeline__item {
        grid-template-columns: 1fr;
        gap: 1.8rem;
        padding: 0 0 6.2rem 3.6rem;
    }

    .about-timeline__item::before {
        left: 0;
    }

    .about-timeline__date {
        padding: 0;
        text-align: left;
    }

    .about-timeline__feature-image {
        aspect-ratio: 4 / 3;
    }

    .about-leadership__grid {
        gap: 4.8rem;
    }

    .about-leadership__figure {
        min-height: 0;
        aspect-ratio: 4 / 5;
    }

    .about-leader {
        grid-template-columns: minmax(18rem, 0.42fr) minmax(0, 1fr);
        gap: 3rem;
    }

    .about-leader > a {
        grid-column: 2;
    }

    .about-archive__grid {
        gap: 4rem;
    }

    .about-modernisation__grid,
    .about-closing__inner {
        gap: 3.4rem;
    }
}

@media (max-width: 640px) {
    .about-hero__actions,
    .about-closing__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .about-hero__actions .nhk-button,
    .about-closing__actions .nhk-button {
        width: 100%;
        justify-content: center;
    }

    .about-proof dl {
        grid-template-columns: 1fr;
    }

    .about-proof dl > div {
        padding: 2.5rem 0;
        border-top: 1px solid var(--about-line);
        border-left: 0;
    }

    .about-proof dl > div:first-child {
        border-top: 0;
    }

    .about-proof dl > div:nth-child(3) {
        border-top: 1px solid var(--about-line);
    }

    .about-timeline__gallery {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .about-timeline__gallery figure {
        aspect-ratio: 4 / 3;
    }

    .about-timeline__gallery img {
        object-position: 50% 55%;
    }

    .about-leader {
        grid-template-columns: 1fr;
        gap: 1.6rem;
        margin-top: 3.5rem;
    }

    .about-leader > a {
        grid-column: 1;
    }

    .about-archive__film figcaption {
        display: grid;
        gap: 0.9rem;
    }

    .about-archive__disclaimer {
        padding-left: 2rem;
    }

    .about-principles ol {
        grid-template-columns: 1fr;
        margin-top: 4.2rem !important;
    }

    .about-principles li,
    .about-principles li:nth-child(even) {
        grid-template-columns: 3.5rem 1fr;
        gap: 1.8rem;
        padding: 2.8rem 0;
        border-left: 0;
    }
}

@media (max-width: 370px) {
    .about-hero__figure,
    .about-leadership__figure {
        border-radius: 1.2rem;
    }

    .about-timeline__item {
        padding-left: 3rem;
    }

    .about-timeline__body h3 {
        font-size: 2.2rem;
    }

    .about-archive__veil {
        padding: 1.6rem;
    }

    .about-archive__frame button > span:last-child {
        font-size: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-archive__play {
        transition: none;
    }

    .about-archive__frame button:hover .about-archive__play {
        transform: none;
    }
}