/* ============================================================================
   bernardomcma.dev

   The design system is Lock In's, from that project's assets/theme.css, run at
   lower density. Its rules, kept here:

     Nothing blurs. No backdrop-filter, no soft shadows, no gradient text.
     Every surface has a hard 2px border and a solid offset shadow.
     Colour is flat and saturated. Depth comes from offset, not from light.

   1. Font
   2. Tokens
   3. Reset
   4. Type
   5. Layout
   6. Components
   7. Sections
   8. Motion
   ========================================================================= */


/* ============================================================================
   1. Font — one family, latin subset, 22KB. Same file Lock In ships.
   ========================================================================= */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}


/* ============================================================================
   2. Tokens

   Lock In's dark-mode palette, verbatim. Lime is rationed: hover, the active
   section, one primary button. It is punctuation, not decoration.
   ========================================================================= */

:root {
  --paper:        #14120f;
  --paper-raised: #201d19;
  --paper-sunken: #0c0b09;

  /* --ink-soft is 5.9:1 on --paper; every accent below clears AA too. */
  --ink:          #f2ede1;
  --ink-soft:     #9a9285;

  --lime:         #ccff00;
  --pink:         #ff4d8d;
  --on-lime:      #0a0a0a;

  --border-w: 2px;
  --radius: 4px;

  /* Shadow colours are written out at each use site rather than stored as a
     token with a var() inside. A custom property substitutes its var()s on the
     element that DECLARES it, so a token defined here would bake in the site's
     ink and stay cream inside the Lock In band, where it is invisible. */

  --font: 'Space Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-num: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --shell-max: 68rem;
  --shell-pad: clamp(1.25rem, 4vw, 3.5rem);
  --section-pad: clamp(3.25rem, 6.5vw, 5.5rem);

  /* Stepped, not eased. The one motion rule the whole system runs on. */
  --step: 80ms steps(2);

  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.6 7.4 7.4 2.6M3.7 2.6h3.7v3.7' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='square'/%3E%3C/svg%3E");
  /* U+2192 is outside the font's subset, so the arrow in "2024 → 2028" is drawn. */
  --arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5h9M6.6 1.4 10.2 5l-3.6 3.6' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='square'/%3E%3C/svg%3E");
}


/* ============================================================================
   3. Reset
   ========================================================================= */

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

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

body {
  margin: 0;
  overflow-x: clip;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

/* His focus rule: pink, 2px, offset 2px. Visible on dark paper and on cream. */
:focus-visible {
  outline: var(--border-w) solid var(--pink);
  outline-offset: 2px;
  border-radius: 1px;
}


/* ============================================================================
   4. Type
   ========================================================================= */

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

.label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.lead {
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.35rem);
  line-height: 1.45;
}

.prose p { color: var(--ink-soft); }
.prose p + p { margin-top: 1rem; }
.prose strong { color: var(--ink); font-weight: 500; }


/* ============================================================================
   5. Layout
   ========================================================================= */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

.band { padding-block: var(--section-pad); }
.band__head { margin-bottom: 1.75rem; }
.band__head h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.band__head .label { display: block; margin-bottom: 0.7rem; }

.measure { max-width: 36rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -5rem; left: 1rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  background-color: var(--paper);
  border: var(--border-w) solid var(--ink);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: top 0.15s var(--step);
}

.skip-link:focus { top: 1rem; }


/* ============================================================================
   6. Components
   ========================================================================= */

/* -- Masthead ------------------------------------------------------------ */

.masthead {
  position: fixed;
  top: 0; right: 0; left: 0;
  z-index: 50;
  border-bottom: var(--border-w) solid transparent;
  transition: background-color 0.2s var(--step), border-color 0.2s var(--step);
}

.masthead.is-pinned {
  background-color: var(--paper);
  border-bottom-color: var(--ink);
}

.masthead__inner {
  display: flex;
  align-items: center;
  padding-block: 0.9rem;
}

.brand {
  position: relative;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* The hero says the name three times its size directly below, so the brand
   waits until the hero is gone. Without JS it is simply always there. */
.js .brand { opacity: 0; visibility: hidden; transition: opacity 0.2s var(--step), visibility 0.2s var(--step); }
.js .masthead.is-pinned .brand { opacity: 1; visibility: visible; }

.sections { margin-left: auto; }
.sections__list { display: flex; gap: 1.6rem; }

.sections__list a {
  position: relative;
  font-size: 0.82rem;
  color: var(--ink-soft);
  transition: color 0.1s var(--step);
}

.sections__list a:hover { color: var(--ink); }
.sections__list a[aria-current] { color: var(--lime); }

.lang {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 1.75rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.lang__on { color: var(--ink); }
.lang__sep { color: var(--ink-soft); opacity: 0.5; }
.lang__off { position: relative; color: var(--ink-soft); transition: color 0.1s var(--step); }
.lang__off:hover { color: var(--ink); }

@media (max-width: 780px) {
  .sections { display: none; }
  .lang { margin-left: auto; }
}

/* -- Box: the one surface treatment, used sparingly ---------------------- */

.box {
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius);
  background-color: var(--paper-raised);
}

/* -- Button -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform var(--step), box-shadow var(--step), background-color var(--step), color var(--step);
}

.btn--primary { background-color: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.btn:hover { background-color: var(--ink); color: var(--paper); }
.btn--primary:hover { background-color: var(--lime); color: var(--on-lime); }

/* The press is the whole point: the block moves onto its own shadow. */
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

/* -- Chip (hero links) --------------------------------------------------- */

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.45rem 0.9rem;
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform var(--step), box-shadow var(--step), border-color var(--step), color var(--step);
}

.chip:hover { color: var(--lime); border-color: var(--lime); }
.chip:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

/* -- Arrows -------------------------------------------------------------- */

.arrow,
.arrow-r {
  display: inline-block;
  background-color: currentColor;
  transition: transform var(--step);
}

.arrow {
  width: 0.6em; height: 0.6em;
  margin-left: 0.45em;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
}

.arrow-r {
  width: 0.85em; height: 0.7em;
  margin-inline: 0.15em;
  vertical-align: -0.02em;
  -webkit-mask: var(--arrow-right) center / contain no-repeat;
  mask: var(--arrow-right) center / contain no-repeat;
}

a:hover .arrow { transform: translate(2px, -2px); }

/* -- Text link with expanded hit area ------------------------------------ */

.tlink {
  position: relative;
  color: var(--ink-soft);
  transition: color 0.1s var(--step);
}

.tlink:hover { color: var(--lime); }

.brand::before,
.sections__list a::before,
.lang__off::before,
.tlink::before {
  content: '';
  position: absolute;
  inset: -0.95rem -0.6rem;
}


/* ============================================================================
   7. Sections
   ========================================================================= */

/* -- Hero ---------------------------------------------------------------- */

.hero {
  display: flex;
  align-items: center;
  min-height: 70svh;
  padding-block: 6.5rem 3rem;
}

.hero h1 {
  font-size: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);
}

.hero .lead {
  max-width: 32rem;
  margin-top: 1.25rem;
  color: var(--ink-soft);
}

.hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2.25rem;
}

.sentinel { height: 1px; margin-bottom: -1px; }

/* -- Projects ------------------------------------------------------------ */

.projects { padding-block: var(--section-pad) 1.75rem; }

.project__body { margin-top: 1.1rem; }

.project__meta {
  margin-top: 0.8rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.project__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.75rem;
}

/* -- Lock In: the band takes the project's own light theme ---------------- */

.band--lockin {
  --paper:        #f2ede1;
  --paper-raised: #fffdf7;
  --paper-sunken: #e6e0d1;
  --ink:          #0a0a0a;
  --ink-soft:     #6b665c;

  background-color: var(--paper);
  color: var(--ink);
}

.band--lockin .tlink:hover,
.band--lockin .chip:hover { color: var(--ink); }

.lockin__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

/* Lock In's own wordmark device: a lime square, then the name. */
.lockin__mark {
  width: 0.85rem;
  height: 0.85rem;
  border: var(--border-w) solid var(--ink);
  background-color: var(--lime);
}

.lockin__word {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.lockin__title {
  max-width: 22ch;
  font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* Real UI from the project, framed the way the project frames things. */
.shots {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

@media (min-width: 620px) {
  .shots { grid-template-columns: 1fr 1fr; align-items: start; }
}

.shot {
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius);
  background-color: var(--paper-raised);
  box-shadow: 4px 4px 0 var(--ink);
  overflow: hidden;
}

.shot img { width: 100%; }

/* -- Financial PBI: same dark system, sunken, instrument-panel ------------- */

.band--data { background-color: var(--paper-sunken); }

.band--data h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }

/* The architecture, at the only level of detail worth showing: data arrives
   through bots, is persisted, processed, persisted again, then read. */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  margin-top: 1.75rem;
}

.flow__node {
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(242, 237, 225, 0.24);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--ink);
  white-space: nowrap;
}

.flow .arrow-r { color: var(--ink-soft); }

/* -- Studying ------------------------------------------------------------ */

.edu { display: grid; gap: 0.35rem; }
.edu__course { font-size: 1.05rem; }
.edu__where { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem); }
.edu__when { font-family: var(--font-num); font-size: 0.9rem; color: var(--ink-soft); }

/* -- Elsewhere ----------------------------------------------------------- */

.rows { border-top: 1px solid rgba(242, 237, 225, 0.14); }

.rows li { border-bottom: 1px solid rgba(242, 237, 225, 0.14); }

.rows a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.1rem;
  transition: color 0.1s var(--step), padding-left 0.1s var(--step);
}

.rows a:hover { color: var(--lime); padding-left: 0.5rem; }

.rows__name { font-size: 1.2rem; font-weight: 500; }
.rows__handle { margin-left: auto; font-size: 0.82rem; color: var(--ink-soft); }
.rows a:hover .rows__handle { color: inherit; }

@media (max-width: 520px) {
  .rows__handle { display: none; }
  .rows a .arrow { margin-left: auto; }
}

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

.footer {
  padding-block: 2.5rem 3rem;
  border-top: var(--border-w) solid var(--ink);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}


/* ============================================================================
   8. Motion

   Hover and press are stepped, per the system. Scroll reveals are eased —
   a stepped fade on a whole block reads as a rendering fault, not a choice.
   ========================================================================= */

.js .reveal { opacity: 0; transform: translateY(10px); }

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.32s ease-out, transform 0.32s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}