/* ============================================================
   AMY MYAN — shared design settings
   ============================================================
   This file controls the look of EVERY page (fonts, colors,
   background, nav bar, footer, and the photo grid pages).
   Change something here and it updates the whole site at once.
   ============================================================ */

@import url('galaxy.css');

:root{
  /* ---- COLORS ----
     Every color on the site is named here once, so you only
     ever need to change it in ONE place. */
  --paper:   #FFFFFF;   /* page background — pure white */
  --ink:     #000000;   /* all normal text — pure black */
  --line:    #E7E7E7;   /* light gray used ONLY for empty photo
                             placeholders and thin divider lines
                             (kept slightly gray on purpose —
                             pure white would make them invisible) */
  --flash:   #E88FB2;   /* pink — ONLY used when you hover over a
                             link. Change this hex code to change
                             the hover color site-wide. */

  /* ---- FONTS ----
     All three are set to Times New Roman. If you ever want a
     different font for headings vs body text, change these to
     two different values (e.g. --display: 'Georgia', serif;) */
  --display: 'Times New Roman', Times, serif;
  --body:    'Times New Roman', Times, serif;
  --mono:    'Times New Roman', Times, serif;

  --nav-wordmark-size: clamp(1.95rem, 4.5vw, 2.5rem);
  --nav-link-size: clamp(0.95rem, 1.7vw, 1.12rem);
}

/* Reset: makes sure padding/borders don't make elements bigger
   than the width/height you set on them. Leave this alone. */
*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;

  /* ---- CURSOR ----
     Points at assets/cursor.png — put your sparkle image there
     (see the README for how to save it locally). "auto" after
     the comma is the fallback normal arrow, used only if the
     image fails to load. The two numbers (12 12) are the pixel
     inside the image that counts as the actual click point —
     leave them roughly in the middle of the image. */
  cursor:url('../assets/cursor.png') 12 12, auto;
}

a{
  color:inherit;       /* links start out the same color as normal text (black) */
  text-decoration:none;

  /* A different sparkle cursor specifically for anything clickable.
     This is set directly on links (rather than just relying on the
     one on html/body above) because browsers often show their own
     built-in "pointer" cursor over links, which can silently
     override an inherited custom cursor. Save your second sparkle
     image as assets/cursor-hover.png to use here. */
  cursor:url('../assets/cursor-hover.png') 12 12, pointer;
}
a:hover{
  color:var(--flash);  /* every link on the site turns pink on hover */
}

/* Buttons (e.g. in organizer.html) get the same hover cursor. */
button{
  cursor:url('../assets/cursor-hover.png') 12 12, pointer;
}

/* ---------- top nav, shared across every page ---------- */

.site-nav{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.35rem;
  padding:1.4rem clamp(1.25rem, 4vw, 3rem) 1rem;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  text-align:center;
}

.site-nav .wordmark{
  font-family:var(--display);
  font-style:normal;
  font-weight:bold;
  font-size:var(--nav-wordmark-size);
  letter-spacing:0.02em;
  white-space:nowrap;
  text-transform:none;
  display:inline-block;
  line-height:1.2;
}

.site-nav .wordmark-name{
  text-transform:uppercase;
}

/* Decorative stars — emoji/symbol font so ✮⋆˙ render at the right size */
.site-nav .wordmark-deco{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-weight:normal;
  font-size:0.92em;
  letter-spacing:0.03em;
}

.site-nav .nav-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1.75rem;
  font-family:var(--mono);
  font-size:var(--nav-link-size);
  letter-spacing:0.03em;
}

.site-nav .nav-links a{
  position:relative;
  padding-bottom:2px;
  opacity:0.75;
  transition:opacity 0.2s ease;
}
.site-nav .nav-links a:hover,
.site-nav .nav-links a[aria-current="page"]{ opacity:1; }

/* underline under whichever nav link matches the current page */
.site-nav .nav-links a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-3px;
  height:1px;
  background:var(--ink);
}

/* Homepage — wordmark only, no tab row */
.page-home .site-nav .nav-links{
  display:none;
}

.page-home .site-nav{
  gap:0;
  padding-bottom:0.85rem;
}

.page-home{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
}

.page-home .site-footer{
  margin-top:auto;
}

/* ---------- footer ---------- */

.site-footer{
  padding:2.5rem clamp(1.25rem, 4vw, 3rem) 3rem;
  border-top:1px solid var(--line);
  margin-top:4rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
  font-family:var(--mono);
  font-size:0.75rem;
  opacity:0.7;
}

/* ---------- generic page heading (currently only used by
   organizer.html — the public pages no longer show a title) ---------- */

.page-head{
  padding:3rem clamp(1.25rem, 4vw, 3rem) 1.5rem;
}
.page-head h1{
  font-family:var(--display);
  font-weight:bold;
  font-style:normal;
  font-size:clamp(2rem, 5vw, 3.25rem);
  margin:0 0 0.4rem;
}
.page-head p{
  font-family:var(--mono);
  font-size:0.8rem;
  opacity:0.65;
  margin:0;
}

/* ---------- simple gallery grid (portrait / video pages) ----------
   To change how many photos fit per row, edit the "240px" below —
   a bigger number = fewer, larger photos per row. */

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:0.4rem;
  padding:2rem clamp(1.25rem, 4vw, 3rem) 3rem;
}

.gallery-grid figure{
  margin:0;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--line); /* light gray box shown while a photo loads */
}

.gallery-grid img,
.gallery-grid video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.5s ease;
}

.gallery-grid figure:hover img,
.gallery-grid figure:hover video{
  transform:scale(1.03); /* subtle zoom-in on hover */
}

.empty-note{
  font-family:var(--mono);
  font-size:0.8rem;
  opacity:0.6;
  padding:0 clamp(1.25rem, 4vw, 3rem) 3rem;
}