/* ulrick.tech · layout: container, header/nav, sections, footer. Mobile first. */
.wrap{width:100%;max-width:calc(var(--max-w) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
@media (min-width:1024px){:root{--gutter:48px}}

/* Header */
.site-header{border-bottom:1px solid var(--hairline);background:var(--bone);position:relative;z-index:10}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:88px;gap:24px}
/* Lockup sized by WIDTH (brand min: 140px wide lockup). un-lockup-header.svg is cropped to the artwork plus
   clear space = one bar height (32 of 959.4 viewBox units) on every side; the negative margin aligns the art to the gutter. */
.brand{display:inline-flex;align-items:center;flex:none;--lockup-w:180px;margin-left:calc(var(--lockup-w) * -32 / 959.4)}
.brand img{width:var(--lockup-w);height:auto}  /* 180px box = 168px of artwork */
.nav-toggle{display:none}
.site-nav ul{display:flex;align-items:center;gap:8px 36px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.site-nav a{display:inline-block;padding:8px 0;font-family:var(--font-mono);font-weight:600;font-size:.8125rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--tezontle)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--tezontle)}
.site-nav .btn{background:var(--ink);color:var(--bone);padding:12px 18px;border:0}
.site-nav .btn:hover{background:var(--tezontle);color:var(--bone)}

/* Mobile nav (< 720px), per mockups/home-mobile: 64px bar, 26px lockup, 20px gutter, 3-bar icon.
   Collapses only when JS is running; without JS the list simply stacks below the logo. */
@media (max-width:719.98px){:root{--gutter:20px}}
/* W10 Talks (SlideMaster, PM-approved): the menu collapses below 1024 (was 720); the 20px gutter stays at 720. */
@media (max-width:1023.98px){
  .site-header .wrap{flex-wrap:wrap;gap:0 16px;min-height:64px}
  .brand{--lockup-w:152px}  /* 152px box = 142px of artwork, still >= 140 */
  .js .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;
    background:transparent;border:0;padding:0;cursor:pointer}
  .nav-toggle__icon{position:relative;display:block;width:28px;height:2px;background:var(--ink);transition:background .15s}
  .nav-toggle__icon::before,.nav-toggle__icon::after{content:"";position:absolute;left:0;width:28px;height:2px;background:var(--ink);transition:transform .2s}
  .nav-toggle__icon::before{top:-8px}
  .nav-toggle__icon::after{top:8px}
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon{background:transparent}
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon::before{transform:translateY(8px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon::after{transform:translateY(-8px) rotate(-45deg)}
  .site-nav{flex-basis:100%;padding-bottom:20px}
  .js .site-nav{display:none}
  .js .site-nav.is-open{display:block}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .site-nav li{border-top:1px solid var(--hairline)}
  .site-nav li:last-child{border-top:1px solid var(--ink);padding-top:16px}
  .site-nav a{display:block;padding:16px 0;font-size:.875rem}
  .site-nav a[aria-current="page"]{border-bottom-color:transparent;color:var(--tezontle)}
  .site-nav .btn{text-align:center;padding:16px 18px}
}


/* Sections */
.section{padding-block:clamp(56px,8vw,96px);border-top:1px solid var(--hairline)}
.section:first-child{border-top:0}
.section--ink{background:var(--ink);color:var(--bone);position:relative;border-top:0}
.section--ink::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--edge-stripe);background:var(--tezontle)}
.section--ink .mono{color:#9aa0a3}
.section--ink .accent{color:var(--tezontle-on-ink)}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 24px;margin-bottom:40px}

/* W1 placeholder block */
.placeholder h1{margin-top:22px}
.placeholder .lede{margin-top:28px}
.placeholder-ledger{margin-top:48px;max-width:40rem}
.ledger-row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--hairline)}
.ledger-row span:last-child{font-family:var(--font-mono);font-weight:600;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);text-align:right}
.ledger-row--total{border-top:1px solid var(--ink);border-bottom:3px double var(--ink)}
.ledger-row--total span:last-child{color:var(--tezontle)}

/* Footer */
.site-footer{border-top:3px double var(--ink);padding-block:32px}
.site-footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.site-footer .mark{height:40px;width:40px}
.site-footer ul{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0;padding:0}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--tezontle)}
@media (max-width:719.98px){.site-footer .wrap{flex-direction:column;align-items:flex-start}}
@media (max-width:719.98px){.placeholder .mono{font-size:.6875rem}}  /* mobile mockup: 11px labels */

/* W14: EN | ES switch on every page (from SlideMaster talks.css; now live, links to the mirrored page) */
/* Header language switch (EN | ES). Visual only until /es/ exists. Mobile: sits in the 64px bar left of the menu icon.
   Desktop: after the nav, separated by a hairline. */
.lang-switch{display:flex;align-items:center;gap:6px;margin-left:auto;font-family:var(--font-mono);font-weight:600;
  font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.lang-switch a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--slate);text-decoration:none;
  border-bottom:2px solid transparent}
.lang-switch a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--tezontle)}
.lang-switch a:hover{color:var(--tezontle)}
.lang-switch__sep{color:var(--hairline)}
.site-header .brand{order:1}.site-header .lang-switch{order:2}.site-header .nav-toggle{order:3}.site-header .site-nav{order:4}
.site-nav a{white-space:nowrap}
@media (min-width:1024px){
  .site-header .lang-switch{order:5;margin-left:0;padding-left:20px;border-left:1px solid var(--hairline);min-height:44px}
  .site-header .site-nav{margin-left:auto}
}
/* 1024-1199: 6 items + EN|ES on one row in both languages (ES labels are longer) */
@media (min-width:1024px) and (max-width:1199.98px){
  .site-nav ul{gap:8px 22px}.site-nav a{letter-spacing:.1em}.site-header .wrap{gap:20px}.site-header .lang-switch{padding-left:16px}
}
/* W14 nav-fit: the ES labels (EMPRESAS · ESCRITOS · CHARLAS · SOBRE MÍ · CURRÍCULUM · LIBRO · SUSCRÍBETE) need ~70px more */
@media (min-width:1024px) and (max-width:1199.98px){
  html[lang^="es"] .site-nav ul{gap:8px 14px}html[lang^="es"] .site-nav a{letter-spacing:.06em}html[lang^="es"] .site-nav .btn{padding:12px 14px}
}
@media (min-width:1200px) and (max-width:1279.98px){
  html[lang^="es"] .site-nav ul{gap:8px 26px}html[lang^="es"] .site-nav a{letter-spacing:.11em}
}