/* =========================================================
   Shared styles for every page. Rules live in DESIGN.md.
   To change the accent or the font, edit the two variables
   marked EDIT below. Nothing else needs to change.
   ========================================================= */

:root {
  --bg: #ffffff;          /* pure white, set on html AND body */
  --ink: #37352f;         /* body text */
  --ink-soft: #787774;    /* faint secondary bits (credits, asides) */
  --ink-sub: #000000;     /* EDIT: subtitles: notes under links, how-to lines, home tagline */
  --ink-faint: #b9b8b5;   /* placeholders */
  --hairline: #e9e9e7;    /* only for hairline borders (currently unused) */

  --accent: #0b2f8f;      /* EDIT: navy. Brighter blue option: #1d4ed8 */

  /* EDIT: font. Uses each visitor's own system font (San Francisco on Apple,
     Segoe UI on Windows), so nothing is downloaded or licensed. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --column: 640px;
  --gutter: 24px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: 480ms;
}

html {
  color-scheme: only light;   /* stop browsers from auto-darkening or tinting the page */
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  max-width: var(--column);
  margin: 0 auto;
  padding: clamp(56px, 13vh, 128px) var(--gutter) 120px;
}

/* ---------- Links: navy, never underlined ---------- */
a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity var(--slow) var(--ease);
}
a:hover { opacity: 0.55; }
a:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Type ---------- */
h1,
.intro {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
h1 { margin: 0 0 1.2rem; }

/* Small grey aside next to a title, e.g. "(beyond emojis)" */
h1 .aside {
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-left: 0.35em;
  vertical-align: 0.2em;
}

/* Short how-to line under a title */
.howto {
  color: var(--ink-sub);
  font-size: 0.94rem;
  margin: 0 0 1em;
}

p { margin: 0 0 1em; }

.intro { margin: 0 0 0.3em; }

/* Small line under "Hi I'm Erica!" on the home page */
.tagline {
  font-size: 1rem;
  color: var(--ink-sub);
  margin: 0;
}

/* Home page sits a little lower on the screen */
body.home main { padding-top: clamp(84px, 21vh, 210px); }

.placeholder {
  color: var(--ink-faint);
  font-style: italic;
}

/* Inline emoji images (Noto), sized to the text around them */
img.emoji {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
  margin: 0 0.04em;
}

/* ---------- Back link ---------- */
.back {
  display: inline-block;
  font-size: 0.9rem;
  margin-bottom: 2.4rem;
}

/* ---------- Plain vertical lists (home nav, content, fun) ---------- */
.list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}
.list li { margin: 0 0 0.45em; }

/* The three links on the home page */
.list.nav { margin-top: 2.2rem; }
.list.nav li { font-size: 1.3rem; font-weight: 500; margin-bottom: 0.5em; }

.entries li { margin-bottom: 1.15em; }
.entries .note {
  display: block;
  color: var(--ink-sub);
  font-size: 0.92em;
}

/* ---------- Emoji credit: tiny, faint, bottom-right corner ---------- */
.credit {
  position: fixed;
  right: 12px;
  bottom: 8px;
  margin: 0;
  z-index: 0;
  font-family: var(--font-ui);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.01em;
}
.credit a {
  color: #d3d2cf;
  transition: color var(--slow) var(--ease);
}
.credit a:hover { color: var(--ink-soft); opacity: 1; }

/* =========================================================
   Things I love: the page is exactly one screen tall and
   the pile sits on the floor (bottom edge of the window).
   ========================================================= */
body.floor {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
body.floor main { padding-bottom: 0; }
/* v2 pile: stickers are grabbed by their picture (see pile.js), so the
   pieces themselves let clicks through and the page handles touches. */
body.pile-v2 #pile .sticker-piece { pointer-events: none; }
body.pile-v2 { touch-action: none; }
html.can-grab, html.can-grab body { cursor: grab; }
html.grabbing, html.grabbing * { cursor: grabbing !important; }

#pile {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.piece {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
  will-change: transform;
}
.piece img,
.piece canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.piece.held { cursor: grabbing; z-index: 2; }

/* =========================================================
   Stickers (die-cut white border + soft shadow).
   Used in the pile and in the fixed layer on every page.
   ========================================================= */
.die-cut {
  filter: drop-shadow(0 1px 1.5px rgba(55, 53, 47, 0.10))
          drop-shadow(0 4px 10px rgba(55, 53, 47, 0.12));
}

/* No page-to-page fade (@view-transition) on purpose: leaving the pile pages
   it made the screen flash white. Stickers are drawn with the page instead. */
#sticker-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

.sticker {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
  transition: transform 520ms var(--ease);
}
.sticker.dragging { transition: none; cursor: grabbing; }
.sticker .die-cut {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 520ms var(--ease);
}
.sticker.dragging .die-cut { transform: scale(1.06); }

/* Caption under the sticker, shown on hover (or briefly after a tap) */
.sticker .caption {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  pointer-events: none;
  white-space: nowrap;
  text-align: center;
  padding-top: 6px;   /* bridges the gap so the mouse can reach a credit link */
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent);
  text-shadow: 0 0 3px #fff, 0 0 6px #fff;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.sticker:hover .caption,
.sticker.show-label .caption { opacity: 1; }
.caption .sticker-credit {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-soft);
  text-decoration: none;
}
.caption a.sticker-credit:hover { color: var(--accent); text-decoration: underline; }
/* A caption with a link stays hoverable so the link can be clicked */
.sticker:hover .caption.has-credit,
.sticker.show-label .caption.has-credit { pointer-events: auto; }
.sticker.dragging .caption { opacity: 0; }

/* ---------- Fun page: small preview that follows the mouse over a title ---------- */
.hover-preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;              /* under stuck stickers (50) */
  width: 288px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #f1f1ef;
  box-shadow: 0 1px 2px rgba(55, 53, 47, 0.10), 0 8px 24px rgba(55, 53, 47, 0.16);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--ease), visibility 0s linear 220ms;
}
.hover-preview.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms var(--ease), visibility 0s;
}
.hover-preview img,
.hover-preview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  h1, .intro { font-size: 1.5rem; }
  .list.nav li { font-size: 1.15rem; }
  :root { --gutter: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}

/* Placeholder entries on the content page read as placeholders */
.entries .is-placeholder a,
.entries .is-placeholder .note { font-style: italic; }

/* On the pile page the floor is taken, so the credit sits in the top-right corner */
body.floor .credit { top: 10px; bottom: auto; }