/* Layout and type traced from earvin.ca: white background, two columns
   floating below a 100px top margin, 22px/28px black text, grey links with no
   underline. Unlike the original, both columns are top-aligned, and the grey
   is #767676 rather than earvin's #999 — 4.54:1 on white, so it clears WCAG AA
   while still reading as the same quiet grey. */

*{ box-sizing:border-box; margin:0; padding:0; }

/* los headings existen por estructura, no por estilo: heredan tamaño y peso
   del texto que los rodea, y cada clase decide cómo se ven */
h1,h2,h3{ font-size:inherit; font-weight:inherit; line-height:inherit; }

/* fuera de pantalla pero presente para lectores de pantalla y buscadores */
.vh{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

html,body{ background:#fff; }

body{
  /* 'Neue Haas Unica' goes first in case it ever gets licensed via Adobe
     Fonts; what actually renders today is Inter, the closest free stand-in. */
  font-family:'Neue Haas Unica','Inter','Helvetica Neue',Arial,sans-serif;
  color:#333;
  font-size:14px;
  line-height:20px;
  -webkit-font-smoothing:antialiased;
  margin-top:100px;
  /* column, no longer row: .all and .site-footer stack instead of sitting
     side by side. align-items:center does the job justify-content used to
     do when .all was the only child. */
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 24px;
}

.all{
  display:flex;
  width:100%;
  max-width:1106px;
  gap:52px;
}

/* left: bio + projects (wide) */
.left{
  max-width:55%;
  flex:1 1 55%;
  padding-right:16px;
}

/* right: contact (narrow, top-aligned with the bio) */
.right{
  max-width:30%;
  flex:1 1 30%;
}

/* the paragraph is the unit of everything, same as earvin: links live inside
   the flow of the text, separated only by <br> */
.para{
  display:block;
  font-size:22px;
  line-height:28px;
  letter-spacing:-.2px;
  font-weight:400;
  color:#000;
  max-width:100%;
}

/* la columna de contacto/nav lee un escalón más chica que la bio: es
   navegación, no prosa a desarrollar, no necesita el mismo peso */
.right .para{ font-size:18px; line-height:25px; }

/* bajada de un heading (Say hi, Personal notebook): pegada arriba
   (margin-top:8px, ver .para--tight), en cursiva y muda para leerse como
   subtítulo, no como link */
.section-tagline{
  margin-top:8px;
  font-family:'Neue Haas Unica','Inter','Helvetica Neue',Arial,sans-serif;
  font-style:italic;
  font-size:15px;
  line-height:21px;
  letter-spacing:-.1px;
  color:#767676;
}

/* "Last updated" es la línea menos importante de la página: la más chica
   de todas, en cursiva, para que no compita ni con el nav ni con la nota */
.updated-line{
  font-family:'Neue Haas Unica','Inter','Helvetica Neue',Arial,sans-serif;
  font-style:italic;
  font-size:14px;
  line-height:20px;
  letter-spacing:-.1px;
  color:#767676;
}

.para a{
  color:#767676;
  text-decoration:none;
  transition:color .2s;
}
.para a:hover{ color:#000; }

.para em{ font-style:italic; }
/* el 700 viene pedido en el <link> de Inter, así no hay bold sintético */
.para strong{ font-weight:700; }

/* mismo peso que el cuerpo: el espacio de arriba ya la separa de la prosa,
   no hace falta bold para anunciar la sección. Mayúscula para que "Atelier",
   "Blog" y cualquier título de sección que se agregue después se lean como
   rótulos, no como más prosa — a diferencia de los nombres propios de abajo
   (yoescritor, los títulos de los posts), que se quedan en minúscula. */
.para--heading{ margin-top:84px; font-weight:400; text-transform:uppercase; letter-spacing:.04em; }
.para--heading + .para--heading{ margin-top:56px; }
/* "Say hi" es el primer elemento de .right — sin este reset, heredaría el
   margen pensado para separarse de un párrafo anterior y quedaría
   desalineado con el arranque de la bio en .left */
.para--first{ margin-top:0; }
/* espaciador genérico de 28px — el mismo aire que .projects/.bloglist dejan
   bajo su heading. Sirve tanto para el párrafo que sigue a un heading como
   para separar bloques sueltos dentro de la misma columna (ej. "Last
   updated" después de los links de Personal notebook). */
.para--after-heading{ margin-top:28px; }
/* espaciador chico (8px, casi solo el line-height) — para cuando dos líneas
   son parte del mismo bloque visual y no de secciones distintas, como el
   heading/tagline/links de "Personal notebook", que deben leerse pegados
   entre sí en vez de separados como Atelier y Blog lo están. */
.para--tight{ margin-top:8px; }

/* ---- proyectos desplegables ---- */

/* el índice de proyectos */
.projects{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* fila de un proyecto: el nombre + un tag opcional de estado, en la misma
   línea. Cuando no hay tag, project-row es solo el link. */
.project-row{
  display:flex;
  align-items:baseline;
  gap:.7em;
}

/* negro: los proyectos son lo único de la portada que lleva a otra parte,
   así que pesan más que el resto del texto */
.project-name{
  display:inline-block;
  font-size:22px;
  line-height:30px;
  letter-spacing:-.2px;
  color:#000;
  text-decoration:none;
  transition:color .2s;
}
.project-name:hover{ color:#767676; }
.project-name:focus-visible{ outline:1px solid #000; outline-offset:4px; }

/* tag de estado junto al nombre: mudo y chico, no compite con el link */
.project-tag{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#999;
}

/* ---- lista del blog ---- */
.bloglist{
  list-style:none;
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.bloglist li{
  font-size:22px;
  line-height:28px;
  letter-spacing:-.2px;
}
/* el id y la fecha son dato, no prosa: monoespaciados y mudos para no
   competir con el título, que es lo único clickeable de la línea */
.blog-id,
.blog-date{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:15px;
  letter-spacing:0;
  color:#999;
  margin-right:.6em;
}
.bloglist a{ color:#000; text-decoration:none; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
.bloglist a:hover{ color:#767676; border-bottom-color:#767676; }
.bloglist a:focus-visible{ outline:1px solid #000; outline-offset:4px; }

/* ---- página de proyecto ----
   comparte el ancho máximo de la portada para que las dos se alineen */
.project-view{
  width:100%;
  max-width:1106px;
}

.bar{
  display:flex;
  align-items:baseline;
  gap:24px;
  padding-bottom:44px;
}
.bar-home{
  font-size:22px;
  line-height:28px;
  letter-spacing:-.2px;
  text-transform:uppercase;
  color:#767676;
  text-decoration:none;
  transition:color .2s;
}
.bar-home:hover{ color:#000; }
.bar-name{
  font-size:22px;
  line-height:28px;
  letter-spacing:-.2px;
  text-transform:uppercase;
  color:#000;
  margin-left:auto;
}
.bar-close{
  font-size:26px;
  line-height:28px;
  color:#767676;
  text-decoration:none;
  transition:color .2s;
}
.bar-close:hover{ color:#000; }
.bar-home:focus-visible,
.bar-close:focus-visible{ outline:1px solid #000; outline-offset:4px; }

/* el cuerpo del proyecto lee al mismo tamaño que la portada (22px/28px):
   ya no es un panel anidado bajo la bio, es su propia página */
.project-body{ max-width:38em; }

.panel-spec{
  font-size:17px;
  margin-top:0;
  line-height:25px;
  letter-spacing:.02em;
  color:#767676;
  margin-bottom:40px;
}

/* rótulo de sección: el que corta el bloque en partes escaneables */
.panel-label{
  font-size:13px;
  line-height:18px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#767676;
  margin-bottom:16px;
}
.panel-label:not(:first-of-type){ margin-top:52px; }

.panel-text{
  font-size:22px;
  line-height:28px;
  letter-spacing:-.2px;
  color:#000;
}
.panel-text + .panel-text{ margin-top:20px; }
.panel-text a{ color:#767676; text-decoration:none; transition:color .2s; }
.panel-text a:hover{ color:#000; }

/* los posts numerados: la serie tiene orden, y el número lo hace evidente
   sin tener que repetir "hey-frank #N" en cada título */
.panel-list{
  list-style:none;
  counter-reset:post;
  font-size:22px;
  line-height:28px;
  letter-spacing:-.2px;
}
.panel-list li{
  counter-increment:post;
  display:flex;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid #f2f2f2;
}
.panel-list li:first-child{ border-top:1px solid #f2f2f2; }
.panel-list li::before{
  content:counter(post);
  color:#999;
  font-size:15px;
  flex:none;
  width:1ch;
  padding-top:5px;
}
.panel-list a{ color:#666; text-decoration:none; transition:color .2s; }
.panel-list a:hover{ color:#000; }
/* lo que todavía no está publicado no finge ser clickeable */
.panel-list .unpublished{ color:#767676; }
.panel-list .unpublished em{ font-style:normal; font-size:15px; letter-spacing:.08em; text-transform:uppercase; }

/* placeholder del video: un 16:9 vacío, apenas más claro que el papel */
.video{
  aspect-ratio:16/9;
  width:100%;
  background:#fafafa;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#767676;
  font-size:17px;
  letter-spacing:.02em;
}

.panel-close{
  font:inherit;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#767676;
  background:none;
  border:0;
  padding:0;
  margin-top:48px;
  cursor:pointer;
  transition:color .2s;
}
.panel-close:hover{ color:#000; }
.panel-close:focus-visible{ outline:1px solid #000; outline-offset:4px; }

/* ---- footer ---- */
.site-footer{
  width:100%;
  max-width:1106px;
  margin-top:96px;
  padding:32px 0 100px;
  border-top:1px solid #ebebeb;
}
.site-footer p{
  font-family:'Neue Haas Unica','Inter','Helvetica Neue',Arial,sans-serif;
  font-size:13px;
  letter-spacing:.02em;
  color:#999;
}

/* ---- botón de hamburguesa (solo mobile) ----
   en desktop .right ya está siempre visible en su columna, así que el botón
   no existe ahí — display:none hasta que la media query lo prenda */
.menu-toggle{
  display:none;
  position:fixed;
  top:16px;
  right:16px;
  z-index:60;
  width:36px;
  height:36px;
  background:#fff;
  border:0;
  padding:0;
  cursor:pointer;
}
.menu-toggle-bar{
  display:block;
  width:22px;
  height:2px;
  margin:5px auto;
  background:#000;
  transition:transform .2s ease, opacity .2s ease;
}
/* al abrir, las tres barras se convierten en una × */
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.menu-toggle:focus-visible{ outline:1px solid #000; outline-offset:4px; }

@media (max-width:760px){
  body{ margin-top:56px; padding:0 24px; }
  .all{ flex-direction:column; gap:40px; }
  .left, .right{ max-width:100%; flex:none; padding-right:0; margin-top:0; }
  /* el cuerpo del proyecto acompaña a la portada también acá */
  .para,
  .panel-text,
  .panel-list{ font-size:20px; line-height:26px; }

  /* la barra no cabe en una línea: "Home — Projects" y el × arriba,
     el nombre del proyecto en su propia línea debajo */
  .bar{ flex-wrap:wrap; gap:12px; padding-bottom:32px; }
  .bar-home{ flex:1 1 auto; font-size:18px; line-height:24px; }
  .bar-close{ order:2; }
  .bar-name{ order:3; flex-basis:100%; margin-left:0; font-size:18px; line-height:24px; }

  .site-footer{ padding:32px 0 56px; }

  /* Say hi + Personal notebook salen del flujo normal y se abren como un
     panel flotante desde el botón de hamburguesa, en vez de vivir siempre
     debajo de la bio como una tercera sección larga */
  .menu-toggle{ display:block; }
  .right{
    display:none;
    position:fixed;
    top:64px;
    right:16px;
    left:16px;
    max-height:calc(100vh - 88px);
    overflow-y:auto;
    background:#fff;
    border:1px solid #ebebeb;
    border-radius:8px;
    box-shadow:0 12px 32px rgba(0,0,0,.14);
    padding:24px;
    z-index:55;
  }
  .right.menu-open{ display:block; }
}