/*
Theme Name: Uncode Child
Template: uncode
Description: Child theme for Uncode (chadwickbraithwaite.com). Put custom CSS and code here so theme updates never overwrite it.
Version: 1.0.0
Text Domain: uncode
*/

/* Custom styles go below this line */

/* Video tiles in the photo grid: small play badge (film covers link to player.vimeo.com) */
a[href*="player.vimeo.com"] { position: relative; display: block; }
a[href*="player.vimeo.com"]::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(0,0,0,.45) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 7v10l8-5z'/></svg>") center/28px no-repeat;
  border: 1px solid rgba(255,255,255,.6);
  pointer-events: none; z-index: 5;
  transition: transform .2s ease;
}
a[href*="player.vimeo.com"]:hover::after { transform: scale(1.1); }

/* Velour-style hero (homepage draft): moving photo wall behind a big headline */
.cbv{position:relative;min-height:100vh;background:#0b0b0c;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px;box-sizing:border-box}
.cbv-wall{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;z-index:0}
.cbv-row{flex:1 1 0;overflow:hidden;min-height:0}
.cbv-track{display:flex;gap:6px;height:100%;width:max-content;animation:cbv-scroll 90s linear infinite;will-change:transform}
.cbv .r2 .cbv-track{animation-duration:120s;animation-direction:reverse}
.cbv .r3 .cbv-track{animation-duration:100s}
.cbv .cbv-track img{height:100%!important;width:auto!important;max-width:none!important;object-fit:cover;display:block;margin:0!important}
@keyframes cbv-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cbv-shade{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,rgba(8,8,9,.78) 0%,rgba(8,8,9,.55) 60%,rgba(8,8,9,.45) 100%)}
.cbv-center{position:relative;z-index:3;max-width:1100px}
.cbv .cbv-h{font-family:'Anton',Impact,'Arial Narrow',sans-serif!important;font-weight:400!important;text-transform:uppercase;color:#f3efe6!important;font-size:clamp(64px,11vw,190px)!important;line-height:.9!important;letter-spacing:0!important;margin:0!important}
.cbv-kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#d9d3c9;margin:0 0 28px}
.cbv-sub{color:#e2ddd4;font-size:16px;line-height:1.6;max-width:460px;margin:28px auto 0}
.cbv-cta{display:inline-block;margin-top:24px;color:#fff!important;border-bottom:1px solid #fff;letter-spacing:.15em;text-transform:uppercase;font-size:12px;padding-bottom:4px;text-decoration:none}
@media (prefers-reduced-motion:reduce){.cbv-track{animation:none}}
@media (max-width:767px){.cbv{padding:100px 20px 60px}}

/* Velour-style services list with hover image */
.cbs{position:relative;background:#141414;padding:12vh 4vw;overflow:hidden}
.cbs-item{display:grid;grid-template-columns:1fr 60px minmax(200px,420px);align-items:end;column-gap:24px;border-bottom:1px solid rgba(243,239,230,.22);padding:4px 0}
.cbs .cbs-word{font-family:'Anton',Impact,'Arial Narrow',sans-serif;text-transform:uppercase;color:#f3efe6;font-size:clamp(56px,9vw,150px);line-height:1;transition:color .2s}
.cbs-item:hover .cbs-word{color:#f2a33a}
.cbs-num,.cbs-desc{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.6;letter-spacing:.06em;text-transform:uppercase;color:#f3efe6;padding-bottom:18px}
.cbs .cbs-float{position:absolute;left:0;top:0;width:300px!important;height:300px!important;max-width:none!important;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .2s;z-index:5}
.cbs .cbs-float.on{opacity:1}
@media (max-width:767px){.cbs-item{grid-template-columns:1fr}.cbs-num{display:none}.cbs-desc{padding:0 0 14px}.cbs .cbs-float{display:none}}

/* ===== Front page v2 (2026-09-28): kickers, who, stories, film modal, footer ===== */
.cbv,.cbs,.cbw,.cbc,.cbf{--cb-ink:#f3efe6;--cb-line:rgba(243,239,230,.2);--cb-amber:#f2a33a;--cb-mono:ui-monospace,Menlo,Consolas,monospace;--cb-display:'Anton',Impact,'Arial Narrow',sans-serif;box-sizing:border-box}
.cbv *,.cbs *,.cbw *,.cbc *,.cbf *{box-sizing:border-box}

/* Section kicker line (shared) */
.cbx-kick{display:flex;justify-content:space-between;gap:24px;font-family:var(--cb-mono);font-size:11px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--cb-ink);opacity:.75;border-bottom:1px solid var(--cb-line);padding-bottom:12px;margin:0 0 5vh}

/* Services: fill the screen so each section is one "page" */
.cbs{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:9vh 4vw}
.cbs .cbx-kick{margin-bottom:3vh}

/* Reveal on scroll (only when the script is running) */
.cbjs .cbx-rev{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.cbjs .cbx-rev.in{opacity:1;transform:none}
.cbjs .cbw-copy.cbx-rev{transition-delay:.15s}

/* Who / how I work */
.cbw{position:relative;min-height:100vh;background:#0b0b0c;color:var(--cb-ink);display:flex;flex-direction:column;justify-content:center;padding:9vh 4vw}
.cbw-main{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:4vw;align-items:end}
.cbw .cbw-h{font-family:var(--cb-display)!important;font-weight:400!important;text-transform:uppercase;color:var(--cb-ink)!important;font-size:clamp(56px,7.6vw,150px)!important;line-height:.92!important;letter-spacing:0!important;margin:0!important}
.cbw .cbw-copy{font-size:clamp(16px,1.15vw,20px);line-height:1.65;color:#d9d3c9;margin:0 0 .6em;max-width:480px}
.cbw-stats{list-style:none;margin:7vh 0 0!important;padding:0!important;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--cb-line)}
.cbw-stats li{margin:0!important;padding:22px 20px 0 0;border-right:1px solid var(--cb-line);display:flex;flex-direction:column;gap:10px}
.cbw-stats li+li{padding-left:22px}
.cbw-stats li:last-child{border-right:0}
.cbw .cbw-n{font-family:var(--cb-display);font-weight:400;font-size:clamp(44px,5vw,96px);line-height:1;color:var(--cb-ink);font-variant-numeric:tabular-nums}
.cbw-stats li:last-child .cbw-n{color:var(--cb-amber)}
.cbw-stats span{font-family:var(--cb-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#bdb6aa;line-height:1.5}

/* Stories (client tiles) */
.cbc{position:relative;min-height:100vh;background:#141414;color:var(--cb-ink);display:flex;flex-direction:column;justify-content:center;padding:9vh 4vw}
.cbc .cbc-h{font-family:var(--cb-display)!important;font-weight:400!important;text-transform:uppercase;color:var(--cb-ink)!important;font-size:clamp(56px,7.6vw,150px)!important;line-height:.92!important;letter-spacing:0!important;margin:0 0 6vh!important}
.cbc-grid{list-style:none;margin:0!important;padding:0!important;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--cb-line);border-left:1px solid var(--cb-line)}
.cbc-tile{margin:0!important;position:relative;border-right:1px solid var(--cb-line);border-bottom:1px solid var(--cb-line);aspect-ratio:16/9}
.cbc-tile a{position:absolute;inset:0;display:block;overflow:hidden;color:var(--cb-ink)!important;text-decoration:none!important;background:#141414;transform-origin:center;transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s ease;z-index:1;outline:none}
.cbc-tile:nth-child(4n+1) a{transform-origin:left center}
.cbc-tile:nth-child(4n) a{transform-origin:right center}
.cbc-media{position:absolute;inset:0;overflow:hidden}
.cbc .cbc-media img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;margin:0!important;filter:grayscale(1) contrast(1.05);opacity:.2;transform:scale(1.04);transition:opacity .6s ease,filter .6s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.cbc-vid{position:absolute;top:50%;left:50%;width:102%;height:102%;transform:translate(-50%,-50%);border:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.cbc-vid.on{opacity:1}
.cbc-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 8%;font-family:var(--cb-display);text-transform:uppercase;font-size:clamp(20px,2.1vw,40px);line-height:1;letter-spacing:.02em;color:var(--cb-ink);opacity:.85;transition:opacity .4s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.cbc-cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;font-family:var(--cb-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0));opacity:0;transform:translateY(8px);transition:opacity .4s ease .1s,transform .5s cubic-bezier(.2,.7,.2,1) .1s}
.cbc-play{display:inline-flex;align-items:center;gap:8px}
.cbc-play::before{content:"";width:0;height:0;border-left:8px solid var(--cb-amber);border-top:5px solid transparent;border-bottom:5px solid transparent}
.cbc-tile.is-on a,.cbc-tile a:focus-visible{transform:scale(1.14);z-index:5;box-shadow:0 24px 60px rgba(0,0,0,.65)}
.cbc-tile.is-on .cbc-media img,.cbc-tile a:focus-visible .cbc-media img{opacity:1;filter:none;transform:scale(1)}
.cbc-tile.is-on .cbc-logo,.cbc-tile a:focus-visible .cbc-logo{opacity:0;transform:translateY(-10px)}
.cbc-tile.is-on .cbc-cap,.cbc-tile a:focus-visible .cbc-cap{opacity:1;transform:none}
.cbc-tile a:focus-visible{outline:2px solid var(--cb-amber);outline-offset:-2px}

/* Film pop-up (until project pages exist) */
.cbm{position:fixed;inset:0;z-index:100000;background:rgba(8,8,9,.94);display:flex;align-items:center;justify-content:center;padding:6vh 5vw;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.cbm.on{opacity:1;visibility:visible;transition:opacity .35s ease}
.cbm-box{width:min(90vw,calc(80vh * 16 / 9));transform:scale(.97);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.cbm.on .cbm-box{transform:none}
.cbm-frame{position:relative;aspect-ratio:16/9;background:#000}
.cbm-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cbm-cap{margin:14px 0 0!important;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#bdb6aa}
.cbm .cbm-x{position:absolute;top:22px;right:4vw;background:none!important;border:0!important;box-shadow:none!important;color:#f3efe6!important;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;padding:8px 0!important;margin:0!important;line-height:1}
.cbm .cbm-x span{display:inline-block;margin-left:8px;transition:transform .3s ease}
.cbm .cbm-x:hover span{transform:rotate(90deg)}
html.cbm-lock,html.cbm-lock body{overflow:hidden!important}

/* Footer */
.cbf{position:relative;background:#f2a33a;color:#121212;overflow:hidden;min-height:100vh;display:flex;flex-direction:column}
.cbf a{color:#121212!important;text-decoration:none!important}
.cbf-ticker{border-bottom:1px solid rgba(18,18,18,.85);overflow:hidden;height:64px;display:flex;align-items:center}
.cbf-track{display:flex;width:max-content;animation:cbf-tick var(--cbf-dur,60s) linear infinite;will-change:transform}
.cbf-group{display:flex;align-items:center;gap:56px;padding-right:56px}
@keyframes cbf-tick{from{transform:translateX(0)}to{transform:translateX(var(--cbf-shift,-50%))}}
.cbf-i{display:inline-flex;align-items:center;white-space:nowrap}
.cbf-mark{font-family:var(--cb-display);font-size:26px;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.cbf-mono{font-family:var(--cb-mono);font-size:10px;line-height:1.35;letter-spacing:.14em;text-transform:uppercase}
.cbf-ap svg{display:block;animation:cbf-spin 14s linear infinite}
@keyframes cbf-spin{to{transform:rotate(360deg)}}
.cbf-rec{gap:8px;font-family:var(--cb-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.cbf-rec i{width:9px;height:9px;border-radius:50%;background:#c8102e;animation:cbf-blink 1.2s steps(1,end) infinite}
@keyframes cbf-blink{50%{opacity:0}}
.cbf-tc{font-variant-numeric:tabular-nums}
.cbf-pill{font-family:var(--cb-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;border:1px solid #121212;border-radius:999px;padding:6px 12px 5px}
.cbf-top{display:flex;justify-content:space-between;align-items:flex-start;gap:4vw;padding:6vh 4vw 0}
.cbf .cbf-cta{display:flex;flex-direction:column;font-family:var(--cb-display);text-transform:uppercase;font-size:clamp(56px,7.4vw,150px);line-height:.9;letter-spacing:0}
.cbf-cta span{display:flex;align-items:flex-start;gap:.08em}
.cbf-arrow{width:.42em;height:.42em;margin-top:.06em;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.cbf .cbf-cta:hover .cbf-arrow,.cbf .cbf-cta:focus-visible .cbf-arrow{transform:translate(.08em,-.08em)}
.cbf .cbf-cta:hover{color:#fff8ec!important}
.cbf-side{max-width:380px;display:flex;flex-direction:column;gap:22px;padding-top:.6vh}
.cbf-nav{display:flex;flex-wrap:wrap;gap:10px 26px;font-family:var(--cb-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.cbf-nav a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .35s ease}
.cbf-nav a:hover,.cbf-nav a:focus-visible{background-size:100% 1px}
.cbf .cbf-note{font-size:15px;line-height:1.6;margin:0!important;color:#121212}
.cbf .cbf-mail{font-family:var(--cb-mono);font-size:13px;letter-spacing:.06em;border-bottom:1px solid #121212;align-self:flex-start;padding-bottom:3px}
.cbf-word{margin-top:auto;padding:0 2vw;overflow:hidden;line-height:0}
.cbf-word span{display:inline-block;font-family:var(--cb-display);text-transform:uppercase;font-size:21vw;line-height:.8;letter-spacing:-.005em;white-space:nowrap;transform:translateY(.06em);color:#121212}
.cbf-base{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(18,18,18,.85);padding:14px 4vw;font-family:var(--cb-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase}

.cbc-grid,.cbw-stats,.cbc-tile,.cbw-stats li{list-style:none!important}
.cbc-tile::marker,.cbw-stats li::marker{content:none}

/* Hide the theme's small footer bar when the custom footer is on the page */
body:has(.cbf) #colophon{display:none!important}

@media (prefers-reduced-motion:reduce){.cbf-track,.cbf-ap svg,.cbf-rec i{animation:none}.cbjs .cbx-rev{opacity:1;transform:none;transition:none}.cbc-tile a,.cbc .cbc-media img{transition:none}}

@media (max-width:1023px){
 .cbw-main{grid-template-columns:1fr;gap:28px}
 .cbw-stats{grid-template-columns:repeat(2,1fr)}
 .cbw-stats li{padding:20px 16px 20px 0;border-bottom:1px solid var(--cb-line)}
 .cbw-stats li:nth-child(2n){border-right:0}
 .cbw-stats li:nth-child(2n+1){padding-left:0}
 .cbf-top{flex-direction:column}
}
@media (max-width:899px){
 .cbc-grid{grid-template-columns:repeat(2,1fr)}
 .cbc .cbc-media img{opacity:.45}
 .cbc-tile:nth-child(4n+1) a,.cbc-tile:nth-child(4n) a{transform-origin:center}
}
@media (max-width:767px){
 .cbs,.cbw,.cbc{min-height:0;padding:72px 20px}
 .cbf{min-height:0}
 .cbx-kick{margin-bottom:28px}
 .cbx-kick span+span{display:none}
 .cbc .cbc-h{margin-bottom:28px!important}
 .cbc-logo{font-size:18px}
 .cbf-top{padding:40px 20px 0}
 .cbf-word{margin-top:48px;padding:0 3vw}
 .cbf-base{flex-wrap:wrap;padding:14px 20px}
 .cbf-base span+span{display:none}
}