/* About / Desktop — a magazine's and an author's own page.
   The desktop counterpart of ossmobile-about.css and ossmobile-author.css: the same
   tokens, the same content, laid out for a wide screen — a hero across the top, the
   About article as the reading column and everything about the people and the ways
   to follow them in a sticky column beside it. */

.da {
    --da-ink: #111827;
    --da-sub: #5C6678;
    --da-label: #7D8AA1;
    --da-accent: #D96600;
    --da-accent-dark: #B35400;
    --da-accent-soft: #FFF7EF;
    --da-line: #DBDEE3;
    --da-border: #E3E6EA;
    --da-soft: #F7F7F7;
    --da-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 4px 16px rgba(17, 24, 39, 0.05);
    max-width: 1140px;
    margin: 0 auto;
    padding: 28px 15px 64px;
    background: #FFFFFF;
    font-family: 'Inter', "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--da-ink);
    text-align: left;
}

    /* bootstrap puts everything in border-box already, but ossland.css and the kendo
       theme set their own widths and margins on bare elements; these undo the ones
       this page runs into. */
    .da, .da * {
        box-sizing: border-box;
        min-width: 0;
        overflow-wrap: break-word;
    }

    .da h1, .da h2, .da h3, .da p, .da figure, .da blockquote {
        margin: 0;
    }

    .da a,
    .da a:link,
    .da a:visited {
        color: inherit;
        text-decoration: none;
    }

        .da a:hover,
        .da a:focus {
            text-decoration: none;
            background-color: transparent;
        }

    .da a:focus-visible,
    .da button:focus-visible {
        outline: 2px solid var(--da-accent);
        outline-offset: 2px;
        border-radius: 8px;
    }

    .da [hidden] {
        display: none !important;
    }

/* Draft notice ------------------------------------------------------------ */
.da a.da-notice,
.da a.da-notice:link,
.da a.da-notice:visited {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
    padding: 14px 18px;
    border: 1px solid #F2D2B3;
    border-radius: 12px;
    background: var(--da-accent-soft);
    color: var(--da-accent);
}

.da-notice-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.da-notice-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.da-notice-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
}

.da-notice-sub {
    font-size: 14px;
    line-height: 20px;
    color: var(--da-sub);
}

/* Hero -------------------------------------------------------------------- */
/* The banner is uploaded for this card and shown whole: no crop, no fixed ratio. */
.da-cover {
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    background: var(--da-soft);
}

.da-hero {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 8px 0 28px;
}

/* With a banner above, the mark rides up over its lower edge. */
.da-cover + .da-hero {
    align-items: flex-end;
    margin-top: -56px;
    padding-left: 28px;
    padding-right: 4px;
}

.da-avatar {
    flex: 0 0 128px;
    width: 128px;
    height: 128px;
    object-fit: cover;
    display: block;
    border: 4px solid #FFFFFF;
    border-radius: 16px;
    background: var(--da-soft);
    box-shadow: var(--da-shadow);
}

.da-portrait {
    flex: 0 0 152px;
    width: 152px;
    height: 152px;
    border-radius: 999px;
    object-fit: cover;
    display: block;
    background: var(--da-soft);
    box-shadow: var(--da-shadow);
}

.da-identity {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.da-eyebrow {
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--da-accent);
}

.da-name {
    font-size: 36px;
    font-weight: 700;
    line-height: 44px;
    letter-spacing: -0.4px;
    color: var(--da-ink);
}

.da-summary {
    max-width: 680px;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    color: var(--da-sub);
}

.da-hero-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
}

/* Buttons ----------------------------------------------------------------- */
.da-btn,
.da a.da-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--da-border);
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--da-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}

    .da-btn:hover,
    .da a.da-btn:hover {
        border-color: #C5CAD3;
        background: var(--da-soft);
    }

    .da-btn svg {
        width: 16px;
        height: 16px;
        display: block;
        flex: 0 0 16px;
    }

.da-btn-share svg {
    color: var(--da-accent);
}

/* Once following, the emphasis drops away: the direction the article page's
   .jra-follow and the magazine's .jr-utility-action take. It used to be the other
   way round here, tinting only after the reader had already followed. */
.da-btn.da-fav.da-is-active {
    border-color: var(--da-border);
    background: #FFFFFF;
    color: var(--da-sub);
}

    .da-btn.da-fav.da-is-active svg {
        fill: currentColor;
    }

.da-btn.da-is-done svg {
    color: #1E8E3E;
}

/* Follow is primary while it is still the action on offer — the same fill, taken
   from the same rule rather than restated, so the two cannot drift apart. */
.da-btn-primary,
.da a.da-btn-primary,
.da-btn.da-fav:not(.da-is-active) {
    border-color: var(--da-accent);
    background: var(--da-accent);
    color: #FFFFFF;
}

    .da-btn-primary:hover,
    .da a.da-btn-primary:hover,
    .da-btn.da-fav:not(.da-is-active):hover {
        border-color: var(--da-accent-dark);
        background: var(--da-accent-dark);
        color: #FFFFFF;
    }

/* Statistics (author) ----------------------------------------------------- */
.da-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 36px;
    border: 1px solid var(--da-line);
    border-radius: 14px;
    overflow: hidden;
}

.da-stat,
.da a.da-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 84px;
    padding: 14px 18px;
}

    .da-stat + .da-stat {
        border-left: 1px solid var(--da-line);
    }

.da a.da-stat:hover {
    background: var(--da-soft);
}

.da-stat-count {
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    color: var(--da-ink);
}

.da-stat-label {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--da-sub);
}

/* Two columns ------------------------------------------------------------- */
.da-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    align-items: start;
    padding-top: 8px;
    border-top: 1px solid var(--da-line);
}

.da-main {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 28px;
}

.da-aside {
    position: sticky;
    top: 70px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 28px;
}

.da-heading {
    font-size: 26px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: -0.2px;
    color: var(--da-ink);
}

.da-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.da a.da-more-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--da-accent);
}

    .da a.da-more-link:hover {
        color: var(--da-accent-dark);
    }

/* About article ----------------------------------------------------------- */
.da-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 720px;
}

.da-subheading {
    padding-top: 8px;
    font-size: 21px;
    font-weight: 600;
    line-height: 30px;
    color: var(--da-ink);
}

.da-text {
    font-size: 17px;
    font-weight: 400;
    line-height: 29px;
    color: #1F2937;
}

    .da-text p {
        margin: 0 0 14px;
    }

        .da-text p:last-child {
            margin-bottom: 0;
        }

    .da-text a {
        color: var(--da-accent) !important;
        text-decoration: underline !important;
        text-underline-offset: 2px;
    }

    .da-text img {
        max-width: 100%;
        height: auto;
    }

.da-quote {
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--da-accent);
    font-size: 21px;
    font-weight: 500;
    line-height: 32px;
    color: var(--da-ink);
}

.da-gallery {
    display: grid;
    gap: 12px;
}

.da-gallery-2 {
    grid-template-columns: 1fr 1fr;
}

.da-gallery-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.da-figure {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.da-figure-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    background: var(--da-soft);
}

.da-gallery-2 .da-figure-img,
.da-gallery-3 .da-figure-img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.da-caption {
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    color: var(--da-sub);
}

.da-video {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 6px;
    padding: 0;
    overflow: hidden;
    background: #080A0F;
    cursor: pointer;
}

.da-video-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.da-video-overlay {
    position: absolute;
    inset: 0;
    background: #080A0F;
    opacity: 0.55;
    transition: opacity .15s;
}

.da-video:hover .da-video-overlay {
    opacity: 0.4;
}

.da-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    display: block;
}

.da-video iframe,
.da-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.da-embed {
    display: flex;
    justify-content: center;
}

.da-files {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--da-line);
    border-radius: 12px;
    overflow: hidden;
}

.da a.da-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

    .da a.da-file + .da-file {
        border-top: 1px solid var(--da-line);
    }

    .da a.da-file:hover {
        background: var(--da-soft);
    }

.da-file-icon {
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--da-accent-soft);
    color: var(--da-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
}

.da-empty {
    padding: 28px;
    border: 1px dashed var(--da-line);
    border-radius: 12px;
    font-size: 15px;
    line-height: 22px;
    color: var(--da-sub);
}

/* Articles (author) ------------------------------------------------------- */
.da-articles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
}

.da a.da-article {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.da-article-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    background: var(--da-soft);
}

.da-article-meta {
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--da-accent);
}

.da-article-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 23px;
    color: var(--da-ink);
}

.da a.da-article:hover .da-article-title {
    color: var(--da-accent);
}

/* Side cards -------------------------------------------------------------- */
.da-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--da-line);
    border-radius: 14px;
    background: #FFFFFF;
}

.da-card-title {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--da-label);
}

.da-card-heading {
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
    color: var(--da-ink);
}

.da a.da-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 -10px;
    padding: 10px;
    border-radius: 10px;
}

    .da a.da-row:hover {
        background: var(--da-soft);
    }

.da-row-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.da-row-kind {
    font-size: 12px;
    line-height: 16px;
    color: var(--da-sub);
}

.da-row-value {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--da-ink);
}

.da-chevron {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    display: block;
    color: #98A2B3;
}

.da-icon-circle {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--da-line);
    border-radius: 999px;
    color: var(--da-ink);
}

    .da-icon-circle svg {
        width: 18px;
        height: 18px;
        display: block;
    }

.da-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
}

.da a.da-social-link {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--da-line);
    border-radius: 999px;
    color: var(--da-ink);
}

    .da a.da-social-link:hover {
        border-color: var(--da-accent);
        color: var(--da-accent);
    }

    .da a.da-social-link svg {
        width: 17px;
        height: 17px;
        display: block;
        fill: currentColor;
    }

/* People (magazine team) and magazines (author) */
.da a.da-lead {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px -10px 6px;
    padding: 12px 10px;
    border-radius: 12px;
}

    .da a.da-lead:hover {
        background: var(--da-soft);
    }

.da-lead-portrait {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    object-fit: cover;
    display: block;
    background: var(--da-soft);
}

.da-lead-label {
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--da-accent);
}

.da-lead-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
}

.da-person-portrait {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    object-fit: cover;
    display: block;
    background: var(--da-soft);
}

.da-magazine-image {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    background: var(--da-soft);
}

.da-person-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.da-topics {
    font-size: 12px;
    line-height: 17px;
    color: var(--da-sub);
}

.da-list-rule {
    height: 1px;
    margin: 4px 0;
    background: var(--da-line);
}

/* Section chips (author) */
.da-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 8px;
}

.da a.da-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 13px;
    border: 1px solid var(--da-line);
    border-radius: 16px;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
}

    .da a.da-chip:hover {
        border-color: var(--da-accent);
        color: var(--da-accent);
    }

.da-chip-more {
    align-self: flex-start;
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--da-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    cursor: pointer;
}

    .da-chip-more:hover {
        color: var(--da-accent);
    }

/* Go to the magazine / to the articles */
.da a.da-home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border: 1px solid var(--da-line);
    border-radius: 14px;
}

    .da a.da-home:hover {
        border-color: var(--da-accent);
    }

.da-home-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.da-home-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 21px;
}

.da-home-label {
    font-size: 10px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--da-sub);
}

.da-home-action {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--da-accent);
}

/* Stay with / follow */
.da-cta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 20px;
    border-radius: 14px;
    background: var(--da-accent-soft);
}

.da-cta-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 24px;
}

.da-cta-desc {
    margin-top: 4px;
    font-size: 14px;
    line-height: 20px;
    color: #666670;
}

.da-cta-actions {
    display: flex;
    gap: 10px;
}

    .da-cta-actions .da-btn {
        flex: 1 1 0;
        min-height: 46px;
        border-color: var(--da-accent);
        font-weight: 600;
    }

        .da-cta-actions .da-btn.da-is-active {
            background: var(--da-accent);
            color: #FFFFFF;
        }

/* Compact preview (the editor's window) ----------------------------------- */
.da-compact {
    padding-top: 16px;
}

.da-compact-close {
    display: flex;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 1px solid var(--da-line);
    margin-top: 32px;
}

/* Narrower desktops ------------------------------------------------------- */
@media (max-width: 991px) {
    .da-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .da-aside {
        position: static;
    }

    .da-hero {
        flex-wrap: wrap;
    }

    .da-hero-actions {
        width: 100%;
    }

    .da-stats {
        grid-template-columns: repeat(2, 1fr);
    }

        .da-stats .da-stat:nth-child(3) {
            border-left: 0;
        }

        .da-stats .da-stat:nth-child(n+3) {
            border-top: 1px solid var(--da-line);
        }
}