/* ============================================================
   Design System — Custom Properties
   All colour values live here. No hardcoded colours elsewhere.
   
   Palette: Lavender / Dusty Mauve
   Derived from: #E7E6F7, #E3D0D8, #AEA3B0, #827081, #C6D2ED
   ============================================================ */

:root {
  --color-bg:              #FAF9FC;                     /* faint lavender-white */
  --color-bg-alt:          #F2F0F5;                     /* deeper lavender tint — contact, footer */
  --color-text:            #1C1A22;                     /* near-black, purple undertone */
  --color-text-secondary:  #827081;                     /* Dusty Mauve — secondary text */
  --color-accent:          #6B5B6A;                     /* darkened Dusty Mauve — links, accents */
  --color-accent-hover:    #524352;                     /* deeper still for hover states */
  --color-accent-light:    rgba(107, 91, 106, 0.08);   /* accent at 8% — hover fills */
  --color-blob-1:          #827081;    /* Dusty Mauve — dark enough to survive blur */
  --color-blob-2:          #9C8695;    /* mid pink-mauve */
  --color-blob-3:          #7E92B8;    /* deepened blue-lavender */
  --color-border:          #E2DFE8;                     /* light lilac-grey */
  --color-white:           #FFFFFF;
}


/* ============================================================
   Base / Reset
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Sit above background shapes (z-index: 0) */
main,
footer {
  position: relative;
  z-index: 10;
}


/* ============================================================
   Typography
   Mobile-first sizes — overridden at 768px+
   ============================================================ */

h1,
h2 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  line-height: 1.2;
}

h3 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-weight: 600;
  line-height: 1.2;
}

/* Mobile scale */
h1 { font-size: 48px; letter-spacing: -0.01em; }
h2 { font-size: 28px; }
h3 { font-size: 18px; }
p  { font-size: 16px; line-height: 1.7; }

/* Section heading accent — small colour bar above each h2 */
h2::before {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--color-accent);
  margin-bottom: 20px;
  border-radius: 2px;
  opacity: 0.5;
}


/* ============================================================
   Layout — Container
   ============================================================ */

.container {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}


/* ============================================================
   Hero
   ============================================================ */

.hero {
  padding-top: 100px;
  padding-bottom: 80px;
}

.hero h1 {
  margin-bottom: 16px;
}

.hero-subtitle {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 16px;
}

.hero-description {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 40px;
}

.client-names {
  margin-bottom: 32px;
}

.clients-row {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Second row (agencies) slightly dimmer — hierarchy without labels */
.clients-row + .clients-row {
  margin-top: 10px;
  opacity: 0.7;
}

/* Email link — shared styles for both hero and contact instances */
.email-link {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-bottom-color 0.3s ease, color 0.3s ease;
  font-size: 16px;
}

.email-link:hover {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent-hover);
}

.email-link:focus-visible {
  border-bottom-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Hero divider — thin accent rule, visual "full stop" below the email */
.hero-divider {
  width: 60px;
  height: 2px;
  background: var(--color-accent);
  border: none;
  margin-top: 48px;
  opacity: 0.4;
}


/* ============================================================
   Selected Work
   White panel — creates a distinct elevated surface for the
   strongest content. Sits visually above the warm background.
   ============================================================ */

.selected-work {
  padding-top: 72px;
  padding-bottom: 72px;
  background-color: var(--color-white);
  position: relative;
  z-index: 1;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.03);
}

.selected-work h2 {
  margin-bottom: 40px;
}

/* Work entries as cards — tangible surfaces against the white section */
.work-entry {
  background: var(--color-bg);
  padding: 32px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  transition: box-shadow 0.3s ease;
}

.work-entry + .work-entry {
  margin-top: 32px;
}

/* Subtle lift on hover — polish, not interaction */
.work-entry:hover {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
  transition-delay: 0s;
}

/* Left accent on the header block only — marks the heading zone */
.work-header {
  border-left: 3px solid var(--color-accent);
  padding-left: 12px;
  margin-bottom: 16px;
}

/* Mobile: stack company name and meta vertically */
.work-header h3 {
  display: block;
  font-size: 18px;
  margin-bottom: 4px;
}

.work-meta {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
}


/* ============================================================
   How I Work
   ============================================================ */

.how-i-work {
  padding-top: 72px;
  padding-bottom: 72px;
}

.how-i-work h2 {
  margin-bottom: 40px;
}

.how-content p + p {
  margin-top: 24px;
}


/* ============================================================
   Contact
   Deeper lavender background signals arrival — you've reached
   the CTA. Continues into the footer for a unified zone.
   ============================================================ */

.contact {
  padding-top: 72px;
  padding-bottom: 100px;
  background-color: var(--color-bg-alt);
}

.contact h2 {
  margin-bottom: 40px;
}

.contact-email {
  display: block;
  font-size: 20px;
  margin-top: -4px;
  margin-left: -8px;
  margin-bottom: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: transparent;
  transition: border-bottom-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.contact-email:hover {
  background-color: var(--color-accent-light);
  border-bottom-color: var(--color-accent);
  color: var(--color-accent-hover);
}

.contact-content p {
  font-size: 16px;
  color: var(--color-text-secondary);
}


/* ============================================================
   Footer
   Continues the contact background — no visual break between them.
   ============================================================ */

footer {
  background-color: var(--color-bg-alt);
  padding-top: 40px;
  padding-bottom: 40px;
}

footer p {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}


/* ============================================================
   Background Effects — SVG Blobs
   Large colour washes blurred into atmospheric pools of light.
   
   These use the pastel palette colours at higher opacity than
   the original dark-accent approach — lighter source colours
   need more presence to register after the 80px blur.
   
   Three distinct washes: lilac, pink, blue — creating depth
   and colour variation across the page.
   ============================================================ */

.bg-shapes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.blob {
  position: absolute;
  will-change: transform;
  filter: blur(80px);
}

.blob-1 path { fill: var(--color-blob-1); opacity: 0.40; }
.blob-2 path { fill: var(--color-blob-2); opacity: 0.50; }
.blob-3 path { fill: var(--color-blob-3); opacity: 0.45; }

/* Mobile blob sizes (~60% of full desktop size) */
.blob-1 {
  width: 540px;
  top: -10%;
  right: -15%;
  animation: blob1-drift 45s ease-in-out infinite;
}

.blob-2 {
  width: 450px;
  top: 45%;
  left: -20%;
  animation: blob2-drift 55s ease-in-out infinite;
}

.blob-3 {
  width: 510px;
  top: 75%;
  right: -10%;
  animation: blob3-drift 38s ease-in-out infinite;
}

@keyframes blob1-drift {
  0%,  100% { transform: translate(0,     0)    scale(1);    }
  20%        { transform: translate(-28px,  34px) scale(1.02); }
  45%        { transform: translate( 32px,  14px) scale(0.98); }
  70%        { transform: translate(-14px, -30px) scale(1.01); }
  85%        { transform: translate( 24px,  22px) scale(0.99); }
}

@keyframes blob2-drift {
  0%,  100% { transform: translate(0,     0)    scale(1);    }
  25%        { transform: translate( 40px, -24px) scale(1.03); }
  50%        { transform: translate(-20px,  36px) scale(0.97); }
  75%        { transform: translate( 30px,  18px) scale(1.02); }
}

@keyframes blob3-drift {
  0%,  100% { transform: translate(0,     0)    scale(1);    }
  15%        { transform: translate(-34px, -20px) scale(1.02); }
  40%        { transform: translate( 22px,  32px) scale(0.98); }
  65%        { transform: translate(-22px,  16px) scale(1.01); }
  80%        { transform: translate( 30px, -30px) scale(0.99); }
}


/* ============================================================
   Grain Texture
   ============================================================ */

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.035;
}

.grain svg {
  display: block;
  width: 100%;
  height: 100%;
}


/* ============================================================
   Scroll Reveal
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.work-entry:nth-of-type(1) { transition-delay: 0s;   }
.work-entry:nth-of-type(2) { transition-delay: 0.1s; }
.work-entry:nth-of-type(3) { transition-delay: 0.2s; }
.work-entry:nth-of-type(4) { transition-delay: 0.3s; }


/* ============================================================
   Responsive — 768px and above (tablet / desktop)
   ============================================================ */

@media (min-width: 768px) {

  h1 { font-size: 84px; }
  h2 { font-size: 36px; }
  h3 { font-size: 20px; }
  p  { font-size: 17px; }

  .clients-row { font-size: 14px; }

  .hero {
    padding-top: 160px;
    padding-bottom: 120px;
  }

  .hero-subtitle    { font-size: 20px; }
  .hero-description { font-size: 18px; }

  .email-link { font-size: 17px; }

  .selected-work h2,
  .how-i-work h2,
  .contact h2 {
    margin-bottom: 56px;
  }

  .selected-work {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .work-header h3 {
    display: inline;
    font-size: 20px;
    margin-bottom: 0;
  }

  .work-header h3::after {
    content: ' \2014 ';
    font-weight: 400;
    color: var(--color-text-secondary);
  }

  .work-meta {
    display: inline;
    font-size: 15px;
  }

  .how-i-work {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .contact {
    padding-top: 120px;
    padding-bottom: 160px;
  }

  .contact-email    { font-size: 24px; }
  .contact-content p { font-size: 17px; }

  footer p { font-size: 13px; }

  .blob-1 { width: 900px; }
  .blob-2 { width: 750px; }
  .blob-3 { width: 850px; }
}


/* ============================================================
   Reduced Motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .blob {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .work-entry:nth-of-type(1),
  .work-entry:nth-of-type(2),
  .work-entry:nth-of-type(3),
  .work-entry:nth-of-type(4) {
    transition-delay: 0s;
  }

  .grain {
    display: none;
  }
}


/* ============================================================
   Print
   ============================================================ */

@media print {
  .bg-shapes,
  .grain {
    display: none;
  }

  body {
    background: #ffffff;
    color: #000000;
    font-size: 12pt;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  .email-link {
    color: #000000;
    text-decoration: underline;
    border-bottom: none;
  }

  .selected-work,
  .contact,
  footer {
    background: #ffffff;
    box-shadow: none;
  }

  .hero,
  .selected-work,
  .how-i-work,
  .contact {
    padding-top: 20pt;
    padding-bottom: 20pt;
  }

  footer {
    padding-top: 12pt;
    padding-bottom: 12pt;
  }

  .work-entry {
    break-inside: avoid;
    page-break-inside: avoid;
    background: transparent;
    border: 1px solid #cccccc;
    box-shadow: none;
    padding: 12pt;
  }

  .contact-email {
    margin-left: 0;
    margin-top: 0;
    padding: 0;
    background: transparent;
  }

  main,
  footer {
    z-index: auto;
  }

  .hero-divider {
    background: #000000;
    opacity: 0.2;
  }
}