@charset "UTF 8";
/* GLOBAL STYLES */


@import url('https://fonts.googleapis.com/css2?family=Cossette+Texte:wght@400;700&family=Cossette+Titre:wght@400;700&family=Instrument+Serif:ital@0;1&display=swap');


    :root {
      --paper: oklch(0.97 0.015 90);
      --paper-2: #ebe8de;
      --ink: oklch(0.16 0.01 90);
      --muted: #6d6a60;
      --line: #11110f;
      --signal: oklch(0.89 0.19 95);
      --signal-soft: #eef09d;
      --white: #fbfaf5;
      --rojo: oklch(0.58 0.22 28);
      --blue: oklch(0.62 0.16 230);
      --yellow: oklch(0.89 0.19 95);
      --cream: oklch(0.94 0.025 85);
      --max: 1440px;
      --pad: clamp(16px, 2vw, 32px);
      --gap: 0px;
      --radius: 0px;
      --copy: "Cossette Texte", sans-serif;
      --copy2: "Cossette Titre", sans-serif;
      --display: "Instrument Serif", serif;
      --bigfont: clamp(4rem, 8vw, 11rem);
      --normal: clamp(1rem, 1.25vw, 1.2rem);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background:
        linear-gradient(90deg, rgba(17, 17, 15, 0.035) 1px, transparent 1px) 0 0 / calc(100% / 12) 100%,
        var(--cream);;
      color: var(--ink);
      font-family: var(--copy);
      font-size: 16px;
      line-height: 1.45;
      text-rendering: geometricPrecision;
      -webkit-font-smoothing: antialiased;
    }

    ::selection {
      background: var(--yellow);
      color: var(--ink);
    }

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

    a:hover,
    a:focus-visible {
      background: var(--signal);
      outline: none;
    }

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

    .page {
      width: min(var(--max), calc(100% - 24px));
      margin: 12px auto;
      border-left: 1px solid var(--line);
      border-top: 1px solid var(--line);
      background: var(--cream);
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .cell {
      position: relative;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: var(--pad);
      min-height: 96px;
      background: rgba(244, 242, 234, 0.78);
    }

    .cell::before {
      content: attr(data-kicker);
      display: block;
      margin-bottom: clamp(14px, 2vw, 28px);
      color: var(--ink);
      font-size: 0.72rem;
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }


    .cell2 {
      position: relative;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: var(--pad);
      min-height: 96px;
      background: rgba(244, 242, 234, 0.78);
    }

    .cell2::before {
      content: attr(data-kicker);
      display: block;
      color: var(--muted);
      font-size: 0.72rem;
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }

    .span-12 { grid-column: span 12; }
    .span-8 { grid-column: span 8; }
    .span-7 { grid-column: span 7; }
    .span-6 { grid-column: span 6; }
    .span-5 { grid-column: span 5; }
    .span-4 { grid-column: span 4; }
    .span-3 { grid-column: span 3; }
    .span-2 { grid-column: span 2; }

    .masthead {
      align-items: stretch;
    }