/* ============================================
   RESET / BASICS
   Browsers add their own default margins etc.
   This just clears that so we start from zero.
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================
   SCROLL SNAP
   Makes any scroll past the hero jump straight to the top of the
   tabs, instead of stopping wherever the user happens to let go.
   ============================================ */
html {
  /* "y" = snapping only applies to vertical scrolling.
     "mandatory" = the browser MUST settle on a snap point after
     every scroll gesture — it can't leave you stopped halfway
     between two of them. That's what creates the "jump" feeling. */
  scroll-snap-type: y mandatory;

  /* Animates the jump instead of teleporting instantly. Remove this
     line if you'd rather it snap immediately with no animation. */
  scroll-behavior: smooth;
}

body {
  font-family: Georgia, 'Times New Roman', serif;
  color: #2a2a2a;
  line-height: 1.6;

  /* ---- SITE-WIDE BACKGROUND ----
     This sits behind literally everything, including the hero gif,
     because a plain CSS background is always the bottom-most layer —
     no z-index needed to keep it beneath the hero.

     Works the same whether the file is a .jpg, .png, or .gif —
     the browser just displays it, animating automatically if the
     file itself contains animation. */
  background-image: url('background.jpg');
  background-size: cover;        /* scales it to fill the screen */
  background-position: center;   /* keeps it centered while scaling */
  background-attachment: fixed;  /* locks it in place, doesn't scroll with the page */
  background-color: #e8e3d3;     /* fallback color, shows while the image loads or if it's missing */
}

/* ============================================
   HERO
   ============================================ */

/* The header reserves 100% of the browser window's height at
   the top of the page. It doesn't scroll — it's just a spacer
   that lets the fixed image below show through untouched at first. */
.hero {
  height: 100vh;
  position: relative;

  /* "start" means: when this element becomes a snap target, align
     its TOP edge with the top of the screen. This is the first of
     the two snap points on the page. */
  scroll-snap-align: start;
}

/* This is the actual trick: position: fixed takes the image out of
   the normal page flow and locks it to the browser window. It will
   NOT move when the user scrolls — everything else scrolls over it. */
.hero-image {
  position: fixed;

  /* POSITION: top/left define where the image's CENTER point sits,
     as a percentage of the viewport. left stays 50% to keep it
     centered horizontally. Lowering "top" below 50% moves it up
     the screen — 35% puts its center a bit above the middle.
     Nudge this number to taste; smaller = higher up. */
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* SIZE: this is the separate knob for how big it displays.
     max-width was 100% (its real pixel size, no upscaling). Dropping
     it to 60% caps it at 60% of that real size — i.e. shrinks it.
     Lower the percentage for smaller, raise it for bigger. Since
     width/height below are "auto," the image still keeps its own
     aspect ratio automatically — you won't squash it by changing
     just this one number. */
  width: auto;
  height: auto;
  max-width: 60%;
  max-height: 60vh;

  z-index: -1;          /* sits behind every other element on the page */
}

.hero-caption {
  /* POSITION: this box is placed relative to the hero's corners.
     Right now it's anchored bottom-left via the two lines below.
     To move it, change which sides you set — e.g. swap "bottom"
     for "top" to anchor from the top instead, or adjust the
     values/units (3rem, 1.5rem) to nudge it closer or further
     from that edge. */
  position: absolute;
  bottom: 3rem;
  left: 30rem;
  color: #000000;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.hero-caption h1 {
  /* The gothic font, with a plain serif fallback in case the Google
     Fonts file fails to load for any reason (slow connection, offline). */
  font-family: 'Pirata One', Georgia, serif;

  font-size: 5.5rem;      /* text size — raise/lower this number */
  font-weight: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  /* color is currently inherited from .hero-caption below (#000000,
     black). To change just the heading's color without affecting
     anything else in .hero-caption, add a "color: #yourcolor;" line
     right here. */

  /* Needed so the ::before copy below can be positioned relative to
     THIS element specifically, and layered above it (z-index) rather
     than above the whole page. display: inline-block shrinks this
     box down to just the size of the text itself, so the centering
     trick in ::before lines up on the actual letters. */
  position: relative;
  display: inline-block;
  z-index: 1;
}

/* This is the "border." ::before generates a second, independent
   copy of the same text (content comes from the data-text attribute
   that script.js fills in) sitting directly behind the real heading.
   Making it a bit bigger means its edges peek out past the real
   text on every side — that peeking-out sliver IS the border look. */
.hero-caption h1::before {
  content: attr(data-text);

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* keeps it centered on the real text as it grows */

  /* 1.08 = 8% bigger than the real text. Raise this (e.g. 1.15) for
     a thicker-looking border, lower it (e.g. 1.03) for a thinner one. */
  font-size: 1.03em;

  /* This is the border's color — change this hex to whatever you want
     the outline itself to look like. */
  color: #ffd700;

  z-index: -1;              /* sits behind the real text */
  white-space: nowrap;      /* keeps it on one line, matching the real text */
  pointer-events: none;     /* so it can't be accidentally selected/clicked */

  /* Copy the same font settings so both layers match exactly in
     everything except size and color. */
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* ============================================
   TABS
   ============================================ */

/* This is the second snap point — the tabs and content, grouped
   as one unit so scrolling lands with the tabs' top edge exactly at
   the top of the screen. Being a plain block-level wrapper (no
   position/height tricks), it doesn't affect layout at all — .tabs
   and .content inside it still stack normally, one directly after
   the other, so there's no way for them to overlap. */
.page-body {
  scroll-snap-align: start;
}

.tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 0.5rem;
  padding: 1rem 2rem;

  /* Slightly transparent so the fixed hero image still shows through
     faintly behind the nav bar, instead of hiding it completely.
     Last number (0–1) is the transparency — lower it for more see-through. */
  background: rgba(120, 130, 145, 0.5);
  border-bottom: 1px solid #d8d3c4;
}

.tab-button {
  font-family: 'Pirata One', Georgia, serif;
  font-size: 3rem;
  font-weight: 1000;      /* was inheriting normal weight — this thickens the letters themselves */
  background: none;
  border: 2px solid transparent;
  padding: 0.5rem 1rem;
  cursor: pointer;
  color: #141414;        /* darker than before (#2a2a2a), for more contrast against the panel */

  /* A subtle light glow behind the letters — this is what makes text
     sitting on a translucent, busy background read as "solid" rather
     than washed out. It's not changing the panel's transparency at
     all, just lifting the text visually off of it. */
  text-shadow: 0 0 6px rgba(255,215,0, 1);
}

.tab-button:hover {
  border-color: #999;
}

/* Added/removed by script.js when a tab is clicked */
.tab-button.active {
  border-color: #2a2a2a;
  font-weight: 800;   /* heavier than the base 600, so the active tab still stands apart */
}

/* ============================================
   CONTENT
   ============================================ */

.content {
  position: relative;
  /* Same idea as the nav — lower this number for more of the
     background image to show through behind the text. */
  background: rgba(120, 130, 145, 0.6);
  min-height: 100vh;
  padding: 2rem;
}

.tab-panel {
  display: none;
  max-width: 700px;
  margin: 0 auto;
}

.tab-panel.active {
  display: block;
}

/* Same idea as .tab-button above: this only affects how bold/solid
   the letters themselves look, nothing about the panel's own
   transparency (that's still controlled by .content's background
   rgba value further up). */
.tab-panel p {
  font-weight: 600;
  color: #141414;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.tab-panel h2 {
  font-family: 'Pirata One', Georgia, serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #141414;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.entry {
  margin-top: 2rem;
}

/* The clickable preview button (title + date + teaser). Reset to
   look like plain text rather than a button, since visually it
   should read as part of the page, not as UI chrome. */
.reader-open {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.reader-open:hover h3 {
  text-decoration: underline;
}

.entry h3 {
  font-family: 'Pirata One', Georgia, serif;
  font-weight: 600;
  color: #141414;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.entry-excerpt {
  font-weight: 600;
  color: #141414;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.entry-meta {
  font-family: 'Pirata One', Georgia, serif;
  font-size: 0.85rem;
  color: #777;
  margin-bottom: 0.5rem;
}

/*
  READER (full-screen reading view)
  overflow-y: auto lets long essays scroll within the overlay itself
  — unlike the lightbox, which just centers one fixed-size image,
  this needs to handle text of any length.
*/
.reader {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  z-index: 100;
  overflow-y: auto;
  padding: 5rem 2rem 4rem;
}

.reader.active {
  display: block;
}

.reader-content {
  max-width: 650px;   /* narrower than a full screen — long lines of text are harder to read */
  margin: 0 auto;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.8;
  color: #f2ede0;      /* light text, since the reader's background is dark, unlike the rest of the page */
}

.reader-content h3 {
  font-family: 'Pirata One', Georgia, serif;
  font-size: 2rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.reader-content .entry-meta {
  color: #aaa;
  text-shadow: none;
  margin-bottom: 2rem;
}

.reader-content p {
  margin-bottom: 1.2rem;
  font-weight: normal;   /* overrides the bold/glow styling those <p> tags have out on the page itself */
  text-shadow: none;
}

.reader-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 101;   /* above .reader-content so it's always clickable even if text scrolls under it */
}

.art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Each thumbnail is a <button> (see the HTML), so this resets the
   default button look — no border/background of its own — and
   makes the image inside it fill the square evenly. */
.art-thumb {
  aspect-ratio: 1 / 1;
  border: none;
  padding: 0;
  background: #ddd8c8;   /* shows briefly while the image loads, or if it fails to load */
  cursor: pointer;
  overflow: hidden;      /* clips the image to the square instead of letting it spill out */
}

.art-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* fills the square, cropping to fit — fine here since these are meant to fill their grid cell */
  display: block;
  transition: transform 0.2s ease;
}

/* A small hover "lift" — purely a nice-to-have hint that the piece
   is clickable. Delete this rule if you'd rather it stay still. */
.art-thumb:hover img {
  transform: scale(1.05);
}

/*
  LIGHTBOX (the full-screen click-to-view overlay)
  Hidden by default via display: none. script.js adds the "active"
  class when a thumbnail is clicked, which is the only thing that
  makes it visible — see .lightbox.active below.
*/
.lightbox {
  display: none;
  position: fixed;
  inset: 0;                        /* shorthand for top/right/bottom/left: 0 — covers the full screen */
  background: rgba(0, 0, 0, 0.92); /* dark backdrop so the art is the focus */
  z-index: 100;                    /* above literally everything else on the page */
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.lightbox.active {
  display: flex;
}

.lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;  /* shows the whole piece, uncropped */
}

.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
}

/* ============================================
   SMALL SCREENS
   ============================================ */
@media (max-width: 600px) {
  .tabs {
    flex-wrap: wrap;
    padding: 1rem;
  }

  .hero-caption {
    left: 1.5rem;
    bottom: 1.5rem;
  }
}