/* Devante Vargas — shared styles for all four pages, ported from design/*.dc.html.
   Mediterranean poster: paper ground, ink, and three loud colour blocks (sea blue, coral, sun). Sections alternate between paper and full-bleed colour. Motion follows scroll. */
body{margin:0;background:#F7F6F2}
a{color:inherit}
.pg{--sea:#1849A9;--coral:#FF5B3A;--sun:#FFC531;--ink:#141414;--paper:#F7F6F2;background:var(--paper);color:var(--ink);font-family:'Source Serif 4',Georgia,serif;font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow:hidden}
.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(20px,4vw,56px)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px)}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c9{grid-column:span 9}.c12{grid-column:span 12}
.lab{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.disp{font-family:Archivo,'Arial Narrow',Arial,sans-serif;font-stretch:70%;font-weight:900;letter-spacing:-.015em;line-height:.9;margin:0;text-wrap:balance}
.h2{font-family:Archivo,'Arial Narrow',Arial,sans-serif;font-stretch:72%;font-weight:800;font-size:clamp(40px,5vw,72px);line-height:.95;letter-spacing:-.01em;margin:0;text-wrap:balance}
.h3{font-family:Archivo,'Arial Narrow',Arial,sans-serif;font-stretch:80%;font-weight:800;font-size:clamp(26px,2.6vw,34px);line-height:1.02;margin:0}
.sec{padding-block:clamp(88px,10vw,144px)}
.hair{border-top:1px solid rgba(20,20,20,.18)}
.muted{color:#55534D}
.u{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:currentColor;transition:text-decoration-color .2s,color .2s}
.u:hover{text-decoration-color:var(--coral)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;font-weight:500;text-decoration:none;border:2px solid var(--ink);transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}
.row-link{position:relative;display:grid;text-decoration:none;background:linear-gradient(var(--sun),var(--sun)) no-repeat 0 0 / 0% 100%;transition:background-size .45s cubic-bezier(.6,0,.2,1)}
.row-link:hover{background-size:100% 100%}
.row-link .arr{display:inline-block;transition:transform .3s}
.row-link:hover .arr{transform:translateX(8px)}
.shot{display:block;width:100%;height:auto;aspect-ratio:640/1311;object-fit:cover;border-radius:20px;box-shadow:0 30px 60px -30px rgba(20,15,10,.55)}
.line{display:block;overflow:hidden;padding-bottom:.25em;margin-bottom:-.2em}
.line>span{display:inline-block;animation:up 1.1s cubic-bezier(.2,.75,.1,1) both}
.mark{background:linear-gradient(var(--sun),var(--sun)) no-repeat 0 88% / 0% 34%;animation:mark .9s .9s cubic-bezier(.6,0,.2,1) forwards}
.strike{position:relative;display:inline-block}
.strike::after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height:.09em;background:var(--coral);transform-origin:0 50%;animation:grow .7s 1s cubic-bezier(.6,0,.2,1) both}
@keyframes up{from{transform:translateY(140%)}to{transform:none}}
@keyframes mark{to{background-size:100% 34%}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{transform:translateY(70px)}to{transform:translateY(-30px)}}
@keyframes drift{from{transform:translateY(40px)}to{transform:translateY(-60px)}}
@keyframes slideL{from{transform:translateX(-12%)}to{transform:none}}
@keyframes slideR{from{transform:translateX(12%)}to{transform:none}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lift{from{transform:translateY(40px)}to{transform:none}}
@supports (animation-timeline: view()){
  .sv{animation-timeline:view();animation-fill-mode:both;animation-timing-function:linear}
  .sv-rise{animation-name:rise;animation-range:entry 0% exit 100%}
  .sv-drift{animation-name:drift;animation-range:entry 0% exit 100%}
  .sv-l{animation-name:slideL;animation-range:entry 0% cover 40%}
  .sv-r{animation-name:slideR;animation-range:entry 0% cover 40%}
  .sv-fill{animation-name:fill;animation-range:entry 20% cover 55%;transform-origin:0 50%}
  /* credentials cards: rise settles as each card fully enters, so it never overlaps the row below */
  .sv-up{animation-name:lift;animation-range:entry 0% entry 100%}
}
/* counters */
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
.cnt{counter-reset:n var(--n);font-variant-numeric:tabular-nums}
.cnt::after{content:counter(n)}
.n25{--n:25;animation:k25 1.8s .3s cubic-bezier(.2,.7,.1,1) both}
.n110{--n:110;animation:k110 1.8s .3s cubic-bezier(.2,.7,.1,1) both}
.n52{--n:2;animation:k52 2s .3s cubic-bezier(.3,.6,.1,1) both}
@keyframes k25{from{--n:0}to{--n:25}}
@keyframes k110{from{--n:0}to{--n:110}}
@keyframes k52{from{--n:52}to{--n:2}}
.n30{--n:30;animation:k30 1.8s .3s cubic-bezier(.2,.7,.1,1) both}
.n5{--n:5;animation:k180 2s .3s cubic-bezier(.3,.6,.1,1) both}
@keyframes k30{from{--n:0}to{--n:30}}
@keyframes k180{from{--n:180}to{--n:5}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* button text roll */
.roll{display:inline-grid;overflow:hidden;line-height:1.3}
.roll>span{grid-area:1/1;transition:transform .38s cubic-bezier(.6,0,.2,1)}
.roll>span+span{transform:translateY(110%)}
.btn:hover .roll>span:first-child{transform:translateY(-110%)}
.btn:hover .roll>span+span{transform:none}
/* work index preview */
.pv{position:absolute;right:17%;top:50%;width:190px;aspect-ratio:16/10;overflow:hidden;pointer-events:none;opacity:0;transform:translate(0,-50%) rotate(-4deg) scale(.85);transition:opacity .25s,transform .45s cubic-bezier(.2,.8,.2,1);box-shadow:8px 8px 0 var(--ink);z-index:3}
.row-link:hover .pv{opacity:1;transform:translate(0,-50%) rotate(-2deg) scale(1)}
.pv img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
/* work index: the preview opens in the empty space beside the section heading, so it never covers row text */
.idx{position:relative}
.idx .row-link{position:static}
.idx .pv{top:auto;right:8px;bottom:calc(100% + 28px);width:clamp(220px,22vw,280px);transform:translateY(14px) rotate(-4deg) scale(.85)}
.idx .row-link:hover .pv{transform:rotate(-2deg) scale(1)}
@keyframes rv{from{clip-path:inset(0 0 100% 0);transform:translateY(36px)}to{clip-path:inset(0 0 -10% 0);transform:none}}
@keyframes tag{from{transform:translateY(18px) scale(.86)}to{transform:none}}
@keyframes stepOn{from{background:#CFCBC0;color:#6D6A62}to{background:var(--sea);color:#FFFFFF}}
@keyframes stepOnC{from{background:#CFCBC0;color:#6D6A62}to{background:var(--coral);color:#FFFFFF}}
@keyframes pop{from{transform:translateY(34px);color:rgba(26,13,8,.22)}to{transform:none;color:#1A0D08}}
@supports (animation-timeline: view()){
  .n25,.n110,.n52,.n30,.n5{animation-duration:auto;animation-delay:0s;animation-timeline:view();animation-range:entry 30% cover 50%}
  .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
  .tags>span{animation:tag linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  .tags>span:nth-child(2){animation-range:entry 10% entry 100%}.tags>span:nth-child(3){animation-range:entry 20% entry 100%}.tags>span:nth-child(4){animation-range:entry 30% entry 100%}.tags>span:nth-child(5){animation-range:entry 40% entry 100%}.tags>span:nth-child(6){animation-range:entry 50% entry 100%}
  .stp{animation:stepOn linear both;animation-timeline:view()}
  .stp.c{animation-name:stepOnC}
  .s1{animation-range:cover 25% cover 31%}.s2{animation-range:cover 31% cover 37%}.s3{animation-range:cover 37% cover 43%}.s4{animation-range:cover 43% cover 49%}
  .pp{animation:pop linear both;animation-timeline:view()}
  .p1{animation-range:cover 18% cover 26%}.p2{animation-range:cover 22% cover 30%}.p3{animation-range:cover 26% cover 34%}.p4{animation-range:cover 30% cover 38%}.p5{animation-range:cover 34% cover 42%}.p6{animation-range:cover 38% cover 46%}
}
.m-off *,.m-off *::after{animation:none !important}
.m-off .mark{background-size:100% 34%}
@media (max-width:900px){.pv{display:none}.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9{grid-column:span 12}.navl{display:none !important}.shots{grid-template-columns:repeat(2,minmax(0,1fr)) !important}.idx-col{display:none !important}.stagger{margin-top:0 !important}}
@media (prefers-reduced-motion:reduce){*,*::after{animation:none !important;transition:none !important}.mark{background-size:100% 34%}}

/* ---------- production additions: mobile menu and language prompt ---------- */
.site-hdr{position:relative;z-index:10}
.navtoggle{display:none}
.mnav[hidden]{display:none}
@media (max-width:900px){
  .navtoggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:35px;height:35px;margin-left:-20px;padding:0;background:transparent;color:var(--ink);border:2px solid var(--ink);cursor:pointer}
  .mnav{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;background:var(--ink);color:var(--paper);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
  .mnav[hidden]{display:none}
  .mnav a{display:block;padding:16px clamp(20px,4vw,56px);text-decoration:none;border-top:1px solid rgba(247,246,242,.2)}
  .mnav a:first-child{border-top:0}
  .mnav a:hover,.mnav a:focus-visible{color:var(--sun)}
}
@media (min-width:901px){.mnav{display:none !important}}
.navtoggle>span,.navtoggle>span::before,.navtoggle>span::after{display:block;width:16px;height:2px;background:currentColor;transition:transform .25s,background-color .25s}
.navtoggle>span{position:relative}
.navtoggle>span::before,.navtoggle>span::after{content:"";position:absolute;left:0}
.navtoggle>span::before{top:-5px}
.navtoggle>span::after{top:5px}
.navtoggle[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.navtoggle[aria-expanded="true"]>span{background:transparent}
.navtoggle[aria-expanded="true"]>span::before{transform:translateY(5px) rotate(45deg)}
.navtoggle[aria-expanded="true"]>span::after{transform:translateY(-5px) rotate(-45deg)}
.langprompt{position:fixed;left:16px;right:16px;bottom:16px;z-index:20;max-width:440px;margin-inline:auto;display:flex;align-items:center;gap:14px;padding:12px 12px 12px 18px;background:#141414;color:#F7F6F2;box-shadow:6px 6px 0 #FFC531;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;font-weight:500}
.langprompt a{margin-left:auto;color:#FFC531;text-underline-offset:4px;white-space:nowrap}
.langprompt button{padding:4px 8px;background:none;border:0;color:inherit;font:inherit;font-size:20px;line-height:1;cursor:pointer}

/* ---------- utilities extracted from repeated inline styles (kept last so they win like the inline styles did) ---------- */
.ff-a{font-family:Archivo,'Arial Narrow',Arial,sans-serif}
.ff-m{font-family:'IBM Plex Mono',ui-monospace,monospace}
.ff-s{font-family:'Source Serif 4',Georgia,serif}
.ff-c{font-family:'Noto Serif SC','Songti SC',serif}
.mw0{min-width:0}
.u-q,.u-q:hover{text-decoration-color:transparent}
.tg-dk>span{background:#1A0D08;color:#FFE7DF}
.tg-wh>span{background:#FFFFFF;color:#0E2C66}
.tg-pp>span{background:var(--paper);color:var(--ink)}
.tg-is>span{background:var(--ink);color:var(--sun)}
.bl{display:flex;gap:14px}
.bl-d{flex:none;width:8px;height:8px;margin-top:10px}
.tg{padding:6px 11px}
.tg-o{padding:5px 10px;border:1px solid rgba(255,255,255,.55)}
.tg-i{border:1px solid var(--ink)}
.stl{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid #DDD9CF}
.tl-card{position:relative;background:rgba(255,255,255,.07);color:#FFFFFF;padding:clamp(22px,2.6vw,34px)}
.tl-dot{position:absolute;left:calc(-1 * clamp(22px,3vw,40px) - 6px);top:34px;width:15px;height:15px;background:var(--sun);border:3px solid var(--sea)}
.tl-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;align-items:baseline}
.tl-date{display:flex;gap:10px;align-items:center;font-size:13px;font-weight:500}
.tl-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:16px;line-height:1.55;color:#D6E0F5}
.tl-row{padding:20px 0;row-gap:8px;border-bottom:1px solid rgba(255,255,255,.25)}
.mstep{font-stretch:68%;font-weight:900;font-size:56px;line-height:.85}
.stn{display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;background:var(--sea);color:#FFFFFF;font-size:12px}