:root{
  --ink:#171613;
  --paper:#FFFFFF;
  --line:#E8E4D8;
  --muted:#6B685E;
  --blue:#2C46E0;
  --sage:#5A7A63;    --sage-bg:#DDE6D9;
  --peri:#5568C7;    --peri-bg:#DEE3F5;
  --terra:#B5602A;   --terra-bg:#F0DAC6;
  --mustard:#C88A2A; --mustard-bg:#F5E6C8;
}
*{box-sizing:border-box; margin:0; padding:0;}
html, body{height:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Radio Canada Big', sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  cursor: url("/images/cursor.png"), auto
}

a:hover{
  cursor: url("/images/cursor_click.png"), pointer
}

a{color:inherit; text-decoration:none;}
.wrap{max-width:980px; margin:0 auto; padding:0 40px;}
.wide{max-width:1080px; margin:0 auto; padding:0 40px;}

/* Nav / header, shared across all pages */
header{position:relative; z-index:2; flex:0 0 auto;}
.nav{display:flex; align-items:center; justify-content:space-between; padding:28px 40px; max-width:1080px; margin:0 auto;}
.logo{font-size:16px; font-weight:700;}
.navlinks{display:flex; gap:32px; font-size:14px; font-weight:500; color:var(--muted);}
.navlinks a.active{color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px;}
.navlinks a:hover{color:var(--ink);}

/* Footer, shared across all pages */
footer{padding:32px 0 44px; border-top:1px solid var(--line); margin-top:8px; flex:0 0 auto;}
.footer-row{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted);}
.social{display:flex; gap:20px;}
.social a:hover{color:var(--blue);}

/* Homepage splash */
.home-main{flex:1 1 auto; display:flex; align-items:center; min-height:0; min-width:0;}
.home-main .wrap{max-width:1080px; min-width:0;}

.splash{display:grid; grid-template-columns:1fr 0.86fr; gap:56px; align-items:center; width:100%; min-width:0;}
.intro-col{max-width:440px; min-width:0;}
.eyebrow{font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.splash h1{font-size:56px; font-weight:800; line-height:1; letter-spacing:-0.02em; margin-top:14px;}
.splash .role{font-size:16.5px; color:var(--muted); margin-top:16px; max-width:420px;}

.bio{margin-top:22px;}
.bio p{font-size:14px; color:var(--ink); font-weight:500;}
.bio p + p{margin-top:8px; color:var(--muted); font-weight:400;}

.paths{display:flex; border-top:1px solid var(--line); margin-top:26px;}
.path{flex:1; min-width:0; padding:28px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line);}
.path:first-child{border-right:1px solid var(--line); padding-right:40px;}
.path:last-child{padding-left:40px;}
.path-label{font-size:24px; font-weight:700; line-height:1.15;}
.path-arrow{font-size:20px; color:var(--muted); transition:transform .15s;}
.path:hover .path-arrow{transform:translateX(4px); color:var(--terra);}

.photo-col{width:100%;}
.photo{width:100%; aspect-ratio:5/4; background:#EEEAE0; border:1px solid var(--line); position:relative; overflow:hidden;}
.photo-cap{font-size:12px; color:var(--muted); margin-top:10px;}

/* Work / Art index pages */
.intro{padding:12px 0 36px; display:flex; justify-content:space-between; align-items:flex-end; max-width:1080px; margin:0 auto; padding-left:40px; padding-right:40px; width: 100%;}
.intro h1{font-size:40px; font-weight:800; letter-spacing:-0.01em;}
.intro p{font-size:14px; color:var(--muted); max-width:300px; text-align:right;}

.grid{display:grid; gap:20px; max-width:1080px; margin:0 auto; padding:0 40px 56px; width: 100%;}
.card{display:block;}
.card-media{width:100%; position:relative; overflow:hidden;}
.card-media .cat{position:absolute; top:12px; left:12px; font-size:11px; font-weight:600; padding:5px 10px; text-transform:uppercase; letter-spacing:0.03em; color:#fff; z-index:1;}
.media-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.3s ease;}
.work-grid .card:hover .media-img{transform:scale(1.08);}
.card h3{font-size:16.5px; font-weight:700; margin-top:14px;}
.card p{font-size:13px; color:var(--muted); margin-top:4px;}


.theme-sage{--accent:var(--sage); --accent-bg:var(--sage-bg);}
.theme-peri{--accent:var(--peri); --accent-bg:var(--peri-bg);}
.theme-terra{--accent:var(--terra); --accent-bg:var(--terra-bg);}

.work-grid{grid-template-columns:repeat(3,1fr);}
.work-grid .card-media{aspect-ratio:4/5; background:var(--accent-bg);}
.work-grid .card-media .cat{background:var(--accent);}
.work-grid .card h3{font-size:16.5px;}

.art-grid{grid-template-columns:repeat(3,1fr);}
.art-grid .card-media{aspect-ratio:1/1; background:var(--accent-bg);}
.art-grid .card-media .cat{background:var(--accent);}
.art-grid .card h3{font-size:16.5px;}

/* Case study page */
.case{max-width:900px; margin:0 auto; padding:0 40px;}

.back{padding:20px 0 0; font-size:13px; color:var(--muted);}
.back a:hover{color:var(--ink);}

.case-header{padding:24px 0 40px;}
.tag{display:inline-block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; padding:5px 10px; background:var(--accent-bg); color:var(--accent); margin-bottom:18px;}
.case-header h1{font-size:46px; font-weight:800; letter-spacing:-0.01em; max-width:640px;}
.case-header p{font-size:17px; color:var(--muted); margin-top:16px; max-width:520px;}

.meta{display:flex; gap:48px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line); flex-wrap:wrap;}
.meta div span{display:block;}
.meta .label{font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); margin-bottom:6px;}
.meta .value{font-size:14px; font-weight:600;}

.hero-photo{width:100%; aspect-ratio:16/9; background:var(--accent-bg); margin:8px 0 64px; position:relative; overflow:hidden;}

.section{padding-bottom:56px;}
.section h2{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--accent); margin-bottom:20px;}
.section p{font-size:16px; color:var(--ink); max-width:680px;}
.section p + p{margin-top:16px;}

.pull{font-size:26px; font-weight:600; line-height:1.4; max-width:640px; padding:8px 0 8px 24px; border-left:3px solid var(--accent); margin:12px 0 40px;}

.gallery{display:grid; grid-template-columns:1.3fr 1fr; gap:16px; margin-top:8px;}
.gallery .g-tall{grid-row:span 2; aspect-ratio:3/4; background:var(--accent-bg); position:relative; overflow:hidden;}
.gallery .g-small{aspect-ratio:4/3; background:var(--accent-bg); position:relative; overflow:hidden;}

.next{border-top:1px solid var(--line); padding:40px 0; display:flex; justify-content:space-between; align-items:center;}
.next .label{font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted);}
.next .title{font-size:20px; font-weight:700; margin-top:6px;}
.next .arrow{font-size:22px; color:var(--muted);}
.next:hover .arrow{color:var(--accent);}

/* About page */
.about .section h2{color:var(--muted);}

.bio-hero{padding:16px 0 56px; display:grid; grid-template-columns:1fr 300px; gap:56px; align-items:start; min-width:0;}
.bio-hero > div{min-width:0;}
.bio-hero h1{font-size:44px; font-weight:800; letter-spacing:-0.01em; margin-top:14px;}
.bio-hero .lede{font-size:17px; color:var(--ink); margin-top:20px; max-width:520px;}
.bio-hero .lede + .lede{margin-top:14px; color:var(--muted); font-size:15px;}

.portrait{width:100%; aspect-ratio:4/5; background:var(--sage-bg); border:1px solid var(--line); position:relative; overflow:hidden;}
.portrait-cap{font-size:12px; color:var(--muted); margin-top:10px;}

.contact-row{display:flex; flex-wrap:wrap; gap:48px; padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:56px;}
.contact-row div span{display:block;}
.contact-row .label{font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); margin-bottom:6px;}
.contact-row .value{font-size:14.5px; font-weight:600;}
.contact-row a.value:hover{color:var(--blue);}

.focus-list{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; min-width:0;}
.focus{padding:18px 0 0; border-top:2px solid var(--accent); min-width:0;}
.focus h3{font-size:15.5px; font-weight:700;}
.focus p{font-size:13.5px; color:var(--muted); margin-top:6px;}

.tools p{font-size:15px; color:var(--ink); max-width:640px;}
.tools p span{color:var(--muted);}

.exp-group{border-top:1px solid var(--line);}
.exp-group:last-child{border-bottom:1px solid var(--line);}
.exp-group summary{list-style:none; cursor:pointer; padding:18px 0; display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:700;}
.exp-group summary::-webkit-details-marker{display:none;}
.exp-group summary .plus{font-size:18px; font-weight:400; color:var(--muted); transition:transform .15s;}
.exp-group[open] summary .plus{transform:rotate(45deg);}
.exp-body{padding-bottom:24px;}
.exp-item{display:flex; justify-content:space-between; gap:24px; padding:9px 0; font-size:14.5px;}
.exp-item .what{color:var(--ink);}
.exp-item .when{color:var(--muted); white-space:nowrap; font-size:13px;}
.exp-note{font-size:14px; color:var(--muted); max-width:600px; margin-top:4px;}

.resume{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; padding-bottom:2px; border-bottom:1px solid var(--ink);}
.resume:hover{color:var(--terra); border-color:var(--terra);}

@media (max-width:760px){
  .nav{flex-wrap:wrap; row-gap:10px; padding:22px 24px;}
  .navlinks{flex-wrap:wrap; row-gap:8px; column-gap:16px; font-size:13px; justify-content:flex-start; width:100%; min-width:0;}

  body{display:block; min-height:0;}
  .home-main{display:block;}
  .splash{grid-template-columns:1fr; gap:32px; padding:8px 0 32px;}
  .photo-col{order:-1;}
  .splash h1{font-size:44px;}
  .path:first-child{padding-right:20px;}
  .path:last-child{padding-left:20px;}

  .intro{flex-direction:column; align-items:flex-start; gap:10px;}
  .intro p{text-align:left;}

  .work-grid{grid-template-columns:1fr;}
  .art-grid{grid-template-columns:1fr;}

  .case-header h1{font-size:32px;}
  .gallery{grid-template-columns:1fr;}
  .gallery .g-tall{grid-row:auto;}
  .pull{font-size:20px;}

  .bio-hero{grid-template-columns:1fr; gap:28px;}
  .portrait{max-width:220px;}
  .contact-row{gap:24px;}
  .focus-list{grid-template-columns:1fr;}
  .exp-item{flex-direction:column; gap:2px;}

  .footer-row{flex-direction:column; align-items:flex-start; gap:12px;}
  .social{flex-wrap:wrap; row-gap:8px;}
}