/* ============================================================
   Base — design tokens, reset, typography, page shell
   Shared across every page.
   ============================================================ */

/* CSS Variables */
:root {
  --font-family: "Times New Roman";
  --font-size: 20px;
  --margin: 20px;
  --gutter: 20px;
  --color-text: #4c4247;
  --color-bg: #ffffff;
  --transition-speed: 180ms;

  /* Index page */
  --index-row-height: 180px;
  --index-gap: var(--gutter);
  --index-placeholder-color: #e0e0e0;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

/* Typography */
body {
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--color-text);
  background-color: var(--color-bg);
}

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

p {
  margin: 0;
}

/* Page shell */
.portfolio {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: var(--gutter);
  padding: var(--margin);
  height: 100svh;
  min-height: 100svh;
}

@media (max-width: 768px) {
  .portfolio {
    display: flex;
    flex-direction: column;
    height: 100svh;
    min-height: 100svh;
    gap: var(--gutter);
    grid-template-columns: none;
    grid-template-rows: none;
  }
}