/* ==========================================================================
   Tomás Mertian — portfolio
   Direction: a technical sheet. Near-black blue "paper", a drafting grid,
   hairline celeste rules and a monospaced voice. The name is set in a serif
   as the one human signature on the page.
   No glass, no cards, no shadows, no gradient washes.
   Type: system faces only (no font requests).
   ========================================================================== */

:root {
  --ink: #05090f;          /* page */
  --ink-2: #0a111c;        /* drawing wells / panels */
  --grid: rgba(126, 186, 220, 0.055);
  --grid-fill: rgba(126, 186, 220, 0.016);
  --rule: rgba(126, 186, 220, 0.20);
  --rule-soft: rgba(126, 186, 220, 0.11);
  --text: #cddbe8;
  --muted: #74899f;
  --celeste: #6fd3f2;
  --blue: #2b5f8f;

  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --pad: clamp(1.25rem, 4.5vw, 5rem);
  --section-y: clamp(3rem, 8vh, 5.5rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.75;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 1px solid var(--celeste);
  outline-offset: 3px;
}

::selection { background: var(--celeste); color: var(--ink); }

/* Full-bleed container: the page uses the whole viewport width, with a
   fluid gutter that grows with the screen. Long text is capped separately
   by measure (ch) so lines never get too wide to read. */
.wrap {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Skip link ---------------------------------------------------------------- */
.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 50;
  padding: 0.5rem 0.9rem;
  background: var(--celeste);
  color: var(--ink);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip:focus { top: 0.75rem; }

/* Header ------------------------------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
}

/* A plotted hairline under the header that fills as the page is scrolled,
   like a dimension line on a drawing. Updated from script.js. */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--celeste);
  opacity: 0.75;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}

.brand {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.nav ul {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav a:hover { color: var(--celeste); }

.menu-btn {
  display: none;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--rule);
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.menu-btn:hover { border-color: var(--celeste); color: var(--celeste); }

/* Hero: the drafting area. ------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  min-height: calc(100vh - 4rem);
  min-height: calc(100svh - 4rem);
  display: grid;
  align-content: center;
  padding-block: clamp(3rem, 9vh, 5.5rem) clamp(5rem, 14vh, 8rem);
}

/* Faint plotting grid that fades out toward the fold. */
.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--grid-fill);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 6vw, 4rem);
  align-items: end;
}

/* Title block, like the corner table on a technical drawing. */
.title-block .spec {
  grid-template-columns: auto 1fr;
  gap: 0 1.25rem;
  margin-top: 0;
}
.title-block .spec dt,
.title-block .spec dd { padding: 0.5rem 0; }
.title-block .spec dd { text-align: right; }

.hero-role {
  margin: 1.25rem 0 0;
  color: var(--celeste);
  letter-spacing: 0.02em;
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(3rem, 11vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #eaf2fa;
}

/* A single plotted line, drawn once on load. */
.draw-rule {
  display: block;
  width: min(100%, 30rem);
  height: 1px;
  margin-top: 1.75rem;
  background: linear-gradient(90deg, var(--celeste), rgba(111, 211, 242, 0.15));
  transform-origin: left center;
}

.lede {
  max-width: 58ch;
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.box-link {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--rule);
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.box-link:hover {
  color: var(--celeste);
  border-color: var(--celeste);
  background: rgba(111, 211, 242, 0.06);
}

/* The two hero calls to action sit side by side and wrap on their own. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.hero-actions .box-link { margin-top: 0; }

/* Scroll cue: a small plotted arrow at the foot of the hero that says the
   page keeps going below the fold. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 4vh, 2.25rem);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--celeste);
  text-decoration: none;
  font-size: 0.78rem;
  transition: opacity 0.3s ease;
}
.scroll-cue.is-hidden { opacity: 0; pointer-events: none; }
.scroll-cue-text {
  color: var(--muted);
  letter-spacing: 0.06em;
  transition: color 0.15s ease;
}
.scroll-cue:hover .scroll-cue-text { color: var(--celeste); }
.scroll-cue-arrow { display: block; }

/* Sections ----------------------------------------------------------------- */
.section {
  padding-block: var(--section-y);
  border-bottom: 1px solid var(--rule);
}

.section h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  letter-spacing: -0.01em;
  color: #eaf2fa;
  margin-bottom: clamp(1.5rem, 4vh, 2.25rem);
}

/* The same plotted celeste tick as the hero and Skills, repeated under each
   section title. It draws in the first time the section is seen. */
.section h2::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin-top: 0.85rem;
  background: linear-gradient(90deg, var(--celeste), rgba(111, 211, 242, 0.12));
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  .section h2::after {
    transform: scaleX(0);
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .section h2.is-visible::after { transform: scaleX(1); }
}

/* About -------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: start;
}

/* The narrative keeps a comfortable measure (never a wall of text), set a
   touch larger than the body so the section reads at an easy pace. */
.about-text { max-width: 64ch; font-size: 1rem; line-height: 1.8; }
.about-text p { margin: 0 0 1.2rem; color: var(--text); }
.about-text p:last-child { margin-bottom: 0; }

/* The facts hold the right column, tied to the text by a hairline margin
   rule so they read as the section's index instead of a loose list. */
.about-facts {
  margin: 0;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 1px solid var(--rule-soft);
}

.about-facts .fact {
  padding: clamp(0.9rem, 2vw, 1.15rem) 0;
  border-top: 1px solid var(--rule-soft);
}
.about-facts .fact:first-child { padding-top: 0; border-top: 0; }
.about-facts .fact:last-child { padding-bottom: 0; }

.about-facts dt { color: var(--muted); }
.about-facts dd {
  margin: 0.3rem 0 0;
  color: #eaf2fa;
  font-size: clamp(1rem, 1.2vw, 1.08rem);
}

/* Spec tables: label / value rows ruled with hairlines. -------------------- */
.spec {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  margin: 2.5rem 0 0;
}
.spec dt,
.spec dd {
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule-soft);
}
.spec dt { color: var(--muted); }
.spec dd { margin: 0; }

/* Project: a drawing block with a line-art plan. ---------------------------- */
.drawing {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  border: 1px solid var(--rule);
}

.drawing + .drawing { margin-top: clamp(1.5rem, 4vw, 2.5rem); }

.drawing-figure {
  margin: 0;
  padding: clamp(1rem, 3vw, 1.75rem);
  border-right: 1px solid var(--rule);
  background-color: var(--ink-2);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.drawing-figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

.drawing-figure figcaption {
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule-soft);
  color: var(--muted);
}
.drawing-figure figcaption a {
  color: var(--celeste);
  text-underline-offset: 4px;
}

/* The text reads as one block centred against the plate, so when the shot is
   taller than the copy the slack is spread as even margin instead of a pocket
   of dead space at the bottom. */
.drawing-spec {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.25rem, 3.5vw, 2rem);
}

.drawing-spec h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  letter-spacing: -0.01em;
  color: #eaf2fa;
  text-wrap: balance;
}

.drawing-spec > p {
  margin: 0.85rem 0 0;
  color: var(--muted);
}

.drawing-spec .spec {
  grid-template-columns: 9rem 1fr;
  margin-top: 1.5rem;
}
.drawing-spec .spec dt,
.drawing-spec .spec dd { padding: 0.5rem 0; }

/* Project groups: a small monospaced label rules the width of the page and
   divides the section into current, past and future work. It reuses the
   celeste accent and the hairline of the spec tables, so the three groups
   read as three ruled parts of one sheet. */
.project-group + .project-group { margin-top: clamp(2rem, 5vw, 3.25rem); }

.project-group-title {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 clamp(1.25rem, 3vh, 1.75rem);
  color: var(--celeste);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}
.project-group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule-soft);
}

/* Future projects: a short intro over hairline-ruled goals. No screenshot
   here, so the list carries the block instead of a drawing. */
.future-lede {
  max-width: 58ch;
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 1rem;
}
.future-list {
  max-width: 64ch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.future-list li {
  padding: clamp(0.75rem, 1.5vw, 0.95rem) 0;
  border-top: 1px solid var(--rule-soft);
  font-size: 1rem;
  line-height: 1.8;
}
.future-list li:last-child { border-bottom: 1px solid var(--rule-soft); }

/* Skills: three ruled columns, one per part of the stack. Each part is a
   small spec sheet: a serif label over a plotted tick, then the tools set
   in ruled boxes — squares, hairlines, no radius, no shadow. --------------- */
.skills-lede { max-width: 52ch; margin: 0 0 clamp(1.75rem, 4vh, 2.5rem); }

.skills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}

.skill-group {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem);
}
.skill-group + .skill-group { border-left: 1px solid var(--rule-soft); }
.skill-group:first-child { padding-left: 0; }
.skill-group:last-child { padding-right: 0; }

/* The label carries the column: serif and clearly larger than the boxes. */
.skill-group h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  letter-spacing: -0.015em;
  color: #eaf2fa;
}

/* A short celeste tick under each label — the same plotted accent as the
   hero, repeated once per part of the stack. */
.skill-group h3::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 1px;
  margin-top: 0.9rem;
  background: linear-gradient(90deg, var(--celeste), rgba(111, 211, 242, 0.12));
}

.skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}

.skill-list li {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--ink-2);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.4;
  color: var(--text);
}

/* Contact ------------------------------------------------------------------ */
#contact .lede { max-width: 52ch; margin-top: 0; }

.mail-line { margin: 1.75rem 0 0; }

.mail {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 5vw, 2.6rem);
  letter-spacing: -0.01em;
  color: #eaf2fa;
  text-decoration: none;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--rule);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.mail:hover { color: var(--celeste); border-color: var(--celeste); }

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.links a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 4px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.links a:hover { color: var(--celeste); text-decoration-color: var(--celeste); }

/* Footer ------------------------------------------------------------------- */
.site-foot { padding-block: 2rem; }
.site-foot p { margin: 0; color: var(--muted); }

/* Motion: exactly one plotted line on load. -------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .draw-rule {
    transform: scaleX(0);
    animation: plot 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s forwards;
  }
  @keyframes plot { to { transform: scaleX(1); } }

  /* Hero load: one orchestrated sequence — the name and the line, then the
     rest of the block settle in a short cascade. */
  .hero h1,
  .hero .hero-role,
  .hero .lede,
  .hero .hero-actions,
  .hero .title-block {
    animation: hero-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .hero .hero-grid { animation: grid-in 1.2s ease both; }

  .hero h1 { animation-delay: 0.05s; }
  .hero .hero-role { animation-delay: 0.22s; }
  .hero .lede { animation-delay: 0.32s; }
  .hero .hero-actions { animation-delay: 0.42s; }
  .hero .title-block { animation-delay: 0.52s; }

  @keyframes hero-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes grid-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .scroll-cue-arrow { animation: cue 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  @keyframes cue {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(8px); opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Responsive: from ultrawide monitors down to small phones. ---------------- */

@media (min-width: 1700px) {
  body { font-size: 0.98rem; }
  .hero h1 { font-size: clamp(5rem, 7vw, 8.5rem); }
  .drawing { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* Very wide monitors: keep the gutters generous. */
@media (min-width: 2200px) {
  :root { --pad: clamp(4rem, 6vw, 9rem); }
  body { font-size: 1.05rem; }
}

/* Tablets in landscape and below: stack the hero. */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; align-items: start; }
  .title-block { max-width: 26rem; }
  .title-block .spec dd { text-align: left; }
}

/* Tablets in portrait. */
@media (max-width: 780px) {
  .about { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vh, 2.5rem); }
  .about-facts {
    padding-left: 0;
    padding-top: clamp(1rem, 3vh, 1.5rem);
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  .skills { grid-template-columns: 1fr; }
  .skill-group { padding-inline: 0; }
  .skill-group + .skill-group {
    border-left: 0;
    border-top: 1px solid var(--rule-soft);
  }

  .drawing { grid-template-columns: 1fr; }
  .drawing-figure { border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* Phones: collapsed menu and stacked spec rows. */
@media (max-width: 640px) {
  .menu-btn { display: inline-block; }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    background: var(--ink);
    border-bottom: 1px solid var(--rule);
  }
  .nav[data-open="true"] { display: block; }

  .nav ul {
    flex-direction: column;
    gap: 0;
    padding: 0.25rem var(--pad) 1rem;
  }
  .nav li { border-top: 1px solid var(--rule-soft); }
  .nav li:first-child { border-top: 0; }
  .nav a { display: block; padding: 0.8rem 0; }

  .spec { grid-template-columns: 1fr; }
  .spec dt { padding-bottom: 0; border-top: 1px solid var(--rule-soft); }
  .spec dd { padding-top: 0.15rem; border-top: 0; }
  .drawing-spec .spec { grid-template-columns: 1fr; }
  .drawing-spec .spec dt { padding-bottom: 0; }
  .drawing-spec .spec dd { padding-top: 0.15rem; border-top: 0; }
}

/* Small phones. */
@media (max-width: 480px) {
  :root {
    --pad: 1.15rem;
    --section-y: 2.75rem;
  }

  .hero { padding-block: 2.75rem 5rem; }
  .hero h1 { font-size: clamp(2.6rem, 15vw, 3.4rem); }
  .lede { font-size: 0.98rem; }

  .box-link { display: block; text-align: center; }
  .hero-actions { flex-direction: column; align-items: stretch; }

  .drawing-figure { padding: 1rem; }
  .drawing-spec { padding: 1.15rem; }

  .mail { font-size: clamp(1.3rem, 8vw, 1.9rem); }
  .links { gap: 1.25rem; }
}

/* Very narrow phones. */
@media (max-width: 360px) {
  :root { --pad: 1rem; }
  .brand { font-size: 1.05rem; }
  .nav ul { gap: 0.75rem; }
}

/* Phones held sideways. */
@media (orientation: landscape) and (max-height: 520px) {
  .hero { padding-block: 2.5rem 2rem; }
  .hero h1 { font-size: clamp(2.25rem, 9vh, 3.5rem); }
  .scroll-cue { display: none; }
}