/* v75: unified geometry, brand and type scale on every page */
:root{--site-gutter:clamp(18px,2.7vw,54px);--site-paper:#ebede8;--site-ink:#17221d;--site-green:#708773}
body{font-family:Roboto,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
.site-header{position:fixed;z-index:90;top:14px;left:14px;right:14px;height:72px;padding:0 max(12px,calc(var(--site-gutter) - 14px));display:flex;align-items:center;background:var(--site-paper);color:var(--site-ink)}
.site-header .logo{font-size:21px;font-weight:900;letter-spacing:-1.35px;line-height:1;white-space:nowrap;color:inherit;text-decoration:none;display:inline-flex;align-items:baseline;gap:0;flex:none;pointer-events:auto}
.site-header .logo span{font-weight:400}
.site-header .io-menu{color:inherit;margin-left:auto}
.site-header .io-menu-item{text-shadow:none}
body.page-home .site-header{position:absolute;background:transparent;color:#fff}
body.page-home .site-header .io-menu-item{text-shadow:0 1px 8px rgba(0,0,0,.3)}
.site-header a.logo:focus-visible{outline:2px solid #708773;outline-offset:5px}
@media(max-width:850px) and (orientation:portrait){.site-header{top:14px;left:14px;right:14px;height:64px;padding:0 8px;align-items:center}.site-header .logo{font-size:19px}}
@media(max-height:540px) and (orientation:landscape){.site-header{height:58px;top:8px;left:8px;right:8px}}

body.page-secondary{background:var(--site-paper);color:var(--site-ink);margin:0;overflow-x:clip}
body.page-secondary *{box-sizing:border-box}
body.page-secondary a:focus-visible{outline:2px solid #51755b;outline-offset:4px}

/* v76: persistent navigation on every page. No background behind the mark or //// */
.site-header,
body.page-home .site-header{
 position:fixed!important;
 top:14px;left:14px;right:14px;
 z-index:500;
 background:transparent!important;
 color:#17221d;
 pointer-events:none;
 transition:color .22s ease;
}
.site-header .logo,.site-header .io-menu{pointer-events:auto}
.site-header .io-menu{color:inherit!important}
body.page-home:not(.site-on-light) .site-header{color:#fff}
body.page-home.site-on-light .site-header{color:#17221d}
body.page-home.site-on-light .site-header .io-menu-item{text-shadow:none}
/* Leave an invisible click-outside region; do not block the page below the header. */
.site-header .io-menu-item:focus-visible{outline:1px solid currentColor;outline-offset:2px}
@media(max-width:850px) and (orientation:portrait){
 .site-header,body.page-home .site-header{top:14px;left:14px;right:14px}
}
@media(max-height:540px) and (orientation:landscape){
 .site-header,body.page-home .site-header{top:8px;left:8px;right:8px}
}
body.page-home .projects-explore a{
 display:inline-flex;align-items:center;gap:10px;padding:7px 2px;
 color:var(--ink);text-decoration:none;font-family:Roboto,Arial,sans-serif;
 font-size:clamp(12px,1vw,15px);font-weight:500;letter-spacing:.01em;
 border-bottom:1px solid currentColor;transition:gap .25s ease,opacity .25s ease;
}
body.page-home .projects-explore a:hover{gap:17px;opacity:.7}
body.page-home .projects-explore a:focus-visible{outline:2px solid currentColor;outline-offset:5px}
body.page-home .projects-explore a span{font-size:18px;line-height:1}
@media(max-width:700px){body.page-home .projects-explore a{font-size:12px}}

/* v77: contrast follows the actual section behind the fixed navigation. */
body.site-on-dark .site-header,
body.page-home.site-on-dark .site-header {color:#fff!important}
body.site-on-light .site-header,
body.page-home.site-on-light .site-header {color:#17221d!important}
body.site-on-dark .site-header .io-menu-item{text-shadow:0 1px 8px rgba(0,0,0,.3)}
body.site-on-light .site-header .io-menu-item{text-shadow:none}

/* v78: el logotipo pertenece al documento, no a la cabecera fija.
   Únicamente las cuatro barras del menú permanecen fijas al hacer scroll. */
.site-logo{
 position:absolute;z-index:501;top:14px;
 left:calc(14px + max(12px, var(--site-gutter) - 14px));
 height:72px;display:inline-flex;align-items:center;
 font-size:21px;font-weight:900;letter-spacing:-1.35px;
 line-height:1;white-space:nowrap;text-decoration:none;
 color:var(--site-ink);pointer-events:auto;
}
.site-logo span{font-weight:400}
body.page-home .site-logo{color:#fff}
@media(max-width:850px) and (orientation:portrait){
 .site-logo{top:14px;left:22px;height:64px;font-size:19px}
}
@media(max-height:540px) and (orientation:landscape){
 .site-logo{top:8px;left:calc(8px + max(12px,var(--site-gutter) - 14px));height:58px}
}

/* Align the mobile brand with the actual 29px slash row. */
@media(max-width:850px) and (orientation:portrait){
 .site-header,body.page-home .site-header{height:64px;min-height:0;padding:0 8px;box-sizing:border-box;align-items:center;}
 .site-header .io-menu{height:29px;align-self:center;}
 .site-header .io-menu-items{height:29px;}
 .site-header .io-menu-toggle,.site-header .io-menu.is-open .io-menu-toggle{top:-8px;height:45px;}
}
/* Project imagery uses the same flat palette and numbering as the gallery. */
body.page-home .project-art{background:var(--project-tone);display:grid;place-items:center;color:#ebede8;}
body.page-home .project-art strong{font-weight:400;line-height:1;letter-spacing:-.065em;}
body.page-home .image.project-art::after{display:none;}
body.page-home .image.project-art strong{font-size:clamp(70px,18vw,260px);color:#ebede8;}

/* Lift mobile navigation by one visible slash height, preserving hit targets. */
@media(max-width:850px) and (orientation:portrait){
 .site-header,body.page-home .site-header,.site-logo{top:-8px;}
}
@media(max-height:540px) and (orientation:landscape) and (pointer:coarse){
 .site-header,body.page-home .site-header,.site-logo{top:-14px;}
 .site-header .io-menu-toggle{top:8px;}
}