/* ==========================================================================
   Andrés Cruz — User Research & Service Design
   Layout: brutalist ruled grid. White sheet on a grey page, everything boxed by
   1.5px black rules; heavy uppercase grotesk + monospace labels; yellow as the
   only accent (squares, highlights, CTA).
   ========================================================================== */

:root {
  --page: #e9e9e7;
  --sheet: #ffffff;
  --ink: #111111;
  --ink-soft: #4d4d4d;
  --ink-muted: #7a7a7a;
  --rule: #111111;
  --acc: #ecd122;
  --acc-ink: #111111;
  --dark: #111111;
  --on-dark: #ffffff;
  --todo: #fff1b8;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* running text */
  --font-archivo: "Archivo", "Helvetica Neue", Arial, sans-serif; /* medium titles (800) */
  --font-heading: "Faustina", Georgia, "Times New Roman", serif; /* encabezados (page h1) */
  --font-black: "Inter", "Archivo", system-ui, sans-serif; /* everything set at weight 900 */
  --font-mono: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* labels and supporting text */

  --b: 1.5px solid var(--rule);
  /* Right column shared by the menu and the top block of each page,
     so their vertical rules line up */
  --side: max(40%, 380px);
  --pad: clamp(18px, 2.2vw, 30px);
  --frame: clamp(10px, 2.6vw, 40px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #050505;
    --sheet: #121212;
    --ink: #f2f2f0;
    --ink-soft: #c2c2be;
    --ink-muted: #8d8d89;
    --rule: #f2f2f0;
    --dark: #f2f2f0;
    --on-dark: #121212;
    --todo: #4a4020;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --page: #050505;
  --sheet: #121212;
  --ink: #f2f2f0;
  --ink-soft: #c2c2be;
  --ink-muted: #8d8d89;
  --rule: #f2f2f0;
  --dark: #f2f2f0;
  --on-dark: #121212;
  --todo: #4a4020;
  color-scheme: dark;
}

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

html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding: var(--frame);
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; }

/* Placeholder text the owner still has to fill in */
.todo { background: var(--todo); padding: 0 4px; }

/* ---------- Sheet & grid ---------- */

.sheet {
  max-width: 1440px;
  margin: 0 auto;
  background: var(--sheet);
  padding: var(--frame);
}

.grid { border: var(--b); }

/* Every row is separated by a rule (header, each section in main, footer) */
.grid > * + *,
.grid > main > * + * { border-top: var(--b); }

.cell { padding: var(--pad); min-width: 0; }

/* ---------- Type helpers ---------- */

.mono {
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Small accent square before a label */
.label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.label::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 2px;
  background: var(--acc);
}

.display {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.2vw, 4.6rem);
  line-height: 1.12; /* room for descenders above the yellow highlight */
  letter-spacing: -0.015em;
}

.display-sm {
  font-family: var(--font-black);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* Yellow highlight behind words; wraps cleanly across lines */
mark {
  background: var(--acc);
  color: var(--acc-ink);
  padding: 0 .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Encabezado highlight: Faustina's line box leaves ~0.33em of yellow above the
   ascenders but ~0.22em below the baseline. Trim the top so it sits just under the bottom margin (17px / 18px at desktop). */
.display mark {
  background: linear-gradient(var(--acc), var(--acc)) bottom / 100% calc(100% - 0.128em) no-repeat;
}
/* Section titles set like the encabezados: Faustina, sentence case */
.display-sm.serif {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: none;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.display-sm.serif mark {
  background: linear-gradient(var(--acc), var(--acc)) bottom / 100% calc(100% - 0.128em) no-repeat;
}
/* Background title on About: bigger, three set lines */
.display-sm.title-bg { font-size: clamp(1.9rem, 3.9vw, 3.5rem); }
@media (max-width: 960px) { .display-sm.title-bg { font-size: min(7vw, 2.6rem); } }

.body-mono {
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}

.body-mono strong { font-weight: 600; } /* Inter semibold, loaded */

.muted { color: var(--ink-soft); }

.nowrap { white-space: nowrap; }

/* Encabezado with a fixed first line (Services): shrink only as much as needed
   so that line fits its column. The line is ~10.7em wide. */
.page-head > .cell:first-child { container-type: inline-size; }
.display--fit { font-size: min(clamp(2.4rem, 5.2vw, 4.6rem), 9.2cqi); }

/* Placeholder banner for missing content */
.note {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
  color: var(--ink-muted);
}

.note::before { content: "ⓘ"; }

/* ---------- Header ---------- */

.site-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side);
  grid-template-rows: minmax(76px, auto);
}

@media (max-width: 860px) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 64px auto; }
}

.brand {
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
  font-family: var(--font-archivo); /* same as the .cols h3 titles */
  font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.brand sup { font-size: .5em; font-weight: 700; margin-left: 2px; }

.nav-links {
  display: flex;
  list-style: none;
  padding: 0;
}

.nav-links li { display: flex; flex: 1; }

.nav-links a {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
  padding: 0 12px;
  border-left: var(--b);
  font-size: .95rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.nav-links a:hover { background: var(--acc); color: var(--acc-ink); }

.nav-links a[aria-current="page"] { background: var(--dark); color: var(--on-dark); }

.nav-toggle {
  display: none;
  border: 0;
  border-left: var(--b);
  background: none;
  color: var(--ink);
  padding: 0 var(--pad);
  font: inherit;
  font-family: var(--font-mono);
  font-size: .85rem;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    grid-column: 1 / -1;
    flex-direction: column;
    border-top: var(--b);
  }
  .nav-links.open { display: flex; }
  .nav-links li + li { border-top: var(--b); }
  .nav-links a { border-left: 0; padding: 18px var(--pad); width: 100%; }
}

/* ---------- Buttons & links ---------- */

.cta {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  min-width: min(360px, 100%);
  padding: 18px 20px;
  background: var(--acc);
  color: var(--acc-ink);
  font-family: var(--font-mono);
  font-size: .9rem;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--b);
  border-color: var(--acc);
  transition: background .15s, color .15s, border-color .15s;
}

.cta::after { content: "↗"; }
.cta:hover { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }

/* Black variant (used next to a yellow block); hover turns it yellow */
.cta--dark { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.cta--dark:hover { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }

.line-link {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid currentColor;
  font-family: var(--font-mono);
  font-size: .85rem;
  text-transform: uppercase;
  text-decoration: none;
  max-width: 260px;
}

.line-link::after { content: "↗"; transition: transform .15s; }
.line-link:hover::after { transform: translate(3px, -3px); }

/* ---------- Home hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side);
}

.hero > .cell + .cell { border-left: var(--b); }

.hero-main { padding-bottom: calc(var(--pad) * 1.6); }

.hero-main h1 { margin-top: clamp(10px, 1.4vw, 18px); }

.hero-side {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.facts {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px;
}

.hero-side .body-mono { margin: auto 0 0; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .hero > .cell + .cell { border-left: 0; border-top: var(--b); }
  .hero-side .body-mono { margin-top: 0; }
  .hero-side:empty { display: none; } /* empty right column only makes sense next to the menu */
}

@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr 1fr; }
}

/* ---------- Offer list + dark panel ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}

.split > * + * { border-left: var(--b); }

/* Split without the dividing rule (e.g. closing CTA) */
.split--open > * + * { border-left: 0; }

.num-list { list-style: none; padding: 0; margin-top: 18px; }

.num-list a,
.num-list > li > div {
  display: grid;
  grid-template-columns: 76px 1fr 30px;
  align-items: center;
  padding: 20px 0;
  border-top: var(--b);
  text-decoration: none;
}

.num-list b {
  font-family: var(--font-black);
  font-weight: 900;
  font-size: 2.4rem;
  letter-spacing: -0.04em;
  line-height: 1;
}

.num-list span { font-size: 1.05rem; font-weight: 600; text-transform: uppercase; }

.num-list i { font-style: normal; font-size: 1.3rem; text-align: right; transition: transform .15s; }
.num-list a:hover i { transform: translate(3px, -3px); }
.num-list a:hover span { background: var(--acc); color: var(--acc-ink); }

.dark {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  background: var(--dark);
  color: var(--on-dark);
}

.dark img {
  position: absolute;
  top: 0;
  right: 0;
  width: 58%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15);
}

.dark .cell {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 46%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}

.dark h2 {
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.2;
  text-transform: uppercase;
}

@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; }
  .split > * + * { border-left: 0; border-top: var(--b); }
}

@media (max-width: 600px) {
  .dark img { position: relative; width: 100%; height: 220px; }
  .dark .cell { width: 100%; }
}

/* ---------- Row header (label left, count right) ---------- */

.row-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  padding: 18px var(--pad);
}

.row-head + * { border-top: var(--b); }

/* ---------- Generic column rows ---------- */

.cols {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
}

.cols > * + * { border-left: var(--b); }

@media (max-width: 860px) {
  .cols { grid-template-columns: 1fr; }
  .cols > * + * { border-left: 0; border-top: var(--b); }
}

@media (min-width: 861px) and (max-width: 1100px) {
  .cols[style*="--n: 4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols[style*="--n: 4"] > :nth-child(3) { border-left: 0; }
  .cols[style*="--n: 4"] > :nth-child(n+3) { border-top: var(--b); }
}

.big-num {
  display: block;
  font-family: var(--font-black);
  font-weight: 900;
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 28px 0 18px;
}

.cols h3 {
  font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.cols p { color: var(--ink-soft); margin: 0; }

/* Highlighted cell (e.g. the step that matters most) */
.cell--acc { background: var(--acc); color: var(--acc-ink); }
.cell--acc p { color: var(--acc-ink); }

/* ---------- Work cards on home ---------- */

.card { display: flex; flex-direction: column; text-decoration: none; }

.card img {
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter .3s;
}

.card:hover img { filter: grayscale(0); }

.card .mono { margin: 18px 0 10px; color: var(--ink-muted); font-size: .72rem; }

.card h3 {
  font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.card .go {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: var(--b);
}

.card h3 + .go { margin-top: 22px; }

/* ---------- Page header (inner pages) ---------- */

.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side);
}

.page-head > * + * { border-left: var(--b); }

/* Encabezado vertically centred in its box (Services, Work, Contact) */
.page-head > .cell:first-child { display: flex; flex-direction: column; justify-content: center; }
/* Keep the box height it had with the old top margin, split evenly above and below */
.page-head > .cell:first-child { padding-block: calc(var(--pad) + clamp(8px, 1.25vw, 16px)); }
.page-head h1 { margin: 0; }

.page-head .side { display: flex; flex-direction: column; gap: 20px; justify-content: flex-end; }

@media (max-width: 960px) {
  .page-head { grid-template-columns: 1fr; }
  .page-head > * + * { border-left: 0; border-top: var(--b); }
}

/* ---------- Expandable rows (offers, projects) ---------- */

.acc { display: block; }

.acc + .acc { border-top: var(--b); }

.acc > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 56px;
  gap: 24px;
  align-items: center;
  padding: 24px var(--pad);
  transition: background .15s;
}

.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { background: color-mix(in srgb, var(--acc) 30%, var(--sheet)); }
.acc[open] > summary { background: var(--acc); color: var(--acc-ink); }
.acc[open] > summary .mono { color: var(--acc-ink); }

.acc .idx {
  font-family: var(--font-black);
  font-weight: 900;
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  letter-spacing: -0.05em;
  line-height: 1;
}

.acc h2 {
  font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 8px 0 6px;
}

.acc summary p { margin: 0; color: var(--ink-soft); max-width: 46em; }
.acc[open] summary p { color: var(--acc-ink); }

/* + becomes × when open */
.plus {
  width: 56px;
  height: 56px;
  border: var(--b);
  border-color: currentColor;
  position: relative;
  justify-self: end;
  transition: transform .2s;
}

.plus::before,
.plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc[open] .plus { transform: rotate(45deg); }

.acc-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--b);
}

.acc-body > .cell { border-bottom: var(--b); }
.acc-body > .cell:nth-child(even) { border-left: var(--b); }
.acc-body > .cell--wide { grid-column: 1 / -1; border-left: 0 !important; }
.acc-body > .cell--wide ~ .cell:nth-child(odd) { border-left: var(--b); }
.acc-body > .cell--wide ~ .cell:nth-child(even) { border-left: 0; }
.acc-body > .cell:nth-last-child(-n+2):not(.cell--wide) { border-bottom: 0; }

.acc-body h3 { margin-bottom: 14px; }

.acc-body ul { padding-left: 1.1em; color: var(--ink-soft); }
.acc-body li { margin: 5px 0; }
.acc-body li::marker { color: var(--ink); }
.acc-body p { margin: 0; color: var(--ink-soft); }

/* Project rows: thumbnail instead of number */
.acc--project > summary { grid-template-columns: 220px minmax(0, 1fr) 56px; }

.acc--project .thumb {
  width: 220px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter .3s;
}

.acc--project:hover .thumb,
.acc--project[open] .thumb { filter: grayscale(0); }

.chips { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }

.chips li {
  margin: 0 !important;
  padding: 6px 12px;
  border: var(--b);
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  color: var(--ink);
}

@media (max-width: 760px) {
  .acc > summary,
  .acc--project > summary { grid-template-columns: minmax(0, 1fr) 48px; gap: 16px; }
  .acc .idx { grid-column: 1 / -1; }
  .acc--project .thumb { grid-column: 1 / -1; width: 100%; }
  .plus { width: 48px; height: 48px; }
  .acc-body { grid-template-columns: 1fr; }
  .acc-body > .cell { border-left: 0 !important; }
  .acc-body > .cell:nth-last-child(2):not(.cell--wide) { border-bottom: var(--b); }
}

/* ---------- Steps (Services) ---------- */

.steps { list-style: none; padding: 0; counter-reset: step; }

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 0 24px;
  padding: 24px var(--pad);
}

.steps li + li { border-top: var(--b); }

.steps li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-black);
  font-weight: 900;
  font-size: 2.4rem;
  letter-spacing: -0.05em;
  line-height: 1;
}

.steps h3 {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.steps p { margin: 0; color: var(--ink-soft); max-width: 46em; }

/* ---------- CV (About) ---------- */

.cv { list-style: none; padding: 0; }

.cv li {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 24px;
  padding: 22px var(--pad);
}

.cv li + li { border-top: var(--b); }

.cv h4 {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.cv h4 span { font-weight: 500; text-transform: none; color: var(--ink-soft); letter-spacing: 0; }
.cv p { margin: 8px 0 0; color: var(--ink-soft); max-width: 50em; }

@media (max-width: 640px) {
  .cv li { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Contact ---------- */

.contact-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 40px;
  gap: 20px;
  align-items: center;
  padding: 26px var(--pad);
  text-decoration: none;
  transition: background .15s;
}

.contact-row strong {
  font-family: var(--font-black);
  font-weight: 900;
  font-size: clamp(1.3rem, 3.4vw, 2.6rem);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.contact-row::after { content: "↗"; font-size: 1.4rem; text-align: right; }
a.contact-row:hover { background: var(--acc); color: var(--acc-ink); }

@media (max-width: 640px) {
  .contact-row { grid-template-columns: minmax(0, 1fr) 30px; }
  .contact-row .mono { grid-column: 1 / -1; }
}

/* ---------- Footer ---------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 18px var(--pad);
}

.site-footer a { text-decoration: none; }
.site-footer a:hover { background: var(--acc); color: var(--acc-ink); }

/* Background row: title, text and a square photo on the right */
.cols--bg { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) clamp(240px, 24vw, 340px); }

.square { aspect-ratio: 1 / 1; overflow: hidden; align-self: start; }

.square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 28%; /* keeps the person in frame on every crop */
  filter: grayscale(1);
  transition: filter .3s;
}

.square:hover img { filter: grayscale(0); }

/* Mid widths: the text gets taller than the square, so let the photo fill the row height */
@media (max-width: 1100px) {
  .square { aspect-ratio: auto; align-self: stretch; min-height: 240px; }
}

/* Stacked: a wide crop instead of a huge square */
@media (max-width: 860px) {
  .cols--bg { grid-template-columns: 1fr; }
  .square { aspect-ratio: 4 / 3; min-height: 0; }
}

/* ---------- Medium titles stay in Archivo ---------- */

.cols h3,
.card h3,
.acc h2,
.steps h3,
.cv h4,
.dark h2,
.num-list span {
  font-family: var(--font-archivo);
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}