:root{
/* ---- shared palette ---- */
--brown-dark: #87341F;
--brown-mid: #3B2314;
--brown-warm: #5A331B;

--wood-dark: var(--brown-dark);
--wood-mid: var(--brown-mid);
--wood-warm: var(--brown-warm);

--wood-line: rgba(0,0,0,0.18);
--wood-grain-light: rgba(255,196,120,0.05);

--cream: #F1E7D2;
--cream-dim: #CBB99A;

--panel: #E6DDCE;
--panel-text: #2B2118;
--panel-text-dim: #62584B;

--gold: #D4A72C;
--gold-bright: #F0C550;
--green: #1B7A4D;
--blue-deep: #14607F;
--teal: #0C6B58;

--accent: var(--gold);
--text-main: var(--cream);
--text-dim: var(--cream-dim);
}

*{
box-sizing:border-box;
}

html,body{
margin:0;
padding:0;
background:var(--wood-dark);
color:var(--text-main);
font-family:'Manrope',sans-serif;
overflow-x:hidden;
}

/* =========================================================
WOOD THEMES
Homepage = hallway / main house
========================================================= */

body{
background-color:var(--wood-dark);
background-image:
repeating-linear-gradient(
90deg,
var(--wood-line) 0px,
transparent 2px,
transparent 38px,
var(--wood-line) 40px
),
repeating-linear-gradient(
90deg,
var(--wood-grain-light) 0px,
transparent 1px,
transparent 7px,
var(--wood-grain-light) 8px
),
linear-gradient(
180deg,
var(--wood-mid) 0%,
var(--wood-dark) 55%,
#150B04 100%
);
}

/* ---- THE LIBRARY / Research ---- */
body.library{
--wood-dark:#171A17;
--wood-mid:#283129;
--wood-warm:#3E5145;
--wood-line:rgba(0,0,0,0.22);
--wood-grain-light:rgba(170,210,190,0.04);
--accent:#1297AF;
}

/* ---- THE WORKSHOP / Projects ---- */
body.workshop{
--wood-dark:#29170D;
--wood-mid:#54321D;
--wood-warm:#79502D;
--wood-line:rgba(0,0,0,0.20);
--wood-grain-light:rgba(255,200,140,0.06);
--accent:#14607F;
}

/* ---- THE OFFICE / Experience ---- */
body.office{
--wood-dark:#352519;
--wood-mid:#65482F;
--wood-warm:#8B6946;
--wood-line:rgba(45,25,12,0.22);
--wood-grain-light:rgba(255,225,185,0.07);
--accent:#1B7A4D;
}

/* ---- THE STUDIO / Creative ---- */
body.studio{
--wood-dark:#26100E;
--wood-mid:#51241F;
--wood-warm:#783C31;
--wood-line:rgba(0,0,0,0.22);
--wood-grain-light:rgba(255,180,160,0.05);
--accent:#D4A72C;
}

/* =========================================================
Ankara-inspired geometric border strip
========================================================= */

.ankara-strip{
height:16px;
width:100%;
background-image:
linear-gradient(
45deg,
var(--gold) 25%,
transparent 25%,
transparent 75%,
var(--gold) 75%
),
linear-gradient(
45deg,
var(--gold) 25%,
transparent 25%,
transparent 75%,
var(--gold) 75%
),
linear-gradient(
45deg,
var(--teal) 25%,
transparent 25%,
transparent 75%,
var(--teal) 75%
),
linear-gradient(
45deg,
var(--green) 25%,
transparent 25%,
transparent 75%,
var(--green) 75%
);
background-size:32px 32px,32px 32px,16px 16px,16px 16px;
background-position:0 0,16px 16px,0 0,8px 8px;
opacity:0.9;
}

.ankara-strip.reverse{
transform:scaleY(-1);
}

/* =========================================================
Header / nav
========================================================= */

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 6vw 10px;
}

.wordmark{
font-family:'Agbalumo',cursive;
color:var(--gold-bright);
font-size:1.2rem;
text-decoration:none;
}

.back-door{
display:flex;
align-items:center;
gap:8px;
text-decoration:none;
color:var(--text-dim);
font-size:0.8rem;
font-weight:600;
letter-spacing:0.04em;
text-transform:uppercase;
}

.back-door .icon{
width:16px;
height:22px;
border-radius:8px 8px 2px 2px;
background:var(--wood-warm);
border:1.5px solid var(--accent);
}

nav.hint{
font-size:0.7rem;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--text-dim);
}

/* =========================================================
Hero / entryway
========================================================= */

.entryway{
max-width:980px;
margin:0 auto;
padding:4vh 6vw 6vh;
text-align:center;
}

.eyebrow{
font-size:0.72rem;
letter-spacing:0.35em;
text-transform:uppercase;
color:var(--gold);
margin-bottom:28px;
}

.door-frame{
position:relative;
width:260px;
height:340px;
margin:0 auto 34px;

background:linear-gradient(
160deg,
var(--wood-warm),
var(--wood-mid)
);

border-radius:130px 130px 10px 10px;
padding:14px;

box-shadow:
0 0 0 3px var(--gold),
0 0 0 8px var(--wood-dark),
0 0 0 11px var(--teal),
0 20px 50px rgba(0,0,0,0.55);
}

.portrait{
position:relative;
width:100%;
height:100%;
border-radius:120px 120px 6px 6px;
background:var(--wood-mid);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.portrait img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.portrait svg{
width:58%;
opacity:0.55;
}

.portrait .swap-note{
position:absolute;
bottom:10px;
left:0;
right:0;
text-align:center;
font-size:0.62rem;
letter-spacing:0.08em;
color:var(--text-dim);
background:rgba(0,0,0,0.35);
padding:4px 0;
}

.doorknob{
position:absolute;
right:22px;
top:52%;
width:12px;
height:12px;
border-radius:50%;
background:radial-gradient(
circle at 35% 30%,
var(--gold-bright),
var(--gold) 60%,
#7A5A17 100%
);
box-shadow:0 2px 4px rgba(0,0,0,0.6);
z-index:3;
}

h1.name{
font-family:'Sancreek',serif;
font-size:clamp(2.4rem,6vw,3.6rem);
color:var(--gold-bright);
margin:0 0 6px;
letter-spacing:0.02em;
text-shadow:0 0 24px rgba(212,167,44,0.25);
}

.role-line{
font-size:1rem;
color:var(--text-dim);
letter-spacing:0.04em;
margin-bottom:26px;
}

.role-line .dot{
color:var(--teal);
margin:0 8px;
}

p.bio{
max-width:620px;
margin:0 auto 40px;
line-height:1.75;
color:var(--text-main);
font-size:1.02rem;
}

.scroll-cue{
font-size:0.7rem;
letter-spacing:0.25em;
text-transform:uppercase;
color:var(--gold);
opacity:0.85;
}

/* =========================================================
Hallway of doors
========================================================= */

.hallway{
max-width:1100px;
margin:0 auto;
padding:6vh 6vw 8vh;
}

.hallway h2{
font-family:'Sancreek',serif;
text-align:center;
color:var(--text-main);
font-weight:400;
font-size:1.6rem;
margin-bottom:4px;
}

.hallway .sub{
text-align:center;
color:var(--text-dim);
font-size:0.85rem;
margin-bottom:48px;
}

.doors-row{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}

@media (max-width:780px){
.doors-row{
grid-template-columns:repeat(2,1fr);
}
}

.room-door{
text-decoration:none;
color:inherit;
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
}

.door-shape{
position:relative;
width:100%;
aspect-ratio:3/5;
border-radius:60px 60px 6px 6px;

background:
linear-gradient(
155deg,
var(--door-light, var(--wood-warm)),
var(--door-dark, var(--wood-mid))
);

border:2px solid var(--door-accent,var(--accent));

box-shadow:
inset 0 0 0 6px rgba(0,0,0,0.22),
0 12px 26px rgba(0,0,0,0.45);

transition:
transform .25s ease,
box-shadow .25s ease;

overflow:hidden;
}

.room-door:hover .door-shape{
transform:translateY(-6px);

box-shadow:
inset 0 0 0 6px rgba(0,0,0,0.22),
0 18px 34px rgba(0,0,0,0.55),
0 0 0 3px var(--door-accent,var(--accent));
}

.door-shape::before{
content:"";
position:absolute;
inset:16px;
border:1px solid var(--door-accent,var(--accent));
border-radius:46px 46px 4px 4px;
opacity:0.55;
}

.door-shape::after{
content:"";
position:absolute;
top:34%;
left:50%;
transform:translateX(-50%);
width:46%;
height:22%;

background-image:
linear-gradient(
45deg,
var(--door-accent,var(--accent)) 25%,
transparent 25%,
transparent 75%,
var(--door-accent,var(--accent)) 75%
),
linear-gradient(
45deg,
var(--door-accent,var(--accent)) 25%,
transparent 25%,
transparent 75%,
var(--door-accent,var(--accent)) 75%
);

background-size:12px 12px;
background-position:0 0,6px 6px;
opacity:0.45;
}

.door-shape .knob{
position:absolute;
right:14%;
top:54%;
width:9px;
height:9px;
border-radius:50%;
background:var(--door-accent,var(--accent));
box-shadow:0 1px 3px rgba(0,0,0,0.45);
}

.room-label{
font-family:'Agbalumo',cursive;
font-size:1rem;
letter-spacing:0.02em;
color:var(--text-main);
}

.room-caption{
font-size:0.72rem;
color:var(--text-dim);
text-align:center;
max-width:23ch;
line-height:1.45;
}

/* ---- each homepage door previews its room ---- */

.door-1{
--door-dark:#171A17;
--door-light:#3E5145;
--door-accent:#1297AF;
}

.door-2{
--door-dark:#29170D;
--door-light:#79502D;
--door-accent:#14607F;
}

.door-3{
--door-dark:#352519;
--door-light:#8B6946;
--door-accent:#1B7A4D;
}

.door-4{
--door-dark:#26100E;
--door-light:#783C31;
--door-accent:#D4A72C;
}

/* =========================================================
Room pages
========================================================= */

.room-header{
max-width:900px;
margin:4vh auto 2vh;
padding:0 6vw;
text-align:center;
}

.room-eyebrow{
font-size:0.72rem;
letter-spacing:0.3em;
text-transform:uppercase;
color:var(--accent);
margin-bottom:14px;
font-weight:700;
}

h1.room-title{
font-family:'Sancreek',serif;
font-size:clamp(2.2rem,5vw,3.2rem);
color:var(--text-main);
margin:0 0 16px;
}

p.room-intro{
max-width:600px;
margin:0 auto;
line-height:1.75;
color:var(--text-dim);
font-size:1.02rem;
}

.content{
max-width:1080px;
margin:5vh auto;
padding:0 6vw 8vh;
}

.section-label{
font-family:'Agbalumo',cursive;
font-size:1rem;
color:var(--gold-bright);
margin:38px 0 16px;
}

/* =========================================================
Research / Library cards
========================================================= */

.card{
background:var(--panel);
color:var(--panel-text);
border-radius:18px;
padding:26px 28px;
margin-bottom:22px;
border-left:6px solid var(--accent);
box-shadow:0 10px 28px rgba(0,0,0,0.28);
}

.card .tag-row{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-bottom:10px;
}

.tag{
font-size:0.68rem;
font-weight:700;
letter-spacing:0.05em;
text-transform:uppercase;
color:#fff;
background:var(--accent);
padding:3px 10px;
border-radius:20px;
}

.tag.alt{
background:var(--blue-deep);
}

.tag.alt2{
background:var(--green);
}

.card h3{
font-size:1.25rem;
margin:0 0 8px;
color:var(--panel-text);
}

.card p{
margin:0;
line-height:1.65;
color:var(--panel-text-dim);
font-size:0.95rem;
}

.card .meta{
margin-top:12px;
font-size:0.8rem;
color:var(--accent);
font-weight:700;
}

/* =========================================================
Projects / Workshop cards
========================================================= */

.grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:22px;
}

@media (max-width:720px){
.grid{
grid-template-columns:1fr;
}
}

.grid-card{
background:var(--panel);
color:var(--panel-text);
border-radius:18px;
padding:24px 26px;
box-shadow:0 10px 28px rgba(0,0,0,0.28);
display:flex;
flex-direction:column;
gap:10px;
}

.grid-card .thumb{
height:120px;
border-radius:12px;
background:
repeating-linear-gradient(
135deg,
var(--accent) 0 10px,
var(--wood-warm) 10px 20px
);
opacity:0.85;
}

.grid-card h3{
font-size:1.15rem;
margin:4px 0 0;
color:var(--panel-text);
}

.grid-card p{
margin:0;
line-height:1.6;
color:var(--panel-text-dim);
font-size:0.92rem;
}

.grid-card a.link{
font-size:0.82rem;
font-weight:700;
color:var(--accent);
text-decoration:none;
margin-top:4px;
}

/* =========================================================
Experience / Office entries
========================================================= */

.entry{
background:var(--panel);
color:var(--panel-text);
border-radius:14px;
padding:20px 24px;
margin-bottom:16px;
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
box-shadow:0 8px 22px rgba(0,0,0,0.25);
border-top:4px solid var(--accent);
}

.entry .info h3{
margin:0 0 6px;
font-size:1.08rem;
color:var(--panel-text);
}

.entry .info p{
margin:0;
font-size:0.88rem;
color:var(--panel-text-dim);
line-height:1.55;
max-width:560px;
}

.entry .date{
font-size:0.75rem;
color:var(--accent);
font-weight:700;
white-space:nowrap;
}

/* =========================================================
Creative / Studio
========================================================= */

.masonry{
columns:3 220px;
column-gap:20px;
}

@media (max-width:720px){
.masonry{
columns:2 160px;
}
}

.piece{
break-inside:avoid;
margin-bottom:20px;
background:var(--panel);
color:var(--panel-text);
border-radius:16px;
overflow:hidden;
box-shadow:0 8px 24px rgba(0,0,0,0.28);
}

.piece .art{
width:100%;
height:160px;
}

.piece.tall .art{
height:220px;
}

.piece.short .art{
height:110px;
}

.piece .art.a{
background:
repeating-linear-gradient(
120deg,
var(--teal) 0 14px,
var(--wood-warm) 14px 28px
);
}

.piece .art.b{
background:
repeating-linear-gradient(
60deg,
var(--green) 0 14px,
var(--wood-warm) 14px 28px
);
}

.piece .art.c{
background:
repeating-linear-gradient(
90deg,
var(--blue-deep) 0 14px,
var(--wood-warm) 14px 28px
);
}

.piece .caption{
padding:12px 14px 16px;
}

.piece .caption .kind{
font-size:0.64rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.06em;
color:var(--accent);
margin-bottom:4px;
}

.piece .caption h4{
margin:0;
font-size:0.95rem;
color:var(--panel-text);
}

/* =========================================================
Footer
========================================================= */

footer{
text-align:center;
padding:26px 6vw 40px;
font-size:0.75rem;
color:var(--text-dim);
}