/* ============================================
   emily.land — main stylesheet

   This file controls the look and feel of
   every page on the site. Individual pages
   can add their own styles, but anything
   shared (colors, fonts, layout, footer)
   lives here.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=Lora:ital,wght@0,400;0,500;1,400&family=DM+Mono:wght@400;500&display=swap');

/* This line loads the fonts from Google Fonts.
   We're using three:
   - Playfair Display → big headings, the site title
   - Lora → body text, paragraphs
   - DM Mono → small labels, the monospace details */


/* ---- TOKENS ----------------------------------------
   Named colors used throughout the site.
   Change a value here and it updates everywhere.

   --background       → main page background (white)
   --background-alt   → slightly off-white, for subtle contrast
   --font-1           → darkest text, near-black with orchid warmth
   --font-2           → body text, deep orchid-tinted dark
   --font-3           → muted labels and hints
   --accent-1         → Velvet Orchid #7E2E84
   --accent-1-light   → lighter orchid tint
   --accent-2         → Blush Rose #DE6C83
   --accent-2-light   → lighter rose tint
   --accent-3         → Royal Gold #F8E16C
   --accent-3-light   → lighter gold tint
   --accent-4         → Pacific Blue #66999B
   --accent-5         → Sky Blue #72DDF7
   --border           → pacific blue at low opacity for lines
   ---------------------------------------------------- */
:root {
  --background: #CCE9F5;       /* deeper sky blue — white clouds read clearly against this */
  --background-alt: #B8DCF0;   /* slightly deeper for hover states */
  --font-1: #1A0D1C;
  --font-2: #4A2E52;
  --font-3: #7A9EA3;
  --accent-1: #7E2E84;
  --accent-1-light: #A55CAB;
  --accent-2: #DE6C83;
  --accent-2-light: #EA9AAB;
  --accent-3: #F8E16C;
  --accent-3-light: #FBF0A8;
  --accent-4: #66999B;
  --accent-5: #72DDF7;
  --border: rgba(102,153,155,0.3);
}


/* ---- RESET ------------------------------------------
   Zeros out browser default margins, padding, and
   box-sizing so every browser starts from the same place.
   ---------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }


/* ---- BASE / BODY ------------------------------------
   background-color  → clean white so tile colors pop
   color             → default text color for everything
   font-family       → Lora as default, with serif fallbacks
   min-height        → fills the screen even on short pages
   overflow-x hidden → no accidental horizontal scrollbar
   position relative → needed for the ::after border frame
   ---------------------------------------------------- */
body {
  background-color: var(--background);
  color: var(--font-1);
  font-family: 'Lora', Georgia, serif;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}


/* ---- DECORATIVE CLOUD FRAME -------------------------
   The cloud frame is handled by a fixed SVG overlay
   injected directly into the HTML (see index.html).
   No CSS border frame needed anymore.
   ---------------------------------------------------- */


/* ---- PAGE LAYOUT ------------------------------------
   .page wraps all visible content on every page.
   max-width: 900px   → stops content stretching too wide
   margin: 0 auto     → centers horizontally
   padding            → breathing room inside the border frame
   ---------------------------------------------------- */
.page {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}


/* ---- CORNER ORNAMENTS -------------------------------
   Replaced by the cloud frame SVG overlay in HTML.
   ---------------------------------------------------- */

/* ---- CLOUD FRAME ------------------------------------
   A fixed SVG overlay that sits on top of everything,
   framing the page like clouds around a window.
   position: fixed keeps it on screen as you scroll —
   intentional, so it feels like a portal/window frame.
   pointer-events: none means it never blocks clicks.
   ---------------------------------------------------- */
.cloud-frame {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  pointer-events: none;
}


/* ---- ORNAMENT COMPONENTS ----------------------------
   The decorative line-diamond-line elements used in
   the header and footer.

   .ornament-line     → a thin line fading from transparent
                        to accent-1 (orchid)
   .ornament-diamond  → small rotated square in accent-1
   ---------------------------------------------------- */
.header-ornament,
.footer-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.ornament-line {
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent-1));
}
.ornament-line.right {
  background: linear-gradient(to left, transparent, var(--accent-1));
}

.ornament-diamond {
  width: 6px;
  height: 6px;
  background: var(--accent-1);
  transform: rotate(45deg);
  flex-shrink: 0;
}


/* ---- SHARED TYPOGRAPHY ------------------------------
   .section-label → small all-caps monospace label used
   above sections. letter-spacing spreads the letters wide.
   ---------------------------------------------------- */
.section-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--font-3);
  text-align: center;
  margin-bottom: 2rem;
}


/* ---- FOOTER -----------------------------------------
   Shared footer on every page.
   Fades in last (1s delay) via the fadeUp animation.
   ---------------------------------------------------- */
footer {
  text-align: center;
  padding-top: 3rem;
  opacity: 0;
  animation: fadeUp 0.9s ease forwards 1s;
}

.footer-line {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: var(--border);
}

.footer-text {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--font-3);
}


/* ---- ANIMATION --------------------------------------
   fadeUp: fades elements in while moving them upward.
   opacity 0→1 and translateY 14px→0 happen together.
   Elements use animation-delay to stagger their appearance.
   ---------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ---- RESPONSIVE / MOBILE ----------------------------
   On screens 560px or narrower: reduce padding,
   shrink the border frame inset, and scale down corners.
   ---------------------------------------------------- */
@media (max-width: 560px) {
  .page { padding: 2rem 1.25rem 4rem; }
  body::after { inset: 8px; }
  .corner { width: 28px; height: 28px; }
}