/* =========================
   0) “KNOBS” (easy size controls)
   ========================= */
:root{
  --page-width: 600px; /* fixed page width (so it doesn’t squish/reflow) */
  --gap: 18px;         /* spacing between blocks */
  --air-col: 220px;    /* skinny AIR DAYZ column width */
}


/* =========================
   1) BODY BEHAVIOR
   ========================= */
body{
  margin: 0;           /* remove default browser margin */
  overflow-x: auto;    /* if screen is smaller than page-width, scroll sideways instead of reflowing */
}


/* =========================
   2) CENTER THE WHOLE “PAGE”
   ========================= */
.site{
  width: var(--page-width); /* make a fixed-width page */
  margin: 18px auto;        /* auto left/right margins = centered in browser */
}


/* =========================
   3) HEADER LAYOUT
   ========================= */
.site-header{
  display: grid;      /* grid is good for stacking header parts with gaps */
  gap: var(--gap);    /* space between header rows */
}

/* This row needs: title centered + home on right.
   Grid makes that clean (no hacks). */
.brand-row{
  display: grid;

  /* 3 columns:
     - left “spacer” grows
     - middle fits the title
     - right “spacer” grows (and holds home) */
  grid-template-columns: 1fr auto 1fr;

  align-items: center; /* vertical alignment for items in the row */
}

.brand{
  grid-column: 2;         /* put the title in the middle column */
  justify-self: center;   /* force it dead center */
}

.home-stamp{
  grid-column: 3;         /* put home in the right column */
  justify-self: end;      /* push it to the far right */
}

/* Stamp rows are just “items in a line” => flex */
.stamps{
  display: flex;              /* horizontal row of links */
  gap: var(--gap);            /* spacing between links */
  justify-content: center;    /* centers the entire row of stamps */
  flex-wrap: wrap;            /* if you add many, they wrap instead of going off-screen */
}


/* =========================
   4) MAIN DASHBOARD GRID (your sketch)
   ========================= */
.dashboard{
  display: grid; /* 2D layout tool: perfect for your “panels” layout */

  /* Two columns:
     left is fixed width
     right takes the remaining space */
  grid-template-columns: var(--left-col) 1fr;

  gap: var(--gap);         /* spacing between panels */
  margin-top: var(--gap);  /* space between header and grid */
}

/* These “grid-column / grid-row” lines are literally you saying:
   “put this panel in this slot.” */

/* Row 1 */
.intro{   grid-column: 1; }
.lifelog{ grid-column: 2; }

/* Row 2 */
.gamedev{ grid-column: 1; }
.img-1{   grid-column: 2; }

/* Left tall ART JOURNAL: start at row 3, span 2 rows */
.artjournal{
  grid-column: 1;         /* left column */
  grid-row: 3 / span 2;   /* occupies rows 3 and 4 */
}

/* Right middle region is its own mini-layout */
.midright{
  grid-column: 2;         /* right column */
  grid-row: 3 / span 2;   /* same height as artjournal */

  display: grid;          /* nested grid inside the right column */
  gap: var(--gap);

  /* two inner columns:
     big content + skinny AIR DAYZ */
  grid-template-columns: 1fr var(--air-col);

  /* two inner rows:
     top auto height, bottom fills remaining height */
  grid-template-rows: auto 1fr;
}

/* CURSED OLD ART goes across both inner columns */
.cursed{
  grid-column: 1 / -1; /* span from first column to last column */
}

/* Bottom row: big image left, AIR DAYZ right */
.img-2{
  grid-column: 1;
  grid-row: 2;
}

.airdayz{
  grid-column: 2;
  grid-row: 2;
}

/* Bottom wide section spans the whole page width */
.archblog{
  grid-column: 1 / -1; /* span across both main columns */
}


/* =========================
   5) FOOTER
   ========================= */
.site-footer{
  margin-top: var(--gap); /* space above footer stamps */
}


/* =========================
   6) DEBUG OUTLINES (REMOVE LATER)
   ========================= */
.panel{
  outline: 1px dashed #999; /* helps you see the box edges while learning */
  padding: 12px;            /* space between border and content (for readability) */
  min-height: 120px;        /* gives panels some visible height even if empty */
}

.img{
  min-height: 220px;        /* images look nicer if they aren’t tiny */
}

.post{
  outline: 1px dashed #bbb;
  padding: 10px;
  margin-top: 10px;
}