/* ==========================================================================
   MIC Energy Consulting - micenergyconsulting.com
   Bespoke static site. No frameworks, no trackers, no cookies.

   Layout follows the client's mock-ups: each page is one full-bleed
   photograph, the text sitting over the light part of it on the left, and
   the tagline and footer centred over the foot of the same image.
   ========================================================================== */

:root {
  /* OJO ANTES DE "CORREGIR" ESTE VALOR. El cliente fijo por escrito el
     20-ago una paleta con navy #153A5B, y ese era el color del sitio. El
     23-ago pidio lo contrario: que el azul coincidiera con SU maqueta. Y su
     maqueta no lleva su paleta — el azul de los PNG que genero con su
     chatbot mide ~#052C69. Se va a la maqueta, que es lo que pidio, y de
     paso el texto gana sobre las fotografias: 10,8:1 pasa a 12,4:1. */
  --navy: #0a2b66;
  --navy-dark: #061c45;
  --navy-tint: #e7ecf5;
  --ink: #2b3138;
  --ink-soft: #4a525b;
  --muted: #8a9099;
  --paper: #ffffff;
  --paper-soft: #f6f5f2;
  --rule: #d9d6d1;

  --maxw: 1600px;
  --gutter: clamp(1.5rem, 4vw, 5.5rem);
  --header-h: 5.5rem;

  --col: 56%;          /* width of the text column, overridden per page */
  --scrim-end: 72%;    /* where the light veil over the photo fades out */
  /* 27-ago: la escena sube para que los tomos no queden tan al fondo. Con
     background-size:cover sobran 228 px de alto sobre una ventana de 800: al
     pasar de 50% a 62% la fotografia se desplaza y los tomos suben unos 27 px.
     REVERSIBLE: devolver --photo-y a 50% y --books-y a 81% deja la pagina
     exactamente como estaba; son los dos unicos numeros que hay que tocar. */
  --photo-y: 62%;      /* que franja vertical de la foto se ve */
  --books-y: 77.5%;    /* donde cae el hueco del velo sobre los tomos */
  --scrim-floor: 0;    /* velo que queda cuando el degradado ya se apago */

  --f-head: "Cormorant", "Times New Roman", Times, serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper-soft);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

address { font-style: normal; }   /* browsers italicise <address> by default */

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-dark); }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* ----------------------------------------------------------------- stage -- */

.stage {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--paper-soft);
  background-image: var(--photo, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* The light veil that reproduces the pale left-hand side of the mock-ups and
   keeps the text readable whatever the photograph does behind it. */
.stage::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(
    to right,
    rgba(246, 245, 242, calc(var(--scrim-floor) + (1 - var(--scrim-floor)) * 0.86)) 0%,
    rgba(246, 245, 242, calc(var(--scrim-floor) + (1 - var(--scrim-floor)) * 0.80)) calc(var(--scrim-end) * 0.49),
    rgba(246, 245, 242, calc(var(--scrim-floor) + (1 - var(--scrim-floor)) * 0.42)) calc(var(--scrim-end) * 0.74),
    rgba(246, 245, 242, var(--scrim-floor))                                         var(--scrim-end)
  );
}

.stage > * { position: relative; z-index: 1; }

/* Segundo velo, al pie: sin él la franja STRATEGY - GOVERNANCE - BOARD
   ADVISORY y el copyright caen sobre la mesa y los sillones oscuros de la
   fotografia y dejan de leerse. */
.stage::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    /* arriba, para que el menu no se pierda sobre el cristal */
    linear-gradient(to bottom,
      rgba(246, 245, 242, 0.72) 0%,
      rgba(246, 245, 242, 0.35) 7%,
      rgba(246, 245, 242, 0) 13%),
    /* abajo, para el pie */
    linear-gradient(to top,
      rgba(246, 245, 242, 0.95) 0%,
      rgba(246, 245, 242, 0.70) 12%,
      rgba(246, 245, 242, 0) 26%);
}

.stage__body {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter);
}

.col { width: min(100%, var(--col)); }

/* --------------------------------------------------------------- header -- */

.site-header {
  height: var(--header-h);
  flex: none;
  /* Por encima de la banda de foto: si se queda en la capa 1 como el resto de
     hijos del stage, el menu desplegable se pinta DEBAJO de la fotografia. */
  position: relative;
  z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wordmark {
  display: inline-flex; align-items: baseline; gap: 0.85rem;
  color: var(--navy); text-decoration: none; white-space: nowrap;
}
.wordmark__mic {
  font-family: var(--f-head);
  font-size: clamp(1.9rem, 3vw, 2.65rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
}
.wordmark__rule {
  width: 1px; align-self: stretch; margin: 0.1rem 0.15rem 0.25rem;
  background: var(--navy); opacity: 0.55;
}
.wordmark__name {
  font-family: var(--f-head);
  font-size: clamp(0.95rem, 1.35vw, 1.3rem);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1;
}

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 3.5rem); }
.nav a {
  font-size: 0.8125rem;              /* 13px */
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: rgba(10, 43, 102, 0.35); }
.nav a[aria-current="page"] { border-bottom-color: var(--navy); }

.nav-toggle {
  display: none;
  background: none; border: 0; padding: 0.5rem; cursor: pointer;
  color: var(--navy);
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: var(--f-body);
}

/* ------------------------------------------------------- per-page photos -- */

/* Home and About: the client had no separate file for this scene - it is the
   template his tool generated, printed straight onto the mock-up. We lifted
   the band of it that carries no text (the desk, the pen and the volumes) and
   extended the wall upwards, so the photograph is his own, not a substitute.

   Every photograph ships as WebP with a JPEG behind it, in two widths: the
   large one for the desktop background, the small one for the band that
   replaces it on a telephone. --photo is the plain fallback, --photo-set the
   WebP-first version; the @supports block further down chooses. */
/* Home y About: la sala de juntas con los tomos sobre la mesa. Antes iba el
   primer plano de los tomos, sobre un lienzo estirado hasta 2300 px: el
   cliente pidio los tomos y el boligrafo mas pequenos y el fondo (la sala y
   Zurich) menos borroso, y los dos se arreglan con esta escena, que es suya y
   se sirve a su tamano nativo, sin estirar ni ampliar. */
.page-home {
  --col: 60%;  --scrim-end: 70%;
  --photo: url("../img/home-boardroom-1536.jpg");
  --photo-set: image-set(url("../img/home-boardroom-1536.webp") type("image/webp"),
                         url("../img/home-boardroom-1536.jpg") type("image/jpeg"));
  --photo-sm: url("../img/home-boardroom-768.jpg");
  --photo-sm-set: image-set(url("../img/home-boardroom-768.webp") type("image/webp"),
                            url("../img/home-boardroom-768.jpg") type("image/jpeg"));
}
.page-about {
  /* En su maqueta el contenido ocupa el 80% del ancho y deja el borde derecho
     para el fondo. La columna de texto es estrecha (un tercio) y el bloque de
     la derecha, el doble. */
  /* El unico suelo de las cuatro: su texto cruza toda la fotografia.
     Sin el, la columna derecha cae sobre el ventanal y no se lee. */
  --col: 82%; --scrim-end: 94%; --scrim-floor: 0.65;
  --photo: url("../img/home-boardroom-1536.jpg");
  --photo-set: image-set(url("../img/home-boardroom-1536.webp") type("image/webp"),
                         url("../img/home-boardroom-1536.jpg") type("image/jpeg"));
  --photo-sm: url("../img/home-boardroom-768.jpg");
  --photo-sm-set: image-set(url("../img/home-boardroom-768.webp") type("image/webp"),
                            url("../img/home-boardroom-768.jpg") type("image/jpeg"));
}
/* Home: la escena se ancla abajo a la derecha, como en la maqueta, en lugar
   de rellenar la pantalla y agrandar los libros. */
.page-home .stage { background-position: center var(--photo-y); }

/* About: en su maqueta el fondo es casi blanco y los libros solo se intuyen
   al borde derecho. El velo aqui es casi opaco. */
.page-about .stage { background-position: right var(--photo-y); }
/* 27-ago: LA MISMA ESCENA EN LAS CUATRO PAGINAS. No es una idea nuestra, es lo
   que pidio por escrito el 20-ago: «This template exists on all pages even
   though in some of them is dimmed. Please reproduce it.» Lo unico que cambia
   de una pagina a otra es cuanto se ve — el menos en About, que es la que mas
   texto lleva, y el mas en Contact, que tiene tres lineas. Aqui, con tres
   columnas de texto, hace falta suelo de velo o el ultimo bloque cae sobre el
   ventanal. */
.page-how-we-help {
  --col: 67%;  --scrim-end: 85%; --scrim-floor: 0.06;
  --photo: url("../img/home-boardroom-1536.jpg");
  --photo-set: image-set(url("../img/home-boardroom-1536.webp") type("image/webp"),
                         url("../img/home-boardroom-1536.jpg") type("image/jpeg"));
  --photo-sm: url("../img/home-boardroom-768.jpg");
  --photo-sm-set: image-set(url("../img/home-boardroom-768.webp") type("image/webp"),
                            url("../img/home-boardroom-768.jpg") type("image/jpeg"));
}

/* En Contact el velo pasaba de 0,90 a 0 en ocho puntos de ancho y el canto se
   veia. Se lleva mas a la derecha y se reparte en cuatro tramos, para que el
   ojo no encuentre donde empieza. */
/* Los tomos, a la altura de los parrafos, como en su diseno. */
.page-how-we-help .stage { background-position: center var(--photo-y); }

/* 27-ago: los tomos de la mesa quedaban lavados por los dos velos y no se leian
   sus lomos. Se abre un hueco SOLO ahi, con una mascara: donde la mascara es
   transparente, el velo no se pinta y la fotografia sale limpia. El borde va
   difuminado del 40% al 100% para que no se vea el canto del ovalo, y el hueco
   cae por debajo de la ultima linea de texto, asi que no le quita legibilidad
   a ninguna columna. Va en las tres paginas donde los tomos estan a la vista
   —Home, How we help y Contact—, que comparten escena y encuadre, y por eso el
   hueco cae en el mismo sitio en las tres. En About no: alli la escena va
   anclada a la derecha y los tomos quedan en otro punto. */
@media (min-width: 75.0625rem) {
  .page-home .stage::before,
  .page-home .stage::after,
  .page-how-we-help .stage::before,
  .page-how-we-help .stage::after,
  .page-contact .stage::before,
  .page-contact .stage::after {
    -webkit-mask-image: radial-gradient(ellipse 16% 15% at 59% var(--books-y),
                        transparent 0%, transparent 40%, #000 100%);
            mask-image: radial-gradient(ellipse 16% 15% at 59% var(--books-y),
                        transparent 0%, transparent 40%, #000 100%);
  }
}
.page-contact .stage { background-position: center var(--photo-y); }

/* Tres columnas de texto llegan mucho mas a la derecha que el resto de las
   paginas: el velo tiene que aguantar opaco hasta pasado el ultimo bloque. */
/* Contact: la pagina donde la escena se ve entera, como pidio. Solo tres
   lineas de texto, arrimadas a la izquierda sobre la pared y el aparador, y el
   velo se apaga al 40% para que la sala y Zurich queden limpios. */
.page-contact {
  --col: 40%;  --scrim-end: 40%;
  --photo: url("../img/home-boardroom-1536.jpg");
  --photo-set: image-set(url("../img/home-boardroom-1536.webp") type("image/webp"),
                         url("../img/home-boardroom-1536.jpg") type("image/jpeg"));
  --photo-sm: url("../img/home-boardroom-768.jpg");
  --photo-sm-set: image-set(url("../img/home-boardroom-768.webp") type("image/webp"),
                            url("../img/home-boardroom-768.jpg") type("image/jpeg"));
}

/* Donde el navegador entienda image-set, se sirve WebP; donde no, el JPEG de
   la declaracion anterior. Va en @supports y no en una segunda declaracion
   porque una variable que no resuelve deja la propiedad en su valor inicial,
   no en la declaracion de antes. */
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  .stage { background-image: var(--photo-set, var(--photo, none)); }
  .photo-band { background-image: var(--photo-sm-set, var(--photo-set, var(--photo, none))); }
}

/* ------------------------------------------------------------ typography -- */

h1, h2, h3 {
  font-family: var(--f-head);
  color: var(--navy);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 1rem;
}

.h-hero { font-size: clamp(2rem, 3.4vw, 3.1rem); max-width: 39ch; }
.h-page { font-size: clamp(2.6rem, 5.2vw, 4.25rem); margin-bottom: 0.5rem; }
h2 { font-size: clamp(1.5rem, 2.3vw, 2.05rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); margin-bottom: 1.25rem; }

.rule {
  width: 4.5rem; height: 2px; border: 0; margin: 1.75rem 0 2rem;
  background: var(--navy);
}

p { margin: 0 0 1.35rem; max-width: 62ch; }
.prose p:last-child { margin-bottom: 0; }
.stage__body .prose p { font-size: 1.1875rem; }   /* 19px, as in the mock-ups */

/* El cliente vio el 27-ago que About llevaba el cuerpo mas grande que el resto
   del sitio (19 px contra los 17 de How we help y Contact) y pidio alinearlo.
   Home conserva sus 19 px en el parrafo de entrada: esa pagina ya la aprobo. */
.page-about .stage__body .prose p { font-size: 1.0625rem; }   /* 17px */

.list { list-style: none; margin: 0; padding: 0; }
.list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.9rem;
  max-width: 58ch;
}
.list li::before {
  content: "";
  position: absolute; left: 0.25rem; top: 0.82em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-soft);
}

/* -------------------------------------------------------------- home page -- */

.why { margin-top: clamp(2rem, 4vw, 3.25rem); }

/* ------------------------------------------------------------- about page -- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 33fr) minmax(0, 60fr);
  gap: clamp(2rem, 5.4vw, 5.2rem);
  align-items: start;
  width: 100%;
}

/* El retrato va dentro de una caja, como en la maqueta: un gris muy claro,
   apenas un punto por debajo del fondo de la pagina (muestreado de su PNG:
   #ecebec contra el #f4f3f3 de alrededor). El hueco es apaisado (relacion
   1,83) y la figura queda centrada y apoyada abajo, con aire a los lados. */
/* El cliente veia About mas alta que las demas: con el mismo zoom no llegaba
   a leer el ultimo parrafo. Se probo estrechando la caja a 23rem y quedaba
   peor: 368 px de foto colgando de una columna de 651, mas estrecha que el
   parrafo de al lado. La caja vuelve a ocupar la columna entera, como en su
   maqueta, y la altura se recorta apaisandola. */
.portrait {
  margin: 0 0 1.35rem;
  background: #ecebec;
}
.portrait img {
  width: 100%;
  aspect-ratio: 2.5;
  object-fit: contain;
  object-position: center bottom;
}

.quote {
  position: relative;
  margin: 1.6rem 0 1rem;
  padding: 1.25rem 3.25rem;
  background: rgba(231, 236, 245, 0.85);
  color: var(--navy);
  font-family: var(--f-head);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
}
.quote p { margin: 0; max-width: none; }
.quote::before, .quote::after {
  position: absolute;
  font-family: var(--f-head);
  font-style: normal;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--navy);
  opacity: 0.75;
}
.quote::before { content: "\201C"; left: 1rem; top: 1.5rem; }
.quote::after  { content: "\201D"; right: 1rem; bottom: 0.6rem; }

.byline { margin-top: 1.25rem; line-height: 1.6; }
.byline strong {
  color: var(--navy); font-weight: 600; display: block;
  font-size: 1.1875rem;
}
.byline span { color: var(--ink); }

/* ------------------------------------------------------- how-we-help page -- */

.services {
  display: grid;
  /* the third column carries longer lines, as in the mock-up */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr);
  gap: clamp(1.5rem, 3vw, 3.25rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.services .list li { max-width: none; }
.services h2 { font-size: clamp(1.25rem, 1.8vw, 1.65rem); }
/* El cliente la veia demasiado clara sobre la fotografia: va en el navy
   oscuro, no en el de los titulares. */
.services__note {
  font-family: var(--f-head);
  font-style: italic;
  /* 27-ago: una talla mas y en negrita. Cae sobre los tejados de la ciudad,
     que es el peor sitio de la pagina para leer, y el cuerpo asi aguanta. */
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--navy-dark);
  font-weight: 700;
  margin-bottom: 1.25rem;
}

/* ----------------------------------------------------------- contact page -- */

.contact-details { font-size: 1.0625rem; line-height: 2.1; }
.contact-details .company {
  color: var(--navy); font-weight: 600; font-size: 1.1875rem;
}
.contact-details .email { margin-top: 1.25rem; }
.contact-details .email .label {
  color: var(--ink); margin-right: 0.85rem;
  white-space: nowrap;   /* a 360 px se partia por el guion: "e-" / "mail" */
}
.contact-details a { color: var(--ink); text-decoration: none; }
.contact-details a:hover { color: var(--navy); text-decoration: underline; }

/* ------------------------------------------------------------ legal pages -- */

.page-doc { background: var(--paper-soft); }
.page-doc .stage { min-height: 0; }
.page-doc .stage::before,
.page-doc .stage::after { display: none; }

.doc-body {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter);
}

.doc {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) 0 clamp(3rem, 6vw, 5rem);
}
.doc h2 { margin-top: 2.5rem; font-size: clamp(1.3rem, 2vw, 1.7rem); }
.doc p, .doc li { max-width: none; }
.doc address { margin-bottom: 1.35rem; }
.doc .updated { color: var(--muted); font-size: 0.9375rem; }

/* ---------------------------------------------------------------- footer -- */

.site-footer {
  flex: none;
  background: transparent;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(1.25rem, 2.5vw, 2rem);
}

.tagline {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: clamp(1rem, 3vw, 2.75rem);
  font-family: var(--f-head);
  font-size: clamp(0.95rem, 1.5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 1rem;
  padding: 0; list-style: none;
  text-align: center;
}
.tagline li { position: relative; }
.tagline li + li::before {
  content: "\2022";
  position: absolute; left: clamp(-1.6rem, -1.5vw, -0.9rem);
  letter-spacing: 0; opacity: 0.7;
}

/* El gris claro de la maqueta daba 2,95:1 sobre el fondo, por debajo del 4,5
   que exige la norma, y encima cae sobre la fotografia: el copyright y los dos
   enlaces legales no se leian. Ahora 7,3:1, y los enlaces en azul, que ademas
   se ven como enlaces: son las dos paginas que la ley obliga a poder encontrar. */
.colophon {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center;
  gap: 0.4rem 1rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
  text-align: center;
  margin: 0; max-width: none;
}
.colophon a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.colophon a:hover { color: var(--navy-dark); }
.colophon .pipe { color: var(--muted); }

/* --------------------------------------------------------------- responsive */

@media (max-width: 75rem) {
  :root { --header-h: 4.5rem; }

  /* The photograph moves out from behind the text and becomes a band above
     it, so nothing is ever read over a busy picture on a small screen. */
  .stage {
    background-image: none;
    min-height: 0;
  }
  .stage::before, .stage::after { display: none; }

  .stage__body { display: block; padding-top: clamp(1.5rem, 5vw, 2.5rem); }
  .col { width: 100%; }

  .photo-band {
    display: block;
    height: 40vh; min-height: 15rem;
    background-color: var(--navy-tint);
    background-image: var(--photo-sm, var(--photo, none));
    background-size: cover;
    background-position: center;
  }
  /* En la escena del escritorio lo que interesa esta a la derecha: centrada,
     la banda recorta los tomos por la mitad. */
  .page-home .photo-band { background-position: center; }

  .about-grid { grid-template-columns: 1fr; }
  .portrait { max-width: 26rem; }
  .portrait img { aspect-ratio: 1.83; }   /* en una columna estrecha, apaisada se veria diminuta */
  .services { grid-template-columns: 1fr; gap: 2rem; }

  .site-header { background: var(--paper-soft); }
  .site-footer { padding-top: 1.5rem; border-top: 1px solid var(--rule); }

  .nav-toggle { display: inline-block; }
  .nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper-soft);
    border-top: 1px solid var(--rule);
    padding: 0.5rem var(--gutter) 1.25rem;
    z-index: 30;
  }
  .nav[hidden] { display: none; }
  .nav a { width: 100%; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
  .nav a[aria-current="page"] { border-bottom-color: var(--navy); }
}

/* Above the breakpoint the photograph is the page background, so the band is
   not needed. */
@media (min-width: 75.0625rem) {
  .photo-band { display: none; }
}

@media (max-width: 30rem) {
  body { font-size: 1rem; }
  .tagline { letter-spacing: 0.16em; gap: 0.75rem 1.75rem; }

  /* The full wordmark plus the menu button will not fit across a phone at
     full size: without this the header pushes the page sideways. */
  .wordmark { gap: 0.5rem; }
  .wordmark__mic { font-size: 1.55rem; }
  /* 0,72rem daba 11,52 px y el suelo de la casa son 12. Se sube a 0,75rem
     exactos y se recorta el espaciado, que es de donde sale el ancho que
     hacia falta para que el logotipo y el boton de menu quepan a 360 px. */
  .wordmark__name { font-size: 0.75rem; letter-spacing: 0.07em; }
  .nav-toggle { padding: 0.5rem 0 0.5rem 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .site-header, .photo-band, .nav-toggle { display: none; }
  .stage { background: none; min-height: 0; }
  .stage::before, .stage::after { display: none; }
  body { color: #000; font-size: 11pt; }
}

/* ------------------------------------------------- About: que quepa entera --
   Peticion del cliente del 25-ago: "The About page still does not fit into the
   screen". Medido en SU pantalla (1920 x 965 de ventana): sobraban 211 px, y lo
   que caia por debajo del borde no era su nombre --que entra-- sino EL PIE
   ENTERO: el enlace a su LinkedIn, el Legal Notice y el Website Privacy
   Statement. Justo los tres enlaces que lleva un mes puliendo.

   Se probo su propuesta (foto -5 % y columna derecha +5 %) y solo ganaba 10 px:
   ensanchar la columna ensancha la foto, y al mantener proporcion la foto CRECE
   de alto, comiendose lo que se acababa de ganar. Habia que quitar 211 de una
   columna de 881, casi una cuarta parte, asi que se reparte entre las tres
   piezas grandes en vez de perseguir retoques del 5 %.

   No se toca ni una palabra de su texto, ni el cuerpo de letra, ni el ancho de
   las columnas, ni la maqueta. Solo alto.

   Va dentro del tramo de escritorio a proposito: por debajo de 1200 px manda
   otra maqueta (la foto pasa a ser banda y todo se apila) y alli About ya se
   lee haciendo scroll, como toca en un movil. Esto no la toca. */
@media (min-width: 75.0625rem) {

  /* 1. El retrato, mas apaisado: 285 px -> 187. Es la pieza mas grande de la
        pagina y de aqui sale la mitad de lo que sobraba. La caja sigue ocupando
        la columna entera, como en su maqueta; lo que se recorta es el alto.
        Su cara sigue centrada y apoyada abajo (object-fit: contain). */
  .page-about .portrait img { aspect-ratio: 3.8; }
  .page-about .portrait     { margin-bottom: 0.7rem; }

  /* 2. La cita en azul: menos aire dentro y fuera. El 27-ago el cliente pidio
        subirle el cuerpo con lo que se gana al bajar el texto a 17 px, asi que
        pasa de 1,18rem a 1,35 — mas grande incluso que antes de compactar la
        pagina, y sigue en dos lineas. */
  .page-about .quote {
    margin: 1rem 0 0.7rem;
    padding: 0.85rem 3rem;
    font-size: 1.35rem;
  }

  /* 3. Los aires: entre parrafos de la columna derecha, en la firma y entre el
        contenido y la cabecera/el pie. Nada de esto se ve; solo se nota que
        ahora cabe. */
  .page-about .about-grid .prose p { margin-bottom: 0.85rem; }
  .page-about .byline              { margin-top: 0.8rem; line-height: 1.45; }
  .page-about .stage__body         { padding-top: 1.1rem; padding-bottom: 1.1rem; }
}