/* Gabriel Neila portfolio. Tokens are documented in DESIGN.md.
   Layout idea: warm paper, type-led, every page opens with a summary a recruiter can scan in seconds. */
:root{
  color-scheme:light;
  --bg:#F3F0EA;        /* page background, warm paper */
  --card:#FBFAF7;      /* raised surfaces */
  --ink:#191713;       /* text, primary buttons */
  --soft:#5E584E;      /* secondary text */
  --line:#D9D3C7;      /* hairlines and borders */
  --accent:#0F6474;    /* links, kickers (deepened brand teal) */
  --mark:#CDE65C;      /* highlight (brand lime, softened for paper) */
  --ok:#3E8E2F;        /* availability dot */
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"Figtree","Segoe UI",system-ui,sans-serif;
  --r-s:10px; --r-m:18px; --r-l:24px;
  --shadow:0 24px 50px -24px rgba(60,48,20,.35);
  --nav-h:68px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6}
img,svg{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;text-wrap:balance;margin:0;line-height:1.05}
p,ul,ol,dl,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;z-index:99}
.skip:focus{left:12px}

/* ---------- Navigation ---------- */
.sitenav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.sitenav .wrap{display:flex;align-items:center;gap:20px;min-height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap;font:700 20px/1 var(--f-display)}
.brand img{width:44px;height:auto;flex:none}
.sitenav nav{min-width:0}
.sitenav ul{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
/* Artist Portfolio sits apart, far right: a door to a separate identity */
.artlink{margin-left:auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none;font-weight:600;font-size:15px;padding:9px 16px;border-radius:999px;border:1.5px solid var(--ink);transition:background .2s,color .2s}
.artlink:hover,.artlink[aria-current]{background:var(--ink);color:var(--bg)}
.artlink:hover .arrow{transform:translate(2px,-2px)}
.sitenav li a{display:block;padding:10px 12px;text-decoration:none;white-space:nowrap;border-radius:8px;font-weight:500;color:var(--soft);transition:background .2s,color .2s}
.sitenav li a:hover,.sitenav li a[aria-current]{color:var(--ink);background:var(--mark)}

/* ---------- Atoms ---------- */
.kicker{font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
mark{background:linear-gradient(transparent 58%,var(--mark) 58% 92%,transparent 92%);color:inherit;padding:0 .08em}
.lede{font-size:20px;color:var(--soft);max-width:58ch}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;border-radius:12px;padding:13px 24px;background:var(--ink);color:var(--bg);transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:6px 6px 0 var(--mark)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--ink),6px 6px 0 var(--mark)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.arrow{display:inline-block;transition:transform .2s ease}
a:hover .arrow{transform:translateX(5px)}
.tlink{color:var(--accent);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:15px;font-weight:500}

/* image slot: an obvious "image needed" banner until the real file is dropped into src/img */
.ph{position:relative;display:flex;align-items:center;justify-content:center;min-height:180px;border-radius:var(--r-s);border:2px dashed #8B8475;overflow:hidden;
  background:repeating-linear-gradient(135deg,#ECE7DC 0 14px,#E0D9CA 14px 28px)}
.ph span{margin:10px;padding:8px 12px;border-radius:8px;background:#191713;color:#F3F0EA;font:500 13px/1.35 var(--f-body);text-align:center;max-width:90%}
.ph span b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#CDE65C}
.shot{display:block;width:100%;height:auto;border-radius:var(--r-s);border:1px solid var(--line)}
.figgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.figgrid.two{grid-template-columns:repeat(2,1fr)}
figure.fig figcaption{margin-top:10px;font-size:15px;color:var(--soft)}

/* ---------- Home ---------- */
.hero{display:grid;grid-template-columns:1.7fr 1fr;gap:56px;align-items:end;padding:76px 0 60px}
.hero h1{font-size:clamp(42px,6.4vw,92px);line-height:.98;margin-top:18px}
.hero .lede{margin-top:26px}
.idcard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow);transform:rotate(1.5deg);transition:transform .4s ease}
.idcard:hover{transform:rotate(0)}
.idcard .ph,.idcard .shot{aspect-ratio:4/3.4;min-height:0;border-radius:12px;--a:#5C7FB8;--b:#B0638E;object-fit:cover;object-position:50% 20%}
.idcard dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:16px 4px 4px;font-size:15.5px}
.idcard dt{color:var(--soft)}
.idcard dd{margin:0;font-weight:600;text-align:right}
.avail{display:inline-flex;align-items:center;gap:8px}
.avail::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ok)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--ink);margin-bottom:84px}
.facts li{padding:24px 24px 24px 0}
.facts li+li{padding-left:24px;border-left:1px solid var(--line)}
.facts b{display:block;font:700 clamp(34px,4vw,52px)/1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.facts span{color:var(--soft)}
.sec-head{display:grid;grid-template-columns:1fr 1.4fr;gap:24px;align-items:end;margin-bottom:22px}
.sec-head h2{font-size:clamp(34px,4.4vw,58px);line-height:1}
.sec-head p{color:var(--soft);max-width:58ch}
.section{margin-top:84px}

/* project index */
.index{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:54px 1.5fr 1fr 220px 34px;gap:24px;align-items:center;padding:22px 8px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .25s ease,padding .25s ease}
.row:hover{background:var(--card);padding-inline:18px}
.row .n{font:600 15px/1 var(--f-display);color:var(--soft);font-variant-numeric:tabular-nums}
.row h2,.row h3{font-size:clamp(24px,2.6vw,34px)}
.row .what{color:var(--soft);font-size:16px;margin-top:6px}
.row .who{font-size:15px}
.row .who b{display:block;font-weight:600}
.row .who span{color:var(--soft)}
.row .ph,.row .shot{aspect-ratio:16/10;min-height:0;object-fit:cover;transition:transform .35s ease}
.row:hover .ph,.row:hover .shot{transform:scale(1.04) rotate(-1deg)}
.row .ph span{font-size:11px;margin:8px}
video.shot{background:#000}
.row .arrow{font-size:24px}
.earlier{padding:18px 8px;color:var(--soft)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:28px;transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -22px rgba(60,48,20,.4)}
.card h3{font-size:25px;margin-bottom:10px}
.card p{color:var(--soft)}
.card .ev{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink);font-weight:500;font-size:15.5px}

/* dark band: artist teaser, next project */
.band{display:grid;grid-template-columns:1fr 1.3fr;gap:36px;align-items:center;background:var(--ink);color:var(--bg);border-radius:var(--r-l);padding:40px}
.band .kicker{color:var(--mark)}
.band h2{font-size:clamp(32px,4vw,52px);line-height:1;margin:10px 0 14px}
.band p{color:#d6d0c4}
.band .btn{background:var(--mark);color:#191713;margin-top:22px}
.band .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.band .tiles .ph{aspect-ratio:3/4;min-height:0;border-radius:12px}
.band>.shot{border:0}
.band .tiles .ph:nth-child(2){transform:translateY(-18px)}
.closer{padding:84px 0 72px}
.closer h2{font-size:clamp(40px,6.4vw,92px);line-height:.98;max-width:14ch}
.closer p{color:var(--soft);font-size:19px;max-width:56ch;margin-top:18px}

/* ---------- Inner page heads ---------- */
.page-head{padding:64px 0 40px}
.page-head h1{font-size:clamp(40px,5.6vw,76px);line-height:1;margin:14px 0 20px;max-width:18ch}
.crumbs{font-size:15px;color:var(--soft);display:flex;flex-wrap:wrap;gap:8px}
.crumbs a{color:var(--accent);font-weight:600;text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ---------- Case study ---------- */
.case-hero .ph{aspect-ratio:16/8;min-height:240px;border-radius:var(--r-m)}
.case-hero .shot{border-radius:var(--r-m);max-height:640px;object-fit:cover}
.meta-strip{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--ink);margin:36px 0 0}
.meta-strip div{padding:20px 20px 20px 0}
.meta-strip div+div{padding-left:20px;border-left:1px solid var(--line)}
.meta-strip dt{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.meta-strip dd{margin:6px 0 0;font-weight:500}
.glance{margin-top:56px}
.glance>h2{font-size:clamp(28px,3.2vw,40px);margin-bottom:8px}
.glance>p{color:var(--soft);margin-bottom:22px}
.glance .card h3{font-size:14px;font-family:var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.glance .card p{color:var(--ink)}
.glance .card:last-child{background:var(--ink);border-color:var(--ink)}
.glance .card:last-child h3{color:var(--mark)}
.glance .card:last-child p{color:var(--bg)}
.chapter{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:24px 56px;padding:56px 0;border-top:1px solid var(--line);margin-top:56px}
.chapter+.chapter{margin-top:0}
.chapter>header{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start}
.chapter>header .n{font:600 15px/1 var(--f-display);color:var(--soft)}
.chapter>header h2{font-size:clamp(26px,2.8vw,36px);margin-top:10px}
.prose{display:grid;gap:18px;max-width:72ch}
.prose h3{font-size:22px;margin-top:14px}
.prose ul.dots{display:grid;gap:8px}
.prose ul.dots li{padding-left:22px;position:relative}
.prose ul.dots li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--mark);box-shadow:0 0 0 1px var(--ink)}
.prose .ph{min-height:260px}
.note{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r-s);padding:18px 20px}
.note strong{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:f}
.flow li{counter-increment:f;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:18px;position:relative}
.flow li::before{content:counter(f);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);font:700 14px/1 var(--f-display);margin-bottom:10px}
.flow li:last-child{background:var(--mark);border-color:var(--ink)}
.flow b{display:block;font-family:var(--f-display);font-size:18px;margin-bottom:4px}
.flow.five{grid-template-columns:repeat(5,1fr)}
.pairs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pairs li{border-top:2px solid var(--ink);padding-top:12px}
.pairs b{display:block;font-family:var(--f-display);font-size:18px}
.pairs span{color:var(--soft);font-size:16px}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.years{display:grid;gap:0;border-left:2px solid var(--ink);margin-left:6px}
.years li{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:8px 0 8px 18px;position:relative}
.years li::before{content:"";position:absolute;left:-7px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--mark);border:2px solid var(--ink)}
.years b{font-family:var(--f-display);font-variant-numeric:tabular-nums}
.next{margin-top:72px;grid-template-columns:1fr auto}
.next h2{margin:8px 0 0}

/* ---------- About / Resume / Contact ---------- */
.split{display:grid;grid-template-columns:1fr 1.5fr;gap:56px;align-items:start}
.split .idcard{transform:none;position:sticky;top:calc(var(--nav-h) + 24px)}
.path{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:600}
.path li{padding:8px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.path li:last-child{background:var(--mark);border-color:var(--ink)}
.path li+li::before{content:"→";margin-right:10px;color:var(--soft)}
.job{display:grid;grid-template-columns:200px 1fr;gap:12px 40px;padding:28px 0;border-top:1px solid var(--line)}
.job:first-of-type{border-top:1px solid var(--ink)}
.job .when{color:var(--soft);font-weight:500;font-variant-numeric:tabular-nums}
.job h3{font-size:24px}
.job .org{color:var(--accent);font-weight:600;margin:4px 0 12px}
.card .chips{margin-top:4px}
.card .chips li{background:var(--bg);font-size:14.5px}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.contact-grid .card h3{font-size:14px;font-family:var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.contact-grid .card p{color:var(--ink);font:700 20px/1.2 var(--f-display);overflow-wrap:anywhere}

/* ---------- Footer ---------- */
.sitefoot{margin-top:40px;border-top:1px solid var(--ink)}
.sitefoot .wrap{padding:22px 0 40px;color:var(--soft);font-size:15px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
.sitefoot a{color:var(--ink);font-weight:600;text-decoration:none}
.sitefoot a:hover{text-decoration:underline}
.sitefoot ul{display:flex;flex-wrap:wrap;gap:6px 18px}

/* ---------- Artist portfolio: its own world, built on the alien's colors ---------- */
body.art{color-scheme:dark;--bg:#1A1630;--card:#262043;--ink:#F6F2FB;--soft:#C5BCD8;--line:#3F3763;--accent:#ADD03D;--mark:#ADD03D;
  background:radial-gradient(900px 700px at 10% 20%,rgba(152,98,140,.5),transparent 62%),radial-gradient(800px 600px at 95% 70%,rgba(22,104,146,.55),transparent 60%),#1A1630;background-attachment:fixed}
body.art mark{background:none;color:var(--mark)}
body.art .btn{color:#1A1630}
body.art .btn.ghost{color:var(--ink)}
body.art .sitenav li a:hover,body.art .sitenav li a[aria-current]{color:#1A1630}
body.art .artlink{background:var(--mark);border-color:var(--mark);color:#1A1630}
body.art .art-hero{padding:72px 0 40px;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
body.art .art-hero h1{font-size:clamp(44px,7vw,104px);line-height:.94}
body.art .art-hero .mascot{width:min(320px,70%);height:auto;justify-self:center;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px) rotate(-3deg)}}
.jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.jump a{padding:9px 16px;border-radius:999px;border:1px solid var(--line);text-decoration:none;font-weight:600;background:var(--card)}
.jump a:hover{border-color:var(--mark);color:var(--mark)}
.gallery{columns:4 220px;column-gap:16px}
.gallery .ph{break-inside:avoid;margin-bottom:16px;min-height:0;border-radius:14px;transition:transform .3s ease,box-shadow .3s ease}
.gallery .ph:hover{transform:scale(1.03) rotate(-1deg);box-shadow:0 24px 40px rgba(0,0,0,.45)}
.art-sec{margin-top:72px}
.art-sec>h2{font-size:clamp(32px,4.4vw,56px);margin-bottom:8px}
.art-sec>p{color:var(--soft);max-width:60ch;margin-bottom:24px}
.books{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.books .ph{aspect-ratio:3/4;min-height:0;border-radius:14px}

/* ---------- Motion ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    @keyframes rise{from{opacity:.4;transform:translateY(26px)}to{opacity:1;transform:none}}
  }
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- Small screens ---------- */
@media (max-width:900px){
  .sitenav .wrap{flex-wrap:wrap;gap:0 12px;padding-top:8px}
  .sitenav nav{order:3;width:100%}
  .artlink{padding:6px 12px;font-size:14px}
  .sitenav li a{padding:8px 10px 10px;font-size:15px}
  :root{--nav-h:96px}
  .hero,.sec-head,.cards,.cards.two,.cards.four,.band,.split,.chapter,.contact-grid,.books,.twocol,body.art .art-hero{grid-template-columns:1fr}
  .hero{padding-top:40px;gap:32px}
  .idcard{transform:none;max-width:420px}
  .split .idcard,.chapter>header{position:static}
  .facts,.meta-strip{grid-template-columns:1fr}
  .facts li,.facts li+li,.meta-strip div,.meta-strip div+div{padding:16px 0;border-left:0}
  .facts li+li,.meta-strip div+div{border-top:1px solid var(--line)}
  .row{grid-template-columns:34px 1fr;gap:10px 12px;padding:22px 0}
  .row .who,.row .ph,.row .shot{grid-column:2}
  .row .arrow{display:none}
  .band{padding:26px}
  .band .tiles .ph:nth-child(2){transform:none}
  .next{grid-template-columns:1fr}
  .chapter{padding:40px 0;margin-top:40px;gap:16px}
  .flow,.flow.five,.pairs,.figgrid,.figgrid.two{grid-template-columns:1fr}
  .job{grid-template-columns:1fr;gap:4px}
  .section{margin-top:60px}
  body.art .art-hero .mascot{order:-1;width:160px;justify-self:start}
}