/* WordPress blocks in the Tank Codex look. Loaded after site.css on Tank Codex pages. */

/* ---- page frame */
.page{padding-block:44px 80px}
.page[data-page="home"]{padding-top:0}
main{overflow-x:clip}
.tcx-content :where(.is-layout-flow,.is-layout-constrained) > *{margin-block:0}
.tcx-content :where(.wp-block-group,.wp-block-columns,.wp-block-buttons,.wp-block-image,.wp-block-table,.wp-block-code,.wp-block-list){margin:0}
.tcx-content :where(p,h1,h2,h3,h4,ul,ol,figure){margin:0}
.tcx-content > * + *{margin-top:24px}
.tcx-content > .block,.tcx-content > .block + *{margin-top:0}
.tcx-content .block{padding-block:56px;display:grid;gap:24px}
.tcx-content .block > *{min-width:0}
.tcx-content .block-tight{padding-block:20px 36px}
.tcx-block{min-width:0}

/* ---- text styles */
.is-style-eyebrow{font-family:var(--f-caps);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember-hi)}
.is-style-eyebrow::after{content:"";display:block;width:28px;height:3px;background:var(--ember);margin-top:8px}
.is-style-lede{color:var(--soft);font-size:18px;max-width:60ch}
.tcx-content p{overflow-wrap:break-word}
.tcx-content :where(p,li,td,figcaption,summary,h2,h3) > a,.tcx-content :where(p,li,td) a{color:var(--ember-hi)}
.tcx-content p code,.tcx-content td code,.tcx-content li code{font-family:var(--f-caps);font-weight:700;color:var(--gold-hi);background:var(--ink);border:1px solid var(--edge);padding:1px 7px;border-radius:3px;white-space:nowrap;font-size:.92em}
.tcx-content h2.sub,.tcx-content .wp-block-heading.sub{font-size:36px;margin-top:56px}
.tcx-content h2{font-family:var(--f-display);font-weight:800}
.tcx-content h3{font-family:var(--f-display);font-weight:700;font-size:24px}

/* ---- page and section heads */
.page-head{display:grid;gap:14px;max-width:760px;margin-bottom:36px}
.page-head h1{font-size:clamp(40px,6vw,64px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;margin-bottom:4px}
.sec-head > .sec-title{display:grid;gap:10px;flex:1 1 300px;min-width:0}
.sec-head > .sec-title h2{font-size:clamp(32px,4.4vw,46px);max-width:20ch}
.sec-head > p{color:var(--soft);flex:0 1 50ch;min-width:240px}

/* ---- buttons */
.tcx-content .wp-block-buttons,.tcx-content .wp-block-buttons.is-layout-flex{display:flex;flex-wrap:wrap;gap:10px 12px}
.tcx-content .wp-block-button__link{--cut:7px;display:inline-flex;align-items:center;gap:8px;font-family:var(--f-caps);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:14px;line-height:1.2;padding:12px 20px;border:0;border-radius:0;cursor:pointer;text-decoration:none;color:var(--text);background:var(--raised);clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));transition:filter .15s,transform .1s}
.tcx-content .wp-block-button__link:hover{filter:brightness(1.18);color:var(--text)}
.tcx-content .is-style-ember .wp-block-button__link{background:linear-gradient(180deg,var(--ember-hi),var(--ember));color:#2a0e03}
.tcx-content .is-style-ember .wp-block-button__link:hover{color:#2a0e03}
.tcx-content .wp-block-button__link:not([href]){cursor:default;filter:saturate(.6) brightness(.85)}

/* ---- boxes */
.tcx-content .is-style-plate,.tcx-content .wp-block-columns.is-style-plates > .wp-block-column{--cut:10px;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));background:linear-gradient(180deg,var(--panel-hi),var(--panel))}
.tcx-content .wp-block-group.is-style-plate,.tcx-content .wp-block-columns.is-style-plates > .wp-block-column{padding:20px}
.tcx-content .wp-block-columns{gap:16px}
.tcx-kept{display:grid;gap:16px;max-width:860px}
.tcx-kept video,.tcx-kept iframe{width:100%;max-width:100%;display:block;background:#000}
.tcx-content .wp-block-embed iframe{width:100%}
.tcx-content .wp-block-image img{height:auto}
.tcx-content figcaption{font-size:14px;color:var(--faint);margin-top:6px}

/* ---- hero */
.tcx-content > .hero{position:relative;padding-block:72px 40px;margin:0}
.tcx-content > .hero::before{content:"";position:absolute;top:0;left:50%;width:100vw;transform:translateX(-50%);height:340px;background:url("../img/hero.webp") center/cover;opacity:.55;-webkit-mask:linear-gradient(180deg,#000 30%,transparent);mask:linear-gradient(180deg,#000 30%,transparent);pointer-events:none}
.tcx-content > .hero > *{position:relative}
.wp-block-columns.hero-grid,.wp-block-columns.hero-grid.is-layout-flex{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero-grid > .wp-block-column{min-width:0;display:grid;gap:0;align-content:center}
.hero h1{font-size:clamp(46px,7vw,86px);letter-spacing:-.005em;margin-top:18px;line-height:1.02}
.hero h1 em{font-style:italic;color:var(--ember-hi)}
.hero .is-style-lede{font-size:19px;max-width:46ch;margin-top:18px}
.hero .wp-block-buttons{margin-top:28px}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:34px}
.facts > .fact{display:grid}
.fact-num{font-family:var(--f-display);font-size:34px;font-weight:800;line-height:1}
.fact-label{font-family:var(--f-caps);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:4px}
.tcx-rg-wrap{display:grid}

/* ---- home: modes, news, split, works */
.wp-block-columns.modes,.wp-block-columns.modes.is-layout-flex{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wp-block-cover.mode{--cut:14px;min-height:260px;padding:26px;align-items:flex-end;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));color:var(--text)}
.wp-block-cover.mode .wp-block-cover__inner-container{display:grid;gap:10px;width:100%}
.wp-block-cover.mode h2{font-size:clamp(36px,5vw,54px);color:var(--text)}
.wp-block-cover.mode p{color:var(--soft);max-width:44ch}
.mode-st{font-family:var(--f-caps);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hi)!important}
.mode-st::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:7px;vertical-align:1px}
.mode-st.live{color:var(--good)!important}
.wp-block-columns.news,.wp-block-columns.news.is-layout-flex{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.newsc{display:grid;gap:8px;align-content:start}
.newsc .news-icon img{width:38px;height:38px;filter:brightness(0) saturate(100%) invert(62%) sepia(68%) saturate(2800%) hue-rotate(338deg) brightness(102%)}
.news-label{font-family:var(--f-caps);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--good)}
.newsc h3{font-size:23px;line-height:1.05}
.newsc p:last-child{color:var(--soft);font-size:14px}
.wp-block-columns.split,.wp-block-columns.split.is-layout-flex{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split > .wp-block-column{display:grid;gap:14px;align-content:center;min-width:0}
.split h2{font-size:clamp(32px,4.4vw,46px)}
.split p{color:var(--soft);max-width:50ch}
.split .wp-block-buttons{margin-top:10px}
.shot-frame{--cut:14px;padding:18px;background:radial-gradient(80% 80% at 50% 30%,#3a1a0e,var(--rail));clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.shot-frame img{box-shadow:0 20px 50px -10px #000;margin:0 auto;display:block}
.is-style-ticks{list-style:none;padding:0;display:grid;gap:12px}
.is-style-ticks li{position:relative;padding-left:28px;color:var(--soft)}
.is-style-ticks li::before{content:"";position:absolute;left:2px;top:8px;width:9px;height:9px;background:var(--ember);transform:rotate(45deg)}
.is-style-ticks strong{color:var(--text);font-weight:500}
.works{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.works > .work{--cut:8px;padding:16px 14px;display:grid;gap:4px}
.works > .work p:first-child strong{font-family:var(--f-display);font-size:19px;font-weight:700}
.works > .work p:last-child{font-size:13px;color:var(--faint)}

/* ---- steps (Guide, Notes) */
.steps{display:grid;gap:12px;max-width:820px;counter-reset:s}
.tcx-content .step{--cut:10px;position:relative;display:grid;gap:6px;padding:20px 20px 20px 78px}
.tcx-content .step::before{counter-increment:s;content:counter(s);position:absolute;left:24px;top:20px;font-family:var(--f-display);font-weight:800;font-size:34px;line-height:.9;color:var(--ember)}
.step h3{font-size:24px;font-weight:700}
.step p{color:var(--soft)}
.step .wp-block-code{font-family:var(--f-caps);font-weight:700;font-size:13.5px;color:var(--gold-hi);background:var(--ink);padding:9px 12px;margin-top:4px;overflow-x:auto;white-space:nowrap;border:0;border-radius:0}
.step .wp-block-code code{font:inherit;color:inherit;background:none;border:0;padding:0}

/* ---- tables */
.tcx-content .wp-block-table{overflow-x:auto;margin-top:18px}
.tcx-content .wp-block-table table{width:100%;border-collapse:collapse;font-size:15px}
.tcx-content .wp-block-table td,.tcx-content .wp-block-table th{border:0;border-bottom:1px solid var(--edge-soft);text-align:left;padding:11px 14px;vertical-align:top}
.tcx-content .wp-block-table th{font-family:var(--f-caps);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);background:var(--rail);font-weight:700}
.tcx-content .wp-block-table td{color:var(--soft)}
.tcx-content .wp-block-table.tcx-table td:first-child{white-space:nowrap}
.tcx-content .wp-block-table thead{border:0}
.tcx-content .wp-block-table.kv{margin:0}
.tcx-content .wp-block-table.kv td{border:0;padding:4px 18px 4px 0;font-size:14.5px;color:var(--text)}
.tcx-content .wp-block-table.kv td:first-child{color:var(--faint);white-space:nowrap;width:1%}

/* ---- questions */
.faq{display:grid;gap:10px;max-width:860px;margin-top:16px}
.tcx-content details.wp-block-details{--cut:8px;padding:0 18px;margin:0}
.tcx-content details.wp-block-details > summary{cursor:pointer;padding:15px 0;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:12px}
.tcx-content details.wp-block-details > summary::-webkit-details-marker{display:none}
.tcx-content details.wp-block-details > summary::after{content:"+";font-family:var(--f-display);font-weight:800;color:var(--ember)}
.tcx-content details.wp-block-details[open] > summary::after{content:"–"}
.tcx-content details.wp-block-details > :not(summary){color:var(--soft);padding-bottom:16px}

/* ---- download */
.wp-block-columns.dl,.wp-block-columns.dl.is-layout-flex{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tcx-content .dlc{--cut:14px;padding:28px;display:grid;gap:18px;align-content:start}
.dl-head{display:flex;gap:14px;align-items:center}
.dl-logo img{width:56px;height:56px}
.dl-logo-notes img{filter:saturate(.6)}
.dl-name h2{font-size:34px}
.dl-who{color:var(--soft);font-size:15px}

/* ---- phones and tablets */
@media (max-width:1000px){
  .wp-block-columns.hero-grid,.wp-block-columns.split,.wp-block-columns.dl,.wp-block-columns.modes,
  .wp-block-columns.hero-grid.is-layout-flex,.wp-block-columns.split.is-layout-flex,.wp-block-columns.dl.is-layout-flex,.wp-block-columns.modes.is-layout-flex{grid-template-columns:1fr}
  .wp-block-columns.news,.wp-block-columns.news.is-layout-flex{grid-template-columns:1fr 1fr}
  .works{grid-template-columns:repeat(3,1fr)}
  .tcx-rg-wrap .rg,.tcx-rg-wrap .rg-hint{justify-self:start}
}
@media (max-width:800px){.works{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.wp-block-columns.news,.wp-block-columns.news.is-layout-flex{grid-template-columns:1fr}}
/* Update videos on Home: videos side by side, hidden until one is added */
.tcx-updates{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:18px;align-items:start}
.wp-block-group.block.tcx-updates:not(:has(figure,iframe,video)){display:none}
.tcx-updates>*{grid-column:1/-1;margin:0}
.tcx-updates>figure,.tcx-updates>.wp-block-embed,.tcx-updates>.wp-block-video,.tcx-updates>.wp-block-image{grid-column:auto}
.tcx-updates figure{margin:0}
.tcx-updates iframe,.tcx-updates video{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;background:#000}
/* YouTube & co: WordPress keeps the 16:9 box itself (padding on the wrapper, iframe on top) */
.wp-embed-responsive .tcx-updates .wp-has-aspect-ratio iframe{position:absolute;inset:0;height:100%;aspect-ratio:auto}
.tcx-updates figcaption{font-size:14px;color:var(--faint);margin-top:8px}
.tcx-updates>p,.tcx-updates>.wp-block-heading{max-width:860px;color:var(--soft)}
.tcx-updates .wp-block-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}

/* a heading row switched to Stack in the editor: no stretching */
.sec-head.is-vertical{justify-content:flex-start}
.sec-head.is-vertical>*{flex:none}