/* AOD Case Study chapters (1.1.0). Structure only. Colours and typefaces come from the brand file. */

.aodch{
	--b-ground:#f6f6f3;--b-stone:#d8d4cc;--b-mist:#c3cfcc;--b-ivory:#f4f2ed;--b-white:#fff;
	--b-ink:#1f2323;--b-soft:#4a5252;--b-line:#cfc9bf;--b-accent:#8a948c;--b-dark:#232828;--b-on-dark:#f4f2ed;
	--b-display:Georgia,"Times New Roman",serif;--b-text:"Helvetica Neue",Arial,sans-serif;
	--s1:24px;--s2:48px;--s3:96px;
	margin:0;background:var(--b-ground);color:var(--b-ink);font-family:var(--b-text);font-size:18px;line-height:29px;
	-webkit-font-smoothing:antialiased;overflow-x:clip;text-align:left;
}
.aodch *,.aodch *::before,.aodch *::after{box-sizing:border-box}
.aodch img{display:block;max-width:100%;height:auto}
.aodch a{color:inherit;text-underline-offset:4px}
.aodch a:focus-visible{outline:3px solid var(--b-ink);outline-offset:3px}
.aodch .wrap{max-width:1248px;margin:0 auto;padding:0 var(--s1)}

/* grounds */
.aodch .st{padding:var(--s3) 0;background:var(--b-ground);color:var(--b-ink)}
.aodch .tone-ground{background:var(--b-ground)}
.aodch .tone-stone{background:var(--b-stone)}
.aodch .tone-mist{background:var(--b-mist)}
.aodch .tone-ivory{background:var(--b-ivory)}
.aodch .tone-white{background:var(--b-white)}
.aodch .tone-dark{background:var(--b-dark);color:var(--b-on-dark)}
.aodch .tone-dark a:focus-visible{outline-color:var(--b-on-dark)}

/* type */
.aodch h1,.aodch h2,.aodch h3{font-family:var(--b-display);font-weight:500;margin:0;text-wrap:balance;letter-spacing:0}
.aodch h1{font-size:56px;line-height:60px}
.aodch h2{font-size:44px;line-height:49px;max-width:18ch;margin:0 0 var(--s1)}
.aodch h3{font-size:29px;line-height:35px;margin:0 0 12px}
.aodch p{margin:0 0 var(--s1);max-width:62ch;text-wrap:pretty}
.aodch .lead{font-size:21px;line-height:33px}
.aodch .tag{font-size:21px;line-height:29px;color:var(--b-soft);margin:0 0 var(--s1)}
.aodch .cap{color:var(--b-soft);margin:var(--s1) 0 0}
.aodch .tone-dark .cap{color:var(--b-on-dark)}
.aodch b,.aodch strong{font-family:var(--b-display);font-weight:500;font-size:24px;line-height:29px}
.aodch .num{display:block;font:500 96px/96px var(--b-display);color:transparent;-webkit-text-stroke:2px var(--b-ink);margin:0 0 var(--s1)}
@supports not (-webkit-text-stroke:1px #000){.aodch .num{color:var(--b-ink)}}
.aodch .tone-dark .num{-webkit-text-stroke-color:var(--b-on-dark)}
.aodch blockquote{margin:0 0 var(--s1);padding:0 0 0 var(--s1);border-left:1px solid var(--b-accent);max-width:56ch}
.aodch blockquote p{font:500 29px/35px var(--b-display);margin:0 0 12px;text-wrap:balance}
.aodch blockquote footer{color:var(--b-soft)}

/* grid */
.aodch .row{display:grid;gap:var(--s2);grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
.aodch .c4{grid-column:span 4}.aodch .c5{grid-column:span 5}.aodch .c6{grid-column:span 6}.aodch .c7{grid-column:span 7}.aodch .c8{grid-column:span 8}
.aodch .row>div>:last-child,.aodch .wrap>:last-child{margin-bottom:0}
.aodch .hero-lower{margin-top:var(--s2)}
.aodch .intro-row{margin:var(--s2) 0}

/* hero */
.aodch .portrait{background:var(--b-mist);padding:var(--s2) var(--s2) 0}
.aodch .portrait img{width:100%}
.aodch .facts{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s1);margin:0}
.aodch .facts>div{border-top:1px solid var(--b-line);padding:12px 0 var(--s1)}
.aodch .facts dt{font:500 18px/26px var(--b-text);margin:0 0 4px}
.aodch .facts dd{margin:0}

/* image cells */
.aodch .cell{background:var(--b-ivory);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:var(--s1)}
.aodch .cell img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.aodch .cell.big{aspect-ratio:auto;padding:var(--s2)}
.aodch .cell.big img{width:100%;max-width:880px}
.aodch .cell.feature{margin:var(--s2) 0}
.aodch .cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-top:var(--s1)}
.aodch .cells h3{margin-top:var(--s1)}
.aodch .intro{max-width:none}
.aodch .pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.aodch .pair .cell{aspect-ratio:16/9;padding:var(--s1)}
.aodch .pair .cell img{width:100%;max-height:100%;object-fit:contain}
.aodch .pair .cap{margin:0 0 var(--s1)}
.aodch .after-pair{margin-top:var(--s2)}
.aodch .ph{margin:var(--s2) 0 0}
.aodch .ph img{width:100%}
.aodch .ph:first-child{margin-top:0}

/* screens and documents */
.aodch .shot,.aodch .screen img{border:1px solid var(--b-line);width:100%;background:#fff}
.aodch .shotwrap{margin:var(--s2) 0}
.aodch .screen{margin:var(--s2) 0 0}
.aodch .screen .cap,.aodch .shotwrap .cap{margin:var(--s1) 0 0}
.aodch .item{margin-top:var(--s2)}
.aodch .ph + .item{margin-top:var(--s2)}
.aodch .pair2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin:var(--s2) 0;align-items:end}
.aodch .pair2 .screen{margin:0}
.aodch .fig-h,.aodch .list-h{margin-top:var(--s3)}
.aodch .list-h{margin-top:var(--s2)}
.aodch .specimens{margin:var(--s2) 0}
.aodch .spec{border-top:1px solid var(--b-line);padding-top:var(--s1)}
.aodch .spec .face-display{font:500 44px/49px var(--b-display);margin:0 0 12px;max-width:none}
.aodch .spec .face-text{font:400 44px/49px var(--b-text);margin:0 0 12px;max-width:none}
.aodch .spec .spec-note{margin:0}
.aodch .sw{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s1)}
.aodch .sw i{display:block;aspect-ratio:1/1}
.aodch .sw b{display:block;margin-top:12px;font-size:21px;line-height:29px}
.aodch .sw span{display:block}

/* audience list */
.aodch .arch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:var(--s1) 0 0;border:1px solid var(--b-line);background:#fff}
.aodch .arch>div{padding:var(--s1);border-left:1px solid var(--b-line)}
.aodch .arch>div:first-child{border-left:0}
.aodch .arch b{display:block;margin:0 0 12px;line-height:30px}
.aodch .arch span{display:block}
.aodch .archnote{max-width:70ch}

/* numerals */
.aodch .nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s1);margin:0 0 var(--s1)}
.aodch .nums>div{border-top:1px solid var(--b-soft);padding-top:12px}
.aodch .nums .n{display:block;font:400 56px/60px var(--b-text);font-variant-numeric:tabular-nums}
.aodch .before-nums{margin:var(--s2) 0 var(--s1)}
.aodch .after-nums{margin:0}

@media (max-width:1100px){
	.aodch .st{padding:64px 0}
	.aodch .row{grid-template-columns:1fr;gap:var(--s1)}
	.aodch .c4,.aodch .c5,.aodch .c6,.aodch .c7,.aodch .c8{grid-column:auto}
	.aodch .cells,.aodch .pair,.aodch .pair2{grid-template-columns:1fr;gap:var(--s2)}
	.aodch .sw{grid-template-columns:repeat(3,minmax(0,1fr))}
	.aodch .arch{grid-template-columns:1fr 1fr}
	.aodch .arch>div:nth-child(3){border-left:0}
	.aodch .arch>div:nth-child(n+3){border-top:1px solid var(--b-line)}
	.aodch .nums{grid-template-columns:1fr 1fr}
	.aodch .num{font-size:72px;line-height:72px}
	.aodch .row>div>h2:last-child{margin-bottom:0}
}
@media (max-width:640px){
	.aodch{--s2:32px;--s3:48px}
	.aodch .st{padding:48px 0}
	.aodch h1{font-size:40px;line-height:44px}
	.aodch h2{font-size:32px;line-height:34px;max-width:none}
	.aodch blockquote p{font-size:24px;line-height:30px}
	.aodch .spec .face-display,.aodch .spec .face-text{font-size:26px;line-height:32px}
	.aodch .portrait,.aodch .pair .cell,.aodch .cell.big{padding:var(--s1)}
	.aodch .portrait{padding-bottom:0}
	.aodch .facts{grid-template-columns:1fr}
	.aodch .sw{grid-template-columns:repeat(2,minmax(0,1fr))}
	.aodch .arch{grid-template-columns:1fr}
	.aodch .arch>div{border-left:0;border-top:1px solid var(--b-line)}
	.aodch .arch>div:first-child{border-top:0}
	.aodch .nums .n{font-size:44px;line-height:48px}
}
@media print{.aodch,.aodch *{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
@media (prefers-reduced-motion:reduce){.aodch *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* 1.1.1 theme overrides: headings take the brand ink, numerals use the brand text face */
.aodch h1,.aodch h2,.aodch h3{color:var(--b-ink)}
.aodch .tone-dark h1,.aodch .tone-dark h2,.aodch .tone-dark h3{color:var(--b-on-dark)}
.aodch .num{font-family:var(--b-text);font-weight:400}

/* 1.1.2 the shared More block is a two column grid that clips its titles on phones; for chapter pages only, show it as one column */
@media (max-width:820px){
.aodcs.aodcs-tail .more{grid-template-columns:1fr}
.aodcs.aodcs-tail .more a{min-height:0;padding:28px 24px 32px}
.aodcs.aodcs-tail .more a .t{margin-top:40px;overflow-wrap:break-word}
.aodcs.aodcs-tail .more a .d{max-width:none}
}

/* Visible breadcrumb in the hero of chapter pages (1.1.4): same trail as the BreadcrumbList data. */
.aodch .aodch-crumbs{margin:0 0 clamp(20px,2.4vw,32px)}
.aodch .aodch-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;font-size:14px;line-height:1.4;font-weight:500;font-family:inherit;color:inherit}
.aodch .aodch-crumbs li{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto;margin:0;padding:0}
.aodch .aodch-crumbs li+li::before{content:"\203A";margin:0 7px;opacity:.55}
.aodch .aodch-crumbs a{color:inherit;opacity:.75;text-decoration:none;border-bottom:1px solid transparent}
.aodch .aodch-crumbs a:hover,.aodch .aodch-crumbs a:focus-visible{opacity:1;border-bottom-color:currentColor}
.aodch .aodch-crumbs [aria-current]{color:inherit}
.aodch .aodch-crumbs li:last-child{flex:0 1 auto;min-width:0;display:block;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.aodch .aodch-crumbs li:first-child{display:none}.aodch .aodch-crumbs li:nth-child(2)::before{display:none}}

/* AOD header on chapter pages (1.1.5, ivory): breadcrumb, kicker and title are Agent Orange Design, whatever the client brand. Client typefaces and colours stay in the showcase sections below. */
.aodch section.st.hero{background:#F6F6F3;color:#0E0F10}
.aodch section.st.hero .aodch-crumbs ol{font-family:Roboto,Arial,sans-serif;font-size:15px;color:#5A5853}
.aodch section.st.hero .aodch-crumbs li,.aodch section.st.hero .aodch-crumbs a{color:#5A5853}
.aodch section.st.hero .aodch-crumbs [aria-current]{color:#0E0F10}
.aodch section.st.hero .tag{font-family:Archivo,Roboto,Arial,sans-serif;font-weight:800;font-size:28px;line-height:1.15;letter-spacing:-0.01em;text-transform:none;color:#FB690F;margin:0 0 20px}
.aodch section.st.hero h1{font-family:Archivo,Roboto,Arial,sans-serif;font-weight:800;letter-spacing:-0.02em;color:#0E0F10;font-size:clamp(40px,4.2vw,56px);line-height:1.02;margin:0 0 28px}
.aodch section.st.hero .lead,.aodch section.st.hero .facts,.aodch section.st.hero .facts *{font-family:Roboto,Arial,sans-serif;color:#0E0F10}
.aodch section.st.hero blockquote,.aodch section.st.hero blockquote *{color:#0E0F10}
.aodch section.st.hero blockquote p:last-child,.aodch section.st.hero blockquote cite,.aodch section.st.hero blockquote footer{color:#5A5853}
.aodch section.st.hero .facts dt{color:#C24A00}
@media print{.aodch section.st.hero{-webkit-print-color-adjust:exact;print-color-adjust:exact}}