:root {
  /* Empty space on the left and right edges of the page. */
  --pad-x: clamp(1.25rem, 5.55vw, 8rem);

  /* Size of the dashed grid squares behind the page.
     The line colour and dash style are in tokens.css (--grid-image). */
  --cell: 120px;

  /* ---- TEXT SIZES ---------------------------------------------------------
     These are the sizes used across the whole page. Change one here and every
     place that uses it updates.
     ------------------------------------------------------------------------ */
  --fs-h1: clamp(1.5rem, 5vw, 2.4rem);        /* the page title (biggest text)          */
  --fs-h2: clamp(0.9rem, 3.75vw, 1.75rem);  /* section headings ("Compliance was...") */
  --fs-h3: clamp(1.05rem, 1.4vw, 1.4rem);   /* numbered titles ("1. Repetition...")   */
  --fs-body: clamp(1rem, 1.25vw, 1.25rem);  /* normal paragraphs + bullets            */
  --fs-detail: clamp(0.875rem, 1.1vw, 1.1rem); /* smaller notes ("Opportunity:", "Before:") */

  /* Width of the main reading column (paragraphs, images).
     Headings are allowed to be wider than this. Bigger = wider column. */
  --col: 46rem;

  /* Paragraphs are a bit narrower than the images so lines stay easy to read. */
  --text-width: 41.5rem;
}


/* ==========================================================================
   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 using the side menu */
  -webkit-text-size-adjust: 100%;
}

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

  /* The dashed grid behind the whole page. Colours: tokens.css */
  background-color: var(--paper);
  background-image: var(--grid-image);
  background-size: var(--cell) var(--cell);
}

h1, h2, h3, p, dl, dd { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }

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

/* When you click a side-menu link, leave a little room above the heading. */
section[id] { scroll-margin-top: 5rem; }


/* ==========================================================================
   3. IMAGE BOXES
   --------------------------------------------------------------------------
   Every picture sits in a box with class="media". It is light grey until you
   add a picture. Once <img src="..."> points to a real file, the picture
   covers the grey.
   ========================================================================== */
.media {
  position: relative;
  overflow: hidden;
  background: var(--placeholder);    /* the grey. Change it 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 picture
                                        (screenshots that must not be cropped). */
}
/* Hide <img> tags with no src, or with a wrong file name, so no
   broken-image icon shows. */
.media img:not([src]),
.media img[src=""],
.media img.is-broken { display: none; }


/* ==========================================================================
   4. BACK ARROW  (top left, goes back to the homepage projects)
   ========================================================================== */
.back {
  position: sticky;                /* sits at the top of the page and scrolls away.
                                        Change to "fixed" to keep it on screen. */
  top: 2rem;                         /* <<< CHANGE distance from the top */
  left: calc(var(--pad-x) - 16px);
  display: grid;
  place-items: center;
  width: 2.5rem;                     /* the clickable area */
  height: 2.5rem;
  margin: 0 0 0 -0.25rem;
  color: var(--ink);
}
.back svg { width: 1.5rem; height: 1.5rem; }       /* <<< CHANGE arrow size */


/* ==========================================================================
   5. LAYOUT + SIDE MENU
   ========================================================================== */

/* Two columns: the menu on the left, the article on the right. */
.cs-layout {
  display: grid;
  grid-template-columns: 25.4% 1fr;  /* <<< CHANGE  menu column width | article */
  /* top | left+right | bottom.  The big top number leaves room for the back
     arrow and lines the title up with the menu. */
  padding: clamp(8rem, 15.5vw, 14rem) var(--pad-x) 0;
}

/* The side menu: OVERVIEW / PROBLEM / RESEARCH ... */
.cs-nav {
  position: sticky;                  /* stays in view while you scroll */
  top: 6rem;                         /* <<< CHANGE how far from the top it sticks */
  align-self: start;
  margin-top: -0.8rem;
}
.cs-nav a {
  display: block;
  padding: 0.85rem 0;                /* <<< CHANGE space between menu items */
  font-size: clamp(0.8rem, 1.25vw, 1.15rem);       /* <<< CHANGE menu text size */
  line-height: 1.5;
  text-transform: uppercase;         /* remove this line to stop the ALL CAPS */
  text-decoration: none;
}
/* Hovered link, and the section you are currently reading (set by
   case-study.js), get an underline. */
.cs-nav a:hover,
.cs-nav a.is-active {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}


/* ==========================================================================
   6. TEXT: HEADINGS, PARAGRAPHS, LISTS
   ========================================================================== */

/* Space above each section (below the previous section's image). */
.cs-section { margin-top: 5.2rem; }                /* <<< CHANGE space between sections */
.cs-section:first-child { margin-top: 0; }

/* Page title (h1) and section headings (h2). */
h1, h2 {
  font-weight: 500;                  /* 400 = regular, 500 = medium, 600 = semi-bold */
  line-height: 1;                    /* tight, like the design */
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

.cs-section > h1 { margin-bottom: 2.25rem; }       /* space under the title */
.cs-section > h2 { margin-bottom: 1.65rem; }       /* space under each section heading */

/* Paragraphs and lists are kept to a comfortable reading width. */
.cs-section > p,
.cs-section .block,
.cs-section .bullets {
  max-width: var(--text-width);
}

/* Bullet lists.
   The round dots are drawn by the ::before below (not real text), so you can
   change their size and position here. */
.bullets li {
  position: relative;
  padding-left: 1.7rem;              /* space between the dot and the text */
  line-height: 1.5;
}
.bullets li::before {
  content: "";
  position: absolute;
  left: 0.55rem;                     /* dot position from the left */
  top: 0.72em;                       /* dot position from the top of the line */
  width: 4px;                        /* <<< CHANGE dot size */
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
/* Smaller bullet lists (inside process + solution blocks). */
.bullets.sm { font-size: var(--fs-detail); }
.bullets.sm li { padding-left: 1.5rem; }
.bullets.sm li::before { left: 0.45rem; width: 3px; height: 3px; }

/* Big pictures. The shape is set by aspect-ratio (width / height).
   Example: change to 16 / 9 for a wider, flatter picture. */
.cs-media {
  max-width: var(--col);
  aspect-ratio: 552 / 342;           /* <<< CHANGE picture shape */
  margin-top: 3.4rem;                /* <<< CHANGE space above each picture */
}


/* ==========================================================================
   7. OVERVIEW DETAILS  (the intro paragraphs + Team / Role / Industry)
   ========================================================================== */
.lead-group p { max-width: var(--col); } /* intro paragraphs are a little wider */
.lead-group p + p { margin-top: 1.75rem; }  /* space between the two intro paragraphs */

/* Three columns: TEAM | ROLE | INDUSTRY */
.meta {
  display: grid;
  grid-template-columns: 36% 27% 1fr;              /* <<< CHANGE the three column widths */
  max-width: var(--col);
  margin-top: 2.9rem;
}
.meta dt {                           /* the small heading: TEAM, ROLE, INDUSTRY */
  font-size: var(--fs-body);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.5;
}
.meta dd {                           /* each line under it: "UX Lead", etc. */
  margin-top: 0.75rem;
  font-size: var(--fs-detail);
  line-height: 1.5;
}
.meta dt + dd { margin-top: 0.7rem; }

.overview .cs-media { margin-top: 2.85rem; }


/* ==========================================================================
   8. PROBLEM LISTS  ("FOR APPLICANTS (FIRMS)" and the bullets under it)
   ========================================================================== */
.group-label {
  margin-top: 1.8rem;
  font-size: var(--fs-body);
  font-weight: 500;
  text-transform: uppercase;         /* remove to show normal capitalisation */
  line-height: 1.5;
}
#problem > h2 + .group-label { margin-top: 0; }    /* first label sits right under the heading */
.group-label + .bullets { margin-top: 0.75rem; }


/* ==========================================================================
   9. NUMBERED BLOCKS
   --------------------------------------------------------------------------
   Used for "1. Repetition breaks trust.", "1. Reframing the journey.",
   "For Applicants", "1. Clarity is more powerful than simplicity." etc.
   Each block is:  a title (h3), then paragraphs and small notes.
   ========================================================================== */

/* Space between blocks. */
.lead + .blocks { margin-top: 3.4rem; }            /* between the intro sentence and block 1 */
.block + .block { margin-top: 3.4rem; }            /* <<< CHANGE space between blocks */
.blocks.tight .block + .block { margin-top: 1.7rem; }  /* the closer-together lists (Impact, Reflection) */

.block h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.5;
}
.block > * + * { margin-top: 0.5rem; }             /* default space between things inside a block */
.block > .bullets { margin-top: 0.25rem; }

/* Small notes: "Opportunity: ...", "Key shift: ..." */
.detail,
.label {
  font-size: var(--fs-detail);
  line-height: 1.5;
}
.label { font-weight: 500; }         /* "Key shift:", "Before:", "After:" */
.detail strong { font-weight: 500; } /* the word "Opportunity:" */

.block > p + .label { margin-top: 0.7rem; }
.block > .label + .detail { margin-top: 0.3rem; }
.block > .label + .bullets { margin-top: 0.25rem; }


/* ==========================================================================
   10. SOLUTION STAGES  (Before / After lists)
   ========================================================================== */
.stage h3 + .label { margin-top: 0.8rem; }
.stage .bullets + .label { margin-top: 0.8rem; }
.stage .bullets + .outcome { margin-top: 0.25rem; }   /* the closing line, e.g. "Users now know..." */


/* ==========================================================================
   11. "SEE NEXT PROJECT" + FOOTER
   ========================================================================== */
.next {
  margin-top: 10rem;                 /* <<< CHANGE space above the line */
  padding: 2.3rem 0 2.4rem;
  text-align: right;                 /* "left" moves the link to the left */
  border-top: 1px solid var(--ink);  /* the thin line above the link */
}
.next a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;                       /* space between the words and the arrow */
  font-size: clamp(1rem, 2.8vw, 1.5rem);         /* <<< CHANGE link size */
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
}
.next a span {                       /* only the words are underlined, not the arrow */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.next svg {
  width: 0.85em;
  height: 0.85em;
  transition: transform 0.25s ease;
}
/* Arrow slides right on hover. Delete these 3 lines to remove it. */
.next a:hover svg,
.next a:focus-visible svg { transform: translateX(4px); }

/* Bottom bar: email + LinkedIn on the left, © on the right. */
.cs-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding: 1.6rem var(--pad-x);
  border-top: 1px solid var(--ink);
}
.cs-footer p { margin: 0; }
.cs-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1.5rem, 4.9vw, 4.4rem);        /* space between email and LinkedIn */
  font-size: var(--fs-detail);
}
.cs-footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.cs-footer-links svg { width: 0.8em; height: 0.8em; }   /* the little ↗ arrow */
.cs-footer > span { font-size: 0.85rem; }                /* the © line */


/* ==========================================================================
   12. MOBILE / TABLET  (screens narrower than 900px)
   --------------------------------------------------------------------------
   Everything above is the desktop layout. These rules stack things for
   phones and small tablets.
   To change WHEN the layout switches, change 900px below.
   ========================================================================== */

/* Below 1000px the forced line breaks in the headings are switched off, so
   the headings wrap naturally to fit the screen. */
@media (max-width: 1000px) {
  .br-d { display: none; }
}

@media (max-width: 900px) {
  :root { --cell: 80px; }            /* smaller grid squares on phones */

  .cs-layout {
    display: block;                  /* menu above the article, not beside it */
    padding-top: 5.5rem;
  }

  /* The side menu becomes a strip along the top that scrolls sideways
     and stays stuck to the top of the screen. */
  .cs-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    margin: 0 calc(var(--pad-x) * -1) 2.5rem;      /* stretches edge to edge */
    padding-inline: var(--pad-x);
    overflow-x: auto;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .cs-nav ul { display: flex; gap: 1.5rem; }
  .cs-nav a { padding: 0.9rem 0; white-space: nowrap; font-size: 0.8rem; }

  section[id] { scroll-margin-top: 4rem; }
  .cs-section { margin-top: 4rem; }

  /* Team / Role / Industry: Team on its own row, the other two side by side. */
  .meta { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; }
  .meta > div:first-child { grid-column: 1 / -1; }

  .next { margin-top: 5rem; }
}

/* 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; }
}