/* ==========================================================================
   DESIGN TOKENS (Custom Properties)
   --------------------------------------------------------------------------
   These variables control the entire color palette and spacing grid for the
   site.  Changing a value here automatically updates every element that
   references it, so this is the single best place to start customizing.
   ========================================================================== */

:root {
  --lunar: #A8A9AD;            /* CHANGE: Background / neutral color used across the whole site */
  --cobalt: #0047AB;           /* CHANGE: Primary accent color for text, borders, and UI elements */
  --cobalt-faint: rgba(0, 71, 171, 0.32);  /* CHANGE: Semi-transparent accent used for dashed outlines (adjust the last number 0.32 for opacity) */
  --cobalt-ghost: rgba(0, 71, 171, 0.1);   /* CHANGE: Very faint accent tint for subtle hover fills (adjust the last number 0.1 for opacity) */

  /* Background grid: always scales with viewport, fills window edge-to-edge */
  --grid: calc(100vw / 25);   /* CHANGE: Number of columns in the background grid (change the 25 to add or remove columns) */

  /* Content sizing: caps at 50px so splash/tiles lock after ~1250px viewport.
     Below 1250px --cell == --grid (both scale). Above 1250px --cell stays 50px
     while --grid keeps growing -- content stays centered, grid grows around it. */
  --cell: min(50px, calc(100vw / 25)); /* CHANGE: Maximum cell size in pixels (50px) and column divisor (25) -- these control how large content blocks can grow */
}


/* ==========================================================================
   GLOBAL RESET
   --------------------------------------------------------------------------
   Strips default browser margins, padding, and switches to border-box so
   every element's width/height includes its padding and border.  You
   generally should not need to change anything here.
   ========================================================================== */

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

html, body {
  min-height: 100vh;
}


/* ==========================================================================
   BODY
   --------------------------------------------------------------------------
   Sets the base font, text color, and page background.  Every element
   inherits these unless overridden.
   ========================================================================== */

body {
  font-family: Arial, Helvetica, sans-serif; /* CHANGE: Base font family for the entire site */
  color: var(--cobalt);                       /* CHANGE: Default text color (uses the --cobalt token) */
  background-color: var(--lunar);             /* CHANGE: Page background color (uses the --lunar token) */
  letter-spacing: 0.5px;                      /* CHANGE: Default letter spacing for body text */
  overflow-x: hidden;
}


/* ==========================================================================
   GRID CANVAS
   --------------------------------------------------------------------------
   A full-screen fixed canvas drawn by JavaScript to create the blueprint-
   style grid lines in the background.  It sits behind all content (z-index 0)
   and ignores mouse events so it never blocks clicks.
   ========================================================================== */

#gridCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}


/* ==========================================================================
   CONTENT WRAPPER
   --------------------------------------------------------------------------
   Centers the main content area horizontally and caps its width so it never
   stretches beyond 23 grid cells.  The background grid keeps growing beyond
   this boundary while the actual content stays neatly centered.
   ========================================================================== */

.content-wrap {
  max-width: calc(var(--cell) * 23); /* CHANGE: Content area width in grid cells (23 cells) */
  margin: 0 auto;
}


/* ==========================================================================
   SHEET
   --------------------------------------------------------------------------
   The main content panel that sits on top of the grid canvas.  It spans the
   full viewport width and uses inset box-shadows to draw thin top/bottom
   border lines in the accent color instead of CSS borders.
   ========================================================================== */

.sheet {
  width: 100%;
  margin: 1px 0 0 0;                   /* CHANGE: Top margin that creates a 1px gap above the sheet */
  padding: var(--cell);                 /* CHANGE: Inner padding around the sheet content (one grid cell) */
  position: relative;
  z-index: 1;
  background-color: transparent;       /* CHANGE: Sheet background -- transparent lets the grid canvas show through */
  box-shadow:                          /* CHANGE: Border lines around the sheet (color set by --cobalt) */
    inset 0 1px 0 0 var(--cobalt),
    inset 0 -1px 0 0 var(--cobalt),
    0 1px 0 0 var(--cobalt),
    0 -1px 0 0 var(--cobalt);
}


/* ==========================================================================
   TOP BAR (Header / Navigation Bar)
   --------------------------------------------------------------------------
   The fixed-height strip at the top of every page.  It uses flexbox to push
   the brand name to the left and the navigation links to the right.  Its
   height matches one full grid row so it aligns with the background grid.
   ========================================================================== */

.top-bar {
  position: relative;
  width: 100%;
  height: calc(var(--grid) - 1px);     /* CHANGE: Bar height -- tied to one grid row minus 1px for the border */
  background-color: var(--lunar);       /* CHANGE: Top bar background color */
  color: var(--cobalt);                 /* CHANGE: Top bar text color */
  font-family: Arial, Helvetica, sans-serif; /* CHANGE: Top bar font family */
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;                      /* CHANGE: Horizontal padding inside the top bar (20px on each side) */
}


/* ==========================================================================
   BOTTOM BAR (Footer)
   --------------------------------------------------------------------------
   Mirrors the top bar in style and height.  Contains the title-block and
   lorem-tag widgets laid out with flexbox.  Sits at the bottom of each page
   as a footer strip.
   ========================================================================== */

.bottom-bar {
  position: relative;
  width: 100%;
  height: calc(var(--grid) - 1px);     /* CHANGE: Footer height -- matches the top bar */
  background-color: var(--lunar);       /* CHANGE: Footer background color */
  color: var(--cobalt);                 /* CHANGE: Footer text color */
  font-family: Arial, Helvetica, sans-serif; /* CHANGE: Footer font family */
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;                      /* CHANGE: Horizontal padding inside the footer (20px on each side) */
}

/* -- Bottom bar layout overrides --
   When the title-block and lorem-tag appear inside the footer, they become
   equal-width flex children and lose any absolute positioning so they sit
   side-by-side within the footer strip. */

.bottom-bar .title-block,
.bottom-bar .lorem-tag {
  position: static;
  margin: 0;
  flex: 1;
}

.bottom-bar .title-block {
  display: flex;
  justify-content: flex-end;
}

.bottom-bar .title-block span {
  flex: 1;
  text-align: center;
}

.bottom-bar .lorem-tag {
  text-align: center;
}


/* ==========================================================================
   BRAND NAME
   --------------------------------------------------------------------------
   The site name / logo text that appears in the top bar.  Styled as bold
   uppercase with wide letter spacing for a clean typographic identity.
   ========================================================================== */

.brand {
  font-size: 15px;          /* CHANGE: Brand name font size */
  font-weight: 700;         /* CHANGE: Brand name font weight (700 = bold) */
  letter-spacing: 2px;      /* CHANGE: Spacing between brand name letters */
  text-transform: uppercase;
}


/* ==========================================================================
   TOP NAVIGATION LINKS
   --------------------------------------------------------------------------
   The row of page links in the top bar.  Uses flexbox with a gap between
   each link.  Links inherit the accent color, have no underline, and fade
   out slightly on hover for a subtle interactive cue.
   ========================================================================== */

.top-nav {
  display: flex;
  gap: calc(var(--cell) / 2);           /* CHANGE: Spacing between navigation links (half a grid cell) */
}

.top-nav a {
  color: var(--cobalt);                  /* CHANGE: Navigation link color */
  text-decoration: none;
  font-size: 12px;                       /* CHANGE: Navigation link font size */
  letter-spacing: 2px;                   /* CHANGE: Navigation link letter spacing */
  text-transform: uppercase;
  transition: opacity 0.15s ease;        /* CHANGE: Hover fade speed (0.15 seconds) */
}

.top-nav a:hover {
  opacity: 0.6;                          /* CHANGE: Link opacity on hover (0.6 = 60% visible) */
}


/* ==========================================================================
   TITLE BLOCK
   --------------------------------------------------------------------------
   A small tabbed label strip used in headers and footers to display
   metadata (like dates, categories, or project names).  Each span inside
   acts as a separate "tab" separated by 1px accent-colored dividers drawn
   with inset box-shadows.
   ========================================================================== */

.title-block {
  display: flex;
  gap: 0;
  font-size: 9px;                       /* CHANGE: Title block text size */
  letter-spacing: 2px;                   /* CHANGE: Title block letter spacing */
  text-transform: uppercase;
  background-color: var(--lunar);        /* CHANGE: Title block background color */
  z-index: 3;
  box-shadow:                            /* CHANGE: Title block outer border (color set by --cobalt) */
    inset 0 0 0 1px var(--cobalt),
    0 0 0 1px var(--cobalt);
}

.title-block span {
  padding: 6px 14px;                     /* CHANGE: Padding inside each title block tab (6px top/bottom, 14px left/right) */
  box-shadow: inset -1px 0 0 var(--cobalt); /* Vertical divider between tabs */
}

.title-block span:last-child { box-shadow: none; }


/* ==========================================================================
   LOREM TAG
   --------------------------------------------------------------------------
   A standalone label widget similar to the title block but containing only
   a single text string.  Used for secondary metadata or descriptive tags
   in the top and bottom bars.
   ========================================================================== */

.lorem-tag {
  padding: 6px 14px;                    /* CHANGE: Padding inside the tag (6px top/bottom, 14px left/right) */
  font-size: 9px;                        /* CHANGE: Tag text size */
  letter-spacing: 2px;                   /* CHANGE: Tag letter spacing */
  text-transform: uppercase;
  background-color: var(--lunar);        /* CHANGE: Tag background color */
  z-index: 3;
  box-shadow:                            /* CHANGE: Tag outer border (color set by --cobalt) */
    inset 0 0 0 1px var(--cobalt),
    0 0 0 1px var(--cobalt);
}


/* ==========================================================================
   SPLASH (Hero Image Row)
   --------------------------------------------------------------------------
   The wide banner area at the top of the index page that displays up to
   three images side by side.  Each image flexes equally to share the
   available width.  The splash is sized in grid cells so it always aligns
   with the background grid.
   ========================================================================== */

.splash {
  position: relative;
  width: calc(var(--cell) * 23);         /* CHANGE: Splash width in grid cells (23 cells = full content width) */
  height: calc(var(--cell) * 11);        /* CHANGE: Splash height in grid cells (11 cells tall) */
  margin: 0 auto calc(var(--cell));      /* CHANGE: Bottom margin below the splash (one grid cell) */
  background-color: transparent;         /* CHANGE: Splash background -- transparent lets the grid show through */
  overflow: hidden;
  display: flex;
}

.splash img {
  flex: 1;
  min-width: 0;
  height: 100%;
  object-fit: contain;                   /* CHANGE: Image fit mode -- "contain" keeps the full image visible; use "cover" to fill the area and crop */
  display: block;
  padding: calc(var(--cell) * 0.6);      /* CHANGE: Inner padding around each splash image (0.6 of a grid cell) */
}


/* ==========================================================================
   TILE GRID (Project / Portfolio Grid)
   --------------------------------------------------------------------------
   A 2-column CSS Grid that holds the clickable project tiles on the index
   page.  Each tile is 11 cells wide and 9 cells tall so two tiles plus a
   one-cell gap fill the 23-cell content width exactly.
   ========================================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(2, calc(var(--cell) * 11)); /* CHANGE: Number of tile columns (2) and tile width in grid cells (11) */
  grid-auto-rows: calc(var(--cell) * 9);                     /* CHANGE: Tile height in grid cells (9 cells tall) */
  gap: var(--cell);                                          /* CHANGE: Gap between tiles (one grid cell) */
  justify-content: center;
}


/* ==========================================================================
   TILE (Individual Project Card)
   --------------------------------------------------------------------------
   Each tile is a clickable link that wraps a project image.  It has a
   subtle scale-down animation on click and a canvas-driven hover effect
   handled by JavaScript.  The tile itself is transparent so the grid lines
   show through behind the images.
   ========================================================================== */

.tile {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--cobalt);                  /* CHANGE: Tile text/icon color */
  background-color: transparent;         /* CHANGE: Tile background color */
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.18s ease, transform 0.18s ease; /* CHANGE: Hover/click animation speed (0.18 seconds) */
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;                   /* CHANGE: Tile image fit mode -- "contain" shows the full image; "cover" fills and crops */
  display: block;
  padding: calc(var(--cell) * 0.6);      /* CHANGE: Inner padding around each tile image (0.6 of a grid cell) */
  transition: filter 0.35s ease, opacity 0.35s ease; /* CHANGE: Hover filter animation speed (0.35 seconds) */
}

/* -- Canvas hover state --
   When the user hovers a tile, JavaScript adds the .canvas-hover class.
   The canvas draws a colored fill behind the image, while this CSS washes
   the image out so the canvas art shows through. */

.tile.canvas-hover img {
  filter: brightness(2.5) saturate(0);   /* CHANGE: Hover brightness (2.5) and saturation (0 = fully desaturated) */
  opacity: 0.7;                          /* CHANGE: Image opacity during hover (0.7 = 70% visible) */
}

/* -- Click feedback --
   A tiny scale-down on click gives the tile a tactile "press" feel. */

.tile:active {
  transform: scale(0.995);              /* CHANGE: Click scale factor (0.995 = shrinks to 99.5% -- lower values make the press more obvious) */
}


/* ==========================================================================
   DETAIL PAGE -- NAVIGATION ROW
   --------------------------------------------------------------------------
   The bar at the top of each detail page containing the back arrow button
   on the left and the page identifier label on the right.
   ========================================================================== */

.nav-row {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: var(--cell);                   /* CHANGE: Navigation row height (one grid cell) */
  margin-bottom: var(--cell);            /* CHANGE: Space below the nav row before the detail content */
  max-width: calc(var(--cell) * 23);     /* CHANGE: Nav row max width in grid cells (23) */
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================================
   BACK BUTTON
   --------------------------------------------------------------------------
   A square button (one grid cell wide and tall) containing a left-arrow
   SVG icon.  It links back to the index page.  On hover the background
   fills with a faint tint of the accent color.
   ========================================================================== */

.back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cell);                    /* CHANGE: Back button width (one grid cell) */
  height: var(--cell);                   /* CHANGE: Back button height (one grid cell) */
  text-decoration: none;
  color: var(--cobalt);                  /* CHANGE: Back arrow icon color */
  background-color: var(--lunar);        /* CHANGE: Back button default background color */
  transition: background-color 0.15s ease; /* CHANGE: Hover transition speed (0.15 seconds) */
  box-shadow:                            /* CHANGE: Back button border (color set by --cobalt) */
    inset 0 0 0 1px var(--cobalt),
    0 0 0 1px var(--cobalt);
}

.back svg {
  width: 18px;                           /* CHANGE: Back arrow icon width */
  height: 18px;                          /* CHANGE: Back arrow icon height */
  display: block;
}

.back:hover {
  background-color: var(--cobalt-ghost); /* CHANGE: Back button hover fill color (uses the --cobalt-ghost token) */
}


/* ==========================================================================
   PAGE IDENTIFIER
   --------------------------------------------------------------------------
   A small label on the right side of the nav row that shows the current
   page name or number.  Styled to match the title-block aesthetic with
   uppercase text and accent-colored borders.
   ========================================================================== */

.page-id {
  display: flex;
  align-items: center;
  height: var(--cell);
  padding: 0 calc(var(--cell) / 2);     /* CHANGE: Horizontal padding inside the page ID label (half a grid cell) */
  background-color: var(--lunar);        /* CHANGE: Page ID background color */
  font-size: 10px;                       /* CHANGE: Page ID text size */
  letter-spacing: 3px;                   /* CHANGE: Page ID letter spacing */
  text-transform: uppercase;
  box-shadow:                            /* CHANGE: Page ID border (color set by --cobalt) */
    inset 0 0 0 1px var(--cobalt),
    0 0 0 1px var(--cobalt);
}


/* ==========================================================================
   DETAIL LAYOUT
   --------------------------------------------------------------------------
   A two-column CSS Grid that places a large image on the left and a text
   card on the right.  The image column is 13 cells wide and the text
   column is 9 cells wide, with a one-cell gap between them totaling 23
   cells (matching the content wrapper width).
   ========================================================================== */

.detail {
  display: grid;
  grid-template-columns: calc(var(--cell) * 13) calc(var(--cell) * 9); /* CHANGE: Image column width (13 cells) and text column width (9 cells) */
  gap: var(--cell);                      /* CHANGE: Gap between the image and text columns (one grid cell) */
  align-items: start;
  max-width: calc(var(--cell) * 23);     /* CHANGE: Detail section max width in grid cells (23) */
  margin: 0 auto;
}


/* ==========================================================================
   DETAIL IMAGE
   --------------------------------------------------------------------------
   The large square image container on the detail page.  It is 13 cells
   wide and 13 cells tall, creating a perfect square.  The image inside
   uses object-fit: contain so it scales proportionally within the box
   without cropping.
   ========================================================================== */

.detail-image {
  position: relative;
  width: calc(var(--cell) * 13);         /* CHANGE: Detail image container width (13 grid cells) */
  height: calc(var(--cell) * 13);        /* CHANGE: Detail image container height (13 grid cells) */
  background-color: var(--lunar);        /* CHANGE: Background color behind the detail image */
  overflow: hidden;
}

.detail-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;                   /* CHANGE: Image fit mode -- "contain" for full image, "cover" to fill and crop */
  display: block;
  padding: calc(var(--cell) / 2);        /* CHANGE: Padding around the detail image (half a grid cell) */
}


/* ==========================================================================
   TEXT CARD
   --------------------------------------------------------------------------
   The editable text area beside the detail image.  It contains a textarea
   element where the user can type descriptions, notes, or any text content.
   The textarea has a dashed outline by default that turns solid on focus,
   and text selection uses the accent color scheme.
   ========================================================================== */

.text-card {
  position: relative;
  width: calc(var(--cell) * 9);          /* CHANGE: Text card width (9 grid cells) */
  height: calc(var(--cell) * 13);        /* CHANGE: Text card height (13 grid cells -- matches the image height) */
  padding: calc(var(--cell) / 2);        /* CHANGE: Padding around the textarea inside the card (half a grid cell) */
  background-color: var(--lunar);        /* CHANGE: Text card background color */
}

.text-card textarea {
  width: 100%;
  height: 100%;
  background-color: transparent;         /* CHANGE: Textarea background -- transparent lets the card color show through */
  border: none;
  outline: 1px dashed var(--cobalt-faint); /* CHANGE: Dashed outline around the textarea (color set by --cobalt-faint) */
  color: var(--cobalt);                  /* CHANGE: Textarea text color */
  font-family: Arial, Helvetica, sans-serif; /* CHANGE: Textarea font family */
  font-size: 14px;                       /* CHANGE: Textarea font size */
  line-height: 1.6;                      /* CHANGE: Textarea line height / spacing between lines (1.6 = 160% of font size) */
  padding: 12px;                         /* CHANGE: Inner padding inside the textarea */
  resize: none;
  letter-spacing: 0.3px;                 /* CHANGE: Textarea letter spacing */
}

/* -- Focus state --
   When the user clicks into the textarea, the dashed outline becomes a
   solid line to clearly indicate the active editing area. */

.text-card textarea:focus {
  outline: 1px solid var(--cobalt);      /* CHANGE: Focused textarea outline style and color */
}

/* -- Text selection colors --
   Highlighted text uses the accent color as the background and the neutral
   color for the text, inverting the normal color scheme. */

.text-card textarea::selection {
  background-color: var(--cobalt);       /* CHANGE: Text selection highlight color */
  color: var(--lunar);                   /* CHANGE: Selected text color */
}


/* ==========================================================================
   RESPONSIVE -- TABLET BREAKPOINT (900px and below)
   --------------------------------------------------------------------------
   At narrower viewports the grid switches from 25 columns down to 15 and
   the layout collapses: the splash images stack vertically, the tile grid
   becomes a single column, and the detail page stacks the image on top of
   the text card.
   ========================================================================== */

@media (max-width: 900px) {              /* CHANGE: Tablet breakpoint width (900px) */
  :root {
    --grid: calc(100vw / 15);            /* CHANGE: Grid column count for tablet (15 columns) */
    --cell: calc(100vw / 15);            /* CHANGE: Cell size for tablet (no max cap -- scales with viewport) */
  }

  .sheet {
    width: calc(var(--cell) * 15);       /* CHANGE: Sheet width for tablet (15 grid cells) */
  }

  .splash {
    width: calc(var(--cell) * 13);       /* CHANGE: Splash width for tablet (13 grid cells) */
    height: calc(var(--cell) * 8);       /* CHANGE: Splash height for tablet (8 grid cells) */
    flex-direction: column;              /* Images stack vertically instead of side by side */
  }

  .grid {
    grid-template-columns: calc(var(--cell) * 13); /* CHANGE: Single column tile width for tablet (13 grid cells) */
    grid-auto-rows: calc(var(--cell) * 8);          /* CHANGE: Tile height for tablet (8 grid cells) */
  }

  .detail {
    grid-template-columns: calc(var(--cell) * 13); /* CHANGE: Detail layout switches to single column (13 grid cells) */
    gap: var(--cell);
  }

  .detail-image,
  .text-card {
    width: calc(var(--cell) * 13);       /* CHANGE: Image and text card width for tablet (13 grid cells) */
  }

  .text-card {
    height: calc(var(--cell) * 8);       /* CHANGE: Text card height for tablet (8 grid cells) */
  }
}


/* ==========================================================================
   RESPONSIVE -- SMALL PHONE BREAKPOINT (560px and below)
   --------------------------------------------------------------------------
   At very narrow screens the title block text shrinks slightly and its
   padding tightens so the tabs still fit without wrapping or overflowing.
   ========================================================================== */

@media (max-width: 560px) {              /* CHANGE: Small phone breakpoint width (560px) */
  .title-block {
    font-size: 8px;                      /* CHANGE: Title block text size on small phones */
  }
  .title-block span {
    padding: 5px 10px;                   /* CHANGE: Title block tab padding on small phones (5px top/bottom, 10px left/right) */
  }
}