/* ============================================================
   styles.css
   Kieran McCann — Portfolio design system

   Structure:
   1.  Fonts
   2.  Design tokens (CSS custom properties)
   3.  Reset & base
   4.  Typography helper classes
   5.  Layout
   6.  Site navigation
   7.  Homepage — project list items
   8.  Case study — project image + caption
   9.  Case study — text block
   10. Case study — project-end divider
   11. Case study — "next project" row
   ============================================================ */


/* ============================================================
   1. FONTS
   DM Sans — geometric sans-serif for headings and UI copy.
   Lora    — elegant serif for long-form body copy.

   font-optical-sizing: auto tells the browser to use the "opsz"
   axis built into variable fonts, which slightly adjusts letter
   shapes for small or large sizes — matches Figma's opsz:14.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,600&family=Lora:wght@400&display=swap');


/* ============================================================
   2. DESIGN TOKENS
   Every value comes straight from Figma.
   Edit here and it ripples through the whole site.
   ============================================================ */
:root {

  /* --- Colour palette --- */
  --color-text:          #262626;   /* Text/Dark — main body and headings */
  --color-interactive:   #3D38F5;   /* Text/Interactive — hover / active state */
  --color-interactive-dark: #BBB9F3;   /* Text/Interactive on dark backgrounds — e.g. footer link hover */
  --color-icon:          #5D5D5D;   /* Icon/Dark */
  --color-bg-light:      #F0F0F0;   /* Background/Light — image placeholders */
  --color-bg-image:      #f2f2f2;   /* Slightly lighter image placeholder */
  --color-border:        #C6C6C6;   /* Border/Light — dividers */
  --color-caption:       #5E5E5E;   /* Caption text */
  --color-white:         #FFFFFF;
  --color-footer-bg:     #262626;   /* Footer background — near-black */
  --color-footer-muted:  rgba(255, 255, 255, 0.5);   /* Footer copyright text */

  /* --- Type scale: DM Sans headings ---
     Each entry: size / line-height / letter-spacing
     Letter-spacing in Figma is stored as a per-mille value;
     here it is converted to px for direct use in CSS.        */
  --h1-size:      56px;
  --h1-line:      64px;
  --h1-spacing:   -1px;     /* Opened out from Figma's -2.8px for improved readability */

  --h2-size:      40px;
  --h2-line:      48px;
  --h2-spacing:   -0.5px;    /* Opened out from Figma's -1.6px — same treatment as h1 */

  --h3-size:      32px;
  --h3-line:      40px;
  --h3-spacing:   -0.5px;    /* Opened out from Figma's -0.96px — same treatment as h1 */

  --h4-size:      24px;
  --h4-line:      32px;
  --h4-spacing:   -0.72px;

  --h5-size:      20px;
  --h5-line:      36px;
  --h5-spacing:   -0.4px;

  /* --- Type scale: body --- */
  --body-size:    20px;
  --body-line:    36px;
  --body-spacing: -0.2px;

  --ui-size:      20px;
  --ui-line:      28px;

  --small-size:   14px;
  --small-line:   24px;

  /* --- Spacing scale (matches Figma variable names) ---
     Always prefer these tokens over raw pixel values.     */
  --space-4:    4px;
  --space-8:    8px;
  --space-16:   16px;
  --space-24:   24px;
  --space-32:   32px;
  --space-40:   40px;
  --space-64:   64px;
  --space-80:   80px;

  /* --- Layout --- */
  --page-max:       1710px;   /* Full frame width in Figma */
  --content-max:    1400px;   /* Main content column width */
  --nav-height:     123px;    /* 40px top + 43px logo + 40px bottom */
}


/* ============================================================
   2b. RESPONSIVE TYPE SCALE — Mobile (max-width: 767px)

   This is the CSS equivalent of your Figma "Mobile" variable
   mode. By re-declaring only the type tokens inside a media
   query, every .t-* class automatically gets the smaller values
   — no extra rules needed anywhere else in the file.

   HOW CSS CUSTOM PROPERTY OVERRIDES WORK:
   Custom properties follow the normal cascade. A :root rule
   inside a media query has higher specificity than the base
   :root rule when the media condition is true, so these values
   win at narrow widths and the desktop values win everywhere else.

   Sizes match the Figma Typography → Mobile mode values.
   Letter-spacing is also relaxed at small sizes — tight tracking
   that looks good at 56px becomes hard to read at 36px.
   ============================================================ */
@media (max-width: 767px) {
  :root {

    /* Headings */
    --h1-size:      36px;
    --h1-line:      44px;
    --h1-spacing:   -0.5px;   /* relaxed from -1px — less tight at small sizes */

    --h2-size:      28px;
    --h2-line:      36px;
    --h2-spacing:   -0.4px;

    --h3-size:      24px;
    --h3-line:      32px;
    --h3-spacing:   -0.3px;

    --h4-size:      20px;
    --h4-line:      28px;
    --h4-spacing:   -0.2px;

    --h5-size:      18px;
    --h5-line:      28px;
    --h5-spacing:   -0.1px;

    /* Body */
    --body-size:    17px;
    --body-line:    28px;
    --body-spacing: -0.1px;

    --ui-size:      17px;
    --ui-line:      24px;

    --small-size:   12px;
    --small-line:   20px;

    /* --space-80 drives every horizontal page margin (nav, content,
       case-study padding, captions, dividers) — collapsing it here
       shrinks all of them to 16px in one place. */
    --space-80: 16px;
  }
}


/* ============================================================
   3. RESET & BASE
   box-sizing: border-box — padding and border are included in
   the declared width/height, so layout maths stays predictable.
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;   /* smoother text on macOS */
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-optical-sizing: auto;
  color: var(--color-text);
  background-color: var(--color-white);
}

/* Remove underline from all links by default; re-add where needed */
a { text-decoration: none; color: inherit; }

/* Block display prevents mysterious inline whitespace under images */
img { display: block; max-width: 100%; }


/* ============================================================
   4. TYPOGRAPHY HELPER CLASSES
   These classes map 1-to-1 to the named text styles in Figma.
   Apply them to any element; don't style h1/p etc. globally.
   ============================================================ */

/* Heading 1 — 56px / 64px / SemiBold */
.t-h1 {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--h1-size);
  font-weight: 600;
  line-height: var(--h1-line);
  letter-spacing: var(--h1-spacing);
  font-optical-sizing: auto;
}

/* Heading 2 — 40px / 48px / SemiBold */
.t-h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--h2-size);
  font-weight: 600;
  line-height: var(--h2-line);
  letter-spacing: var(--h2-spacing);
  font-optical-sizing: auto;
}

/* Heading 3 — 32px / 40px / SemiBold */
.t-h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--h3-size);
  font-weight: 600;
  line-height: var(--h3-line);
  letter-spacing: var(--h3-spacing);
  font-optical-sizing: auto;
}

/* Heading 4 — 24px / 32px / SemiBold */
.t-h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--h4-size);
  font-weight: 600;
  line-height: var(--h4-line);
  letter-spacing: var(--h4-spacing);
  font-optical-sizing: auto;
}

/* Heading 5 — 20px / 36px / SemiBold */
.t-h5 {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--h5-size);
  font-weight: 600;
  line-height: var(--h5-line);
  letter-spacing: var(--h5-spacing);
  font-optical-sizing: auto;
}

/* Body copy (sans) — 20px / 36px / Regular */
.t-body {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-line);
  letter-spacing: var(--body-spacing);
  font-optical-sizing: auto;
}

/* UI copy — 20px / 28px / Regular (shorter line-height than body) */
.t-ui {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--ui-size);
  font-weight: 400;
  line-height: var(--ui-line);
  font-optical-sizing: auto;
}

/* Body copy serif — 20px / 36px / Lora Regular */
.t-body-serif {
  font-family: 'Lora', Georgia, serif;
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-line);
  letter-spacing: var(--body-spacing);
}

/* Small copy — 14px / 24px / Regular */
.t-small {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--small-size);
  font-weight: 400;
  line-height: var(--small-line);
  font-optical-sizing: auto;
}


/* ============================================================
   5. LAYOUT
   .page-wrap  — caps the page at 1710px and centres it.
   .content    — the narrower 1400px content column inside it.

   Why two wrappers?
   The nav runs edge-to-edge within the 1710px frame.
   The article content is narrower (1400px) and centred.
   Keeping them separate means we don't need negative margins.
   ============================================================ */
.page-wrap {
  max-width: var(--page-max);
  margin: 0 auto;
}

/* The main content column — mirrors Figma's left:155px, width:1400px.
   At max page width: (1710 - 1400) / 2 = 155px auto margin each side. */
.content {
  max-width: var(--content-max);
  margin: 0 auto;
}


/* ============================================================
   6. SITE NAVIGATION
   position: sticky keeps the nav pinned to the top of the
   viewport as the user scrolls. z-index: 100 ensures it
   always renders above page content.

   The KM logo SVG is inlined in the HTML so we can change its
   fill colour on hover using CSS — no need for a second image.
   ============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-white);

  /* Matches Figma: px-80px py-40px, flex, space-between */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-40) var(--space-80);

  /* Pinned to --nav-height explicitly rather than left to size
     itself from padding + content: without this, the nav's real
     height can come out a few px off from --nav-height depending
     on font-load timing (fallback font metrics vs. DM Sans once
     loaded), which throw off anything anchored to that token —
     e.g. .project-item's scroll-margin-top below. */
  height: var(--nav-height);
}

/* --- Logo --- */
/* The SVG is 50×43px in Figma */
.site-logo {
  display: block;
  width: 50px;
  height: 43px;
  flex-shrink: 0;
}

/* The SVG paths default to #262626; hover changes them to the
   interactive blue. SVG fill is inherited by <path> elements
   when they use fill="currentColor" — but since these paths use
   explicit fill attributes, we target them directly.
   Alternatively, wrap the SVG in a <span> and override via CSS. */
.site-logo svg path {
  transition: fill 0.15s ease;
}

.site-logo:hover svg path {
  fill: var(--color-interactive);
}

/* --- Nav links group --- */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-16);   /* Figma: gap-16px between items and separator */
}

/* Individual link — uses H3 sizing to match Figma */
.nav-link {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--h3-size);       /* 32px */
  font-weight: 600;
  line-height: var(--h3-line);     /* 40px */
  letter-spacing: var(--h3-spacing);
  font-optical-sizing: auto;
  color: var(--color-text);
  padding: var(--space-4) var(--space-8);
  border-radius: 4px;
  transition: color 0.15s ease;
}

.nav-link:hover {
  color: var(--color-interactive);
}

/* Thin vertical rule between "Work" and "About".
   In Figma this is a horizontal line rotated 90°;
   we use a simple 1px-wide block instead. */
.nav-sep {
  display: block;
  width: 1px;
  height: 32px;
  background-color: var(--color-border);
  flex-shrink: 0;
}


/* ============================================================
   7. HOMEPAGE — PROJECT LIST ITEM
   Layout: [logo + title] [————— image —————]

   The left column is fixed-width (360px matching Figma).
   The right image column grows to fill remaining space via flex: 1.

   The whole row is an <a> tag so the entire area is clickable.
   ============================================================ */
.project-item {
  display: flex;
  gap: var(--space-24);
  align-items: flex-start;
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-border);
  width: 100%;
  color: var(--color-text);

  /* Keeps the sticky nav from covering the item when the "Work"
     nav link jumps here via #first-project — lands the scroll
     exactly on the item's top border, flush against the nav
     below it, with the border line visible right at the seam.
     Reliable now that .site-nav has an explicit height (see its
     rule above) instead of a font-metric-dependent auto height. */
  scroll-margin-top: var(--nav-height);
}

/* Landing on #first-project via the "Work" nav link moves browser
   focus to this anchor (it's the URL fragment target), which paints
   the default focus ring — reads as an unwanted "active" state for
   a plain scroll jump. Suppress it here; the hover zoom already
   signals interactivity. */
.project-item:focus {
  outline: none;
}

/* Left column — logo stacked above title */
.project-item__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex-shrink: 0;
  width: 360px;        /* Figma: w-360px */
  justify-content: center;
}

/* Project logo icon — 64×64 rounded square */
.project-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background-color: var(--color-bg-light);
  overflow: hidden;
  flex-shrink: 0;
}

.project-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Project name uses Heading 3 sizing */
.project-item__name {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--h3-size);
  font-weight: 600;
  line-height: var(--h3-line);
  letter-spacing: var(--h3-spacing);
  font-optical-sizing: auto;
}

/* Right column — expands to fill available width */
.project-item__image {
  flex: 1;
  min-width: 0;   /* prevents flex children from overflowing */
}

/* aspect-ratio preserves the exact 750:420 proportion from Figma.
   The browser calculates height automatically as width changes. */
.project-item__thumb {
  width: 100%;
  aspect-ratio: 750 / 420;
  background-color: var(--color-bg-image);
  border-radius: 16px;
  overflow: hidden;
}

.project-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Hover state zooms the image within its frame (see .project-item:hover
     below) rather than fading the whole row — the frame's overflow:hidden
     above clips the enlarged image so it never grows past its own bounds. */
  transition: transform 0.4s ease;
}

.project-item:hover .project-item__thumb img {
  transform: scale(1.06);
}


/* ============================================================
   8. CASE STUDY — PROJECT IMAGE + CAPTION
   Full-width image (within the content column) with a small
   caption below it, indented to align with text blocks.
   ============================================================ */
.project-image {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

/* Fixed 640px height matches the Figma frame */
.project-image__frame {
  width: 100%;
  height: 640px;
  background-color: var(--color-bg-light);
  border-radius: 16px;
  overflow: hidden;
}

.project-image__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Caption is indented by 80px on each side to align with text.
   Uses Small copy style (14px / 24px). */
.project-image__caption {
  padding: 0 var(--space-80);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--small-size);
  font-weight: 400;
  line-height: var(--small-line);
  color: var(--color-caption);
  font-optical-sizing: auto;
}


/* ============================================================
   9. CASE STUDY — TEXT BLOCK
   Used for section headings and body copy throughout the case
   study. Padded to be narrower than the images above/below —
   this is a deliberate design choice: images bleed wider than
   text for visual impact.

   Figma padding: px-80px py-40px (on top of the outer 80px
   from the parent, so text sits at 160px from the content edge).
   ============================================================ */
.text-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-40) var(--space-80);
  width: 100%;
}

/* H3 for section headings within the case study */
.text-block__title {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--h3-size);
  font-weight: 600;
  line-height: var(--h3-line);
  letter-spacing: var(--h3-spacing);
  font-optical-sizing: auto;
  color: var(--color-text);
}

/* Lora serif for long-form body copy — easier to read than sans at 20px */
.text-block__body {
  font-family: 'Lora', Georgia, serif;
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-line);
  letter-spacing: var(--body-spacing);
  color: var(--color-text);
}


/* ============================================================
   10. CASE STUDY — PROJECT END DIVIDER
   A visual sign-off at the bottom of the case study:

     ———————————  •  ———————————

   The two lines are CSS-only (no image needed). The centre mark
   is a plain dot rather than a logo — it also serves as the lead-in
   to the "Next project" teaser directly below it.
   ============================================================ */
.project-end {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  /* Indented to align with text blocks */
  padding: 0 var(--space-80);
}

/* flex: 1 makes each line grow equally to fill the remaining space */
.project-end__line {
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

/* Project logo, centred between the two lines — same 64px circular
   treatment as the logos on the homepage project list. */
.project-end__dot {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.project-end__dot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ============================================================
   11. CASE STUDY — "NEXT PROJECT" TEASER
   A compact, centred link: small thumbnail + "Next project ›"
   label. Sits directly below the project-end divider.
   ============================================================ */
.next-project {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-32);
  color: var(--color-text);
}

.next-project__thumb {
  width: 280px;
  aspect-ratio: 1240 / 694;
  background-color: var(--color-bg-image);
  border-radius: var(--space-8);
  overflow: hidden;
  flex-shrink: 0;
}

.next-project__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Same frame-clipped zoom treatment as .project-item__thumb above. */
  transition: transform 0.4s ease;
}

.next-project:hover .next-project__thumb img {
  transform: scale(1.06);
}

.next-project__label {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--h2-size);
  font-weight: 600;
  line-height: var(--h2-line);
  letter-spacing: var(--h2-spacing);
  font-optical-sizing: auto;
}


/* ============================================================
   12. SITE FOOTER
   Dark, full-bleed band shared by every page.
   Desktop: "Say hello!" bottom-left, contact links stacked
   top-right, copyright bottom-left below the heading.
   Mobile: everything stacks and left-aligns (see media query).
   ============================================================ */
/* .page-wrap caps out at --page-max (1710px) and centres itself,
   so the footer sits OUTSIDE .page-wrap in the HTML (a sibling,
   not a child) — that's what lets width:100% here mean 100% of
   the viewport rather than 100% of the capped column. See
   index.html / case-study.html / about.html for the markup.
   .site-footer__inner still keeps its content readable at the
   same max-width as the rest of the page. */
.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-white);
  width: 100%;
}

.site-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-64) var(--space-80) var(--space-40);
}

.site-footer__heading {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--h1-size);
  font-weight: 600;
  line-height: var(--h2-line);
  letter-spacing: var(--h2-spacing);
  font-optical-sizing: auto;
  color: var(--color-white);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-8);
}

.site-footer__link {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--h3-size);
  font-weight: 600;
  line-height: var(--h3-line);
  letter-spacing: var(--h3-spacing);
  font-optical-sizing: auto;
  color: var(--color-white);
  transition: color 0.15s ease;
}

.site-footer__link:hover {
  color: var(--color-interactive-dark);
}

.site-footer__copyright {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--small-size);
  line-height: var(--small-line);
  font-optical-sizing: auto;
  color: var(--color-footer-muted);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-80) var(--space-24);
}


/* ============================================================
   12. RESPONSIVE LAYOUT — Mobile (max-width: 767px)
   Non-typography layout changes: images that scale without
   cropping, and the restacked project-list-item from Figma's
   mobile "Project list item" component variant.

   Placed at the end of the file (rather than up near the type
   scale in section 2) so these overrides come AFTER the base
   component rules they override — same-specificity rules are
   resolved by source order, not just by media query nesting.
   ============================================================ */
@media (max-width: 767px) {

  /* Case-study hero/body images: swap the fixed 640px height for
     an aspect-ratio, so the image scales proportionally as the
     column narrows instead of being cropped by object-fit: cover. */
  .project-image__frame {
    height: auto;
    aspect-ratio: 1240 / 640;
  }

  /* Project list item restacks: logo+title row on top, full-width
     image below (was a side-by-side row on desktop). */
  .project-item {
    flex-direction: column;
    gap: var(--space-24);
  }

  .project-item__info {
    flex-direction: row;
    align-items: center;
    gap: 12px;   /* Figma mobile spec — falls between --space-8 and --space-16 */
    width: 100%;
    justify-content: flex-start;
  }

  .project-item__image {
    width: 100%;
  }

  .project-item__thumb {
    aspect-ratio: 400 / 224;
    border-radius: var(--space-8);
  }

  /* Footer stacks and left-aligns everything on mobile */
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
    padding: var(--space-40) var(--space-16) var(--space-24);
  }

  .site-footer__links {
    align-items: flex-start;
  }

  .site-footer__copyright {
    padding: 0 var(--space-16) var(--space-16);
  }

  /* Next-project teaser stacks image above label on mobile */
  .next-project {
    flex-direction: column;
    gap: var(--space-32);
  }
}