/* ==========================================================================
   Pipsa Martikainen — UX Portfolio
   styles.css

   Structure of this file:
   1. Font import
   2. Design tokens (--p- system)
   3. Base / reset
   4. Typography scale
   5. Layout helpers
   6. Site nav
   7. Footer
   8. Homepage — hero
   9. Homepage — case study list
   10. Responsive (mobile-first; this file scales UP at breakpoints)

   Colour rule: text and background colours ALWAYS use the hardcoded --p-
   tokens below. Never use system CSS variables (e.g. var(--color-text-primary))
   — they resolve to white in dark-mode environments and make text invisible
   on this light background.
   ========================================================================== */


/* 1. Font import -----------------------------------------------------------
   DM Sans, weights 400 and 500 only. Never 600 or 700. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500&display=swap');


/* 2. Design tokens ---------------------------------------------------------
   All colours hardcoded. Spacing and type tokens kept here so the whole
   site scales from one place. */
:root {
  /* Colour — accent */
  --p-accent: #6B7C3E;     /* muted olive — eyebrows, callout borders, CTA links */
  --p-accent-h: #556030;   /* darker olive — hover state */

  /* Colour — surfaces */
  --p-bg: #F9F9F7;         /* warm white page background */
  --p-white: #FFFFFF;
  --p-surface: #F0F0EC;    /* light surface / image placeholder blocks */

  /* Colour — text */
  --p-text: #1C1C1A;       /* primary text */
  --p-muted: #888884;      /* secondary / body-in-prose / meta */
  --p-light: #B2B2AA;      /* tertiary / faint labels */

  /* Colour — borders */
  --p-border: rgba(28, 28, 26, 0.12);
  --p-border-md: rgba(28, 28, 26, 0.22);

  /* Colour — status */
  --p-status-shipped: #4A9B6A;  /* green "Shipped" / available dot */

  /* Layout */
  --p-maxwidth: 1080px;    /* outer container */
  --p-gutter: 24px;        /* page side padding (mobile) */
}


/* 3. Base / reset ----------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: var(--p-text);
  background-color: var(--p-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
}


/* 4. Typography scale ------------------------------------------------------- */

/* Eyebrow / meta labels — 11px / 500 / uppercase / wide tracking */
.eyebrow {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--p-muted);
  margin: 0;
}

/* Hero heading — 42px / 500 / tight tracking */
.hero-heading {
  font-size: 32px;            /* mobile-first; scales up at breakpoint */
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--p-text);
  margin: 0;
}

/* Section headings — 20–22px / 500 */
.section-heading {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--p-text);
  margin: 0;
}

/* Body copy — 16–17px / 400 / generous line-height */
.body-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--p-muted);
  margin: 0;
}


/* 5. Layout helpers --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--p-maxwidth);
  margin: 0 auto;
  padding: 0 var(--p-gutter);
}


/* 6. Site nav --------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--p-border);
}

/* Backdrop once the nav is sticky and the page has scrolled (class toggled in JS) */
.site-nav--scrolled {
  border-bottom: 1px solid var(--p-border);
  background: rgba(249, 249, 247, 0.92);
  backdrop-filter: blur(8px);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--p-gutter);
}

/* Logo / name — weight 500 */
.site-nav__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--p-text);
}

.site-nav__logo img {
  margin-bottom: 1px;
}

/* Mobile-first: the link list is a dropdown panel, opened via the toggle
   button below. The desktop breakpoint restores the inline horizontal nav. */
.site-nav__links {
  display: none;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--p-bg);
  border-bottom: 1px solid var(--p-border);
}

.site-nav__links.is-open {
  display: flex;
  box-shadow: 0 8px 24px rgba(28, 28, 26, 0.12);
}

.site-nav__links li + li {
  border-top: 1px solid var(--p-border);
}

.site-nav__links a {
  display: block;
  padding: 14px var(--p-gutter);
  font-size: 15px;
  font-weight: 400;
  color: var(--p-muted);
  transition: color 0.15s ease;
}

.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] {
  color: var(--p-text);
}

/* Hamburger / close toggle — hidden again at the desktop breakpoint */
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 6px;
  background: none;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--p-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.site-nav__toggle:hover {
  background-color: var(--p-surface);
  color: var(--p-accent);
}


/* 7. Footer ----------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--p-border);
  margin-top: 96px;
}

/* Main footer row — copyright left, links right */
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 40px var(--p-gutter) 12px;
}

.site-footer__copyright {
  font-size: 15px;
  color: var(--p-muted);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.site-footer a {
  font-size: 15px;
  color: var(--p-muted);
  transition: color 0.15s ease;
}

.site-footer a:hover {
  color: var(--p-text);
}

/* Secondary credit line — sits below the main footer row, right-aligned */
.site-footer__credit {
  padding: 0 var(--p-gutter) 32px;
  font-size: 13px;
  color: var(--p-light);
  text-align: right;
}


/* 8. Homepage — hero -------------------------------------------------------- */
.hero {
  padding: 72px 0 56px;
  background: radial-gradient(ellipse at 60% 0%, rgba(107, 124, 62, 0.14) 0%, transparent 70%);
  opacity: 0;
  animation: fadeIn 0.6s ease 0.1s forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

.hero__eyebrow {
  margin-bottom: 20px;
}

.hero__heading {
  max-width: 720px;
  margin-bottom: 24px;
}

.hero__body {
  max-width: 600px;
  font-size: 17px;
}


/* 9. Homepage — case study list --------------------------------------------
   Vertical list: one case study per row. Mobile-first = stacked
   (image on top). At the desktop breakpoint it becomes image-left /
   text-right with a fixed 420px image column. */
.work-list {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding-bottom: 8px;
}

.work-item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: 8px;
  padding: 1.5rem;
}

/* Thumbnail ------------------------------------------------------- */
/* Flush against the card's top edge (mobile/stacked layout); the
   desktop row layout resets this back to a normal inset image. */
.work-item__media {
  position: relative;
  /* width left at its default (auto): with explicit left/right margins
     below, a flex item's auto/stretch sizing fills the bled-out space on
     both sides. A literal "width: 100%" would compute a fixed width from
     the un-bled content box, leaving the negative right margin with no
     box edge to actually pull outward — a 49px gap on the right only. */
  aspect-ratio: 16 / 10;
  background-color: var(--p-surface);
  overflow: hidden;
  margin: -1.5rem -1.5rem 1.5rem -1.5rem;
  border-radius: 8px 8px 0 0;
}

.work-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Hover: image dims to 85% */
.work-item:hover .work-item__media img {
  opacity: 0.85;
}

/* Lock badge — top right of protected thumbnails */
.work-item__lock {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--p-text);
  background-color: var(--p-white);
  border: 1px solid var(--p-border);
}

/* Text column ----------------------------------------------------- */
.work-item__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.work-item__meta {
  /* "Company · Year · Status" line */
  color: var(--p-light);
}

.work-item__title {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--p-text);
  transition: color 0.15s ease;
}

/* Hover: title goes terracotta */
.work-item:hover .work-item__title {
  color: var(--p-accent);
}

.work-item__desc {
  max-width: 560px;
}

/* CTA link — terracotta at rest, darker on hover */
.work-item__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--p-accent);
  transition: color 0.15s ease;
}

.work-item:hover .work-item__cta,
.work-item__cta:hover {
  color: var(--p-accent-h);
}


/* 10. Responsive ------------------------------------------------------------
   Mobile-first above. These breakpoints scale the layout UP. */

@media (min-width: 720px) {
  :root {
    --p-gutter: 40px;
  }

  /* Nav reverts to inline horizontal links; the toggle/drawer are mobile-only */
  .site-nav__links {
    display: flex;
    position: static;
    flex-direction: row;
    gap: 24px;
    padding: 0;
    background: none;
    border-bottom: none;
  }

  .site-nav__links li + li {
    border-top: none;
  }

  .site-nav__links a {
    display: inline;
    padding: 0;
  }

  .site-nav__toggle {
    display: none;
  }

  /* Hero heading reaches its full 42px on larger screens */
  .hero-heading {
    font-size: 42px;
  }

  /* Case study row becomes image-left / text-right */
  .work-item {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }

  /* Fixed 420px image column; text takes the rest. The flush-top treatment
     is mobile-only — in the row layout the image sits inset like the rest
     of the card. */
  .work-item__media {
    flex: 0 0 420px;
    width: 420px;
    margin: 0;
    border-radius: 8px;
  }

  .work-item__body {
    flex: 1;
  }
}


/* 11. Case study page -------------------------------------------------------
   Prose layout: header + body live in a centred 680px column. The
   "You may also like" strip widens out within the container. */

/* Back nav — "← All work", sits below the main nav, top left */
.case-back {
  padding-top: 24px;
}

.case-back a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--p-muted);
  transition: color 0.15s ease;
}

.case-back a:hover {
  color: var(--p-text);
}

/* Centred prose column */
.case-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--p-gutter);
}

/* Header ---------------------------------------------------------- */
.case-header {
  padding-top: 40px;
  padding-bottom: 48px;
}

/* Category eyebrow — terracotta (a sanctioned accent use) */
.case-eyebrow {
  color: var(--p-accent);
  margin-bottom: 20px;
}

.case-title {
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--p-text);
  margin: 0 0 20px;
}

.case-lede {
  font-size: 16px;
  line-height: 1.7;
  color: var(--p-muted);
  margin: 0 0 36px;
}

/* Meta row — 4 columns: My role / Timeline / Domain / Status */
.case-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* mobile: 2x2 */
  gap: 20px 24px;
  padding-top: 28px;
  border-top: 1px solid var(--p-border);
}

.case-meta__label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--p-muted);
  margin: 0 0 6px;
}

.case-meta__value {
  font-size: 15px;
  font-weight: 500;
  color: var(--p-text);
  margin: 0;
}

/* "Shipped" status shows in green */
.case-meta__value.is-shipped {
  color: var(--p-status-shipped);
}

/* Body / prose ---------------------------------------------------- */
.prose {
  padding-bottom: 24px;
}

.prose__section {
  margin-bottom: 44px;
}

/* Section label — 11px uppercase muted */
.prose__label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--p-muted);
  margin: 0 0 10px;
}

/* Section heading — 20px / 500 */
.prose__heading {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--p-text);
  margin: 0 0 16px;
}

/* Body paragraphs — 16px / 400 / line-height 1.8 / muted */
.prose p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--p-muted);
  margin: 0 0 18px;
}

.prose p:last-child {
  margin-bottom: 0;
}

/* Sub-heading within a section (e.g. named process steps) */
.prose h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--p-text);
  margin: 28px 0 10px;
}

/* Lists within prose */
.prose ul {
  margin: 0 0 18px;
  padding-left: 20px;
}

.prose li {
  font-size: 16px;
  line-height: 1.8;
  color: var(--p-muted);
  margin-bottom: 8px;
}

.prose li:last-child {
  margin-bottom: 0;
}

/* Callout — 2px terracotta left border, 17px / 500, square corners */
.callout {
  margin: 0 0 18px;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--p-accent);
  border-radius: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--p-text);
}

/* Image placeholder — grey surface block, 260px tall, caption below */
.figure {
  margin: 0 0 28px;
}

.figure__media {
  width: 100%;
  /* No fixed height: the block sizes to the image so it shows at full
     column width and natural height, rather than being cropped into a box.
     min-height keeps empty/placeholder blocks visible before images exist. */
  min-height: 120px;
  background-color: var(--p-surface);
  overflow: hidden;
}

.figure__media img {
  display: block;
  width: 100%;
  height: auto;
  /* Clicking opens the lightbox (see main.js). */
  cursor: zoom-in;
}

.figure__caption {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--p-light);
}

/* "View full diagram" — figcaption link to the full-size image, new tab */
.figure__link {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  color: var(--p-accent);
  font-weight: 500;
  transition: color 0.15s ease;
}

.figure__link:hover {
  color: var(--p-accent-h);
}

.figure__link-icon {
  flex-shrink: 0;
}

/* End of case study ----------------------------------------------- */

/* Fade-out "continues from here" note */
.case-continues {
  position: relative;
  margin-top: 8px;
  padding-top: 64px;
  text-align: center;
}

/* Soft fade above the note */
.case-continues::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: linear-gradient(to bottom, rgba(249, 249, 247, 0), var(--p-bg));
}

.case-continues p {
  font-size: 14px;
  color: var(--p-light);
  margin: 0;
}

/* Rule divider */
.case-divider {
  max-width: 680px;
  margin: 56px auto;
  border: 0;
  border-top: 1px solid var(--p-border);
}

/* You may also like — 3 cards, 16:10 thumbnails (smaller than homepage) */
.related {
  padding-bottom: 8px;
}

.related__heading {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--p-muted);
  margin: 0 0 24px;
}

.related__grid {
  display: grid;
  grid-template-columns: 1fr;   /* mobile: stacked */
  gap: 28px;
}

.related__card {
  display: block;
}

.related__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: var(--p-surface);
  overflow: hidden;
  margin-bottom: 12px;
}

.related__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

.related__card:hover .related__media img {
  opacity: 0.85;
}

.related__meta {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--p-light);
  margin: 0 0 6px;
}

.related__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--p-text);
  transition: color 0.15s ease;
}

.related__card:hover .related__title {
  color: var(--p-accent);
}

@media (min-width: 720px) {
  /* Meta row becomes a single 4-column row */
  .case-meta {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Related strip becomes 3 across */
  .related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* 12. Password page ---------------------------------------------------------
   Centred vertically and horizontally. Single card, lock badge, input,
   terracotta button, back link. */
.gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px var(--p-gutter);
}

.gate__card {
  width: 100%;
  max-width: 380px;
  text-align: center;
}

/* Lock icon in a circle */
.gate__lock {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border-radius: 50%;
  background-color: var(--p-surface);
  border: 1px solid var(--p-border);
}

.gate__heading {
  font-size: 22px;
  font-weight: 500;
  color: var(--p-text);
  margin: 0 0 12px;
}

.gate__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--p-muted);
  margin: 0 0 28px;
}

/* Form */
.gate__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gate__input {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--p-text);
  background-color: var(--p-white);
  border: 1px solid var(--p-border-md);
  border-radius: 0;
}

.gate__input:focus {
  outline: none;
  border-color: var(--p-accent);
}

/* Terracotta button */
.gate__button {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--p-white);
  background-color: var(--p-accent);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.gate__button:hover {
  background-color: var(--p-accent-h);
}

/* Error message — hidden until shown via JS */
.gate__error {
  font-size: 13px;
  color: var(--p-accent);
  margin: 0;
  min-height: 1em;
}

.gate__error[hidden] {
  display: none;
}

/* Back link */
.gate__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  font-size: 15px;
  color: var(--p-muted);
  transition: color 0.15s ease;
}

.gate__back:hover {
  color: var(--p-text);
}


/* 13. Shared page heading ---------------------------------------------------
   Used by simple content pages (About, Contact, More work). */
.page-heading {
  font-size: 28px;            /* mobile-first */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--p-text);
  margin: 16px 0 0;
}


/* 14. About page ------------------------------------------------------------
   Two columns: text left (flex 1) / B&W photo right (300px, 3:4). */
.about {
  padding-top: 56px;
  padding-bottom: 8px;
}

.about__grid {
  display: flex;
  flex-direction: column;       /* mobile: stacked (text, then photo) */
  gap: 40px;
}

.about__text {
  flex: 1;
}

/* Space between the heading and the first paragraph */
.about__text .page-heading {
  margin-bottom: 28px;
}

.about__text p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--p-muted);
  margin: 0 0 20px;
}

.about__text p:last-child {
  margin-bottom: 0;
}

/* B&W portrait — 3:4 aspect ratio */
.about__photo {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 3 / 4;
  background-color: var(--p-surface);
  overflow: hidden;
}

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

/* Skills strip — below text, above footer */
.skills {
  padding-top: 48px;
  padding-bottom: 8px;
}

.skills__label {
  margin-bottom: 16px;
}

.skills__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.skills__tags li {
  font-size: 14px;
  color: var(--p-text);
  padding: 6px 14px;
  border: 1px solid var(--p-border-md);
  border-radius: 0;
}


/* 15. Contact page ----------------------------------------------------------- */
.contact {
  padding-top: 56px;
  padding-bottom: 8px;
}

.contact__body {
  max-width: 520px;
  font-size: 17px;
  margin: 24px 0 0;
}

/* Contact rows — label + terracotta value */
.contact-list {
  margin: 40px 0 0;
  border-top: 1px solid var(--p-border);
}

.contact-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 0;
  border-bottom: 1px solid var(--p-border);
}

.contact-row__label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--p-muted);
}

/* Values are terracotta, underline on hover */
.contact-row__value {
  font-size: 17px;
  color: var(--p-accent);
  text-decoration: none;
  width: fit-content;
  transition: color 0.15s ease;
}

.contact-row__value:hover {
  color: var(--p-accent-h);
  text-decoration: underline;
}

/* Availability card — green dot + text */
.availability {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 40px 0 0;
  padding: 16px 20px;
  background-color: var(--p-surface);
  border: 1px solid var(--p-border);
}

.availability__dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--p-status-shipped);
}

.availability__text {
  font-size: 15px;
  color: var(--p-text);
  margin: 0;
}

/* 16. More work page --------------------------------------------------------
   List: small thumbnail left, text middle, tag + arrow right.
   Each item separated by a top border; the last item also has a bottom one. */
.more-work {
  padding-top: 56px;
  padding-bottom: 8px;
}

.more-work__intro {
  max-width: 560px;
  margin: 16px 0 40px;
}

.mw-list {
  display: flex;
  flex-direction: column;
}

.mw-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--p-border);
}

.mw-item:last-child {
  border-bottom: 1px solid var(--p-border);
}

/* Thumbnail — 160×100px (16:10); a touch smaller on mobile */
.mw-item__media {
  position: relative;
  flex: 0 0 120px;
  width: 120px;
  aspect-ratio: 16 / 10;
  background-color: var(--p-surface);
  overflow: hidden;
}

/* Compact lock badge for protected items, sized for the small thumbnail */
.mw-item__lock {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--p-text);
  background-color: var(--p-white);
  border: 1px solid var(--p-border);
}

.mw-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

.mw-item:hover .mw-item__media img {
  opacity: 0.85;
}

/* Text — meta · title · description */
.mw-item__body {
  flex: 1;
  min-width: 0;             /* allow text to wrap rather than overflow */
}

.mw-item__meta {
  color: var(--p-light);
  margin: 0 0 6px;
}

.mw-item__title {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--p-text);
  margin: 0 0 6px;
  transition: color 0.15s ease;
}

.mw-item:hover .mw-item__title {
  color: var(--p-accent);
}

.mw-item__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--p-muted);
  margin: 0;
}

/* Tag + arrow */
.mw-item__aside {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: 8px;
}

.mw-item__tag {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--p-muted);
  white-space: nowrap;
}

.mw-item__arrow {
  font-size: 16px;
  color: var(--p-light);
}

@media (min-width: 720px) {
  .page-heading {
    font-size: 34px;
  }

  /* About becomes text-left / photo-right, photo vertically centred to the text */
  .about__grid {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }

  .about__photo {
    flex: 0 0 300px;
  }

  /* Thumbnails reach their full 160×100 size */
  .mw-item {
    gap: 28px;
  }

  .mw-item__media {
    flex: 0 0 160px;
    width: 160px;
  }
}

/* Lightbox ---------------------------------------------------------------
   Overlay for viewing case study figures at near-fullscreen size. The
   element is created and toggled by main.js; clicking the backdrop (or
   pressing Escape) closes it. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background-color: rgba(28, 28, 26, 0.85);
  cursor: zoom-out;
  /* Hidden until .is-open is added. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
  /* Click toggles zoom (see .is-zoomed below) rather than closing. */
  cursor: zoom-in;
}

/* Zoomed: show the image at native resolution inside a scrollable viewport,
   so detail-heavy diagrams can be read without leaving the page. */
.lightbox.is-zoomed {
  overflow: auto;
  align-items: flex-start;
  justify-content: flex-start;
}

.lightbox.is-zoomed .lightbox__img {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--p-white);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
}

.lightbox__close:hover {
  opacity: 1;
}

/* Fade-up reveal — toggled by a scroll observer in JS */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

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

/* Homepage card hover lift */
.work-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.work-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(28, 28, 26, 0.08);
}

/* Reading progress bar */
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: #6B7C3E;
  width: 0%;
  z-index: 100;
  transition: width 0.1s linear;
}

/* Scroll-to-top button */
#scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6B7C3E;
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 100;
}

#scroll-top.visible {
  opacity: 1;
}

/* Page entrance animation */
main {
  animation: pageEnter 0.4s ease both;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}