/* =========================================================
   base.css: the shared frame used by EVERY page
   (colours, fonts, grid background, header, sticker dock,
   sticky notes and thumbtacks).
   ========================================================= */

/* ---------- 1. Design tokens (change things here) ---------- */
:root {
  --bg: #E4E4E0;                     /* cream-grey background */
  --ink: #1E1A15;                    /* main text colour */
  --ink-soft: rgba(30, 26, 21, 0.6); /* quieter text (labels) */
  --grid-line: rgba(30, 26, 21, 0.06);
  --grid-size: 22px;

  /* Fonts.
     --font-display is the fancy italic for the changing word and big
     headings. To swap in PP Editorial New later:
       1. put its font files in site/fonts/
       2. add an @font-face rule for "PP Editorial New" at the top of this file
       3. change the line below to:
          --font-display: "PP Editorial New", "Instrument Serif", Georgia, serif;
     Nothing else needs to change. */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-dock: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(16px, 2.6vw, 36px);

  /* String on the Work board and project pages. It follows the colour
     the visitor picks in the footer (see the rules just below :root). */
  --string: #E84858;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* String colour = the look picked in the footer colour picker.
   Each uses that look's main colour (the cream look uses its red, so the
   string still shows on the cream background). */
:root[data-ak-theme="green"]      { --string: #243C24; }
:root[data-ak-theme="indigo"]     { --string: #4848C8; }
:root[data-ak-theme="ochre"]      { --string: #B8962E; }
:root[data-ak-theme="terracotta"] { --string: #C86858; }
:root[data-ak-theme="black"]      { --string: #141210; }

/* ---------- 2. Basics ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Faint grid lines, like graph paper */
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: center top;
}

/* No single word alone on a last line, anywhere on the site:
   headings are balanced, paragraphs avoid short last lines. */
h1, h2, h3, h4, .statement, blockquote, q { text-wrap: balance; }
p, li, dd, figcaption, cite { text-wrap: pretty; }

img { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Text only screen readers can hear */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Small typewriter-style labels (links, dates, captions) */
.label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* ---------- 3. Header: monogram (left) + links (right) ---------- */
.site-header {
  position: absolute;   /* scrolls away with the page; only the dock stays put */
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand img { height: 30px; width: auto; }
.brand span {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.top-links {
  display: flex;
  gap: clamp(12px, 2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.top-links a {
  position: relative;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 0.2s;
}
/* underline that draws in on hover */
.top-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}
.top-links a:hover { color: var(--ink); }
.top-links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 4. Sticker dock (bottom centre) ---------- */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 30;
  width: fit-content;
  margin: 0 auto;
  display: flex;
  gap: 4px;
  padding: 10px 12px 9px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(248, 248, 245, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 30px -12px rgba(30, 26, 21, 0.3),
    0 2px 6px rgba(30, 26, 21, 0.06);
}

.dock a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 74px;
  padding-top: 2px;
  text-decoration: none;
  border-radius: 14px;
}

.dock img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  /* white outline = die-cut sticker look, plus a small shadow */
  filter:
    drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff)
    drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff)
    drop-shadow(0 3px 4px rgba(30, 26, 21, 0.2));
  transition: transform 0.4s var(--ease-bounce);
}
.dock a:hover img,
.dock a:focus-visible img { transform: translateY(-7px) rotate(-7deg) scale(1.1); }

.dock span {
  font-family: var(--font-dock);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  padding: 0 8px;
  border-radius: 6px;
}
/* the page you are on */
.dock a[aria-current="page"] span {
  background: var(--ink);
  color: var(--bg);
}

/* ---------- 5. Paper bits: sticky notes + thumbtacks ---------- */
.sticky {
  position: relative;
  padding: 26px 22px 22px;
  background: #F3E7A9;
  box-shadow: 0 14px 24px -14px rgba(30, 26, 21, 0.45), 0 1px 2px rgba(30, 26, 21, 0.12);
  font-family: var(--font-body);
}

.tack {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a7a 0 18%, #d8392b 45%, #8f1d14 100%);
  box-shadow: 0 3px 4px rgba(30, 26, 21, 0.35);
}

/* a [TO FILL] / [TO DECIDE] / [CHECK] spot that still needs Aanvi's words */
.ph {
  display: inline-block;
  padding: 1px 8px;
  border: 1.5px dashed rgba(30, 26, 21, 0.45);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.4);
}

/* "not built yet" note, used by pages that are still placeholders */
.soon { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 96px 16px 150px; }
.soon .sticky { width: min(340px, 100%); transform: rotate(-2deg); }
.soon h1 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 44px; line-height: 1; margin: 0 0 12px; }
.soon p { margin: 0 0 14px; }

/* ---------- 6. Footer: vines + "Let's design for" (built by js/footer.js) ---------- */
.site-footer {
  /* Default "cream" look. The other looks below only change these colours. */
  --ft-fill: transparent;   /* footer background (transparent = the page's grid shows) */
  --ft-bg: #E4E4E0;         /* halo behind the big letters, keeps them readable */
  --ft-ink: #1E1A15;
  --ft-rose: #E84858;  --ft-rose-line: #FFD0D6;
  --ft-vine: #2F7A57;  --ft-leaf: #3F9A6C;  --ft-vein: #245E42;
  --ft-pot: #C86858;   --ft-pot-rim: #B0553F; --ft-soil: #4A3426;
  --ft-can: #5E7B8C;   --ft-water: #6FB3E0;

  position: relative;
  padding: 64px var(--gutter) 150px;   /* bottom room for the sticker dock */
  background-color: var(--ft-fill);
  color: var(--ft-ink);
  transition: background-color 0.7s ease, color 0.7s ease;
}
.site-footer[data-theme="green"] {
  --ft-fill: #243C24; --ft-bg: #243C24; --ft-ink: #F6EFE4;
  --ft-rose: #F7A8C8; --ft-rose-line: #C24F7E;
  --ft-vine: #8CC084; --ft-leaf: #A7D59B; --ft-vein: #5E9459;
  --ft-pot: #E9D9BF; --ft-pot-rim: #D3C09F; --ft-soil: #15241A;
  --ft-can: #F6EFE4; --ft-water: #BFE3F7;
}
.site-footer[data-theme="indigo"] {
  --ft-fill: #4848C8; --ft-bg: #4848C8; --ft-ink: #FFF8E7;
  --ft-rose: #F8E08E; --ft-rose-line: #C2932A;
  --ft-vine: #9FE5C9; --ft-leaf: #BDF1DA; --ft-vein: #6FBF9F;
  --ft-pot: #2C2C8C; --ft-pot-rim: #23236F; --ft-soil: #15154A;
  --ft-can: #FFF8E7; --ft-water: #E3EDFF;
}
.site-footer[data-theme="ochre"] {
  --ft-fill: #C8A848; --ft-bg: #C8A848; --ft-ink: #1E1A15;
  --ft-rose: #1E1A15; --ft-rose-line: #C8A848;
  --ft-vine: #3A5424; --ft-leaf: #4D6C2E; --ft-vein: #2A3E19;
  --ft-pot: #1E1A15; --ft-pot-rim: #000000; --ft-soil: #5A4030;
  --ft-can: #1E1A15; --ft-water: #FFFFFF;
}
.site-footer[data-theme="terracotta"] {
  --ft-fill: #C86858; --ft-bg: #C86858; --ft-ink: #1E1A15;
  --ft-rose: #F6EBD9; --ft-rose-line: #C86858;
  --ft-vine: #2C4A2C; --ft-leaf: #3C6038; --ft-vein: #20361F;
  --ft-pot: #F6EBD9; --ft-pot-rim: #E4D3B8; --ft-soil: #3A281D;
  --ft-can: #1E1A15; --ft-water: #F6EBD9;
}
.site-footer[data-theme="black"] {
  --ft-fill: #141210; --ft-bg: #141210; --ft-ink: #F6F3EC;
  --ft-rose: #FFFFFF; --ft-rose-line: #141210;
  --ft-vine: #7FCB9B; --ft-leaf: #97DCAF; --ft-vein: #5A9E74;
  --ft-pot: #F6F3EC; --ft-pot-rim: #D9D3C6; --ft-soil: #3A2E24;
  --ft-can: #F6F3EC; --ft-water: #9ED3F5;
}

/* The stage keeps the drawing and the words lined up at every screen size */
.ft-stage {
  position: relative;
  container-type: inline-size;
  width: min(100%, 1000px, calc((100svh - 230px) * 1.667));
  min-width: min(100%, 320px);
  aspect-ratio: 1000 / 600;
  margin: 0 auto;
}

.ft-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* flat colours, no gradients or shadows */
.ft-vine, .ft-tendril { fill: none; stroke: var(--ft-vine); stroke-linecap: round; stroke-linejoin: round; }
.ft-leaf { fill: var(--ft-leaf); }
.ft-vein { fill: none; stroke: var(--ft-vein); stroke-width: 1.8; stroke-linecap: round; }
.ft-rose { fill: var(--ft-rose); }
.ft-rose-line { fill: none; stroke: var(--ft-rose-line); stroke-width: 1.8; stroke-linecap: round; }
.ft-pot-body { fill: var(--ft-pot); }
.ft-pot-band { fill: none; stroke: var(--ft-pot-rim); }
.ft-pot-rim { fill: var(--ft-pot-rim); }
.ft-soil { fill: var(--ft-soil); }
.ft-drop { fill: var(--ft-water); }
.ft-art path, .ft-art rect, .ft-art ellipse,
.ft-can-svg path { transition: fill 0.7s ease, stroke 0.7s ease; }

/* "Let's design for / ease." */
.ft-line {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 25%;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 10.5cqw;
  line-height: 0.98;
  letter-spacing: -0.01em;
  /* a soft halo in the background colour, so vines behind never hide letters */
  text-shadow: 0 0 3px var(--ft-bg), 0 0 8px var(--ft-bg), 0 0 16px var(--ft-bg), 0 0 24px var(--ft-bg);
  transition: text-shadow 0.7s ease;
}
.ft-lead, .ft-word-wrap { display: block; white-space: nowrap; }
.ft-word { display: inline-block; padding-right: 0.06em; }
.ft-word .char { display: inline-block; will-change: transform, opacity; }

/* watering can, to the right of the pot */
.ft-can {
  position: absolute;
  z-index: 3;
  left: 61%;
  top: 76%;
  width: max(9%, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  border-radius: 10px;
}
.ft-can-svg { width: 100%; height: auto; overflow: visible; transition: transform 0.3s var(--ease-bounce); }
.ft-can:hover .ft-can-svg { transform: rotate(-8deg); }
.ft-can-line, .ft-can-hole { fill: none; }
.ft-can-line { stroke: var(--ft-can); }
.ft-can-fill { fill: var(--ft-can); }
.ft-can-hole { stroke: var(--ft-fill); stroke: var(--ft-bg); opacity: 0.6; }
.ft-can span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* "Say hi → email" */
.ft-hi {
  margin: 28px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.ft-hi a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ft-hi a:hover { text-decoration-thickness: 2px; }

/* small row of links under "Say hi" */
.ft-links {
  margin: 10px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ft-links a { color: inherit; text-decoration: none; opacity: 0.8; }
.ft-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.ft-links span { opacity: 0.5; }

/* colour picker pill, bottom right */
.ft-picker {
  position: absolute;
  right: var(--gutter);
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 6px 6px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ft-ink) 18%, transparent);
  background: color-mix(in srgb, var(--ft-ink) 6%, transparent);
  transition: border-color 0.7s ease, background-color 0.7s ease;
}
.ft-dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ft-ink) 28%, transparent);
  background: var(--o);
  cursor: pointer;
  transition: transform 0.25s var(--ease-bounce), box-shadow 0.25s ease;
}
.ft-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--i);
}
.ft-dot:hover { transform: scale(1.15); }
.ft-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ft-fill), 0 0 0 3.5px var(--ft-ink); }
.site-footer:not([data-theme]) .ft-dot[aria-pressed="true"],
.site-footer[data-theme="cream"] .ft-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ft-bg), 0 0 0 3.5px var(--ft-ink); }
.ft-reset {
  margin-left: 3px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ft-ink) 28%, transparent);
  background: none;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
}
.ft-reset:hover { background: color-mix(in srgb, var(--ft-ink) 10%, transparent); }

/* below 900px wide the pill would bump into the dock, so it sits under the email */
@media (max-width: 900px) {
  .site-footer { padding-top: 48px; padding-bottom: 130px; }
  .ft-picker { position: static; width: fit-content; margin: 22px auto 0; }
}

/* ---------- 7. Phones ---------- */
@media (max-width: 640px) {
  .site-header { padding-top: 14px; }
  .brand span { display: none; }   /* just the monogram on small screens */
  .brand img { height: 26px; }
  .top-links { gap: 12px; }
  .top-links a { font-size: 11px; letter-spacing: 0.1em; }
  .dock a { width: 64px; }
  .dock img { width: 44px; height: 44px; }
}

/* People who ask their device for less motion get less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}