/*
Theme Name: Rodrigo Brandão
Theme URI: https://rodrigobrandao.com
Author: Built for Rodrigo Brandão
Description: A sleek, editorial portfolio theme for a senior communications strategist. Interactive index hero, résumé-driven category pages (Climate rights, Cinema, Arts, Social justice), and an editable portfolio grid.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: brandao
*/

/* ================================================================
   0. Tokens & base
   ================================================================ */
:root{
	--paper:#f4f1ea;
	--ink:#17140f;
	--ink-soft:#5a544a;
	--accent:#bf4b28;
	--line:rgba(23,20,15,.16);
	--line-light:rgba(244,241,234,.22);
	--serif:"Fraunces",Georgia,"Times New Roman",serif;
	--grotesk:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	--pad:clamp(22px,3.4vw,46px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
	background:var(--paper);
	color:var(--ink);
	font-family:var(--grotesk);
	line-height:1.5;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-weight:400;letter-spacing:-.01em}

/* ================================================================
   1. Top bar / nav
   ================================================================ */
.topbar{
	position:relative;z-index:6;
	display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
	padding:clamp(16px,2.4vw,30px) var(--pad);
}
.brand{font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.5vw,21px);letter-spacing:.01em}
.topbar-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.status{display:flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(191,75,40,.45)}70%{box-shadow:0 0 0 9px rgba(191,75,40,0)}100%{box-shadow:0 0 0 0 rgba(191,75,40,0)}}
.site-nav .nav-list{list-style:none;display:flex;gap:20px}
.nav-about,.site-nav .nav-list a{display:inline-flex;align-items:center;gap:7px;
	font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
	color:var(--paper);padding:10px 20px;border-radius:100px;
	border:1px solid var(--accent);background:var(--accent);
	box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent);
	transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease,box-shadow .3s ease}
.nav-about::after{content:"\2192";font-size:14px;transition:transform .3s ease}
.nav-about:hover,.site-nav .nav-list a:hover{background:color-mix(in srgb,var(--accent) 84%,#000);transform:translateY(-1px);box-shadow:0 10px 24px -8px color-mix(in srgb,var(--accent) 75%,transparent)}
.nav-about:hover::after{transform:translateX(3px)}

/* ================================================================
   2. Hero — interactive index (Option 1)
   ================================================================ */
.hero{
	position:relative;overflow:hidden;
	min-height:auto;
	display:flex;flex-direction:column;
	padding:clamp(6px,2vh,20px) var(--pad) clamp(24px,4vh,44px);
	transition:color .8s ease;
}
.hero .stage{position:absolute;inset:0;z-index:0;background:var(--paper)}
.hero .frame{
	position:absolute;inset:0;
	opacity:0;transform:scale(1.06);
	transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 6s ease-out;
	background-size:cover;background-position:center;
	filter:grayscale(1) contrast(1.05);
}
.hero .frame.active{opacity:1;transform:scale(1)}
.hero .stage::after{
	content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
	background:
		linear-gradient(180deg,rgba(20,17,12,.28),rgba(20,17,12,.60)),
		linear-gradient(115deg,color-mix(in srgb,var(--cat,#bf4b28) 46%,transparent),rgba(20,17,12,.28));
	mix-blend-mode:multiply;opacity:0;transition:opacity 1.1s ease;
}
.hero.engaged .stage::after{opacity:1}
.hero.engaged{color:var(--paper)}

.hero-inner{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;justify-content:center;max-width:1180px;padding-top:0}
.eyebrow{font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:clamp(10px,1.6vw,20px);transition:color .8s ease}
.hero.engaged .eyebrow{color:rgba(244,241,234,.72)}

.index{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--line);transition:border-color .8s ease}
.hero.engaged .index{border-color:var(--line-light)}
.index li{border-bottom:1px solid var(--line);transition:border-color .8s ease}
.hero.engaged .index li{border-color:var(--line-light)}
.row{display:flex;align-items:baseline;gap:clamp(16px,2vw,34px);padding:clamp(12px,1.7vw,22px) 4px;position:relative;transition:padding-left .5s cubic-bezier(.22,.61,.36,1)}
.num{font-size:13px;letter-spacing:.05em;color:var(--cat,var(--ink-soft));width:2.4em;flex:none;padding-top:.55em;transition:color .5s ease,opacity .5s ease;font-weight:500}
.hero.engaged .num{opacity:.92}
.label{font-family:var(--serif);font-weight:300;line-height:.98;font-size:clamp(38px,7.4vw,104px);letter-spacing:-.015em;transition:opacity .5s ease}
.arrow{margin-left:auto;align-self:center;font-size:clamp(20px,2.4vw,30px);opacity:0;transform:translateX(-14px);color:var(--cat);transition:opacity .5s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.hero.engaged .index:hover .label{opacity:.32}
.row:hover{padding-left:clamp(10px,1.4vw,24px)}
.hero.engaged .index .row:hover .label{opacity:1;color:color-mix(in srgb,var(--cat) 62%,#f6f3ec)}
.row:hover .arrow{opacity:1;transform:translateX(0)}
.hero.engaged .row:hover .arrow{color:var(--paper)}

.hero-foot{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-top:clamp(14px,2vw,24px)}
.hero-foot-left{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.tagline{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(16px,1.9vw,24px);max-width:30ch;line-height:1.3}
.hero-about{display:inline-flex;align-items:center;gap:10px;
	font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
	color:var(--paper);background:var(--accent);padding:14px 26px;border-radius:100px;
	box-shadow:0 8px 22px -8px color-mix(in srgb,var(--accent) 70%,transparent);
	transition:transform .3s ease,box-shadow .3s ease,background .3s ease}
.hero-about span{transition:transform .3s ease}
.hero-about:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--accent) 84%,#000);box-shadow:0 12px 28px -8px color-mix(in srgb,var(--accent) 75%,transparent)}
.hero-about:hover span{transform:translateX(4px)}
.hero.engaged .hero-about{box-shadow:0 8px 26px -6px rgba(0,0,0,.5)}
.hero-affil{font-size:12.5px;letter-spacing:.03em;color:var(--ink-soft);text-align:right;transition:color .8s ease}
.hero.engaged .hero-affil{color:rgba(244,241,234,.72)}

/* ================================================================
   3. Portfolio / selected work
   ================================================================ */
.work-section{padding:clamp(24px,4vh,52px) var(--pad) clamp(36px,6vh,80px);max-width:1400px;margin:0 auto}
.section-head{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:clamp(18px,3vw,34px);padding-bottom:16px}
.section-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
	background:linear-gradient(90deg,#bf4b28,#b5852a 34%,#4f6d3a 67%,#2f5f6e)}
.section-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,40px)}
.section-idx{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:500}

.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,22px)}
.work-card{display:flex;flex-direction:column}
.work-thumb{aspect-ratio:4/5;background:#141712;background-size:cover;background-position:center;overflow:hidden;position:relative;border-top:3px solid var(--cat,var(--accent))}
.work-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(191,75,40,.14),transparent 65%);opacity:0;transition:opacity .5s}
.work-card:hover .work-thumb::after{opacity:1}
.work-thumb{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.work-card:hover .work-thumb{transform:translateY(-4px)}
.work-body{padding-top:14px}
.work-field{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cat,var(--accent))}
.work-num{font-size:14px;letter-spacing:.06em;color:var(--cat,var(--accent));font-weight:600}
.work-title{font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.5vw,22px);margin-top:8px;line-height:1.1;transition:color .3s ease}
.work-card:hover .work-title{color:var(--cat,var(--accent))}
.work-meta{font-size:13px;color:var(--ink-soft);margin-top:6px;line-height:1.4}

/* ================================================================
   4. Category pages
   ================================================================ */
.category-page{min-height:60vh}
.cat-hero{
	position:relative;min-height:min(46vh,420px);display:flex;align-items:flex-end;
	padding:var(--pad);margin:0 var(--pad);border-radius:2px;overflow:hidden;
	background-color:#141712;background-size:cover;background-position:center;color:var(--paper);
}
.cat-hero::after{content:"";position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(20,17,12,.22) 30%,rgba(20,17,12,.80)),linear-gradient(120deg,color-mix(in srgb,var(--cat,#bf4b28) 48%,transparent),rgba(20,17,12,.28));
	mix-blend-mode:multiply}
.cat-hero--plain{min-height:auto;color:var(--ink);background:none;margin:0;padding:clamp(8px,2vh,24px) var(--pad) 0}
.about-page .cat-hero--plain{padding-top:clamp(4px,1vh,14px)}
.about-page .cat-back{margin-bottom:16px}
.cat-hero--plain::after{display:none}
.cat-hero-inner{position:relative;z-index:2;max-width:1100px;width:100%}
.cat-back{display:inline-block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.85;margin-bottom:22px;border-bottom:1px solid rgba(244,241,234,.4);padding-bottom:2px}
.cat-hero--plain .cat-back{border-color:var(--line)}
.cat-num{display:block;font-size:13px;letter-spacing:.1em;opacity:.7;margin-bottom:8px}
.cat-title{font-family:var(--serif);font-weight:300;font-size:clamp(44px,8vw,116px);line-height:.95;letter-spacing:-.02em}
.cat-lede{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(17px,2vw,26px);max-width:34ch;margin-top:18px;line-height:1.32}

.cat-body{max-width:920px;margin:0 auto;padding:clamp(26px,4vh,56px) var(--pad)}
.cat-intro{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.4vw,30px);line-height:1.4;letter-spacing:-.01em;margin-bottom:clamp(22px,4vh,44px);max-width:34ch;
	border-left:3px solid var(--cat,var(--accent));padding-left:clamp(16px,2vw,26px)}

.entry-list{list-style:none;counter-reset:entry;border-top:2px solid color-mix(in srgb,var(--cat,var(--accent)) 60%,var(--line))}
.entry{display:grid;grid-template-columns:150px 1fr;gap:clamp(20px,4vw,60px);padding:clamp(18px,3vw,32px) 0;border-bottom:1px solid var(--line)}
.entry-meta{display:flex;flex-direction:column;gap:8px}
.entry-index{font-family:var(--serif);font-size:20px;color:var(--cat,var(--accent))}
.entry-dates{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.entry-title{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,38px);line-height:1.02}
.entry-role{font-size:13.5px;letter-spacing:.02em;color:var(--cat,var(--accent));margin-top:8px}
.entry-text{font-size:clamp(15px,1.15vw,17px);color:#33302a;margin-top:16px;line-height:1.62;max-width:60ch}
.entry-title{transition:color .3s ease}
.entry:hover .entry-title{color:var(--cat,var(--accent))}
.entry-art{display:block;width:100%;max-width:640px;aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#141712;
	border-top:3px solid var(--cat,var(--accent));border-radius:2px;margin-bottom:22px;
	box-shadow:0 12px 32px -20px rgba(0,0,0,.55);
	transition:transform .6s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease}
.entry-art:hover{transform:translateY(-5px);box-shadow:0 20px 44px -20px rgba(0,0,0,.6)}
.entry-link{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
	font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
	color:var(--cat,var(--accent));border-bottom:1px solid color-mix(in srgb,var(--cat) 40%,transparent);
	padding-bottom:3px;transition:gap .3s ease,border-color .3s ease}
.entry-link:hover{gap:12px;border-color:var(--cat,var(--accent))}

.cat-extra{margin-top:40px;font-size:16px;line-height:1.7;max-width:62ch}
.cat-extra p{margin-bottom:1em}

.cat-nav{margin-top:clamp(24px,4vh,48px);padding-top:22px;border-top:1px solid var(--line)}
.cat-next{display:inline-flex;flex-direction:column;gap:6px}
.cat-next-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.cat-next-title{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.6vw,34px);transition:color .3s}
.cat-next:hover .cat-next-title{color:var(--cat,var(--accent))}

/* ================================================================
   4b. About page
   ================================================================ */
.about-tags{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.about-tags li{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
	padding:6px 13px;border-radius:100px;color:var(--cat);
	border:1px solid color-mix(in srgb,var(--cat) 45%,transparent);
	background:color-mix(in srgb,var(--cat) 8%,transparent)}
.about-body{max-width:820px;margin:0 auto;padding:clamp(20px,3.5vh,44px) var(--pad) clamp(44px,7vh,100px)}
.about-lede{font-family:var(--serif);font-weight:300;font-size:clamp(24px,3.4vw,42px);
	line-height:1.22;letter-spacing:-.015em;margin-bottom:clamp(22px,4vh,40px)}
.about-prose p{font-size:clamp(16px,1.2vw,18px);line-height:1.72;color:#33302a;margin-bottom:1.35em;max-width:64ch}
.about-contact{margin-top:clamp(36px,6vh,64px);padding-top:26px;border-top:1px solid var(--line);
	display:flex;flex-direction:column;gap:8px}
.about-contact-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.about-contact-email{font-family:var(--serif);font-size:clamp(24px,3vw,38px);color:var(--accent);
	width:fit-content;border-bottom:1px solid transparent;transition:border-color .3s}
.about-contact-email:hover{border-color:var(--accent)}

/* ================================================================
   4c. Single portfolio entry (/work/…) — full content + video embeds
   ================================================================ */
.portfolio-single .single-body{max-width:860px;margin:0 auto;padding:clamp(20px,3.5vh,44px) var(--pad) clamp(40px,7vh,90px)}
.single-field{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cat,var(--accent));margin-bottom:10px;font-weight:600}
.single-hero-img{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;background-color:#141712;
	border-top:3px solid var(--cat,var(--accent));border-radius:2px;margin-bottom:clamp(26px,4vw,44px)}
.single-content{font-size:clamp(16px,1.2vw,18px);line-height:1.72;color:#33302a}
.single-content > *{margin-bottom:1.2em}
.single-content p,.single-content ul,.single-content ol{max-width:64ch}
.single-content h2,.single-content h3{font-family:var(--serif);font-weight:400;color:var(--ink);margin-top:1.5em;letter-spacing:-.01em}
.single-content a{color:var(--cat,var(--accent));border-bottom:1px solid color-mix(in srgb,var(--cat,var(--accent)) 40%,transparent)}
.single-content img{border-radius:2px;margin:1.3em 0;height:auto}
/* Responsive video embeds (Vimeo / YouTube / self-hosted) */
.single-content iframe,.single-content video,.single-content embed,.single-content object,.cat-extra iframe{
	width:100%;aspect-ratio:16/9;height:auto;display:block;border:0;margin:1.4em 0;border-radius:2px;background:#141712}
.single-content figure,.single-content .wp-block-embed,.single-content .wp-block-embed__wrapper,.single-content .wp-video{margin:1.4em 0;width:100%;max-width:100%}
.single-content .wp-block-embed__wrapper{position:relative}

/* ================================================================
   4d. Street Photography gallery
   ================================================================ */
.street-note{font-family:var(--grotesk);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--cat,var(--accent));font-weight:600;margin-top:14px}
.street-body{max-width:1240px;margin:0 auto;padding:clamp(20px,3.5vh,44px) var(--pad) clamp(44px,7vh,100px)}
.street-grid{columns:3;column-gap:clamp(10px,1.4vw,20px)}
.street-shot{margin:0 0 clamp(10px,1.4vw,20px);break-inside:avoid}
.street-shot img{width:100%;height:auto;display:block;border-radius:2px;background:#141712;
	box-shadow:0 12px 30px -20px rgba(0,0,0,.5);transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease}
.street-shot img:hover{transform:translateY(-4px);box-shadow:0 20px 44px -20px rgba(0,0,0,.55)}
@media (max-width:900px){.street-grid{columns:2}}
@media (max-width:560px){.street-grid{columns:1}}

/* ================================================================
   5. Footer
   ================================================================ */
.site-footer{position:relative;border-top:1px solid var(--line);padding:clamp(30px,5vh,56px) var(--pad)}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
	background:linear-gradient(90deg,#bf4b28,#b5852a 34%,#4f6d3a 67%,#2f5f6e)}
.foot-inner{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.foot-tagline{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(18px,2.2vw,28px);max-width:26ch;line-height:1.3}
.foot-meta{display:flex;flex-direction:column;gap:6px;text-align:right;font-size:12.5px;letter-spacing:.03em;color:var(--ink-soft)}

/* ================================================================
   6. Reveal animation
   ================================================================ */
.reveal-up{opacity:0;transform:translateY(26px)}
.reveal-up.in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)}

/* ================================================================
   7. Responsive
   ================================================================ */
@media (max-width:1000px){
	.work-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
	.hero{min-height:auto;padding-top:6vh;padding-bottom:8vh}
	.label{font-size:clamp(40px,12vw,64px)}
	.hero-foot{flex-direction:column;align-items:flex-start}
	.hero-affil{text-align:left}
	.entry{grid-template-columns:1fr;gap:14px}
	.entry-meta{flex-direction:row;gap:16px;align-items:baseline}
	.foot-inner{flex-direction:column;align-items:flex-start}
	.foot-meta{text-align:left}
}
@media (max-width:520px){
	.work-grid{grid-template-columns:1fr}
	.status{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
	*{animation:none!important;transition:none!important}
	.reveal-up{opacity:1;transform:none}
}