/*
+------------------------------------------------------+
|  MODULE:   ALEXANDRUBOGDAN.DEV / CORE                |
|  STATUS:   DEV                                       |
|  LOADS:    Every page                                |
|  CONTAINS: local fonts, root tokens, reset, body,    |
|            paper grain, shared blocks, footer        |
|  FONTS:    Space Grotesk 700 (display) / Inter       |
|            (body) / JetBrains Mono (mono), local     |
|  STYLE:    Mobile-first. Base rules target small     |
|            screens; min-width queries scale up.      |
+------------------------------------------------------+
*/

/* +------------------------------------------------------+ */
/* |  SECTION: LOCAL FONT FACES                           | */
/* +------------------------------------------------------+ */
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/space-grotesk-v22-latin_latin-ext-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-v20-latin_latin-ext-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-v20-latin_latin-ext-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-v20-latin_latin-ext-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono-v24-latin_latin-ext-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono-v24-latin_latin-ext-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono-v24-latin_latin-ext-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* +------------------------------------------------------+ */
/* |  SECTION: ROOT TOKENS                                | */
/* +------------------------------------------------------+ */
:root {
  --ink:     #131110;
  --ink-2:   #1c1917;
  --paper:   #f0e8d6;
  --paper-2: #e6dcc6;
  --yellow:  #f0c437;
  --orange:  #e06b2d;
  --green:   #7fa06b;
  --red:     #d94f38;
  --line:    #17140f;

  --disp: "Space Grotesk", "Arial Black", sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --shadow: 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.55);
  --pop: cubic-bezier(0.3, 0.8, 0.2, 1.3);
}

/* +------------------------------------------------------+ */
/* |  SECTION: RESET + BASE (mobile first)                | */
/* +------------------------------------------------------+ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--ink);
  color: var(--line);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  padding: 1rem 0.625rem 2rem;
  -webkit-font-smoothing: antialiased;
}

/* paper grain over everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg width='240' height='240' viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

a {
  color: inherit;
}

a:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

img {
  max-width: 100%;
}

/* +------------------------------------------------------+ */
/* |  SECTION: SHEET + BLOCKS (shared collage pieces)     | */
/* +------------------------------------------------------+ */
.sheet {
  max-width: 68rem;
  margin: 0 auto;
  display: grid;
  gap: 1.375rem;
}

.blk {
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: 0.25rem;
  position: relative;
  padding: 1.25rem;
}

.blk--yellow { background: var(--yellow); }
.blk--orange { background: var(--orange); }
.blk--green  { background: var(--green); }
.blk--ink    { background: var(--ink-2); color: var(--paper); }

.tilt-l { transform: rotate(-0.5deg); }
.tilt-r { transform: rotate(0.45deg); }

.blk h2 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: 1.125rem;
  text-transform: capitalize;
}

.blk--orange h2,
.blk--green h2 {
  color: var(--paper);
}

.smallprint {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.5;
}

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 0.0938rem solid currentColor;
  padding: 0.0625rem 0.375rem;
  transform: rotate(-1.5deg);
}

/* load-in: blocks settle like dropped paper (reveal.js adds .ready) */
.drop {
  opacity: 0;
  transform: translateY(1.25rem) rotate(0deg);
  transition: opacity 0.5s ease, transform 0.55s var(--pop);
}

html.ready .drop { opacity: 1; }
html.ready .drop.tilt-l { transform: rotate(-0.5deg); }
html.ready .drop.tilt-r { transform: rotate(0.45deg); }
html.ready .drop.no-tilt { transform: none; }
html.ready .d1 { transition-delay: 0.05s; }
html.ready .d2 { transition-delay: 0.15s; }
html.ready .d3 { transition-delay: 0.25s; }
html.ready .d4 { transition-delay: 0.35s; }
html.ready .d5 { transition-delay: 0.45s; }
html.ready .d6 { transition-delay: 0.55s; }

/* +------------------------------------------------------+ */
/* |  SECTION: FOOTER                                     | */
/* +------------------------------------------------------+ */
.site-footer {
  max-width: 68rem;
  margin: 1.5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: #8a8071;
}

/* +------------------------------------------------------+ */
/* |  SECTION: SCALE UP (tablet and desktop)              | */
/* +------------------------------------------------------+ */
@media (min-width: 40rem) {
  body {
    padding: 2rem 1rem 3rem;
  }

  .blk {
    padding: 1.75rem;
  }

  .site-footer {
    flex-direction: row;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
}