/* Córtex Frontal, design layer v2 */
/* 1. two typefaces: Garamond to read, Plex Mono for structure */
.btn,.lang,.lang a,.ff,.ff *,.mclose,.burger{font-family:'IBM Plex Mono',monospace!important}
.btn{font-size:12px!important;letter-spacing:1.5px!important;padding:12px 24px!important}
.lang{font-size:12px!important;letter-spacing:1.5px!important}
/* 2. brand: mark + name on every page */
.brandmark.wm{display:inline-flex!important;flex-direction:row!important;align-items:center!important;gap:12px!important}
.brandmark.wm img{height:46px!important;width:auto;display:block}
.brandmark.wm .bt{display:flex;flex-direction:column;gap:5px}
/* 3. type scale: nothing under 11px, small labels slightly larger */
.cal .n{font-size:11px!important}
.progp.inl .cal{font-size:12.5px!important}
.progp .cal th{font-size:11px!important}
.rbox .seas b{font-size:11.5px!important}
.incl .sub,.rbox.incl .sub{font-size:16px!important}
/* 4. footer */
.ff{border-top:1px solid #D8D4D0;padding-top:44px!important;padding-bottom:44px!important;font-size:12px!important;letter-spacing:.5px;line-height:1.7!important}
.ff .fl{gap:28px!important}
/* 5. inner pages on the same two-column grid as the home page */
body.tc .page > div[style*="padding: 100px"]{padding:100px 56px 60px!important;justify-content:flex-start!important}
body.tc .page > div[style*="padding: 100px"] h1{max-width:none!important}
body.tc main{max-width:none!important;width:100%!important;padding-left:56px!important;padding-right:56px!important;box-sizing:border-box}
body.tc main > section.sec.tc2{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0!important}
body.tc main > section.sec.tc2 > h2.h2{grid-column:1;margin:0;padding-right:32px;font-size:18px;line-height:1.5}
body.tc main > section.sec.tc2 > .tcb{grid-column:2;display:flex;flex-direction:column;gap:20px;max-width:860px;min-width:0}
body.tc .hero-img{padding:0 56px!important;justify-content:flex-start!important}
body.tc .hero-img img{max-width:none!important;aspect-ratio:21/9!important}
@media (max-width:760px){
 .brandmark.wm img{height:32px!important}
 .brandmark.wm{gap:8px!important}
 body.tc .page > div[style*="padding: 100px"]{padding:56px 20px 32px!important}
 body.tc main{padding-left:20px!important;padding-right:20px!important}
 body.tc main > section.sec.tc2{grid-template-columns:minmax(0,1fr);row-gap:20px!important}
 body.tc main > section.sec.tc2 > h2.h2,body.tc main > section.sec.tc2 > .tcb{grid-column:1}
 body.tc .hero-img{padding:0 20px!important}
 body.tc .hero-img img{aspect-ratio:3/2!important}
 .ff{padding-top:32px!important}
}
body.tc main > section.sec:not(.tc2){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2fr);row-gap:20px!important;column-gap:0!important}
body.tc main > section.sec:not(.tc2) > *{grid-column:2;max-width:860px;min-width:0}
@media (max-width:760px){body.tc main > section.sec:not(.tc2){grid-template-columns:minmax(0,1fr)}body.tc main > section.sec:not(.tc2) > *{grid-column:1}}
/* single column test */
body.tc main > section.sec.tc2,body.tc main > section.sec:not(.tc2){display:flex!important;flex-direction:column!important;gap:20px!important;max-width:860px}
body.tc main > section.sec.tc2 > h2.h2{padding-right:0;margin:0 0 4px}
body.tc main > section.sec > *{max-width:none}
body.tc main > section.sec.tc2 > .tcb{max-width:none}
/* agenda aligned with the rest of the site */
body.ag .page > div[style*="padding: 100px"]{padding:100px 56px 60px!important;justify-content:flex-start!important}
body.ag .page > div[style*="padding: 100px"] h1{max-width:none!important}
body.ag main{max-width:1100px!important;margin:0!important;padding-left:56px!important;padding-right:56px!important;box-sizing:content-box}
body.ag .ty{color:#57524D!important}
@media (max-width:760px){body.ag .page > div[style*="padding: 100px"]{padding:56px 20px 32px!important}body.ag main{padding-left:20px!important;padding-right:20px!important;box-sizing:border-box;max-width:none!important}}
/* lightbox */
.lb-on{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:1000;background:#FFFFFF;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:calc(100vw - 160px);max-height:calc(100vh - 140px);width:auto;height:auto;display:block;box-shadow:0 10px 40px rgba(0,0,0,.12)}
.lb button{position:absolute;background:none;border:0;cursor:pointer;color:#2E2B27;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:2px;padding:16px}
.lb button:hover{color:#853240}
.lb .lbx{top:24px;right:40px}
.lb .lbp{left:24px;top:50%;transform:translateY(-50%);font-size:24px}
.lb .lbn{right:24px;top:50%;transform:translateY(-50%);font-size:24px}
.lb .lbc{white-space:pre;position:absolute;bottom:28px;left:0;right:0;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1.5px;color:#57524D}
@media (max-width:760px){.lb img{max-width:calc(100vw - 32px);max-height:calc(100vh - 160px)}.lb .lbp,.lb .lbn{top:auto;bottom:16px;transform:none}.lb .lbx{right:12px;top:12px}}
.ff .fl .flogos{order:-1}
/* palette v3: carbon and plaster pink */
.ff{background:#ECEAE7;border-top:0!important}
.cal td.ad .a{color:#2E2B27!important}
/* faq: accent on the + and on the open question */
.fq summary::after{color:#853240!important;transition:transform .2s ease}
.fq summary:hover,.fq details[open] summary{color:#853240}
.fq details[open]{border-bottom-color:#853240}

/* video: own poster, YouTube loads only on click. Markup: <figure class="yt" data-id="YOUTUBE_ID"><button type="button" class="yt-p" aria-label="Play"><img src="..." alt=""><span class="yt-b"></span></button><figcaption>Film</figcaption></figure> */
.yt{margin:0;width:100%}.yt .yt-p{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#2E2B27;cursor:pointer;overflow:hidden}.yt .yt-p img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s ease}.yt .yt-p:hover img{opacity:.85}.yt .yt-b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border:1px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(46,43,39,.25);transition:background .2s ease,border-color .2s ease}.yt .yt-b::before{content:"";margin-left:5px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}.yt .yt-p:hover .yt-b{background:#853240;border-color:#853240}.yt iframe{display:block;width:100%;aspect-ratio:16/9;border:0}.yt figcaption{margin-top:12px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#57524D}@media (max-width:760px){.yt .yt-b{width:60px;height:60px}}
/* logo A1.3: text sits on the bottom line of the image; sizes are shares of the image height */
.brandmark{--lh:80px}
@media (max-width:760px){.brandmark{--lh:56px}}
.brandmark.wm,.hero .brandmark{align-items:flex-end!important;gap:calc(var(--lh)*.16)!important}
.brandmark.wm img,.hero .brandmark>img{height:var(--lh)!important;width:auto}
.brandmark.wm .bt,.hero .brandmark>div{gap:calc(var(--lh)*.075)!important}
.brandmark.wm .bname,.hero .brandmark>div>div:first-child{font-size:calc(var(--lh)*.25)!important;letter-spacing:.15em!important;line-height:1!important}
.brandmark.wm .bsub,.hero .brandmark>div>div:last-child{font-size:calc(var(--lh)*.21)!important;letter-spacing:0!important;line-height:1!important;margin-bottom:-.145em}
/* small phones: logo and PT/EN must not touch */
@media (max-width:480px){
 .page header{padding:0 16px!important;gap:12px}
 .page header .brandmark{--lh:44px;min-width:0}
 .page header .brandmark .bname,.page header .brandmark>div>div{white-space:nowrap}
 .page header .lang,.page header > div:last-child{gap:14px!important;flex-shrink:0}
 .page header .burger,.page header > div:last-child > a[aria-label]{width:30px!important}
 .page header .burger span,.page header > div:last-child > a[aria-label] span{width:24px!important}
}
@media (max-width:370px){
 .page header .brandmark{--lh:38px}
 .page header .lang,.page header > div:last-child{gap:10px!important}
}
