/* Tamara Reis theme. Walnut, cognac and ivory from the header photo; Tiempos Headline (fallback Newsreader) + Inter. */
:root{
  --espresso:#140b0a; --ground:#23120e; --walnut:#3a180e; --tobacco:#572615; --cognac:#905d3e; --cognac-lt:#c99a74;
  --cream:#efe9e2; --ivory:#f4efe9; --taupe:#a89b90; --ink:#1c0f0b; --ink-soft:#5e4a40; --paper:#e9e4df;
  --hair:rgba(239,233,226,.18);
  --f-head:"Tiempos Headline","Newsreader",Georgia,serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-meta:"DM Mono",ui-monospace,Menlo,monospace;
  --h2:clamp(34px,3.3vw,48px);
  --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:80px;
  --gut:clamp(24px,5vw,72px); --col:1296px; --fade:56px;
}
html{background:var(--ground);scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--cream);font-family:var(--f-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;background:url("../img/grain.png");opacity:.075;mix-blend-mode:overlay}
.tr-site,.tr-site *{box-sizing:border-box}
.tr-site p,.tr-site h1,.tr-site h2,.tr-site h3,.tr-site ul,.tr-site figure{margin:0}
.tr-site :where(.wp-block-group,.wp-block-buttons,.wp-block-image){margin:0}
.tr-site > *,.tr-site .wrap > *{margin-block:0}
.tr-site a{color:inherit;text-decoration:none}
.tr-site a:focus-visible,.tr-site button:focus-visible{outline:1px solid var(--ivory);outline-offset:4px}
.tr-site img{display:block;max-width:100%}
.is-hidden{display:none!important}

.band{position:relative;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px));background:var(--ground) center/100% 100% no-repeat}
.wrap{max-width:var(--col);margin-inline:auto!important;width:100%}
.l-right{background-image:url("../img/t-right.jpg")} .l-left{background-image:url("../img/t-left.jpg")}
.l-quiet{background-image:url("../img/t-quiet.jpg")} .l-horizon{background-image:url("../img/t-horizon.jpg")}
.l-foot{background-image:url("../img/t-footer.jpg")}
.l-paper{color:var(--ink);background:linear-gradient(180deg,var(--ground) 0,rgba(35,18,14,.55) calc(var(--fade)*.37),rgba(35,18,14,0) var(--fade),rgba(35,18,14,0) calc(100% - var(--fade)),rgba(35,18,14,.55) calc(100% - var(--fade)*.37),var(--ground) 100%),url("../img/t-paper.jpg") center/cover no-repeat,var(--paper)}
.sec{padding-block:var(--s6)}
.l-paper.sec{padding-block:calc(var(--fade) + 64px)}

.meta,.tr-site .row .meta,.pc .meta,.aw .yr{font-family:var(--f-meta);font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--taupe);line-height:1.6}
.tr-site h1,.tr-site h2,.tr-site h3{font-family:var(--f-head);font-weight:300;letter-spacing:-.015em}
.tr-site h2{font-size:var(--h2);line-height:1;color:var(--cream)}
.l-paper h2{color:var(--ink)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);margin-bottom:var(--s5)!important}

/* buttons */
.tr-site .btn .wp-block-button__link,.tr-site .wp-block-button.btn a{display:inline-flex;align-items:center;gap:14px;padding:15px 22px;border:1px solid rgba(239,233,226,.45);border-radius:0;font-family:var(--f-body);font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);background:linear-gradient(90deg,var(--cognac-lt),var(--cognac)) 0 0/0% 100% no-repeat;transition:background-size .55s cubic-bezier(.2,.7,.2,1),color .3s,border-color .3s;line-height:1.2}
.tr-site .btn a:hover,.tr-site .btn a:focus-visible{background-size:100% 100%;color:var(--ink);border-color:var(--cognac-lt)}
.tr-site .wp-block-buttons{display:flex;flex-wrap:wrap;gap:var(--s2)}
.tlink,.pc .more a,.pacc .lnk a{display:inline-flex;gap:8px;font-family:var(--f-body);font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100%/30% 1px no-repeat;transition:background-size .5s,color .3s}
.tlink:hover,.pc .more a:hover,.pacc .lnk a:hover{background-size:100% 1px}
.arrows{display:flex;gap:10px;flex:none}
.arrow{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(239,233,226,.45);background:none;color:var(--cream);font:17px var(--f-body);cursor:pointer;transition:background .4s,color .3s,border-color .3s,opacity .3s}
.arrow:hover{background:var(--cognac-lt);color:var(--ink);border-color:var(--cognac-lt)}
.arrow:disabled{opacity:.3;pointer-events:none}
.l-paper .arrow{border-color:rgba(28,15,11,.4);color:var(--ink)}
.l-paper .arrow:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* HERO */
.hero{position:relative;display:flex;min-height:clamp(560px,70svh,700px);overflow:hidden;background:var(--espresso);color:var(--ivory);padding-block:var(--s3) 0}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(20,11,10,.45) 0,rgba(20,11,10,0) 160px),linear-gradient(90deg,rgba(20,11,10,.72) 0,rgba(20,11,10,.5) 42%,rgba(20,11,10,.08) 72%,rgba(20,11,10,0) 100%),linear-gradient(180deg,rgba(35,18,14,0) calc(100% - 48px),var(--ground) 100%)}
.hero-img{position:absolute!important;inset:0;z-index:0;overflow:hidden}
.hero-img img{width:100%!important;height:100%!important;object-fit:cover;object-position:50% 24%;transition:filter 1.1s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.hero.bio-on .hero-img img{filter:blur(16px) brightness(.62) saturate(.9);transform:scale(1.08)}
.hero-grid{position:relative;z-index:2;display:flex;flex-direction:column}
.nav{position:relative;z-index:3;display:flex;align-items:center;gap:var(--s4)}
.nav .mark{margin-right:auto!important;font-family:var(--f-head);font-weight:300;font-size:28px;letter-spacing:-.01em;white-space:nowrap}
.nav .links{display:flex;gap:36px}
.nav .links a{font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding-bottom:3px;background:linear-gradient(var(--ivory),var(--ivory)) 0 100%/0 1px no-repeat;transition:background-size .5s}
.nav .links a:hover{background-size:100% 1px}
.nav .btn a{padding:12px 18px}
.hero .btn a{border-color:rgba(244,239,233,.6);color:var(--ivory);background-image:linear-gradient(90deg,var(--ivory),var(--cream))}
.hero .btn a:hover{color:var(--ink);border-color:var(--ivory)}
.slides{position:absolute!important;inset:0;display:grid;align-items:center;pointer-events:none}
.slide{grid-area:1/1;opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.slide.on{opacity:1;transform:none;transition-delay:.6s,.6s;pointer-events:auto}
.hero .name{font-size:clamp(68px,9vw,140px);line-height:.95;letter-spacing:-.03em;color:var(--ivory);white-space:nowrap}
.hero .bio{max-width:880px;padding-top:96px;font-size:clamp(19px,1.65vw,24px);line-height:1.55;color:var(--ivory)}
.hero .bio strong{font-weight:500}
.hero .cta{margin-top:var(--s4)!important}

/* NUMBERS */
.stats-sec{background:var(--ground);padding-block:28px 56px}
.stats{display:flex;justify-content:space-between;align-items:stretch}
.stats .st{display:flex;flex-direction:column;gap:12px}
.stats .dv{width:1px;align-self:stretch;background:rgba(239,233,226,.16)}
.stats .n{font-family:var(--f-head);font-weight:300;font-size:clamp(40px,3.8vw,56px);line-height:1;letter-spacing:-.015em;color:var(--ivory);white-space:nowrap}
.stats .l{font-size:14px;line-height:1.3;color:var(--taupe);white-space:nowrap}

/* EXPANDING ROWS: the work, passion projects */
.wacc{display:flex;gap:8px;height:clamp(480px,74svh,760px)}
.wacc > .card{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px;transition:flex 1.1s cubic-bezier(.2,.7,.2,1)}
.wacc > .card.on{flex:2.8 1 0}
.wacc .card > figure{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--walnut)}
.wacc .card > figure img,.wacc .card > figure video{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;transform:scale(1.06);transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter .9s,object-position 1.1s cubic-bezier(.2,.7,.2,1)}
.wacc .card.on > figure img,.wacc .card.on > figure video{transform:none}
.work .wacc .card:not(.on) > figure img{filter:brightness(.78) saturate(.9)}
.wacc .cap{font-weight:500;font-size:16px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .4s}
.work .wacc .card:not(.on) .cap{color:var(--ink-soft)}
.pacc .cap{display:flex;flex-direction:column;gap:6px;height:132px;overflow:hidden;white-space:normal}
.pacc .cap > *{flex-shrink:0}
.pacc .cap .t{font-weight:500;font-size:18px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pacc .card:not(.on) .cap .t{white-space:normal;font-size:15px;line-height:1.3}
.pacc .cap .d{max-width:42ch;font-weight:400;font-size:15px;line-height:1.45;color:var(--ink-soft)}
.pacc .cap .lnk{margin-top:6px!important}
.pacc .cap .d,.pacc .cap .lnk{transition:opacity .5s .25s}
.pacc .card:not(.on) .cap .d,.pacc .card:not(.on) .cap .lnk{opacity:0;visibility:hidden}
.pacc .card.m-mpv:not(.on) > figure img{object-position:88% center}

/* ROWS: experience, talks */
.rows{border-bottom:1px solid var(--hair)}
.row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:baseline;padding:18px 0;border-top:1px solid var(--hair)}
.row::before{content:"";position:absolute;inset:0 -24px;background:linear-gradient(90deg,rgba(201,154,116,.10),rgba(201,154,116,0) 75%);opacity:0;transition:opacity .5s;pointer-events:none}
.row:hover::before{opacity:1}
.row h3{font-size:clamp(21px,1.8vw,26px);line-height:1.2;color:var(--cream);transition:color .3s}
.row .sub{margin-top:4px!important;font-size:15px;color:var(--cognac-lt)}
.row .meta{text-align:right;line-height:1.7}
.stage .row:hover h3{color:var(--ivory)}
.stage .row .sub{color:var(--taupe)}
.after{margin-top:var(--s3)!important}

/* BRANDS: slow marquee */
.brands{display:flex;flex-direction:column;gap:44px;padding-block:72px;padding-left:0!important;padding-right:0!important;background:radial-gradient(ellipse at 88% 0%,rgba(160,74,32,.30),rgba(30,21,16,0) 55%),#1E1510;color:#EFE6DA}
.brands .bhead{display:flex;justify-content:space-between;align-items:baseline;gap:24px;max-width:calc(var(--col) + 2 * var(--gut));padding-inline:max(var(--gut),env(safe-area-inset-left,0px))}
.brands h2{font-size:44px;line-height:1.1;color:#EFE6DA}
.brands .ind{font-size:15px;color:#B9A898}
.brands .mq-rows{display:flex;flex-direction:column;gap:28px}
.mq-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tr-site ul.mq{list-style:none;padding:0;display:flex;width:max-content;align-items:center}
.mq-l{animation:mqLeft 70s linear infinite}
.mq-r{animation:mqRight 90s linear infinite}
.mq-mask:hover .mq{animation-play-state:paused}
.mq-l li{font-family:var(--f-head);font-weight:300;font-size:64px;line-height:1.1;white-space:nowrap;padding-right:28px;display:flex;align-items:center}
.mq-l li::after{content:"/";font-family:var(--f-head);font-size:40px;color:#C0703F;padding-left:28px}
.mq-r li{font-size:17px;color:#B9A898;white-space:nowrap;padding-right:22px}
.mq-r li::after{content:"·";color:#7E6E61;padding-left:22px}
@keyframes mqLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* AWARDS: 2 + 2 + 3 */
.awards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.aw{grid-column:span 3;display:flex;flex-direction:column;gap:10px;padding:22px 24px 20px;border:1px solid var(--hair);transition:border-color .4s,background .6s}
.aw.f{grid-column:span 2}
.aw .top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2)}
.aw .st{font-family:var(--f-head);font-weight:300;font-size:clamp(22px,1.9vw,28px);line-height:1;color:var(--cream)}
.aw.f .st{color:var(--taupe)}
.aw h3{font-size:clamp(24px,2.2vw,32px);line-height:1.12;color:var(--cream)}
.aw.f h3{font-size:clamp(21px,1.8vw,26px)}
.aw .cl{margin-top:auto!important;padding-top:14px;font-size:14px;color:var(--taupe)}
.aw.f:hover{border-color:rgba(201,154,116,.7);background:linear-gradient(120deg,rgba(201,154,116,.12),rgba(201,154,116,0) 70%)}
.aw.lit{border-color:transparent;background:url("../img/t-lit.jpg") center/100% 240% no-repeat;transition:background-size 1.2s cubic-bezier(.2,.7,.2,1)}
.aw.lit:hover{background-size:115% 270%}
.aw.lit .st,.aw.lit h3{color:var(--ivory)}
.aw.lit .yr{color:rgba(244,239,233,.78)}
.aw.lit .cl{color:rgba(244,239,233,.72)}

/* SLIDER TRACKS: press, education */
.track{display:grid;grid-auto-flow:column;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.track > *{scroll-snap-align:start;min-width:0}
.pctrack{grid-auto-columns:calc((100% - 2 * 32px) / 3);gap:32px}
.pc{display:flex;flex-direction:column;gap:14px;min-height:200px;padding-top:22px;border-top:1px solid rgba(239,233,226,.24)}
.pc h3{font-size:clamp(22px,2vw,28px);line-height:1.2;color:var(--ivory);transition:color .35s}
.pc h3 a:hover{color:var(--cognac-lt)}
.pc .more{margin-top:auto!important}
.pc .more a{color:var(--ivory)}
.edu{grid-auto-columns:minmax(260px,calc((100% - 4 * 18px) / 4.4))}
.edu > div{padding-top:22px;border-top:1px solid rgba(239,233,226,.55)}
.edu h3{font-size:clamp(20px,1.6vw,23px);line-height:1.15;color:var(--cream)}
.edu p{margin-top:14px!important;font-size:15px;line-height:1.5;color:var(--taupe)}
.explore{border:0;background:linear-gradient(currentColor,currentColor) 0 100%/30% 1px no-repeat;color:var(--cream);cursor:pointer;padding:0 0 3px}

/* SKILLS */
.skills-sec{padding-block:var(--s6)}
.sk{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--s4);align-items:baseline}
.sk h2{font-size:clamp(28px,2.4vw,36px)}
.tr-site ul.skl{list-style:none;padding:0;max-width:900px;font-size:16px;line-height:1.9;color:var(--cream)}
.skl li{display:inline}
.skl li:not(:last-child)::after{content:" / ";color:var(--cognac)}

/* CONTACT */
.contact{padding-block:var(--s6) clamp(120px,12vw,180px)}
.contact .pair{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.contact .pair a{font-weight:500;font-size:clamp(18px,1.4vw,21px);line-height:1.4;color:var(--cream);background:linear-gradient(var(--cognac-lt),var(--cognac-lt)) 0 100%/0 1px no-repeat;transition:background-size .6s,color .3s}
.contact .pair a:hover{background-size:100% 1px;color:var(--ivory)}
.contact .where{margin-top:var(--s3)!important;font-family:var(--f-meta);font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--taupe)}

/* motion */
@media (prefers-reduced-motion:no-preference){
  .hero .name{animation:rise 1.8s cubic-bezier(.2,.7,.2,1) both}
  .rv > .wrap{transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
  .rv.armed > .wrap{opacity:.35;transform:translateY(12px)}
}
@media (prefers-reduced-motion:reduce){.tr-site *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@keyframes rise{from{opacity:0;transform:translateY(14px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

/* tablet */
@media (max-width:1100px){.stats .l{font-size:13px}}
@media (max-width:980px){
  .nav .links{display:none}
  .pctrack{grid-auto-columns:calc((100% - 32px) / 2)}
}
/* phone */
@media (max-width:760px){
  :root{--s4:24px;--s5:28px;--s6:56px;--h2:32px;--fade:36px}
  .band{background-size:cover}
  .l-paper.sec{padding-block:calc(var(--fade) + 44px)}
  .hero{min-height:640px}
  .hero-img img{object-position:0% 50%}
  .hero::before{background:linear-gradient(180deg,rgba(20,11,10,.5) 0,rgba(20,11,10,.55) 100%),linear-gradient(180deg,rgba(35,18,14,0) calc(100% - 40px),var(--ground) 100%)}
  .nav{margin-bottom:32px!important}
  .hero .name{font-size:58px;white-space:normal}
  .hero .bio{padding-top:84px;font-size:16px}
  .stats-sec{padding-block:12px 40px}
  .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
  .stats .dv{display:none}
  .stats .n{font-size:36px}
  .head{flex-wrap:wrap}
  .wacc{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:10px;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut)}
  .wacc::-webkit-scrollbar{display:none}
  .wacc > .card{scroll-snap-align:start}
  .wacc .card > figure{flex:none;aspect-ratio:4/5}
  .wacc .card > figure img{transform:none;filter:none!important}
  .work .wacc .card:not(.on) .cap{color:var(--ink)}
  .pacc .cap{height:auto}
  .pacc .card:not(.on) .cap .d,.pacc .card:not(.on) .cap .lnk{opacity:1;visibility:visible}
  .pacc .card:not(.on) .cap .t{font-size:18px}
  .row{grid-template-columns:minmax(0,1fr);gap:10px;padding:14px 0}
  .row .meta{text-align:left}
  .brands{gap:32px;padding-block:56px}
  .brands .bhead{display:block}
  .brands h2{font-size:34px}
  .brands .ind{margin-top:12px!important}
  .mq-l li{font-size:40px;padding-right:18px}
  .mq-l li::after{font-size:26px;padding-left:18px}
  .mq-r li{font-size:15px}
  .awards{grid-template-columns:minmax(0,1fr);gap:8px}
  .aw,.aw.f{grid-column:auto}
  .aw.lit{padding:14px 16px 13px;gap:6px}
  .aw.lit .st{font-size:17px}
  .aw.lit h3{font-size:21px}
  .aw.lit .cl{padding-top:6px;font-size:13px}
  .aw.f{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;padding:12px 0;border:0;border-top:1px solid var(--hair);background:none}
  .aw.f .top{display:contents}
  .aw.f .st{grid-column:1;grid-row:1;font-size:15px}
  .aw.f .yr{grid-column:2;grid-row:1}
  .aw.f h3{grid-column:1/-1;grid-row:2;font-size:19px}
  .aw.f .cl{grid-column:1/-1;grid-row:3;padding-top:2px;font-size:13px}
  .aw.f:last-child{border-bottom:1px solid var(--hair)}
  .awards > .aw.f:nth-child(5){margin-top:14px}
  .pctrack{grid-auto-columns:80%;gap:20px}
  .pc{min-height:170px}
  .pc h3{font-size:21px}
  .edu{grid-auto-columns:72%}
  .sk{grid-template-columns:minmax(0,1fr);gap:14px}
  .tr-site ul.skl{font-size:15px}
  .contact{padding-block:var(--s6) 110px}
}

/* ===== v1.1: wider column on big screens, marquee within the page, passion projects on walnut ===== */
:root{--col:1600px}
@media (min-width:1800px){
  :root{--h2:56px;--gut:96px;--col:1760px}
  .hero{min-height:clamp(700px,72svh,900px)}
  .hero .name{font-size:168px}
  .hero .bio{font-size:26px;max-width:1000px}
  .stats .n{font-size:64px}.stats .l{font-size:16px}
  .row h3{font-size:30px}.row .sub{font-size:17px}
  .aw h3{font-size:36px}.aw.f h3{font-size:29px}.aw .st{font-size:31px}
  .pc h3{font-size:32px}
  .edu h3{font-size:26px}.edu p{font-size:16px}
  .tr-site ul.skl{font-size:18px;max-width:1100px}
  .brands h2{font-size:52px}.brands .ind{font-size:17px}
  .mq-l li{font-size:76px}.mq-r li{font-size:19px}
  .wacc{height:clamp(560px,72svh,880px)}
}
.brands .mq-rows{width:100%;max-width:calc(var(--col) + 2 * var(--gut));margin-inline:auto;padding-inline:max(var(--gut),env(safe-area-inset-left,0px))}
#projects.l-paper{color:var(--cream);background:var(--ground) url("../img/t-left.jpg") center/100% 100% no-repeat}
#projects.l-paper.sec{padding-block:var(--s6)}
#projects h2{color:var(--cream)}
#projects .arrow{border-color:rgba(239,233,226,.45);color:var(--cream)}
#projects .arrow:hover{background:var(--cognac-lt);color:var(--ink);border-color:var(--cognac-lt)}
#projects .wacc .card > figure{background:var(--walnut)}
#projects .pacc .cap .t{color:var(--ivory)}
#projects .pacc .cap .d{color:var(--taupe)}
#projects .pacc .cap .lnk a{color:var(--ivory)}
@media (max-width:760px){.band.brands .mq-rows{padding-inline:0}#projects.l-paper{background-size:cover}}

/* ===== v1.2: the work on walnut too ===== */
#work.l-paper{color:var(--cream);background:var(--ground) url("../img/t-right.jpg") center/100% 100% no-repeat}
#work.l-paper.sec{padding-block:var(--s6)}
#work h2{color:var(--cream)}
#work .arrow{border-color:rgba(239,233,226,.45);color:var(--cream)}
#work .arrow:hover{background:var(--cognac-lt);color:var(--ink);border-color:var(--cognac-lt)}
#work .wacc .cap{color:var(--ivory)}
#work .wacc .card:not(.on) .cap{color:var(--taupe)}
@media (max-width:760px){#work.l-paper{background-size:cover}#work .wacc .card:not(.on) .cap{color:var(--ivory)}}

/* ===== static v1.3: The work as 5 video cards. 3 in view (one expanded), arrows, swipe or trackpad for the other 2 ===== */
.wacc.win{overflow:hidden;touch-action:pan-y}
.wacc.win > .card{flex:0 0 calc((100% - 16px) / 4.8);transform:translateX(calc(-1 * var(--off,0px)));transition:flex-basis 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.wacc.win > .card.on{flex-basis:calc((100% - 16px) * 2.8 / 4.8)}
.work .wacc .card:not(.on) > figure video{filter:brightness(.78) saturate(.9)}
@media (max-width:760px){
  .wacc.win{overflow-x:auto;touch-action:auto}
  .wacc.win > .card{transform:none}
  .wacc.win .card > figure{aspect-ratio:1/1}
  .wacc .card > figure video{transform:none;filter:none!important}
}

/* ===== static v1.4: navbar stays fixed while scrolling ===== */
html{scroll-padding-top:96px}
.hero .nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-block:var(--s3);padding-inline:max(var(--gut),env(safe-area-inset-left,0px),calc((100% - var(--col)) / 2));transition:background-color .5s,padding .5s,border-color .5s,backdrop-filter .5s;border-bottom:1px solid transparent}
.hero .nav.stuck{padding-block:14px;background-color:rgba(20,11,10,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--hair)}
@media (max-width:760px){.hero .nav{margin-bottom:0!important}html{scroll-padding-top:80px}}