/* ============================================================================
   THE PALETTE — palette.css  (SHARED STYLES)
   ----------------------------------------------------------------------------
   This is the "global" stylesheet. BOTH pages on your site link to it:
   the homepage (index.html) and each entry page (entry.html).

   Putting shared styles in ONE file means you change a colour or font in a
   single place and every page updates. That's why it's separate from the
   page-specific styles that live inside each HTML file.
   ========================================================================== */


/* ----------------------------------------------------------------------------
   1) WEB FONTS
   Loads "Bodoni Moda" (the elegant magazine serif) and "Mulish" (the quiet
   body sans) from Google Fonts. Without this line the browser would fall back
   to a default font and the whole editorial look would be lost.
   ---------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Mulish:ital,wght@0,300..700;1,300..600&display=swap');


/* ----------------------------------------------------------------------------
   2) DESIGN TOKENS (CSS variables)
   ":root" is the whole document. Anything defined here with "--name" becomes
   a reusable variable you call later with var(--name).
   WHY: define your colours, fonts and spacing ONCE here, reuse everywhere.
   Change a value here and it updates across the entire site instantly.
   ---------------------------------------------------------------------------- */
:root {
  --paper: #F4EEE1;      /* airy warm white — main canvas */
  --bone: #EDE7D7;       /* bone white — cover canvas */
  --cream: #EBE2D0;      /* deeper parchment — cards / accents */
  --cream-2: #E0D5BF;    /* rules / hairlines (thin divider lines) */
  --ink: #23201B;        /* near-black — main text colour */
  --ink-soft: #4A4236;   /* softer brown-black — secondary text */
  --serif: "Bodoni Moda", Georgia, serif;          /* headline / display font */
  --sans: "Mulish", -apple-system, system-ui, sans-serif; /* body / label font */
  --fan-h: 14px;         /* height of the colour strip fixed at the bottom */
  --gutter: clamp(22px, 6vw, 110px); /* page side-padding: grows with screen */
}


/* ----------------------------------------------------------------------------
   3) GLOBAL RESET
   "box-sizing: border-box" makes width include padding + border, so boxes
   never blow out their size unexpectedly. Applied to "*" (every element).
   WHY: makes layout math predictable — a 300px box stays 300px.
   ---------------------------------------------------------------------------- */
* { box-sizing: border-box; }


/* ----------------------------------------------------------------------------
   4) PAGE BASELINE
   Sets the default background, text colour and body font for the whole page,
   removes the browser's default margin, and turns on nicer font rendering.
   "overflow-x: clip" stops sideways scrolling when something (like the sliding
   photobooth) briefly pokes past the right edge.
   ---------------------------------------------------------------------------- */
html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;   /* smoother text on Mac/Safari */
  text-rendering: optimizeLegibility;    /* better letter spacing/ligatures */
}

/* Links inherit the surrounding text colour and drop the default underline,
   so they look like editorial type, not classic blue web links. */
a { color: inherit; text-decoration: none; }


/* ----------------------------------------------------------------------------
   5) PAPER TEXTURE
   Adds a faint dotted grain over cream surfaces so they read like aged paper
   instead of a flat digital white. The dots are drawn with a repeating
   radial-gradient — no image file needed.
   ---------------------------------------------------------------------------- */
.paper {
  background-color: var(--paper);
  background-image: radial-gradient(rgba(35,32,27,0.020) 1px, transparent 1px);
  background-size: 4px 4px;   /* spacing of the dot grid */
}


/* ----------------------------------------------------------------------------
   6) TYPE HELPERS
   Small reusable text styles you can drop onto any element by adding a class.
   ---------------------------------------------------------------------------- */

/* ".kicker" = the tiny ALL-CAPS, wide-spaced labels (e.g. "A COLOUR DIARY"). */
.kicker {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.34em;   /* wide tracking gives the editorial label feel */
  text-transform: uppercase;
}

/* ".display" = big serif headline styling (tight leading, balanced wrapping).
   "white-space: pre-line" lets a line-break you type in the text actually
   show as a break on screen. */
.display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.014em;
  white-space: pre-line;
  text-wrap: balance;        /* evens out ragged multi-line headlines */
}

/* Quick helper for italic serif phrases used as accents. */
.serif-italic { font-family: var(--serif); font-style: italic; font-weight: 500; }


/* ----------------------------------------------------------------------------
   7) IMAGE PLACEHOLDER (".ph")
   Every spot where a real photo will eventually go uses this striped grey box.
   The diagonal stripes are a repeating-linear-gradient; the label text comes
   from a "data-label" attribute shown via the ::after pseudo-element.
   WHY: lets you design the layout now and drop real photos in later without
   the page collapsing.
   ---------------------------------------------------------------------------- */
.ph {
  position: relative;                    /* so the label can sit on top */
  display: block;
  background-color: #C7BDAB;             /* greige photographic slot */
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(35,32,27,0.060) 0 1px,
    transparent 1px 12px
  );
  border: 1px solid var(--cream-2);
  overflow: hidden;
  color: var(--ink-soft);
}
/* Draws the little monospace caption (e.g. "01 — STILL LIFE — JPEG") that
   tells you what photo belongs in each slot. */
.ph::after {
  content: attr(data-label);             /* pulls text from data-label="..." */
  position: absolute; left: 12px; top: 12px;
  font-family: "Courier New", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  padding: 5px 8px;
  background: rgba(244,238,225,0.92);
  max-width: calc(100% - 24px);
}
/* Dark version of the placeholder — used when a B&W photo sits on a colour
   field and needs light stripes/label instead of dark ones. */
.ph.dark {
  background-color: #2B2926;
  background-image: repeating-linear-gradient(
    -45deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 12px);
  border-color: rgba(255,255,255,0.16);
  color: #ded8cb;
}
.ph.dark::after { background: rgba(18,17,15,0.7); color: #e9e3d6; }


/* ----------------------------------------------------------------------------
   8) ARCHIVAL CAPTION (".cap")
   The small typewriter-style metadata lines (dates, "A VISUAL DIARY", etc.)
   that give the site its catalogued, magazine-archive feel.
   ---------------------------------------------------------------------------- */
.cap {
  font-family: "Courier New", monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}


/* ----------------------------------------------------------------------------
   9) MARQUEE STRIP (".marquee")
   The horizontal band of slowly scrolling italic words. The text is duplicated
   in the HTML and slid left by 50% on a loop, creating a seamless ticker.
   The @keyframes block defines that left-sliding animation.
   The "prefers-reduced-motion" rule politely stops the animation for users who
   asked their device to reduce motion (an accessibility best practice).
   ---------------------------------------------------------------------------- */
.marquee { overflow: hidden; white-space: nowrap; } /* hide the off-screen copy */
.marquee .track { display: inline-block; will-change: transform; animation: marq 30s linear infinite; }
.marquee .track > span {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(19px, 2.3vw, 32px); padding: 0 0.45em; vertical-align: middle;
}
.marquee .track .star { font-style: normal; opacity: 0.55; font-size: 0.7em; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee .track { animation: none; } }


/* ----------------------------------------------------------------------------
   10) PINNED SNAPSHOT (".snap")
   The little "polaroid" photos in the About section — white border, soft drop
   shadow, and a centred typewriter caption underneath.
   ---------------------------------------------------------------------------- */
.snap {
  background: #fbf7ee; padding: 10px 10px 30px;   /* extra bottom = polaroid lip */
  box-shadow: 0 22px 44px -22px rgba(0,0,0,0.55); /* soft lifted-off-page shadow */
  border: 1px solid rgba(35,32,27,0.06);
}
.snap .ph { width: 100%; }
.snap .snap-cap {
  font-family: "Courier New", monospace; font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 9px; text-align: center;
}


/* ----------------------------------------------------------------------------
   11) THE PANTONE CHIP (".chip")
   The signature white swatch tab (colour code + label + a strip of the colour)
   that appears on entries. It's the "this feeling has a number" gesture.
   ---------------------------------------------------------------------------- */
.chip {
  display: inline-flex;          /* stack the lines vertically, hug the content */
  flex-direction: column;
  gap: 3px;
  background: #fbf7ee;
  color: var(--ink);
  padding: 11px 14px 12px;
  min-width: 124px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.10), 0 12px 30px -16px rgba(0,0,0,0.45);
}
.chip .chip-code { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; }
.chip .chip-label { font-family: var(--sans); font-weight: 600; font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.62; }
.chip .chip-swatch { width: 100%; height: 6px; margin-top: 2px; } /* the colour bar */


/* ----------------------------------------------------------------------------
   12) FAN-DECK FOOTER (".fandeck")
   The seven-colour strip fixed to the very bottom of every page — the whole
   publication compressed into one gesture. "position: fixed" keeps it stuck to
   the bottom of the screen as you scroll. Each colour grows on hover and shows
   its name tooltip.
   ---------------------------------------------------------------------------- */
.fandeck {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--fan-h);
  display: flex; z-index: 60;            /* sits above page content */
  box-shadow: 0 -1px 0 rgba(35,32,27,0.12);
}
/* Each colour is an equal-width link; hovering makes it grow (flex-grow). */
.fandeck a { flex: 1 1 0; display: block; position: relative; transition: flex-grow .45s cubic-bezier(.2,.8,.2,1); }
.fandeck a:hover { flex-grow: 2.4; }
/* The floating name label that fades in above a colour when you hover it. */
.fandeck a .fan-name {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; white-space: nowrap; color: var(--ink);
  background: #fbf7ee; padding: 5px 9px; opacity: 0; pointer-events: none;
  transition: opacity .2s; box-shadow: 0 6px 18px -10px rgba(0,0,0,.5);
}
.fandeck a:hover .fan-name { opacity: 1; }