:root{
  --bg:#f6f2ea;
  --paper:#fffdf8;
  --paper-2:#ece5da;
  --ink:#17181c;
  --soft:#5d625f;
  --soft-2:#7b817d;
  --deep:#20262f;
  --deep-2:#12161d;
  --max:1460px;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,"Times New Roman",serif;
  --sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  background:
    radial-gradient(circle at 12% 14%, rgba(232,225,214,.9), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(32,38,47,.05), transparent 22%),
    var(--bg);
  overflow-x:hidden;
}

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

.page{
  width:min(var(--max), calc(100% - 28px));
  margin:0 auto;
  min-height:100vh;
  padding:28px 0 40px;
  position:relative;
}

.page::before{
  content:"";
  position:absolute;
  top:120px;
  right:-8vw;
  width:34vw;
  height:34vw;
  min-width:240px;
  min-height:240px;
  max-width:520px;
  max-height:520px;
  border-radius:52% 48% 58% 42% / 43% 38% 62% 57%;
  background:rgba(236,229,218,.95);
  z-index:-1;
}

.page::after{
  content:"";
  position:absolute;
  left:-12vw;
  top:58%;
  width:30vw;
  height:22vw;
  min-width:220px;
  min-height:170px;
  background:rgba(216,209,198,.44);
  z-index:-1;
  transform:rotate(-7deg);
}

header.site-header{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:start;
  margin-bottom:70px;
}

.brand{
  font-family:var(--serif);
  font-size:1.15rem;
  letter-spacing:.01em;
}

.nav{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  justify-content:flex-end;
  color:var(--soft-2);
  font-size:.95rem;
}

.nav a:hover,.meta a:hover{color:var(--ink)}

.meta{
  margin-top:8px;
  color:var(--soft-2);
  font-size:.96rem;
  line-height:1.7;
}

section{position:relative;margin-bottom:150px}

.hero-split{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:70px;
  align-items:start;
  min-height:72vh;
}

.hero-split h1,
.page-title{
  margin:0;
  max-width:8ch;
  font-family:var(--serif);
  font-size:clamp(3.2rem, 8vw, 7.1rem);
  line-height:.9;
  font-weight:400;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.hero-copy,
.side-copy{padding-top:90px}
.hero-copy p,
.side-copy p,
.body-copy p,
.list-text,
.contact-text,
.text-col p,
.duo-copy p{
  margin:0;
  font-size:1.06rem;
  line-height:1.95;
  color:var(--soft);
}
.hero-copy p + p,
.side-copy p + p,
.body-copy p + p,
.text-col p + p,
.duo-copy p + p{margin-top:20px}

.mission-grid,
.contact-grid,
.duo-grid{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:80px;
  align-items:start;
}

.statement,
.pull-quote,
.section-lead{
  font-family:var(--serif);
  font-size:clamp(1.55rem, 2.5vw, 2.4rem);
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--ink);
  max-width:13ch;
  margin-top:10px;
}

.text-col{column-count:2;column-gap:42px}
.text-col p{break-inside:avoid}
.text-col p:first-child::first-letter{
  float:left;
  margin:.10em .14em 0 0;
  font-family:var(--serif);
  font-size:4.7rem;
  line-height:.72;
  color:var(--ink);
}

.actions-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:start;
}

.action-list{display:grid;gap:48px}
.action-item{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:start}
.action-item:nth-child(even){margin-left:8%}
.action-item h2,
.cardless-title{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.7rem, 2.6vw, 2.9rem);
  line-height:.98;
  font-weight:400;
  letter-spacing:-.04em;
  text-wrap:balance;
}

.dark-field{
  position:relative;
  min-height:520px;
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:50px;
  align-items:end;
  padding:80px 70px;
  margin-left:calc(50% - 50vw + 14px);
  margin-right:calc(50% - 50vw + 14px);
  color:#f7f4ee;
  background:var(--deep);
}

.dark-field::after{
  content:"";
  position:absolute;
  right:7%;
  top:14%;
  width:320px;
  height:320px;
  border-radius:50%;
  background:rgba(255,255,255,.045);
}

.dark-field h2{
  margin:0 0 18px;
  max-width:9ch;
  font-family:var(--serif);
  font-size:clamp(2.5rem, 5vw, 5.2rem);
  line-height:.9;
  font-weight:400;
  letter-spacing:-.05em;
  color:#f7f4ee;
}

.dark-field p,
.dark-field .quote-note{
  color:rgba(247,244,238,.84);
}

.quote-note{
  align-self:start;
  justify-self:end;
  max-width:14ch;
  font-family:var(--serif);
  font-size:clamp(1.4rem, 2.2vw, 2.1rem);
  line-height:1.08;
  letter-spacing:-.03em;
  margin-top:30px;
}

.contact-grid{
  align-items:end;
  margin-bottom:90px;
}

.contact-mail{
  font-family:var(--serif);
  font-size:clamp(2.8rem, 6vw, 6.2rem);
  line-height:.9;
  font-weight:400;
  letter-spacing:-.06em;
  text-wrap:balance;
  max-width:8.4ch;
}

footer.site-footer{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:end;
  color:var(--soft-2);
  font-size:.95rem;
  line-height:1.7;
}

footer.site-footer p{margin:0;max-width:34ch}
.footer-meta{text-align:right}

.spacer-xl{height:70px}
.spacer-lg{height:40px}
.page-title-wrap{margin-bottom:80px}
.page-title-wrap .meta{max-width:34ch}
.offset-block{margin-left:12%}
.right-shift{margin-left:auto;max-width:30ch}
.wide-text{max-width:54ch}

@media (max-width: 1100px){
  .hero-split,
  .mission-grid,
  .actions-grid,
  .dark-field,
  .contact-grid,
  .duo-grid,
  footer.site-footer{
    grid-template-columns:1fr;
    gap:36px;
  }

  .hero-split{min-height:auto}
  .hero-copy,.side-copy{padding-top:0}
  .text-col{column-count:1}
  .dark-field{
    min-height:auto;
    padding:54px 24px;
    margin-left:calc(50% - 50vw + 14px);
    margin-right:calc(50% - 50vw + 14px);
  }
  .quote-note{justify-self:start;margin-top:0}
  .contact-grid{margin-bottom:70px}
  .footer-meta{text-align:left}
  .offset-block,.right-shift{margin-left:0;max-width:none}
}

@media (max-width: 720px){
  .page{width:min(calc(100% - 12px), 100%);padding:16px 0 24px}
  header.site-header{grid-template-columns:1fr;gap:8px;margin-bottom:46px}
  .nav{justify-content:flex-start;gap:12px 18px}
  section{margin-bottom:90px}
  .action-item{grid-template-columns:1fr;gap:12px}
  .action-item:nth-child(even){margin-left:0}
  .dark-field{padding:44px 16px}
  .dark-field::after{width:180px;height:180px;right:2%;top:8%}
  .contact-mail{max-width:none}
}
  </style>
</head>
<body>
  <main class="page">
    <header class="site-header">
      <div>
        <div class="brand">Art'Go Notes</div>
        <div class="meta">RNA W244000541</div>
      </div>
      <nav class="nav" aria-label="Navigation principale">
        <a href="index.html">Accueil</a>
        <a href="association.html">L’association</a>
        <a href="actions.html">Actions</a>
        <a href="territoires.html">Territoires</a>
        <a href="participer.html">Participer</a>
        <a href="contact.html">Contact</a>
      </nav>
    </header>