/* 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;
  display:flex;
  justify-content:center;
  padding:0 24px 100px;
}

.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%;
}

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

.para em{ font-style:italic; }

/* nota al pie de la columna de contacto: en cursiva y un escalón más chica,
   para que se lea como aparte y no como parte del contacto */
.note{
  margin-top:28px;
  font-size:17px;
  line-height:25px;
  letter-spacing:-.1px;
  color:#767676;
  max-width:30ch;
}
.note em{ font-style:italic; }

/* "Projects" es el mismo texto negro del cuerpo, solo separado del párrafo */
.para--heading{ margin-top:84px; }

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

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

/* en versalitas y 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:0;
  text-transform:uppercase;
  color:#000;
  text-decoration:none;
  transition:color .2s;
}
.project-name:hover{ color:#767676; }
.project-name: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; }

@media (max-width:760px){
  body{ margin-top:56px; padding:0 24px 56px; }
  .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; }
}