@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');

:root { --ink:#171716; --soft:#8d8c89; --line:#d9d8d3; --paper:#f7f7f4; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }
a:focus-visible { outline:2px solid var(--ink); outline-offset:5px; }

.site-header { align-items:center; display:flex; justify-content:space-between; padding:22px 28px; position:relative; z-index:2; }
.brand,.nav,footer,.eyebrow,.meta,.hero-meta,.scroll-cue,.text-link { font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.01em; text-transform:uppercase; }
.brand { font-weight:500; font-size:12px; }
.brand-dot { color:#f04d23; }
.nav { display:flex; gap:26px; }
.nav a,.brand,footer a { transition:opacity .25s ease; }
.nav a:hover,.brand:hover,footer a:hover { opacity:.48; }

.intro { display:grid; grid-template-columns:repeat(12,1fr); column-gap:18px; min-height:calc(100svh - 66px); padding:6vh 28px 34px; position:relative; }
.intro-copy { grid-column:1 / span 8; }
.eyebrow { color:var(--soft); margin-bottom:24px; }
.intro h1 { font-size:clamp(50px,7.2vw,126px); font-weight:400; letter-spacing:-.072em; line-height:.87; max-width:1120px; }
.intro h1 span { color:#a7a6a2; }
.intro h1 i { font-family:Georgia,serif; font-weight:400; }
.intro-note { color:#62615e; font-size:14px; line-height:1.4; margin-top:35px; max-width:300px; }
.hero-project { align-self:end; grid-column:7 / span 6; margin-top:8vh; }
.hero-visual { background:#e8e7e2; overflow:hidden; }
.hero-visual img { aspect-ratio:1.18 / 1; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.hero-project:hover img { transform:scale(1.035); }
.hero-meta { display:flex; justify-content:space-between; padding-top:10px; }
.hero-meta span:last-child { color:var(--soft); }
.scroll-cue { align-self:end; grid-column:1 / span 3; color:var(--soft); display:flex; flex-direction:column; gap:10px; }
.scroll-cue span { color:var(--ink); font-size:16px; }

.projects { padding:150px 28px 180px; }
.section-heading { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(12,1fr); gap:18px; margin-bottom:68px; padding-top:15px; }
.section-heading .eyebrow { grid-column:1 / span 2; }
.section-heading h2 { font-size:clamp(31px,4vw,61px); font-weight:400; grid-column:3 / span 6; letter-spacing:-.06em; line-height:.9; }
.section-heading > p:last-child { color:var(--soft); font-size:13px; grid-column:10 / span 3; line-height:1.35; }
.project-grid { display:grid; grid-template-columns:repeat(12,1fr); column-gap:18px; row-gap:90px; }
.project { display:block; }
.card--large { grid-column:1 / span 10; }
.card--medium { grid-column:1 / span 6; }
.card--portrait { grid-column:8 / span 5; margin-top:14vh; }
.card--offset { grid-column:7 / span 6; margin-top:20vh; }
.visual { background:#e8e7e2; overflow:hidden; }
.visual img { aspect-ratio:1.34 / 1; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease; }
.card--large .visual img { aspect-ratio:1.58 / 1; }
.card--portrait .visual img { aspect-ratio:.86 / 1; }
.project:hover img { filter:saturate(1.08); transform:scale(1.025); }
.meta { display:flex; gap:16px; justify-content:space-between; padding-top:11px; }
.meta b { color:var(--soft); font-weight:400; margin-right:7px; }
.type { color:var(--soft); max-width:45%; text-align:right; }

.about { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(12,1fr); gap:18px; margin:0 28px; padding:24px 0 125px; }
.about .eyebrow { grid-column:1 / span 2; }
.about h2 { font-size:clamp(31px,4.3vw,69px); font-weight:400; grid-column:3 / span 9; letter-spacing:-.065em; line-height:.94; }
.text-link { border-bottom:1px solid var(--ink); grid-column:3 / span 4; margin-top:35px; padding-bottom:9px; transition:opacity .2s ease; }
.text-link:hover { opacity:.5; }
.text-link span { float:right; font-size:15px; }
footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; padding:20px 28px 27px; }

/* Pages projets */
.project-page { width:min(78vw,1280px); margin:auto; padding:90px 0 120px; }
.project-head { display:grid; grid-template-columns:repeat(12,1fr); gap:20px; margin-bottom:70px; }
.project-title { grid-column:span 7; font-size:clamp(48px,7vw,110px); font-weight:400; letter-spacing:-.06em; line-height:.9; }
.project-info { align-self:end; font-family:"DM Mono",monospace; font-size:11px; grid-column:9 / span 4; line-height:1.6; text-transform:uppercase; }
.project-gallery { display:flex; flex-direction:column; gap:70px; }
.project-gallery > img,.project-gallery .video-project,.project-gallery .project-feature,.project-gallery .duo { height:auto; }
.project-gallery .full { width:100%; }.project-gallery .large { width:85%; }.project-gallery .medium { width:65%; }.project-gallery .small { width:45%; }
.project-gallery .left { align-self:flex-start; }.project-gallery .center { align-self:center; }.project-gallery .right { align-self:flex-end; }
.project-gallery .duo { display:grid; grid-template-columns:1fr 1fr; gap:28px; width:100%; }.project-gallery .duo img { width:100%; }
.video-project { overflow:hidden; }.video-project video { background:#e8e7e2; display:block; height:auto; max-height:80vh; object-fit:contain; width:100%; }.video-project.full { width:100%; }.video-project.large { width:85%; }
.video-caption { color:var(--soft); font-family:"DM Mono",monospace; font-size:10px; padding-top:10px; text-transform:uppercase; }
.project-feature { align-items:center; display:grid; gap:22px; grid-template-columns:repeat(12,1fr); width:100%; }.project-feature .feature-copy { grid-column:1 / span 4; }.project-feature .video-project { grid-column:6 / span 7; }.project-feature.reverse .feature-copy { grid-column:9 / span 4; grid-row:1; }.project-feature.reverse .video-project { grid-column:1 / span 7; grid-row:1; }
.feature-number { color:var(--soft); display:block; font-family:"DM Mono",monospace; font-size:10px; margin-bottom:18px; }.feature-copy h2 { font-size:clamp(30px,4vw,58px); font-weight:400; letter-spacing:-.045em; line-height:1; margin-bottom:18px; }.feature-copy p { color:#777; font-size:13px; line-height:1.6; max-width:320px; }.feature-copy img { margin-top:28px; width:90px; }

@media (max-width:760px) {
  .site-header { padding:18px 16px; }.nav { gap:14px; }.nav,.brand { font-size:9px; }
  .intro { display:block; min-height:auto; padding:54px 16px 62px; }.intro-copy { max-width:none; }.intro h1 { font-size:clamp(44px,13vw,72px); }.intro-note { font-size:13px; margin-top:26px; }.hero-project { display:block; margin:60px 0 0 13%; }.hero-visual img { aspect-ratio:1 / 1.08; }.scroll-cue { display:none; }
  .projects { padding:85px 16px 100px; }.section-heading { display:block; margin-bottom:45px; }.section-heading .eyebrow { margin-bottom:18px; }.section-heading h2 { font-size:39px; }.section-heading > p:last-child { font-size:12px; margin-top:20px; max-width:260px; }
  .project-grid { display:block; }.project { margin:0 0 52px; }.card--portrait,.card--offset { margin-top:0; }.visual img,.card--large .visual img,.card--portrait .visual img { aspect-ratio:1.22 / 1; }.meta { font-size:9px; }.type { max-width:55%; }
  .about { display:block; margin:0 16px; padding:20px 0 74px; }.about h2 { font-size:36px; }.about .eyebrow { margin-bottom:25px; }.text-link { display:block; font-size:9px; margin-top:31px; width:100%; }
  footer { flex-direction:column; gap:13px; padding:20px 16px 26px; }
  .project-page { padding:60px 16px 80px; width:auto; }.project-head { display:block; margin-bottom:45px; }.project-info { margin-top:25px; }.project-gallery { gap:35px; }.project-gallery .full,.project-gallery .large,.project-gallery .medium,.project-gallery .small,.video-project.full,.video-project.large { width:100%; }.project-gallery .duo { gap:20px; grid-template-columns:1fr; }.project-feature,.project-feature.reverse { display:block; }.project-feature .feature-copy,.project-feature.reverse .feature-copy { margin-bottom:25px; }.feature-copy img { width:72px; }.video-project video { max-height:none; }
}