/* An editorial layer over Romina's original palette and type system. */
:root{--paper:#f4f1e9;--ink:#252923;--ink-soft:#555c51;--line:#c8c8bc;--r-xl:8px;--r-lg:6px;--r-md:4px;--shadow-hard:5px 5px 0 var(--green)}
html{background:var(--paper)}
body{background:var(--paper)}
.site-nav{background:var(--paper);backdrop-filter:none;border-bottom:1px solid var(--ink)}
.nav-mark{font-size:1.1rem}.nav-mark::after{content:' ✳';color:var(--coral-deep)}
.nav-links{gap:22px;font-size:.8rem}
.nav-links .btn{min-height:40px;padding:10px 15px}
.btn{border-radius:2px;border-width:1px;box-shadow:none;font-weight:500}
.btn-primary{background:var(--ink);border-color:var(--ink)}
.btn-primary:hover{background:var(--coral-deep);border-color:var(--coral-deep);box-shadow:none}
.eyebrow{padding:0;min-height:0;border:0;border-radius:0;background:none;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--green-deep)}
.section-head{padding-top:22px;border-top:1px solid var(--ink);align-items:start}
h2{font-weight:500;letter-spacing:-.055em;font-size:clamp(2.4rem,5.1vw,4.4rem);line-height:.98}
h3{font-weight:500;letter-spacing:-.04em}
section{padding:clamp(60px,8vw,112px) 0}
.creative-hero{display:block;min-height:0;padding:26px 0 0;overflow:clip}
.hero-kicker,.hero-index{display:flex;justify-content:space-between;gap:20px;font-family:var(--mono);font-size:.65rem;line-height:1.4}
.hero-kicker a{text-decoration:none}.hero-kicker a::before{content:'';display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--green-deep)}
.creative-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(30px,5vw,72px);align-items:center;padding:64px 0 56px}
.hero-intro{font-family:var(--mono);font-size:.7rem;margin-bottom:24px;text-transform:uppercase;letter-spacing:.04em}
.creative-hero .hero-copy{max-width:none}
.creative-hero h1{font-weight:500;font-size:clamp(48px,6.2vw,88px);letter-spacing:-.065em;line-height:.99;max-width:none}
.creative-hero h1 em{font-family:Georgia,serif;font-weight:400;color:var(--coral-deep);letter-spacing:-.065em}
.hero-bottom{display:flex;align-items:end;gap:18px;margin-top:28px}
.creative-hero .hero-copy .lede{font-size:.95rem;line-height:1.65;max-width:39ch;margin:0}
.creative-arrow{flex-shrink:0;display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--ink);border-radius:50%;text-decoration:none;font-size:2.2rem;line-height:1;transition:transform .2s,background .2s}
.creative-arrow:hover{background:var(--yellow);transform:rotate(12deg)}
.hero-art{position:relative;min-width:0;padding:22px 0 0}
.hero-art-frame{overflow:hidden;border-radius:48% 48% 5px 5px;background:#8d80bd;aspect-ratio:1;transform:rotate(4deg)}
.hero-art video{display:block;width:100%;height:100%;object-fit:contain}
.hero-art-note{position:absolute;left:-24px;top:4px;padding:15px 20px;background:var(--yellow);font:italic 1.05rem/1.05 Georgia,serif;transform:rotate(-9deg);color:var(--ink);z-index:1}
.hero-art-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;font-family:var(--mono);font-size:.62rem}
.hero-art-footer a{text-decoration:none}.hero-art-footer button{padding:6px 0;background:none;border:0;border-bottom:1px solid var(--ink);font:inherit;cursor:pointer;color:var(--ink);min-height:36px}
.hero-signature{display:flex;align-items:center;justify-content:space-between;font-family:var(--display);font-size:clamp(44px,10vw,148px);font-weight:500;line-height:1.05;letter-spacing:-.075em;border-top:1px solid var(--ink);padding:12px 0 14px;white-space:nowrap}
.hero-signature span{font-size:.53em;line-height:1;color:var(--green-deep);margin-left:12px}
.hero-index{border-top:1px solid var(--line);padding:14px 0 18px}
#work{padding-top:66px}
.work-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:66px 36px;align-items:start}
.work-item{display:block;grid-column:span 7;padding:0;border:0;border-radius:0;background:transparent!important;transition:none}
.work-item:nth-child(2),.work-item:nth-child(3){grid-column:span 5}
.work-item:nth-child(2),.work-item:nth-child(4){margin-top:150px}
.work-thumb{aspect-ratio:1.38;border:0;border-radius:6px;background:var(--paper-2);overflow:hidden}
.work-item:nth-child(1) .work-thumb,.work-item:nth-child(4) .work-thumb{aspect-ratio:1.5}
.work-copy{padding:22px 0 0}.work-copy h3{font-size:clamp(24px,2.55vw,35px);max-width:26ch}
.work-item:hover{transform:none;box-shadow:none}
.work-item:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.work-meta{gap:10px;font-size:.62rem}
.work-meta span{padding:0;border:0;border-radius:0;background:none}
.work-meta span+span::before{content:'/';margin-right:10px;color:var(--coral-deep)}
.work-copy p{font-size:.85rem;max-width:48ch}.work-highlight{border-radius:0;background:none;padding:0;font-size:.65rem;margin-top:18px;color:var(--green-deep)}
#three-d{background:var(--lavender-soft)}
#three-d .three-d-media{border:0;border-radius:6px}
#three-d .three-d-card:nth-child(2) .three-d-media{border-radius:48% 48% 6px 6px}
#three-d h3,.illustration-copy h3{font-size:clamp(23px,2.3vw,32px)}
.visual-toolbar{margin-top:0}.visual-toolbar .btn{border-width:0 0 1px;padding:8px 0;border-radius:0;min-height:40px}
.visual-toolbar .btn:hover{box-shadow:none;background:none;color:var(--coral-deep);transform:none}
.illustration-grid{gap:48px 28px;align-items:start}
.illustration-card:nth-child(3n+2){margin-top:72px}
.illustration-image{border:0;border-radius:2px}
.illustration-open{border-radius:1px}
.illustration-copy p{font-size:.85rem}
.band-alt{background:var(--paper-2)}
.about-photo{border-radius:48% 48% 4px 4px}
.about-photo-blob,.exp-decor-blob{display:none}
.stats-strip{border-radius:0;box-shadow:none}
.process{gap:32px}
.process-step{border:0;border-radius:0;background:none;padding:22px 0;border-top:1px solid var(--ink);box-shadow:none}
.process-step:hover{transform:none;box-shadow:none}
.skill-row{border-radius:0}
.currently-banner{border-radius:4px;box-shadow:none;border:0;background:var(--lavender-soft)}
.chip{background:none;border-radius:0;border-width:0 0 1px;padding-inline:0}
#contact{background:var(--ink);padding:100px 0}
#contact .mesh-bg,#contact .grain{display:none}
#contact h2{font-size:clamp(46px,6.3vw,88px);letter-spacing:-.06em;max-width:12ch}
.contact-links a{border-radius:0}
.contact-tags{display:none}
.scroll-progress{height:2px;background:var(--coral-deep)}
@media(min-width:921px){.creative-hero-grid{min-height:490px}}
@media(max-width:920px){.creative-hero-grid{grid-template-columns:1.1fr .9fr;gap:25px;padding:44px 0}.creative-hero h1{font-size:clamp(43px,6vw,70px)}.hero-art-note{font-size:.9rem;left:-8px}.hero-art-footer{flex-wrap:wrap;gap:4px}.work-list{gap:48px 24px}.work-item:nth-child(2),.work-item:nth-child(4){margin-top:100px}.nav-links{gap:0}.nav-links .btn{margin-top:auto}}
@media(max-width:600px){.hero-kicker{font-size:.57rem}.creative-hero-grid{grid-template-columns:1fr;padding:40px 0 34px;gap:28px}.creative-hero h1{font-size:clamp(43px,10.7vw,64px)}.hero-intro{font-size:.62rem;margin-bottom:18px}.hero-bottom{margin-top:22px}.hero-art{max-width:340px;width:82%;justify-self:end;margin-right:12px}.hero-art-frame{aspect-ratio:1.2}.hero-art-note{left:-34px;top:6px}.hero-art-footer{font-size:.58rem}.hero-signature{font-size:10.4vw;padding:14px 0}.hero-signature span{margin-left:6px}.hero-index{font-size:.54rem;gap:12px}h2{font-size:clamp(36px,9.6vw,53px)}.section-head{gap:22px}.work-list{grid-template-columns:1fr;gap:42px}.work-item,.work-item:nth-child(n){grid-column:auto;margin-top:0}.work-thumb,.work-item:nth-child(n) .work-thumb{aspect-ratio:1.4}.work-copy{padding-top:16px}.work-copy h3{font-size:27px}.illustration-card:nth-child(3n+2){margin-top:0}#contact{padding:66px 0}.creative-arrow{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.hero-art-frame{transform:none}.creative-arrow{transition:none}}

/* The hero uses an editorial crop; the work gallery preserves full frames. */
.hero-art video{object-fit:cover}


/* Softer surfaces and a single, local Phosphor Duotone icon family. */
:root{--line:#d6d6cb;--line-strong:#747b6c;--r-xl:28px;--r-lg:22px;--r-md:16px;--shadow-hard:0 8px 22px rgba(37,41,35,.09)}
.icon{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.2em;fill:currentColor;flex-shrink:0}
.nav-mark::after{content:none}
.site-nav{border-bottom-color:var(--line)}
.section-head,.hero-signature,.process-step{border-top-color:var(--line)}
.hero-signature{border-radius:0}
.hero-index{border-top-color:var(--line)}
.btn,.nav-links .btn{border-radius:18px;border-color:var(--line-strong)}
.btn-primary{border-color:var(--ink)}
.btn:hover{box-shadow:0 5px 16px rgba(37,41,35,.09)}
.creative-arrow{border-color:var(--line);background:var(--paper-2);border-radius:42% 58% 54% 46% / 48% 46% 54% 52%}
.creative-arrow .icon{width:30px;height:30px;vertical-align:0}
.hero-art-frame{border-radius:48% 48% 26px 26px}
.hero-art-note{border-radius:12px 18px 16px 8px}
.hero-art-footer button{border-bottom-color:var(--line-strong)}
.work-thumb{border-radius:22px}
#three-d .three-d-media{border-radius:24px}
#three-d .three-d-card:nth-child(2) .three-d-media{border-radius:48% 48% 24px 24px}
.illustration-image{border-radius:22px}
.illustration-open,.work-thumb::after{border-radius:12px;border-color:var(--line)}
.work-thumb::after{content:'View case study';padding-right:34px;background:var(--paper) url('icons/arrow-up-right.svg') no-repeat right 10px center;background-size:16px}
:lang(es) .work-thumb::after{content:'Ver caso de estudio'}
.about-photo{border-radius:48% 48% 22px 22px}
.currently-banner,.stats-strip{border-radius:24px}
.resume-modal,.resume-modal-inner{border-radius:26px}
.resume-option{border-radius:20px;border-color:var(--line)}
.ro-icon{border:0;border-radius:16px;background:var(--lavender-soft);color:var(--lavender)}
.ro-icon .icon{width:28px;height:28px}
.ro-cta{border-color:var(--line)}
.chip .icon,.exp-filter-btn .icon{margin-right:4px;color:var(--green-deep)}
.cb-icon .icon{width:40px;height:40px;color:var(--lavender)}
.hero-signature .icon{vertical-align:0}
.exp-filter-btn,.skill-row,.exp-row{border-color:var(--line)}
.exp-filter-btn{border-radius:16px}
.back-to-top,.resume-modal-close,.nav-toggle{border:1px solid var(--line);box-shadow:none;background:var(--paper)}
.back-to-top .icon{width:22px;height:22px}
.nav-toggle>span{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;transform:none!important;background:none;transition:none}
.nav-toggle>span.menu-close-icon{display:none}
.nav-toggle[aria-expanded='true']>span.menu-open-icon{display:none}
.nav-toggle[aria-expanded='true']>span.menu-close-icon{display:grid}
.nav-toggle .icon{width:24px;height:24px}
@media(hover:hover){.illustration-image:hover{box-shadow:0 10px 28px rgba(37,41,35,.1)}}

.nav-toggle>span{opacity:1!important}


/* Stronger text contrast, consistent reading columns and caption baselines. */
:root{--ink:#1f2921;--ink-soft:#374338;--green-deep:#324d24;--coral-deep:#812b36;--lavender:#574062;--line-strong:#687461}
body{color:var(--ink)}
.muted,.count-label,.exp-dates,.exp-tag,.case-caption{color:var(--ink-soft)}
.lede,.hero-kicker,.hero-intro,.hero-index,.hero-art-footer,.work-meta,.work-copy p,.illustration-copy p,#three-d .three-d-caption p,#three-d .three-d-index,#three-d .three-d-labels .mono{color:var(--ink-soft)}
.creative-hero .lede{font-weight:450}
.hero-kicker,.hero-index{font-size:.72rem}
.hero-intro,.hero-art-footer,.work-meta,.three-d-labels{font-size:.72rem}
.nav-links{font-size:.86rem}
.count-label{font-size:.86rem;line-height:1.5}
.exp-dates,.exp-tag{font-size:.79rem}
.section-head{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.section-head>div{min-width:0;align-self:start;padding:0}
.section-head .lede{max-width:43ch}
.section-head>p{align-self:start}
.section-head h2{margin:0;text-wrap:balance}
.section-head .eyebrow{margin-bottom:14px;line-height:1.4}
.section-head .muted{margin-top:10px}
.work-copy,.three-d-caption,.illustration-copy{text-align:left}
.work-copy p,.three-d-caption p,.illustration-copy p,.about-copy p,.case-content p{text-wrap:pretty;line-height:1.65}
.work-copy h3,.three-d-caption h3,.illustration-copy h3{text-wrap:balance}
#three-d .three-d-caption,.illustration-copy{padding-top:20px}
#three-d .three-d-caption .work-meta,.illustration-copy .work-meta{min-height:1.5em;align-items:flex-start;line-height:1.5;margin-bottom:12px}
#three-d .three-d-caption h3,.illustration-copy h3{min-height:2.4em}
.stats-strip{align-items:start;gap:24px}
.count-item{text-align:left;min-width:0}
.count-item .count,.count-item .count-suffix{font-size:clamp(2rem,4vw,2.6rem);font-family:var(--display);font-weight:700;line-height:1.1;vertical-align:baseline}
.count-label{margin-top:10px;max-width:20ch}
.exp-row{align-items:start}
.exp-tag{padding-top:1px}
.contact-links .mono{opacity:1}
#contact .lede,#contact .muted,#contact .eyebrow{color:#efeee4}
footer{color:#e1e5d9}
@media(max-width:920px){.section-head{grid-template-columns:minmax(0,1fr)}.section-head .lede{max-width:58ch}.exp-tag{text-align:left}}
@media(max-width:600px){.hero-kicker{font-size:.65rem;align-items:start;flex-wrap:wrap;row-gap:8px}.hero-index{font-size:.65rem}.hero-art-footer{font-size:.68rem}#three-d .three-d-caption h3,.illustration-copy h3{min-height:0}.contact-links a{align-items:start;flex-wrap:wrap}.contact-links .mono{text-align:left;overflow-wrap:anywhere}}
/* Keep content readable throughout entrance and profile animations. */
.reveal,.reveal-stagger>*{opacity:1;transition-property:transform}
.hero-copy>*{opacity:1;animation-name:readable-shift}
.exp-desc[data-swapping]{animation-name:readable-shift}
@keyframes readable-shift{from{transform:translateY(12px)}to{transform:translateY(0)}}
