/* ==========================================================================
   home.css  —  styles for the HOMEPAGE (index.html)
   --------------------------------------------------------------------------
   Fonts and colours live in tokens.css. This file is layout and sizing.

   HOW TO READ THIS FILE
   - Each block has a heading comment saying what part of the page it styles.
   - Lines marked  "<<< CHANGE"  are the ones people usually want to tweak.
   - Sizes written like  clamp(MIN, PREFERRED, MAX)  mean:
       "never smaller than MIN, never bigger than MAX, and in between scale
        with the screen width". "vw" = a % of the screen width.
       So  clamp(2rem, 4.5vw, 4.5rem)  is: at least 2rem, at most 4.5rem.
       (1rem = 16px.)

   TABLE OF CONTENTS
     1. Page settings
     2. Base / resets
     3. Reusable pieces (image boxes, pills, section heads)
     4. Header
     5. Hero + Selected Work
     6. About
     7. Community
     8. Testimonials
     9. Closing CTA + Footer
    10. Mobile / tablet
   ========================================================================== */


/* ==========================================================================
   1. PAGE SETTINGS  <<<  the most useful numbers to tweak
   ========================================================================== */
:root {
  /* Empty space on the left and right of the content.
     12vw = 12% of the screen width. Bigger number = narrower content. */
  --gutter: clamp(1.5rem, 12vw, 20rem);

  /* Height of the white bar at the top with INDAKWA / WORK / COMMUNITY. */
  --header-h: 80px;

  /* Empty space above and below each big section (About, Community...). */
  --section-y: clamp(5rem, 11.5vw, 11rem);

  /* Size of the dashed grid squares behind the hero and Work section.
     Default: the content area is split into 9 equal squares.
     Replace with a fixed size like 120px if you prefer. */
  --cell: max(64px, calc((100vw - 2 * var(--gutter)) / 9));
}


/* ==========================================================================
   2. BASE / RESETS  (you rarely need to touch this)
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; } /* padding never makes boxes wider */

html {
  scroll-behavior: smooth;           /* smooth scroll when clicking WORK / COMMUNITY */
  -webkit-text-size-adjust: 100%;
  transition: transform 0.5s ease;
}

body {
  margin: 0;
  font-family: var(--font-sans);     /* font comes from tokens.css */
  font-weight: 400;
  line-height: 1.5;                  /* space between lines of text */
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* When you click a menu link, stop the section hiding under the sticky header. */
section[id] { scroll-margin-top: var(--header-h); }

h1, h2, h3, p, figure, blockquote { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* The outline shown when someone tabs through the page with a keyboard. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* The italic handwritten font. Add class="script" to any text to use it.
   The font itself is chosen in tokens.css (--font-script). */
.script {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 500;
}

/* Keeps content away from the screen edges (uses --gutter from above). */
.wrap {
  position: relative;
  z-index: 2;                        /* sits above the grid + blob */
  padding-inline: var(--gutter);
}

/* Big section headings: "Here's what matters most." etc.  */
h2 {
  font-size: clamp(2rem, 4.5vw, 4.5rem);   /* <<< CHANGE heading size */
  font-weight: 500;                        /* 400 = regular, 500 = medium, 600 = semi-bold */
  line-height: 1.12;
  letter-spacing: -0.01em;                 /* slightly tighter letters */
}


/* ==========================================================================
   3. REUSABLE PIECES
   ========================================================================== */

/* ---- Image boxes ----------------------------------------------------------
   Every image on the site sits in a box with class="media".
   The box is light grey until you add an image. Once <img src="..."> is
   filled in, the image covers the grey box.
   ------------------------------------------------------------------------ */
.media {
  position: relative;
  overflow: hidden;
  background: var(--placeholder);    /* the grey. Change in tokens.css */
}
.media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* fills the box, cropping if needed.
                                        Use "contain" to show the WHOLE image instead. */
}
/* Hide <img> tags that have no src yet, so no broken-image icon shows. */
.media img:not([src]),
.media img[src=""],
.media img.is-broken { display: none; }

/* ---- Pill labels ----------------------------------------------------------
   The rounded outlined labels: "Selected Work", "Community", "Testimonials".
   The rainbow outline colours are in tokens.css (--pill-gradient).
   ------------------------------------------------------------------------ */
.pill {
  --pill-bg: #fff;                   /* inside colour. Must match the section
                                        background so the outline looks clean */
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.8rem 2.1rem;            /* <<< CHANGE  up/down  left/right space inside */
  font-size: 0.95rem;                /* <<< CHANGE text size */
  line-height: 1.3;
  border: 2px solid transparent;     /* <<< CHANGE outline thickness */
  border-radius: 999px;              /* fully rounded ends */
  /* Two backgrounds: a plain fill inside, and the gradient showing through
     the transparent border. */
  background:
    linear-gradient(var(--pill-bg), var(--pill-bg)) padding-box,
    var(--pill-gradient) border-box;
}

/* ---- Section head ---------------------------------------------------------
   A heading on the left with a pill on the right.
   ------------------------------------------------------------------------ */
.section-head {
  display: flex;
  align-items: flex-end;             /* pill lines up with the heading's last line */
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;                   /* on small screens the pill drops below */
}
.section-head .pill { margin-bottom: 0.7rem; }


/* ==========================================================================
   4. HEADER  (INDAKWA on the left, WORK / COMMUNITY on the right)
   ========================================================================== */
.site-header {
  position: sticky;                  /* stays at the top while scrolling.
                                        Change to "relative" to let it scroll away */
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-inline: clamp(1.25rem, 5.7vw, 8rem);  /* <<< CHANGE header side spacing */
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

/* "INDAKWA" logo text */
.brand {
  font-size: 0.8rem;                 /* <<< CHANGE logo size */
  font-weight: 600;
  letter-spacing: 0.08em;            /* space between letters */
  text-transform: uppercase;         /* remove this line to stop the ALL CAPS */
  text-decoration: none;
}

/* WORK / COMMUNITY links */
.site-nav {
  display: flex;
  gap: clamp(1.5rem, 4.6vw, 4.25rem);           /* <<< CHANGE space between links */
}
.site-nav a {
  font-size: 0.8rem;                 /* <<< CHANGE menu text size */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; text-underline-offset: 0.35em; }


/* ==========================================================================
   5. HERO + SELECTED WORK
   --------------------------------------------------------------------------
   These two sections share one wrapper (.light-zone) so the dashed grid
   runs smoothly behind both of them.
   ========================================================================== */
.light-zone {
  position: relative;
  isolation: isolate;                /* keeps the layering below self-contained */
  overflow: hidden;                  /* stops the blurry blob spilling out */
}

/* The dashed grid. It's drawn ON TOP of the blob (z-index 1) but underneath
   the text (z-index 2), like in your design.
   Line colour / dash style: tokens.css (--grid-image).
   Square size: --cell at the top of this file. */
.light-zone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;              /* clicks pass straight through */
  background-image: var(--grid-image);
  background-size: var(--cell) var(--cell);
  background-position: var(--gutter) 0;   /* lines line up with the content edge */
}

/* ---- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(5.5rem, 11.5vw, 10.5rem);     /* <<< CHANGE space above "Hi I'm Indakwa" */
  padding-bottom: clamp(5rem, 12vw, 11rem);        /* <<< CHANGE space below the headline */
}

/* The soft coloured blob behind the headline.
   Each radial-gradient() is one glow. Format:
      radial-gradient( WIDTH HEIGHT at LEFT TOP,  colour, fade-out-point )
   e.g. "40% 55% at 84% 2%" = a glow 40% wide, 55% tall, centred 84% from the
   left and 2% from the top of the hero.
   Colours are set in tokens.css (--blob-...).
   "85%" / "95%" = how strong each glow is. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(40% 55% at 84% 2%,  color-mix(in srgb, var(--blob-blue) 85%, transparent),   transparent 70%),  /* blue, top right */
    radial-gradient(34% 48% at 27% 55%, color-mix(in srgb, var(--blob-orange) 95%, transparent), transparent 72%),  /* orange, left */
    radial-gradient(30% 44% at 70% 60%, color-mix(in srgb, var(--blob-yellow) 95%, transparent), transparent 72%),  /* yellow, right */
    radial-gradient(46% 44% at 48% 58%, color-mix(in srgb, var(--blob-cream) 55%, transparent),  transparent 75%);  /* blend, middle */
  filter: blur(28px);                /* <<< CHANGE how soft the blob is (bigger = softer) */
}

/* "Hi I'm Indakwa" */
.hero-hi {
  margin-top: 6rem;
  margin-left: .36rem;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
}

/* The big headline */
.hero-title {
  font-size: clamp(2.6rem, 6.3vw, 6.5rem);         /* <<< CHANGE headline size */
  font-weight: 500;
  line-height: 1.08;                 /* space between the 3 lines */
  letter-spacing: -0.015em;
}
.hero-title .line { display: block; }              /* each line on its own row */
.hero-title .script { letter-spacing: 0; }

/* The headline fades up when the page loads. This is the ONLY animation on
   the page. To turn it off, delete the whole block below. It is skipped
   automatically for people who have "reduce motion" switched on. */
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: bloom 1.8s ease-out both; }
  .hero-title .line { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-title .line:nth-child(2) { animation-delay: 0.12s; }   /* line 2 starts a bit later */
  .hero-title .line:nth-child(3) { animation-delay: 0.24s; }   /* line 3 later still */
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bloom {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Selected Work -------------------------------------------------------- */
.work {
  padding-top: clamp(2rem, 6vw, 5.5rem);
  padding-bottom: var(--section-y);
}

/* The list of 3 projects */
.projects {
  display: grid;
  gap: clamp(2.5rem, 5.4vw, 5rem);                 /* <<< CHANGE space between projects */
  margin-top: clamp(3rem, 5.5vw, 5.25rem);         /* space under the "Here's what matters most." heading */
}


/* One project row = text on the left, image on the right. */
.project {
  display: grid;
  grid-template-columns: 1fr 41%;    /* <<< CHANGE  text column | image column width.
                                        Bigger % = bigger image. */
  align-items: center;               /* text is vertically centred against the image */
  column-gap: 2rem;
  text-decoration: none;
}

.project-copy { --fs: clamp(1rem, 1.5vw, 1.4rem); }  /* <<< CHANGE project description text size */
.project-copy p {
  max-width: 25em;                   /* how wide the description can get before wrapping */
  font-size: var(--fs);
  line-height: 1.45;
}


/* The small outlined tags: "UX Design", "Regulatory Tech"... */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;                      /* space between tags */
  margin-top: 1.5rem;
}
.tags li {
  padding: 0.4rem 1.05rem;           /* <<< CHANGE space inside each tag */
  font-size: clamp(0.75rem, 0.95vw, 0.9rem);
  line-height: 1.4;
  border: 1px solid var(--ink);
  border-radius: 999px;
}

/* The project image box. Shape is set by aspect-ratio (width / height).
   Example: change to 16 / 9 for a wider, flatter image. */
.project-media {
  aspect-ratio: 450 / 308;           /* <<< CHANGE image shape */
  border-radius: 4px;                /* <<< CHANGE corner roundness (0 = square) */
  transition: transform 0.5s ease;
}
/* Small lift when you hover the project. Delete these 3 lines to remove it. */
.project:hover .project-media,
.project:focus-visible .project-media { transform: translateY(-8px); }

.project-copy p {
  transition: color 0.5s ease;
}

.project:hover .project-copy p {
  color: #125BD1;
}
/* ==========================================================================
   6. ABOUT  (dark section)
   ========================================================================== */
.about {
  padding-block: var(--section-y);
  color: #fff;                       /* text colour on the dark background */
  background: var(--dark);           /* dark colour: tokens.css */
}
.about .wrap > h2 { margin-bottom: clamp(2.5rem, 5.5vw, 5rem); }

/* Portrait on the left, 3 paragraphs on the right. */
.about-grid {
  display: grid;
  grid-template-columns: 39.2% 1fr;  /* <<< CHANGE  portrait width | text width */
  column-gap: 9.6%;                  /* gap between portrait and text */
}

.portrait {
  aspect-ratio: 176 / 197;           /* <<< CHANGE portrait shape (width / height) */
  background: var(--placeholder-dark);
}

.about-copy {
  display: grid;
  align-content: start;
  gap: 2.4rem;                       /* <<< CHANGE space between the paragraphs */
  padding-top: clamp(0rem, 4.4vw, 4rem);           /* pushes the text down from the top of the portrait */
  font-size: clamp(1rem, 1.5vw, 1.4rem);           /* <<< CHANGE about text size */
  line-height: 1.6;
}

/* "How I approach design." block, below the portrait */
.approach { margin-top: clamp(3rem, 6.2vw, 6rem); }
.approach hr {                       /* the thin line above the heading */
  width: 80%;                        /* <<< CHANGE how long the line is */
  margin: 0 0 clamp(2.25rem, 4.2vw, 4rem);
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);  /* last number = line strength */
}
.approach h3 {
  font-size: clamp(1.75rem, 3.6vw, 3.4rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.approach p {
  max-width: 78%;                    /* how wide the paragraph gets before wrapping */
  margin-top: 1.4rem;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  line-height: 1.6;
}


/* ==========================================================================
   7. COMMUNITY  (pale blue section with the two talks)
   ========================================================================== */
.community {
  --pill-bg: var(--sky);             /* pill fill matches the section colour */
  padding-block: var(--section-y);
  background: var(--sky);            /* pale blue: tokens.css */
}

.talks { margin-top: clamp(2.5rem, 5vw, 4.75rem); }

/* One talk row: text on the left, arrow on the right, line underneath. */
.talk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 3.4vw, 3.25rem) 1rem clamp(1.5rem, 2.2vw, 2.25rem);  /* top | sides | bottom */
  border-bottom: 1px solid var(--dark);            /* the line under each row */
  text-decoration: none;
}
.talk h3 {
  font-size: clamp(1.1rem, 1.7vw, 1.6rem);         /* <<< CHANGE talk title size */
  font-weight: 500;
  line-height: 1.35;
}
.talk p {
  max-width: 45rem;
  margin-top: 0.5rem;
  font-size: clamp(0.9rem, 1.15vw, 1.05rem);       /* <<< CHANGE talk description size */
  line-height: 1.5;
  color: var(--ink-soft);
}
.talk-arrow {                        /* the ↗ arrow on the right */
  flex-shrink: 0;
  width: clamp(1.75rem, 3vw, 2.75rem);             /* <<< CHANGE arrow size */
  height: clamp(1.75rem, 3vw, 2.75rem);
  transition: transform 0.25s ease;
}
/* Arrow nudges up-right on hover. Delete these 3 lines to remove it. */
.talk:hover .talk-arrow,
.talk:focus-visible .talk-arrow { transform: translate(3px, -3px); }


/* ==========================================================================
   8. TESTIMONIALS
   ========================================================================== */
.testimonials { padding-block: var(--section-y); }

/* 3 columns: big quote mark | the quote | the arrows */
.t-layout {
  display: grid;
  grid-template-columns: 35.6% 51% 1fr;            /* <<< CHANGE column widths */
  align-items: stretch;
  margin-top: clamp(2.5rem, 4.4vw, 4.25rem);
}

.quote-mark {                        /* the big grey quotation marks */
  width: 86%;
  height: auto;
  align-self: start;
  fill: #ececec;                     /* <<< CHANGE quote mark colour */
}

.t-slides { border-top: 1px solid var(--rule); }   /* the thin line above the quote */
.t-slide { padding-top: clamp(1.5rem, 2.5vw, 2.25rem); }
.t-slide[hidden] { display: none; }                /* hides the inactive slides */

.t-slide blockquote p {
  font-size: clamp(0.95rem, 1.3vw, 1.2rem);        /* <<< CHANGE quote text size */
  line-height: 1.6;
}

/* Photo + name + job title under the quote */
.t-slide figcaption {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(1.5rem, 2.6vw, 2.5rem);
}
.avatar {                            /* the round photo */
  flex-shrink: 0;
  width: 3.4rem;                     /* <<< CHANGE photo size */
  height: 3.4rem;
  border-radius: 50%;                /* 50% = circle. Use 8px for rounded square */
}
.t-person { display: grid; line-height: 1.35; }
.t-person strong { font-size: 0.95rem; font-weight: 600; }   /* name */
.t-person span { font-size: 0.8rem; }                        /* job title */

/* The < > arrow buttons */
.t-nav {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.25rem;
}
.t-nav button {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.t-nav svg { width: 1.25rem; height: 1.25rem; }
.t-nav button:disabled { color: #bbb; cursor: default; }   /* greyed out arrow */


/* ==========================================================================
   9. CLOSING CTA + FOOTER
   ========================================================================== */
.cta {
  padding-block: var(--section-y);
  color: #fff;
  background: var(--dark);
}
.cta h2 {
  font-size: clamp(2.1rem, 4.7vw, 4.5rem);         /* <<< CHANGE closing headline size */
  line-height: 1.28;
}

/* The email + LinkedIn links */
.cta-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(1.5rem, 4.5vw, 4.5rem);          /* space between the two links */
  margin-top: clamp(3rem, 5.4vw, 5rem);
  font-size: clamp(1rem, 1.5vw, 1.4rem);           /* <<< CHANGE link text size */
}
.cta-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.cta-links svg { width: 0.75em; height: 0.75em; }  /* the little ↗ arrow */

/* Bottom bar: "Design and code by..." and © */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.8rem var(--gutter);
  font-size: 0.75rem;                /* <<< CHANGE footer text size */
  color: #fff;
  background: var(--dark);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}


/* ==========================================================================
   10. MOBILE / TABLET  (screens narrower than 900px)
   --------------------------------------------------------------------------
   Everything above is the desktop layout. These rules stack columns on top
   of each other for phones and small tablets.
   To change WHEN the layout switches, change 900px (here and below).
   ========================================================================== */
@media (max-width: 900px) {
  /* Projects: image on top, text underneath */
  .project {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
  }
  .project-media { order: -1; }      /* -1 = moves the image above the text */

  /* About: portrait above the paragraphs */
  .about-grid {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
  .portrait { max-width: 26rem; }
  .about-copy { padding-top: 0; gap: 1.5rem; }
  .approach hr { width: 100%; }
  .approach p { max-width: none; }

  /* Testimonials: quote mark, quote, then arrows, in one column */
  .t-layout {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
  }
  .quote-mark { width: 7rem; }
  .t-nav { justify-content: flex-start; }
}

/* Small phones (narrower than 520px) */
@media (max-width: 520px) {
  .site-nav { gap: 1.25rem; }
  .pill { padding: 0.6rem 1.5rem; font-size: 0.85rem; }
  .talk { padding-inline: 0; }
}

/* For people who turned on "reduce motion" in their device settings:
   switch off smooth scrolling and hover animations. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}