/* Edit these variables to change the palette throughout the homepage. */
:root{--bg:#171b1c;--panel:#202627;--text:#f3f1e9;--muted:#b7bdb9;--accent:#c5d89b;--line:#394140;--width:1160px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}a:focus-visible{outline:3px solid var(--accent);outline-offset:6px}.wrap{max-width:var(--width);width:calc(100% - 96px);margin:auto}.skip{position:absolute;left:20px;top:-100px;background:var(--text);color:var(--bg);padding:12px;z-index:5}.skip:focus{top:10px}header{display:flex;justify-content:space-between;align-items:center;padding:32px 0;border-bottom:1px solid var(--line)}.identity{font-size:22px;font-weight:700;letter-spacing:-.7px}.identity span{display:block;font-size:12px;font-weight:400;letter-spacing:.6px;color:var(--muted)}nav{display:flex;gap:32px;font-size:14px}.hero{padding:88px 0 64px}.eyebrow{font-size:11px;letter-spacing:1.8px;font-weight:700;color:var(--accent);margin:0 0 24px}h1{font-size:clamp(42px,5.4vw,76px);line-height:1.09;letter-spacing:-3.5px;margin:0;font-weight:600}h1 span{color:var(--accent)}.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:48px;margin-top:38px}.hero-bottom p{max-width:620px;color:var(--muted);font-size:18px;margin:0}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;background:var(--accent);color:#1c241b;padding:16px 23px;font-size:14px;font-weight:700;white-space:nowrap}.button:hover{background:#d5e8ae;color:#1c241b}.button span{font-size:22px}.experience{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;display:flex;justify-content:space-between;gap:24px;font-size:12px;color:var(--muted)}.experience p{margin:0}.experience span{color:#637168;margin:0 8px}.work{padding:72px 0}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.section-heading h2{font-size:27px;letter-spacing:-.7px;margin:0}.section-heading>span{font-size:12px;color:var(--muted)}.featured{display:grid;grid-template-columns:1fr 1fr;background:var(--panel)}.dc-art{min-height:380px;position:relative;overflow:hidden;padding:30px 36px;background:radial-gradient(ellipse at 0 100%,#536065 0,transparent 65%),linear-gradient(125deg,#35484a,#1c292e 75%);display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid #425050}.dc-art:before,.dc-art:after{content:'';position:absolute;transform:rotate(-24deg);width:150px;height:650px;background:#ffffff05;top:-140px;right:60px;border-left:1px solid #ffffff12}.dc-art:after{right:240px}.art-kicker,.art-footer{font-size:10px;letter-spacing:2px;color:#ced5d1;z-index:1}.dc-title{display:flex;align-items:center;gap:20px;z-index:1}.dc-title>span{font-size:56px;letter-spacing:-5px;border:2px solid #c9d3cd;border-radius:50%;width:105px;height:105px;display:grid;place-items:center;padding-right:5px}.dc-title strong{font-size:47px;line-height:1;letter-spacing:-1.5px}.project-copy{padding:40px}.project-copy .eyebrow,.small-copy .eyebrow{font-size:10px;letter-spacing:1.1px;margin-bottom:14px}h3{font-size:28px;line-height:1.2;letter-spacing:-.7px;margin:0 0 12px}.role{font-size:13px;color:var(--muted);margin:0 0 24px}.project-copy>p:not(.role):not(.eyebrow),.small-copy>p:not(.role):not(.eyebrow){color:var(--muted);font-size:15px}.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}.tags span{font-size:10px;padding:5px 9px;border:1px solid #4a5450;color:#d5dcd1}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px}.project-grid article{background:var(--panel)}.image-box{aspect-ratio:1.9;overflow:hidden;background:#3d354d}.image-box img{display:block;width:100%;height:100%;object-fit:cover}.small-copy{padding:30px 32px}.text-link{display:inline-block;font-size:13px;border-bottom:1px solid #89917f;padding-bottom:5px;margin-top:12px}.text-link span{margin-left:25px}.earlier{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:26px;margin-top:40px;font-size:13px}.earlier p{margin:0;color:var(--muted)}.earlier div{display:flex;gap:30px}.about{padding:72px 0;background:#242a29}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px}h2{font-size:42px;line-height:1.15;letter-spacing:-1.5px;margin:0 0 26px}.about-intro{margin:0 0 32px;font-size:18px;color:#d7dcd6}.principle{border-top:1px solid #454d47;padding:20px 0 0;margin-top:20px}.principle h3{font-size:18px;letter-spacing:-.2px;margin-bottom:8px}.principle p{font-size:14px;color:var(--muted);margin:0}.independent{padding:72px 0;border-bottom:1px solid var(--line)}.independent h2{font-size:32px}.independent>p:not(.eyebrow){color:var(--muted)}.independent-links{display:flex;flex-wrap:wrap;gap:30px;font-size:14px;margin-top:24px}.contact{padding:80px 0}.contact h2{font-size:44px;margin-bottom:30px}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;padding:25px 0;color:var(--muted);font-size:11px}
@media(max-width:900px){.wrap{width:calc(100% - 48px)}nav{gap:18px}.experience{flex-direction:column;gap:6px}.featured{grid-template-columns:1fr}.dc-art{min-height:310px;border-right:0}.about-grid{gap:40px}.hero-bottom{align-items:flex-start;flex-direction:column;gap:24px}.earlier{flex-direction:column}h1{letter-spacing:-2px}.project-copy{padding:32px}}
@media(max-width:600px){.wrap{width:calc(100% - 36px)}header{align-items:flex-start;gap:20px;flex-direction:column;padding:24px 0}nav{gap:20px;font-size:12px;flex-wrap:wrap}.hero{padding:52px 0 40px}h1{font-size:42px;letter-spacing:-1.8px}.hero-bottom p{font-size:16px}.eyebrow{font-size:9px;letter-spacing:1.2px}.work{padding:44px 0}.project-grid,.about-grid{grid-template-columns:1fr;gap:24px}.dc-art{padding:26px;min-height:280px}.dc-title strong{font-size:37px}.dc-title>span{width:82px;height:82px;font-size:44px}.project-copy,.small-copy{padding:25px}.earlier div{flex-wrap:wrap;gap:16px}.about,.independent{padding:48px 0}h2{font-size:34px}.contact{padding:52px 0}.contact h2{font-size:32px}footer{flex-direction:column;gap:8px}.independent-links{gap:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Shared styles for the full portfolio. */
.dc-photo{position:relative;display:block;min-height:380px;overflow:hidden}.dc-photo img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:35% center}.dc-photo span{position:absolute;bottom:0;left:0;right:0;padding:40px 28px 20px;background:linear-gradient(transparent,#111b24);font-size:25px;font-weight:700;color:white}.portrait-card{background:#35144b}.portrait-card img{object-fit:contain}.page-head{padding:72px 0 48px}.page-head h1{font-size:clamp(38px,5vw,64px);letter-spacing:-2px}.lede{max-width:760px;color:var(--muted);font-size:19px;margin:24px 0 0}.case-hero{height:430px;background:var(--panel);overflow:hidden}.case-hero img{width:100%;height:100%;object-fit:cover}.case-hero img.dcworldscollide{object-position:center 42%}.case-hero img.tmnt{object-fit:contain;background:#2f1045}.case-layout{display:grid;grid-template-columns:290px 1fr;gap:85px;padding:64px 0}.case-layout aside h2{font-size:25px;letter-spacing:-.6px}.case-layout aside p{color:var(--muted);font-size:14px}.case-section{margin-bottom:44px}.case-section h2{font-size:29px;letter-spacing:-.6px;margin-bottom:16px}.case-section p{font-size:17px;color:var(--muted)}.video{width:100%;aspect-ratio:16/9;border:0;margin-bottom:22px;background:#202627}.next-project{padding:0 0 64px}.contact-details{padding:0 0 100px;min-height:320px}.contact-details p{color:var(--muted)}.work-list{padding-bottom:72px}.work-row{display:grid;grid-template-columns:320px 1fr;gap:40px;padding:28px 0;border-top:1px solid var(--line);align-items:center}.work-row img{width:100%;height:210px;object-fit:cover;background:var(--panel)}.work-row:nth-child(2) img{object-fit:contain;background:#35144b}.work-row h2{font-size:30px;margin-bottom:15px}.work-row p:not(.eyebrow){color:var(--muted);margin:0}.archive-heading{font-size:28px;margin-top:48px}.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.archive-grid a{padding:20px;background:var(--panel);font-size:14px}.legacy{max-width:900px;font-size:17px;padding-bottom:48px}.legacy p{margin-bottom:24px}.legacy img{max-width:100%;height:auto}.legacy iframe{width:100%;max-width:760px;aspect-ratio:16/9;height:auto;border:0}.legacy table{width:100%;table-layout:fixed;border-collapse:collapse}.legacy td{overflow-wrap:anywhere;padding:8px;vertical-align:top}.legacy ul{padding-left:24px}.legacy a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}.legacy .contentitem{width:100%}.end-link{padding:0 0 48px}.legacy pre{white-space:pre-wrap}
@media(max-width:900px){.case-layout{grid-template-columns:220px 1fr;gap:40px}.work-row{grid-template-columns:250px 1fr;gap:24px}.dc-photo{min-height:350px}}
@media(max-width:600px){.page-head{padding:48px 0 32px}.lede{font-size:17px}.case-hero{height:290px}.case-layout{grid-template-columns:1fr;gap:32px;padding:40px 0}.case-layout aside{border-bottom:1px solid var(--line);padding-bottom:24px}.case-section h2{font-size:26px}.work-row{grid-template-columns:1fr;gap:20px}.work-row img{height:230px}.archive-grid{grid-template-columns:1fr 1fr}.dc-photo{min-height:310px}.legacy{font-size:15px}.legacy td{padding:3px}.archive-grid a{padding:16px}.case-section p{font-size:16px}}

/* Original two-frame image rollovers: top is default, bottom is hover. */
.project-rollover{display:block;width:100%;aspect-ratio:var(--image-ratio,512 / 120);background-image:var(--rollover-image);background-size:100% 200%;background-repeat:no-repeat;background-position:center top}
.work-row:hover .project-rollover,.work-row:focus-visible .project-rollover,.archive-grid a:hover .project-rollover,.archive-grid a:focus-visible .project-rollover{background-position:center bottom}
.project-thumbnail{display:block;width:100%;aspect-ratio:512 / 120;overflow:hidden;background:var(--panel)}
.work-row .project-thumbnail img,.archive-grid .project-thumbnail img{display:block;width:100%;height:100%;object-fit:cover}
.work-row:hover .project-thumbnail,.work-row:focus-visible .project-thumbnail,.archive-grid a:hover .project-thumbnail,.archive-grid a:focus-visible .project-thumbnail{filter:brightness(1.18)}
.archive-grid a{padding:0;overflow:hidden}.project-label{display:block;padding:16px 20px}
@media(max-width:600px){.work-row .project-thumbnail img{height:100%}.project-label{padding:12px;font-size:13px}}
/* On-page gallery overlay, using the browser's modal dialog. */
.gallery-viewer{width:96vw;max-width:1400px;height:94dvh;max-height:94dvh;border:1px solid var(--line);padding:20px;background:#101414;color:var(--text);overflow:hidden}
.gallery-viewer::backdrop{background:rgba(0,0,0,.88)}.gallery-toolbar{display:flex;align-items:center;justify-content:space-between;height:42px}.gallery-count{font-size:14px;color:var(--muted)}.gallery-viewer button{background:var(--panel);color:var(--text);border:1px solid var(--line);cursor:pointer;font:inherit;padding:8px 16px}.gallery-viewer button:hover{background:#3d4840}.gallery-viewer button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.gallery-stage{display:flex;align-items:center;justify-content:space-between;gap:16px;height:calc(100% - 90px)}.gallery-stage figure{margin:0;min-width:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.gallery-stage figure img{max-width:100%;max-height:calc(100% - 40px);width:auto;height:auto;object-fit:contain}.gallery-stage figcaption{color:var(--muted);font-size:13px;text-align:center;padding-top:10px}.gallery-stage .gallery-prev,.gallery-stage .gallery-next{font-size:32px;padding:8px 14px;flex-shrink:0}.gallery-help{text-align:center;font-size:12px;color:var(--muted);margin:12px 0 0}.gallery-stage [hidden]{display:none}
@media(max-width:600px){.gallery-viewer{padding:12px;width:100vw;max-width:100vw;height:96dvh;max-height:96dvh}.gallery-stage{gap:5px}.gallery-stage .gallery-prev,.gallery-stage .gallery-next{padding:6px;font-size:28px}.gallery-help{font-size:10px}}
/* Larger gallery thumbnails with compact spacing. */
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0 32px}.gallery-grid figure{margin:0;min-width:0}.gallery-grid a{display:block}.gallery-grid img{display:block;width:100%;height:190px;object-fit:cover;background:var(--panel)}.gallery-grid figcaption{font-size:12px;color:var(--muted);padding-top:5px}.gallery-grid a:hover img{filter:brightness(1.12)}
/* Featured work images are twice the height of the original 512x120 buttons. */
.work-row{grid-template-columns:440px 1fr;gap:40px}.work-row .project-rollover{aspect-ratio:512 / 240}
@media(max-width:1000px){.work-row{grid-template-columns:360px 1fr;gap:28px}}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.work-row{grid-template-columns:300px 1fr;gap:24px}}
@media(max-width:600px){.work-row{grid-template-columns:1fr}.gallery-grid{gap:8px}.gallery-grid img{height:140px}}

.gears-level-links{grid-template-columns:1fr;max-width:512px;gap:16px;margin-bottom:32px}.gears-level-links a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

/* Featured project layout experiments. */
.case-experiment .case-section p {
    margin-bottom: 0;
}
.case-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 48px 0 64px;
}
.case-experiment .case-media {
    padding-top: 32px;
}
.case-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

/* Worlds Collide: cinematic artwork and a leadership overview. */
.dc-cinematic {
    position: relative;
    min-height: 560px;
    margin-top: 32px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background: #111e28;
}
.dc-cinematic > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
}
.dc-cinematic::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 18, 29, .95), rgba(7, 18, 29, .15)), linear-gradient(0deg, rgba(7, 18, 29, .8), transparent 70%);
}
.dc-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 620px;
    padding: 52px;
}
.dc-hero-copy h1 {
    font-size: clamp(48px, 6vw, 86px);
}
.dc-hero-copy > p:last-child {
    max-width: 440px;
    color: #d2dfe5;
    font-size: 18px;
    margin-bottom: 0;
}
.case-dcworldscollide .dc-cinematic > img {
    object-position: center 48%;
}
.case-dcworldscollide {
    --accent: #acd7ef;
}
.dc-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--line);
}
.dc-facts > div {
    padding: 32px 28px;
    border-right: 1px solid var(--line);
}
.dc-facts > div:last-child {
    border-right: 0;
}
.dc-facts dt {
    font-size: 42px;
    font-weight: bold;
    line-height: 1.2;
    color: var(--accent);
}
.dc-facts dd {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
}
.dc-story {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 60px;
    padding-top: 64px;
}
.dc-story aside h2 {
    font-size: 30px;
}
.dc-story aside > p:last-child {
    color: var(--muted);
    font-size: 14px;
}
.dc-story-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}
.dc-story-grid .case-section {
    margin: 0;
    border-top: 2px solid var(--accent);
    padding-top: 24px;
}
.dc-story-grid h2 {
    font-size: 24px;
}

/* TMNT shares the Worlds Collide presentation. */
.case-tmnt {
    --accent: #acd7ef;
}
.case-tmnt .dc-facts dt {
    font-size: clamp(24px, 3vw, 36px);
}

/* Spellstone: development timeline with the shared fonts and palette. */
.spell-intro {
    padding-top: 56px;
}
.spell-intro .lede {
    margin-bottom: 32px;
}
.spell-intro > img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
}
.spell-story {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
    padding-top: 64px;
}
.spell-story aside h2 {
    font-size: 36px;
}
.spell-story aside > p:last-child {
    color: var(--muted);
    max-width: 320px;
}
.spell-timeline {
    border-left: 1px solid var(--line);
    padding-left: 36px;
}
.spell-stage {
    position: relative;
    padding-bottom: 36px;
}
.spell-stage::before {
    content: '';
    position: absolute;
    left: -43px;
    top: 3px;
    width: 13px;
    height: 13px;
    background: var(--accent);
    border: 3px solid var(--bg);
    border-radius: 50%;
}
.spell-stage .eyebrow {
    margin-bottom: 14px;
}
.spell-stage .case-section {
    margin: 0;
}
.spell-stage h2 {
    font-size: 28px;
}
@media (max-width: 900px) {
    .dc-story,
    .spell-story {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}
@media (max-width: 600px) {
    .dc-cinematic {
        min-height: 480px;
    }
    .dc-hero-copy {
        padding: 28px;
    }
    .dc-facts,
    .dc-story-grid,
    .case-video-grid {
        grid-template-columns: 1fr;
    }
    .dc-facts > div {
        padding: 20px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .dc-facts > div:last-child {
        border-bottom: 0;
    }
    .case-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
    .spell-timeline {
        padding-left: 24px;
    }
    .spell-stage::before {
        left: -31px;
    }
}

/* Earlier projects share the portfolio's typography, palette, and spacing. */
.project-intro {
    padding: 48px 0 40px;
}
.project-intro.has-art {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.project-heading h1 {
    font-size: clamp(38px, 4.5vw, 64px);
    letter-spacing: -2px;
}
.project-heading > p:last-child {
    color: var(--muted);
    font-size: 18px;
    margin: 24px 0 0;
}
.project-cover {
    display: block;
    width: 100%;
    max-height: 440px;
    object-fit: contain;
    background: var(--panel);
    border: 1px solid var(--line);
}
.project-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    gap: 32px;
    padding: 24px 0;
}
.project-facts dt {
    font-size: 11px;
    font-weight: bold;
    color: var(--accent);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.project-facts dd {
    margin: 6px 0 0;
    font-size: 16px;
}
.project-narrative .case-section {
    border-top: 2px solid var(--accent);
    padding-top: 24px;
    margin-bottom: 32px;
}
.project-narrative h2 {
    font-size: 28px;
}
.project-credits,
.project-gallery,
.project-links,
.project-detail .case-media {
    padding-top: 40px;
}
.project-credits {
    margin-top: 16px;
    border-top: 1px solid var(--line);
}
.project-detail h2 {
    font-size: 30px;
}
.credits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.credits-grid li {
    padding: 20px;
    background: var(--panel);
}
.credits-grid strong,
.credits-grid span {
    display: block;
}
.credits-grid span,
.credit-dedication {
    font-size: 14px;
    color: var(--muted);
}
.project-links .text-link {
    margin-right: 24px;
}
.map-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.map-card {
    display: block;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
}
.map-card > img {
    display: block;
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: cover;
    transition: filter .2s ease;
}
.map-card > div {
    padding: 24px;
}
.map-card h3 {
    font-size: 23px;
}
.map-card p {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
}
.map-card:hover,
.map-card:focus-visible {
    border-color: var(--accent);
}
.map-card:hover > img,
.map-card:focus-visible > img {
    filter: brightness(1.2);
}
@media (max-width: 900px) {
    .project-intro.has-art {
        grid-template-columns: 1fr;
    }
    .credits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .map-card-grid {
        grid-template-columns: 1fr;
    }
    .map-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}
@media (max-width: 600px) {
    .project-facts,
    .credits-grid,
    .map-card {
        grid-template-columns: 1fr;
    }
    .project-intro {
        padding-top: 32px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .map-card > img {
        transition: none;
    }
}

/* Project details sidebar trial: Avengers Initiative and Devil's Tuning Fork. */
.project-sidebar-details {
    margin: 0;
    border-top: 2px solid var(--accent);
}
.project-sidebar-details > div {
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}
.project-sidebar-details dt {
    color: var(--accent);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.project-sidebar-details dd {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.5;
}
@media (min-width: 601px) and (max-width: 900px) {
    .project-sidebar-details {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 32px;
    }
}

/* Single-heading media and credit sections on non-featured project pages. */
.project-detail .project-gallery,
.project-detail .project-credits,
.project-detail .case-media {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
}

/* About page: personal introduction and career progression. */
.about-page .page-head h1 {
    color: var(--accent);
}
.career-timeline {
    list-style: none;
    border-left: 1px solid var(--line);
    padding: 0 0 0 24px;
    margin: 0 0 24px;
}
.career-timeline li {
    position: relative;
    padding-bottom: 28px;
}
.career-timeline li:last-child {
    padding-bottom: 0;
}
.career-timeline li::before {
    content: '';
    position: absolute;
    left: -29px;
    top: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
}
.career-sidebar .career-date {
    color: var(--accent);
    font-size: 12px;
    margin: 0 0 6px;
}
.career-timeline h3 {
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -.2px;
    margin: 0 0 6px;
}
.career-sidebar .career-studio {
    font-size: 13px;
    margin: 0;
}
@media (max-width: 900px) {
    .about-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .about-layout .about-story {
        grid-row: 1;
    }
    .about-layout .career-sidebar {
        grid-row: 2;
    }
}