/* ============================================================
   Thibault Lafaurie - Portfolio
   style.css

   No preprocessor, no PostCSS, no @apply. Just CSS that aged well.

   Table of contents:
   01. Variables & reset
   02. Layout
   03. Navigation
   04. Hero            - section 01
   05. About           - section 02
   06. Timeline & hobbies - sections 03–04
   07. Stack           - section 05
   08. Projects        - section 06
   09. Contact         - section 07
   10. Animations
   11. Responsive - tablet (< 900px)
   12. Responsive - mobile (< 600px)
   ============================================================ */


/* ============================================================
   01. Variables & reset
   ============================================================ */

:root {
  --font-sans    : 'Inter', system-ui, sans-serif;
  --font-serif   : 'DM Serif Display', Georgia, serif;

  /* Core colors */
  --ink          : #1F1A14;   /* primary text */
  --ink-light    : #6B6258;   /* secondary text */
  --ink-faint    : #9C9286;   /* tertiary text / labels */
  --cream        : #F5F0E8;   /* page background */
  --cream-dark   : #EBE6DD;   /* outer background */
  --border       : #E5DDD0;   /* separator lines */

  /* Accent - terracotta */
  --accent       : #B5341A;
  --accent-dark  : #5C1B0A;

  /* Secondary - sage green (status) */
  --sage         : #5A7236;
  --sage-dark    : #2E3D17;

  /* Type scale */
  --text-xs   : 10px;
  --text-sm   : 11px;
  --text-base : 13px;
  --text-md   : 14px;
  --text-lg   : 17px;
  --text-xl   : 24px;
  --text-2xl  : 26px;
  --text-3xl  : 28px;
  --text-hero : 62px;

  /* Spacing */
  --section-pad-h : 36px;
  --section-pad-v : 64px;
  --section-pad-v-sm : 56px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family : var(--font-sans);
  background  : var(--cream-dark);
  color       : var(--ink);
  min-height  : 100vh;
  padding     : 24px;
  font-weight : 400;
  line-height : 1.6;
}

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


/* ============================================================
   02. Layout
   ============================================================ */

/* Outer frame - yes, it's a portfolio dressed up as a browser window.
   Meta? A little. I'm keeping it anyway. */
.browser-frame {
  background    : var(--cream-dark);
  border-radius : 12px;
  padding       : 14px;
  max-width     : 1320px;
  margin        : 0 auto;
}

.browser-chrome {
  display        : flex;
  gap            : 6px;
  align-items    : center;
  margin-bottom  : 10px;
  padding        : 0 6px;
}

.browser-chrome-dot {
  width        : 10px;
  height       : 10px;
  border-radius: 50%;
}

.browser-chrome-url {
  flex        : 1;
  text-align  : center;
  font-size   : var(--text-sm);
  color       : #888780;
}

/* Main content */
.page {
  background    : var(--cream);
  border-radius : 8px;
  overflow      : hidden;
}

/* Section separators */
.section {
  padding: var(--section-pad-v) var(--section-pad-h);
  border-top: 0.5px solid var(--border);
}

.section:first-of-type {
  border-top: none;
}

/* Anchor offset for in-page navigation */
section[id] {
  scroll-margin-top: 20px;
}

/* Section label (e.g. "01 - index") */
.section-label {
  font-size      : var(--text-sm);
  color          : var(--accent);
  letter-spacing : 0.2em;
  margin-bottom  : 8px;
  display        : block;
}


/* ============================================================
   03. Navigation
   ============================================================ */

.nav {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  padding         : 20px var(--section-pad-h);
  border-bottom   : 0.5px solid var(--border);
}

.nav-logo {
  display    : flex;
  align-items: center;
  gap        : 9px;
  color      : var(--ink);
  transition : color 0.25s ease;
}

.nav-logo:hover { color: var(--accent); }

.nav-logo-dot {
  width        : 8px;
  height       : 8px;
  background   : var(--accent);
  border-radius: 1px;
  flex-shrink  : 0;
}

.nav-logo-name {
  font-size      : 12px;
  font-weight    : 500;
  letter-spacing : 0.02em;
}

.nav-links {
  display : flex;
  gap     : 24px;
  font-size: 12px;
}

.nav-link {
  color     : var(--ink-light);
  transition: color 0.25s ease;
}

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

.nav-status {
  display    : flex;
  align-items: center;
  gap        : 7px;
}

.nav-status-dot {
  width        : 6px;
  height       : 6px;
  border-radius: 50%;
  background   : var(--sage);
  display      : inline-block;
}

.nav-status-text {
  font-size: var(--text-sm);
  color    : var(--sage-dark);
}


/* ============================================================
   04. Hero - section 01
   ============================================================ */

.hero {
  padding-top   : 80px;
  padding-bottom: var(--section-pad-v);
}

.hero-meta-row {
  display         : flex;
  justify-content : space-between;
  align-items     : baseline;
  margin-bottom   : 48px;
}

.hero-location {
  font-size  : var(--text-sm);
  color      : var(--ink-faint);
  font-style : italic;
}

.hero-title {
  font-family   : var(--font-serif);
  font-size     : var(--text-hero);
  line-height   : 0.98;
  color         : var(--ink);
  letter-spacing: -0.025em;
  font-weight   : 400;
  text-align    : center;
}

.hero-title em {
  color     : var(--accent);
  font-style: italic;
}

.hero-cursor {
  color  : var(--accent);
  display: inline-block;
}

.hero-standfirst {
  font-family: var(--font-serif);
  font-size  : var(--text-2xl);
  font-style : italic;
  color      : var(--ink);
  line-height: 1.4;
  margin-top : 32px;
  max-width  : 640px;
  margin-left: auto;
  margin-right: auto;
  text-align : center;
}

.hero-body {
  max-width   : 580px;
  margin-top  : 24px;
  margin-left : auto;
  margin-right: auto;
  text-align  : center;
}

.hero-body p {
  font-size  : var(--text-md);
  color      : var(--ink-light);
  line-height: 1.7;
}

.hero-body p + p {
  margin-top: 16px;
}

/* Meta grid (since / stack / location / availability) */
.stat-grid {
  display              : grid;
  grid-template-columns: repeat(4, 1fr);
  gap                  : 28px;
  margin-top           : 60px;
  padding-top          : 28px;
  border-top           : 0.5px solid var(--border);
}

.stat-label {
  font-size      : var(--text-xs);
  color          : var(--accent);
  letter-spacing : 0.22em;
  margin-bottom  : 9px;
  display        : block;
}

.stat-value {
  font-size  : var(--text-lg);
  color      : var(--ink);
  font-weight: 500;
  display    : block;
  line-height: 1.2;
  margin-bottom: 4px;
}

.stat-sub {
  font-size : var(--text-sm);
  color     : var(--ink-faint);
  font-style: italic;
  display   : block;
}


/* ============================================================
   05. About - section 02
   ============================================================ */

.about {
  padding-top   : var(--section-pad-v-sm);
  padding-bottom: var(--section-pad-v-sm);
}

.about-grid {
  display              : grid;
  grid-template-columns: 0.7fr 1.5fr;
  gap                  : 48px;
  align-items          : center;
}

/* Portrait */
.portrait {
  position    : relative;
  overflow    : hidden;
  cursor      : pointer;
  border-radius: 4px;
  background  : #EDD8C7;
  max-width   : 220px;
  margin      : 0 auto;
}

/* Default image: in normal flow, gives the container its height */
.portrait-img-default {
  display          : block;
  width            : 100%;
  aspect-ratio     : 4 / 5;
  object-fit       : cover;
  transition       : opacity 0.45s ease;
  animation        : ken-burns 14s ease-in-out infinite alternate;
  transform-origin : center;
}

/* Hover image: absolutely stacked on top */
.portrait-img-hover {
  position  : absolute;
  inset     : 0;
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  opacity   : 0;
  transition: opacity 0.45s ease;
}

/* On hover: swap to the second photo */
.portrait:hover .portrait-img-hover  { opacity: 1; }
.portrait:hover .portrait-img-default { opacity: 0; }

.about-intro {
  font-family  : var(--font-serif);
  font-size    : var(--text-xl);
  line-height  : 1.35;
  color        : var(--ink);
  font-weight  : 400;
  margin-bottom: 22px;
}

.about-intro em {
  color     : var(--accent);
  font-style: italic;
}

.about-content p:not(.about-intro) {
  font-size  : var(--text-base);
  color      : var(--ink-light);
  line-height: 1.7;
}

.about-content p:not(.about-intro) + p {
  margin-top: 14px;
}


/* ============================================================
   06. Timeline & hobbies - sections 03–04
   ============================================================ */

.timeline-section {
  padding-top   : 44px;
  padding-bottom: 44px;
}

.timeline-layout {
  display              : grid;
  grid-template-columns: repeat(2, 1fr);
  gap                  : 48px;
  align-items          : start;
}

/* Timeline column */
.timeline-title {
  font-size      : var(--text-sm);
  color          : var(--accent);
  letter-spacing : 0.2em;
  margin-bottom  : 16px;
  display        : block;
}

.timeline-row {
  display              : grid;
  grid-template-columns: 95px 1fr auto;
  gap                  : 18px;
  font-size            : var(--text-base);
  color                : var(--ink);
  padding              : 10px 0;
  border-bottom        : 0.5px solid var(--border);
  align-items          : baseline;
}

.timeline-row:last-child {
  border-bottom: none;
}

.timeline-year {
  color: var(--ink-faint);
}

.timeline-company {
  font-weight: 500;
}

.timeline-role {
  color: var(--ink-light);
}

.timeline-location {
  color      : var(--ink-faint);
  font-style : italic;
  font-size  : var(--text-sm);
  white-space: nowrap;
}

/* Hobbies column */
.hobbies-title {
  font-size      : var(--text-sm);
  color          : var(--accent);
  letter-spacing : 0.2em;
  margin-bottom  : 16px;
  display        : block;
}

.hobbies-list {
  font-family: var(--font-serif);
  font-size  : 16px;
  color      : var(--ink);
  line-height: 1.7;
  font-weight: 400;
}

.hobbies-comment {
  color      : var(--ink-faint);
  font-style : italic;
  font-size  : var(--text-base);
}

.hobbies-link {
  color      : var(--accent);
  font-style : italic;
  transition : opacity 0.2s;
}

.hobbies-link:hover { opacity: 0.7; }


/* ============================================================
   07. Stack - section 05
   ============================================================ */

.stack-title {
  font-family  : var(--font-serif);
  font-size    : var(--text-3xl);
  color        : var(--ink);
  font-weight  : 400;
  margin-bottom: 36px;
}

/* Tech card grid */
.tech-grid {
  display              : grid;
  grid-template-columns: repeat(4, 1fr);
  gap                  : 16px;
}

.tech-card {
  border        : 0.5px solid var(--border);
  border-radius : 6px;
  display       : flex;
  flex-direction: row;
  align-items   : flex-start;
  gap           : 14px;
  padding       : 18px 20px;
}

/* Logo on the left, no background */
.tech-card-logo {
  flex-shrink: 0;
  width      : 22px;
  height     : 22px;
  object-fit : contain;
  display    : block;
  margin-top : 3px;
}

/* Monogram fallback for techs without a CDN logo */
.tech-card-logo-mono {
  font-family : var(--font-serif);
  font-size   : 16px;
  color       : var(--ink-faint);
  font-style  : italic;
  font-weight : 400;
  line-height : 1.4;
  height      : auto;
  object-fit  : unset;
}

/* Text area */
.tech-card-body {
  flex: 1;
}

.tech-card-name {
  display         : flex;
  justify-content : space-between;
  align-items     : baseline;
  gap             : 8px;
  margin-bottom   : 8px;
  font-family     : var(--font-serif);
  font-size       : var(--text-lg);
  color           : var(--ink);
  font-weight     : 400;
  line-height     : 1.2;
}

.tech-card-version {
  font-size      : var(--text-xs);
  color          : var(--accent);
  letter-spacing : 0.1em;
  font-weight    : 500;
  white-space    : nowrap;
  flex-shrink    : 0;
}

.tech-card-desc {
  font-size  : var(--text-sm);
  color      : var(--ink-light);
  line-height: 1.65;
}

.tech-card-learning {
  border-style: dashed;
  opacity     : 0.8;
}

.tech-card-learning .tech-card-name {
  color      : var(--accent);
  font-style : italic;
}

.tech-card-learning .tech-card-logo-mono {
  color: var(--accent);
}


/* ============================================================
   08. Projects - section 06
   ============================================================ */

.projects-header {
  margin-bottom: 44px;
}

.projects-title,
.section-title {
  font-family: var(--font-serif);
  font-size  : var(--text-3xl);
  color      : var(--ink);
  font-weight: 400;
}

.projects-intro {
  font-size  : var(--text-md);
  color      : var(--ink-light);
  font-style : italic;
  line-height: 1.6;
  margin-top : 12px;
  max-width  : 540px;
}

/* Category group */
.project-group + .project-group {
  margin-top: 52px;
}

.project-group-head {
  display      : flex;
  align-items  : baseline;
  gap          : 16px;
  margin-bottom: 24px;
}

.project-group-label {
  font-size     : var(--text-sm);
  color         : var(--accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight   : 500;
  flex-shrink   : 0;
}

.project-group-rule {
  flex      : 1;
  height    : 0;
  border-top: 0.5px solid var(--border);
}

.project-group-note {
  font-size  : var(--text-sm);
  color      : var(--ink-faint);
  font-style : italic;
  flex-shrink: 0;
}

/* Shared card behaviour */
.project-card-link {
  display: block;
  color  : inherit;
}

.project-card-link:hover .project-card-title,
.project-card-link:hover .project-tool-title {
  color: var(--accent);
}

.project-card-info {
  margin-top: 16px;
}

.project-card-meta {
  display        : flex;
  justify-content: space-between;
  gap            : 10px;
  font-size      : var(--text-sm);
  color          : var(--ink-faint);
  margin-bottom  : 6px;
}

.project-card-title {
  font-family  : var(--font-serif);
  font-size    : 20px;
  color        : var(--ink);
  margin-bottom: 6px;
  transition   : color 0.25s ease;
}

.project-card-desc {
  font-size  : 12px;
  color      : var(--ink-light);
  line-height: 1.6;
}

.project-card-cta {
  font-size : var(--text-sm);
  color     : var(--accent);
  margin-top: 10px;
  display   : block;
}

.project-card-cta-muted {
  color     : var(--ink-faint);
  font-style: italic;
}

.project-card-soon {
  cursor: default;
}

/* Thumbnail (illustration or monogram placeholder) */
.project-thumb {
  overflow        : hidden;
  border-radius   : 4px;
  aspect-ratio    : 4 / 3;
  display         : flex;
  align-items     : center;
  justify-content : center;
  transition      : transform 0.3s ease;
  transform-origin: center;
}

/* Survol : la vignette se soulève légèrement (tout type de carte) */
.project-card-link:hover .project-thumb,
.project-wide:hover .project-wide-image {
  transform: translateY(-6px) scale(1.015);
}

@media (prefers-reduced-motion: reduce) {
  .project-thumb,
  .project-wide-image,
  .project-card-link:hover .project-thumb,
  .project-grid-pinned .project-card-link .project-thumb,
  .project-grid-pinned .project-card-link:hover .project-thumb,
  .project-wide:hover .project-wide-image {
    transition: none;
    transform : none;
  }
}

/* Each grid card = one tidy column (thumb + text same width, well separated) */
.project-grid .project-card-link {
  max-width: 320px;
  margin   : 0 auto;
}

.project-thumb img,
.project-thumb svg {
  display: block;
  width  : 100%;
  height : 100%;
}

.project-thumb-mono {
  font-family   : var(--font-serif);
  font-style    : italic;
  font-size     : 34px;
  letter-spacing: 0.02em;
  line-height   : 1;
}

/* Grids */
.project-grid {
  display: grid;
  gap    : 26px;
}

.project-grid-feature { grid-template-columns: repeat(3, 1fr); }
.project-grid-tools   { grid-template-columns: repeat(4, 1fr); }

.project-grid-play .project-card-title { font-size: 18px; }

/* Bac à sable : « mur d'atelier ».
   4 colonnes pleine largeur (zéro vide), vignettes traitées comme des croquis
   épinglés — légèrement inclinées, elles se redressent et se soulèvent au survol.
   Le détail tilt est porté par une classe modifier (.project-grid-pinned),
   réutilisable / désactivable sur n'importe quelle autre catégorie en tuiles. */
.project-grid-play {
  grid-template-columns: repeat(4, 1fr);
  gap                  : 30px 32px;
}

/* La tuile remplit sa colonne (on lève le plafond 320px partagé) */
.project-grid-play .project-card-link { max-width: none; }

/* Épinglage : la vignette est la pièce qui s'incline, la légende reste droite */
.project-grid-pinned .project-card-link:nth-child(4n + 1) .project-thumb { transform: rotate(-1.8deg); }
.project-grid-pinned .project-card-link:nth-child(4n + 2) .project-thumb { transform: rotate(1.5deg); }
.project-grid-pinned .project-card-link:nth-child(4n + 3) .project-thumb { transform: rotate(1.1deg); }
.project-grid-pinned .project-card-link:nth-child(4n + 4) .project-thumb { transform: rotate(-1.4deg); }

/* Au survol : on redresse, puis on soulève comme les autres cartes */
.project-grid-pinned .project-card-link:hover .project-thumb {
  transform: rotate(0deg) translateY(-6px) scale(1.015);
}

/* Perso & soigné: wide horizontal card (compacte, centrée) */
.project-wide {
  display              : grid;
  grid-template-columns: 0.85fr 1.4fr;
  gap                  : 28px;
  align-items          : stretch;
  border               : 0.5px solid var(--border);
  border-radius        : 8px;
  padding              : 22px;
  max-width            : 860px;
  margin               : 0 auto;
}

.project-wide-image {
  overflow     : hidden;
  border-radius: 6px;
  aspect-ratio : 4 / 3;
  align-self   : center;
  transition   : transform 0.3s ease;
}

.project-wide-image img,
.project-wide-image svg {
  display: block;
  width  : 100%;
  height : 100%;
}

/* Le corps occupe toute la hauteur : contenu en haut, CTA ancré en bas */
.project-wide-body {
  display       : flex;
  flex-direction: column;
}

.project-wide-body .project-card-cta {
  margin-top : auto;
  padding-top: 18px;
}

/* Chips de caractéristiques : remplissent le creux et résument le projet */
.project-wide-tags {
  display  : flex;
  flex-wrap: wrap;
  gap      : 8px;
  margin-top: 16px;
}

.project-wide-tag {
  font-size    : var(--text-sm);
  color        : var(--ink-light);
  background   : var(--cream);
  border       : 0.5px solid var(--border);
  border-radius: 999px;
  padding      : 4px 12px;
  white-space  : nowrap;
}

.project-wide:hover .project-card-title { color: var(--accent); }
.project-wide .project-card-title       { font-size: 24px; }

/* L'établi: tool / repo cards */
.project-tool {
  display      : flex;
  gap          : 16px;
  border       : 0.5px solid var(--border);
  border-radius: 6px;
  padding      : 20px;
  align-items  : flex-start;
}

.project-tool-glyph {
  flex-shrink    : 0;
  width          : 44px;
  height         : 44px;
  border-radius  : 6px;
  background     : var(--ink);
  color          : var(--cream);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-family    : ui-monospace, 'SF Mono', Menlo, monospace;
  font-size      : 16px;
}

.project-tool-body { flex: 1; }

.project-tool-title {
  font-family  : var(--font-serif);
  font-size    : 18px;
  color        : var(--ink);
  margin-bottom: 6px;
  transition   : color 0.25s ease;
}


/* ============================================================
   09. Contact - section 07
   ============================================================ */

.contact {
  background: var(--ink);
  position  : relative;
}

.contact-inner {
  display         : flex;
  justify-content : space-between;
  align-items     : flex-end;
}

.contact-label {
  font-size      : var(--text-sm);
  color          : var(--accent);
  letter-spacing : 0.2em;
  margin-bottom  : 16px;
  display        : block;
}

.contact-cta {
  font-family: var(--font-serif);
  font-size  : 42px;
  color      : var(--cream);
  line-height: 1;
  font-weight: 400;
}

.contact-cta em {
  color     : var(--accent);
  font-style: italic;
}

.contact-email {
  font-size : var(--text-base);
  color     : #C9BCA8;
  margin-top: 20px;
  display   : block;
  transition: color 0.25s ease;
}

.contact-email:hover { color: var(--accent); }

.contact-cv {
  font-size  : var(--text-sm);
  color      : #8A7E72;
  margin-top : 20px;
  display    : block;
  transition : color 0.25s ease;
}

.contact-cv:hover { color: var(--accent); }

.contact-links {
  font-size  : 12px;
  color      : #C9BCA8;
  line-height: 1.9;
  text-align : right;
}

.contact-social-link {
  display   : block;
  color     : #C9BCA8;
  transition: color 0.25s ease;
}

.contact-social-link:hover { color: var(--accent); }


/* ============================================================
   09b. Le canard easter-egg (niché dans la zone contact)
   ============================================================ */

/* Tucked into a corner of the dark contact block. Discreet by default,
   the duck wakes up on hover and waddles you back to the top. */
.footer-duck {
  position    : absolute;
  top         : 26px;
  right       : var(--section-pad-h);
  display     : inline-flex;
  align-items : center;
  gap         : 8px;
  opacity     : 0.28;
  transition  : opacity 0.4s ease;
  z-index     : 2;
}

.footer-duck:hover,
.footer-duck:focus-visible {
  opacity: 1;
  outline: none;
}

.footer-duck-img {
  width  : 46px;
  height : 46px;
  display: block;
}

.footer-duck:hover .footer-duck-img,
.footer-duck:focus-visible .footer-duck-img {
  animation: duck-wiggle 0.5s ease-in-out;
  transform-origin: 50% 80%;
}

/* Quack sits to the LEFT of the duck (it's in the top-right corner) */
.footer-duck-quack {
  font-family: var(--font-serif);
  font-style : italic;
  font-size  : 13px;
  color      : #C9BCA8;
  opacity    : 0;
  transform  : translateX(6px);
  transition : opacity 0.4s ease, transform 0.4s ease;
}

.footer-duck:hover .footer-duck-quack,
.footer-duck:focus-visible .footer-duck-quack {
  opacity  : 1;
  transform: translateX(0);
}


/* ============================================================
   10. Animations
   ============================================================ */

/* Pulsing status dot */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}
.anim-pulse {
  animation: pulse 1.8s ease-in-out infinite;
}

/* Blinking cursor */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.anim-blink {
  animation: blink 1.05s steps(1) infinite;
}

/* Slow Ken Burns zoom on the portrait */
@keyframes ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* The footer duck wiggles when you find it */
@keyframes duck-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}


/* ============================================================
   11. Responsive - tablet (< 900px)
   ============================================================ */

@media (max-width: 900px) {

  body {
    padding: 12px;
  }

  /* 2-col grids collapse to 1 */
  .about-grid {
    grid-template-columns: 1fr;
  }

  .timeline-layout {
    grid-template-columns: 1fr;
  }

  /* Stack: 2 columns on tablet */
  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Smaller hero title */
  .hero-title {
    font-size: 44px;
  }

  .hero-standfirst {
    font-size: 20px;
  }

  /* Meta stats: 2 columns instead of 4 */
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* Stacked contact */
  .contact-inner {
    flex-direction: column;
    align-items   : stretch;
    gap           : 24px;
  }

  .contact-links {
    text-align: left;
  }

  /* Nav: hide the middle links */
  .nav-links {
    display: none;
  }

  /* Projects: feature, play & tools to 2 cols, wide stack */
  .project-grid-feature,
  .project-grid-play,
  .project-grid-tools {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-wide {
    grid-template-columns: 1fr;
    gap                  : 20px;
  }
}


/* ============================================================
   12. Responsive - mobile (< 600px)
   ============================================================ */

@media (max-width: 600px) {

  /* Headings */
  .hero-title {
    font-size  : 36px;
    line-height: 1.05;
  }

  .hero-standfirst {
    font-size: 18px;
  }

  /* Section padding */
  .section,
  .nav {
    padding-left : 20px;
    padding-right: 20px;
  }

  /* Stack: 1 column on mobile */
  .tech-grid {
    grid-template-columns: 1fr;
    gap                  : 10px;
  }

  .section {
    padding-top   : 36px;
    padding-bottom: 36px;
  }

  /* Contact */
  .contact-cta {
    font-size: 30px;
  }

  /* Projects: everything to a single column */
  .project-grid-feature,
  .project-grid-play,
  .project-grid-tools {
    grid-template-columns: 1fr;
    gap                  : 28px;
  }

  /* Vignettes droites une fois empilées (plus d'épinglage en mono-colonne) */
  .project-grid-pinned .project-card-link .project-thumb {
    transform: none;
  }

  /* Group head: drop the note so the label + rule keep their line */
  .project-group-note {
    display: none;
  }
}