/* =====================================================
   SINOSCOPE
   Design system principal
===================================================== */


:root {

  --bg: #f4f1ea;

  --paper: #ffffff;

  --text: #151817;

  --muted: #6f706b;

  --line: #d8d4cb;

  --accent: #b3362d;

  --accent-dark: #8e2922;

  --jade: #174b4f;

  --dark: #101413;

  --dark-soft: #18201f;

  --sand: #e9e3d8;

  --max-width: 1440px;

}



/* =====================================================
   RESET
===================================================== */


* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}


html {

  scroll-behavior: smooth;

}


body {

  background: var(--bg);

  color: var(--text);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  -webkit-font-smoothing: antialiased;

}


img {

  display: block;

  max-width: 100%;

}


a {

  color: inherit;

  text-decoration: none;

}


button,
input {

  font: inherit;

}


button {

  cursor: pointer;

}


::selection {

  background: var(--accent);

  color: white;

}


.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0,0,0,0);

  white-space: nowrap;

  border: 0;

}



/* =====================================================
   HEADER
===================================================== */


.site-header {

  position: relative;

  z-index: 1000;

  background:
    rgba(255,255,255,0.98);

  border-bottom:
    1px solid var(--line);

}


.topbar {

  border-bottom:
    1px solid #ece9e2;

}


.topbar-inner {

  width:
    min(94%, var(--max-width));

  height: 36px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 11px;

}


.media-label {

  color: #555b58;

  letter-spacing: 0.3px;

}


.topbar-links {

  display: flex;

  align-items: center;

  gap: 20px;

}


.topbar-links a {

  color: #555b58;

}


.topbar-links a:hover {

  color: var(--accent);

}


.language {

  border-left:
    1px solid var(--line);

  padding-left: 20px;

  font-weight: 700;

}


.main-header {

  width:
    min(94%, var(--max-width));

  min-height: 92px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

}


.logo {

  display: flex;

  align-items: center;

  flex-shrink: 0;

}


.logo img {

  width: 230px;

  height: auto;

}


.main-nav {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 24px;

}


.main-nav a {

  position: relative;

  padding:
    37px 0
    34px;

  font-size: 13px;

  font-weight: 600;

  white-space: nowrap;

}


.main-nav a::after {

  content: "";

  position: absolute;

  left: 0;

  right: 100%;

  bottom: 25px;

  height: 2px;

  background:
    var(--accent);

  transition:
    right 0.25s ease;

}


.main-nav a:hover {

  color: var(--accent);

}


.main-nav a:hover::after {

  right: 0;

}



/* =====================================================
   MOBILE MENU BUTTON
===================================================== */


.menu-toggle {

  display: none;

  width: 42px;

  height: 42px;

  border: none;

  background:
    transparent;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 5px;

}


.menu-toggle span {

  display: block;

  width: 24px;

  height: 2px;

  background:
    var(--text);

}



/* =====================================================
   HERO / UNE
===================================================== */


.hero {

  position: relative;

  min-height: 650px;

  display: flex;

  align-items: flex-end;

  padding:

    85px

    max(
      8%,
      calc(
        (100% - 1440px) / 2
      )
    );

  overflow: hidden;

  color: white;

  background:

    linear-gradient(

      90deg,

      rgba(8,16,17,0.9)
      0%,

      rgba(8,16,17,0.64)
      40%,

      rgba(8,16,17,0.2)
      70%,

      rgba(8,16,17,0.03)
      100%

    ),

    linear-gradient(

      0deg,

      rgba(0,0,0,0.5),

      transparent
      55%

    ),

    url("../img/une.png");

  background-size:
    cover;

  background-position:
    center;

}


.hero-content {

  position: relative;

  z-index: 2;

  width:
    min(780px, 65%);

}


.hero-meta {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom:
    24px;

  text-transform:
    uppercase;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 2px;

}


.hero-meta::before {

  content: "";

  width: 30px;

  height: 2px;

  background:
    var(--accent);

}


.hero-category {

  padding-left:
    14px;

  border-left:
    1px solid
    rgba(255,255,255,0.45);

  color:
    #e8aaa4;

}


.hero h1 {

  max-width:
    880px;

  margin-bottom:
    28px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      52px,
      5.4vw,
      82px
    );

  line-height:
    0.98;

  letter-spacing:
    -2.5px;

}


.hero p {

  max-width:
    670px;

  margin-bottom:
    34px;

  font-size:
    19px;

  line-height:
    1.55;

  color:
    rgba(
      255,
      255,
      255,
      0.92
    );

}


.hero-actions {

  display: flex;

  align-items: center;

  gap: 24px;

}


.button {

  display: inline-flex;

  align-items: center;

  gap: 20px;

  padding:
    16px 22px;

  background:
    var(--accent);

  color:
    white;

  font-size:
    14px;

  font-weight:
    700;

  transition:
    background .2s ease,
    transform .2s ease;

}


.button:hover {

  background:
    var(--accent-dark);

  transform:
    translateY(-2px);

}


.button span {

  font-size:
    18px;

}


.reading-time {

  font-size:
    12px;

  color:
    rgba(
      255,
      255,
      255,
      0.68
    );

}


.hero-caption {

  position:
    absolute;

  right:
    30px;

  bottom:
    20px;

  font-size:
    9px;

  letter-spacing:
    1.3px;

  color:
    rgba(
      255,
      255,
      255,
      0.5
    );

}



/* =====================================================
   TITRES DE SECTION
===================================================== */


.section-heading {

  display: flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    30px;

  margin-bottom:
    36px;

  border-bottom:
    1px solid
    var(--line);

  padding-bottom:
    20px;

}


.section-kicker {

  display: block;

  margin-bottom:
    8px;

  color:
    var(--accent);

  font-size:
    11px;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    1.8px;

}


.section-kicker.light {

  color:
    #db8078;

}


.section-heading h2 {

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    44px;

  line-height:
    1;

  letter-spacing:
    -1.5px;

}


.section-link {

  color:
    var(--accent);

  font-size:
    13px;

  font-weight:
    700;

}



/* =====================================================
   EDITORIAL
===================================================== */


.editorial-section {

  width:
    min(
      92%,
      var(--max-width)
    );

  margin:
    0 auto;

  padding:
    80px 0 90px;

}


.editorial-grid {

  display:
    grid;

  grid-template-columns:

    minmax(0,1.8fr)

    minmax(280px,1fr)

    minmax(280px,.9fr);

  gap:
    34px;

  align-items:
    start;

}


.story-image {

  display:
    block;

  overflow:
    hidden;

  aspect-ratio:
    16 / 9;

  margin-bottom:
    24px;

  background:
    #ddd;

}


.story-image img,
.small-story-image img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform .45s ease;

}


.featured-story:hover
.story-image img,

.small-story:hover
.small-story-image img {

  transform:
    scale(1.025);

}


.story-meta {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin-bottom:
    12px;

  color:
    var(--muted);

  font-size:
    11px;

  text-transform:
    uppercase;

  letter-spacing:
    .7px;

}


.story-category {

  color:
    var(--accent);

  font-weight:
    700;

}


.featured-story h3 {

  max-width:
    750px;

  margin-bottom:
    14px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    34px;

  line-height:
    1.08;

  letter-spacing:
    -.8px;

}


.featured-story p {

  max-width:
    720px;

  color:
    var(--muted);

  font-size:
    16px;

  line-height:
    1.6;

}


.secondary-stories {

  display:
    flex;

  flex-direction:
    column;

  gap:
    30px;

}


.small-story {

  padding-bottom:
    28px;

  border-bottom:
    1px solid
    var(--line);

}


.small-story:last-child {

  border-bottom:
    none;

}


.small-story-image {

  display:
    block;

  overflow:
    hidden;

  aspect-ratio:
    16 / 9;

  margin-bottom:
    16px;

  background:
    #ddd;

}


.small-story h3 {

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    23px;

  line-height:
    1.15;

  letter-spacing:
    -.35px;

}



/* =====================================================
   ANALYSIS BOX
===================================================== */


.analysis-box {

  padding:
    30px;

  background:
    var(--sand);

  border-top:
    4px solid
    var(--accent);

}


.analysis-label {

  display:
    block;

  margin-bottom:
    18px;

  color:
    var(--accent);

  font-size:
    11px;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    1.8px;

}


.analysis-box h3 {

  margin-bottom:
    14px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    30px;

  line-height:
    1.05;

}


.analysis-box > p {

  margin-bottom:
    26px;

  color:
    #605d57;

  font-size:
    14px;

  line-height:
    1.55;

}


.analysis-list {

  border-top:
    1px solid
    #c9c2b6;

}


.analysis-list a {

  display:
    grid;

  grid-template-columns:
    34px 1fr;

  gap:
    10px;

  padding:
    15px 0;

  border-bottom:
    1px solid
    #c9c2b6;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    15px;

  line-height:
    1.25;

}


.analysis-list a:hover {

  color:
    var(--accent);

}


.analysis-list span {

  color:
    var(--accent);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    11px;

  font-weight:
    700;

}


.analysis-more {

  display:
    inline-block;

  margin-top:
    24px;

  color:
    var(--accent);

  font-size:
    12px;

  font-weight:
    700;

}



/* =====================================================
   PODCAST
===================================================== */


.podcast-section {

  background:
    var(--dark);

  color:
    white;

  padding:
    90px 4%;

}


.podcast-inner {

  width:
    min(
      92%,
      var(--max-width)
    );

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    70px;

  align-items:
    center;

}


.podcast-visual {

  position:
    relative;

  min-height:
    510px;

  overflow:
    hidden;

}


.podcast-visual img {

  width:
    100%;

  height:
    510px;

  object-fit:
    cover;

}


.podcast-badge {

  position:
    absolute;

  left:
    24px;

  top:
    24px;

  padding:
    9px 13px;

  background:
    var(--accent);

  text-transform:
    uppercase;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1.4px;

}


.podcast-content h2 {

  max-width:
    550px;

  margin-bottom:
    24px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      48px,
      5vw,
      72px
    );

  line-height:
    .98;

  letter-spacing:
    -2px;

}


.podcast-content > p {

  max-width:
    610px;

  margin-bottom:
    40px;

  color:
    #c7cbca;

  font-size:
    17px;

  line-height:
    1.6;

}


.episode {

  display:
    grid;

  grid-template-columns:
    65px 1fr;

  gap:
    20px;

  padding:
    26px 0;

  border-top:
    1px solid
    #39403e;

  border-bottom:
    1px solid
    #39403e;

}


.episode-number {

  color:
    var(--accent);

  font-family:
    Georgia,
    serif;

  font-size:
    38px;

}


.episode-label {

  display:
    block;

  margin-bottom:
    7px;

  color:
    #999f9d;

  text-transform:
    uppercase;

  font-size:
    10px;

  letter-spacing:
    1.2px;

}


.episode h3 {

  max-width:
    520px;

  margin-bottom:
    8px;

  font-family:
    Georgia,
    serif;

  font-size:
    23px;

  line-height:
    1.15;

}


.episode-duration {

  color:
    #8f9693;

  font-size:
    11px;

}


.podcast-actions {

  display:
    flex;

  align-items:
    center;

  gap:
    28px;

  margin-top:
    32px;

}


.secondary-link {

  font-size:
    13px;

  font-weight:
    700;

  border-bottom:
    1px solid
    #747b78;

  padding-bottom:
    3px;

}



/* =====================================================
   KNOWLEDGE
===================================================== */


.knowledge-section {

  width:
    min(
      92%,
      var(--max-width)
    );

  margin:
    0 auto;

  padding:
    90px 0;

}


.knowledge-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4,1fr);

  border-top:
    1px solid
    var(--line);

  border-left:
    1px solid
    var(--line);

}


.knowledge-card {

  min-height:
    340px;

  padding:
    28px;

  border-right:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);

  display:
    flex;

  flex-direction:
    column;

}


.knowledge-number {

  margin-bottom:
    40px;

  color:
    #99958d;

  font-size:
    11px;

}


.knowledge-category {

  margin-bottom:
    12px;

  color:
    var(--accent);

  text-transform:
    uppercase;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1.3px;

}


.knowledge-card h3 {

  margin-bottom:
    15px;

  font-family:
    Georgia,
    serif;

  font-size:
    28px;

  line-height:
    1.05;

}


.knowledge-card p {

  margin-bottom:
    30px;

  color:
    var(--muted);

  font-size:
    14px;

  line-height:
    1.55;

}


.knowledge-card a {

  margin-top:
    auto;

  color:
    var(--accent);

  font-size:
    12px;

  font-weight:
    700;

}



/* =====================================================
   TRAVEL
===================================================== */


.travel-section {

  display:
    grid;

  grid-template-columns:
    1.15fr .85fr;

  min-height:
    610px;

  background:
    white;

}


.travel-image {

  overflow:
    hidden;

}


.travel-image img {

  width:
    100%;

  height:
    100%;

  min-height:
    610px;

  object-fit:
    cover;

}


.travel-content {

  padding:
    80px;

  align-self:
    center;

}


.travel-content h2 {

  max-width:
    560px;

  margin-bottom:
    24px;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      44px,
      4vw,
      66px
    );

  line-height:
    1;

  letter-spacing:
    -2px;

}


.travel-content > p {

  max-width:
    580px;

  margin-bottom:
    35px;

  color:
    var(--muted);

  font-size:
    16px;

  line-height:
    1.65;

}


.travel-links {

  border-top:
    1px solid
    var(--line);

}


.travel-links a {

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    17px 0;

  border-bottom:
    1px solid
    var(--line);

  font-family:
    Georgia,
    serif;

  font-size:
    17px;

}


.travel-links a:hover {

  color:
    var(--accent);

}



/* =====================================================
   NEWSLETTER
===================================================== */


.newsletter-section {

  background:
    var(--jade);

  color:
    white;

  padding:
    85px 4%;

}


.newsletter-inner {

  width:
    min(
      92%,
      var(--max-width)
    );

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    90px;

}


.newsletter-label {

  display:
    block;

  margin-bottom:
    14px;

  color:
    #e89a93;

  text-transform:
    uppercase;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1.8px;

}


.newsletter-inner h2 {

  max-width:
    600px;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      43px,
      4vw,
      64px
    );

  line-height:
    1;

  letter-spacing:
    -1.5px;

}


.newsletter-content {

  align-self:
    end;

}


.newsletter-content > p {

  max-width:
    570px;

  margin-bottom:
    28px;

  color:
    #d0d9d7;

  font-size:
    16px;

  line-height:
    1.55;

}


.newsletter-form {

  display:
    flex;

  max-width:
    580px;

}


.newsletter-form input {

  flex:
    1;

  min-width:
    0;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .35
    );

  border-right:
    0;

  background:
    transparent;

  color:
    white;

  padding:
    16px 18px;

  outline:
    none;

}


.newsletter-form input::placeholder {

  color:
    #c0cecb;

}


.newsletter-form button {

  border:
    none;

  background:
    var(--accent);

  color:
    white;

  padding:
    0 24px;

  font-weight:
    700;

}


.newsletter-form button:hover {

  background:
    var(--accent-dark);

}


.newsletter-content small {

  display:
    block;

  margin-top:
    12px;

  color:
    #aebfbc;

  font-size:
    10px;

}



/* =====================================================
   FOOTER
===================================================== */


.site-footer {

  background:
    #0c1110;

  color:
    white;

  padding:
    70px 4% 30px;

}


.footer-top {

  width:
    min(
      92%,
      var(--max-width)
    );

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    2fr 1fr 1fr 1fr;

  gap:
    60px;

  padding-bottom:
    60px;

}


.footer-brand img {

  width:
    220px;

  filter:
    brightness(0)
    invert(1);

  opacity:
    .96;

}


.footer-brand p {

  margin-top:
    15px;

  color:
    #8f9996;

  font-family:
    Georgia,
    serif;

}


.footer-column {

  display:
    flex;

  flex-direction:
    column;

  gap:
    11px;

}


.footer-column span {

  margin-bottom:
    8px;

  color:
    #777f7d;

  text-transform:
    uppercase;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1.4px;

}


.footer-column a {

  color:
    #c1c6c4;

  font-size:
    13px;

}


.footer-column a:hover {

  color:
    white;

}


.footer-bottom {

  width:
    min(
      92%,
      var(--max-width)
    );

  margin:
    0 auto;

  padding-top:
    25px;

  border-top:
    1px solid
    #29302e;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    30px;

  color:
    #747d7a;

  font-size:
    11px;

}


.footer-bottom div {

  display:
    flex;

  gap:
    20px;

}



/* =====================================================
   TABLET
===================================================== */


@media
(max-width: 1150px) {


  .main-nav {

    gap:
      16px;

  }


  .main-nav a {

    font-size:
      12px;

  }


  .editorial-grid {

    grid-template-columns:
      1.5fr 1fr;

  }


  .analysis-box {

    grid-column:
      1 / -1;

  }


  .knowledge-grid {

    grid-template-columns:
      repeat(2,1fr);

  }


  .travel-content {

    padding:
      55px;

  }


}



/* =====================================================
   MOBILE
===================================================== */


@media
(max-width: 900px) {


  .topbar {

    display:
      none;

  }


  .main-header {

    min-height:
      82px;

  }


  .logo img {

    width:
      200px;

  }


  .menu-toggle {

    display:
      flex;

  }


  .main-nav {

    position:
      absolute;

    left:
      0;

    right:
      0;

    top:
      82px;

    display:
      none;

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      0;

    padding:
      10px 6% 25px;

    background:
      white;

    border-top:
      1px solid
      var(--line);

    border-bottom:
      1px solid
      var(--line);

  }


  .main-nav.open {

    display:
      flex;

  }


  .main-nav a {

    width:
      100%;

    padding:
      14px 0;

    border-bottom:
      1px solid
      #eee;

  }


  .main-nav a::after {

    display:
      none;

  }


  .hero {

    min-height:
      600px;

    padding:
      60px 7%;

    background-position:
      center;

  }


  .hero-content {

    width:
      100%;

  }


  .hero h1 {

    font-size:
      48px;

    letter-spacing:
      -1.5px;

  }


  .hero p {

    font-size:
      17px;

  }


  .hero-actions {

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      14px;

  }


  .hero-caption {

    display:
      none;

  }


  .editorial-section {

    padding:
      60px 0 70px;

  }


  .section-heading {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .editorial-grid {

    grid-template-columns:
      1fr;

  }


  .featured-story h3 {

    font-size:
      30px;

  }


  .podcast-inner {

    grid-template-columns:
      1fr;

    gap:
      45px;

  }


  .podcast-visual,

  .podcast-visual img {

    min-height:
      390px;

    height:
      390px;

  }


  .knowledge-grid {

    grid-template-columns:
      1fr;

  }


  .travel-section {

    grid-template-columns:
      1fr;

  }


  .travel-image img {

    min-height:
      400px;

    height:
      400px;

  }


  .travel-content {

    padding:
      55px 7%;

  }


  .newsletter-inner {

    grid-template-columns:
      1fr;

    gap:
      40px;

  }


  .footer-top {

    grid-template-columns:
      1fr 1fr;

  }


}



/* =====================================================
   PETITS MOBILES
===================================================== */


@media
(max-width: 600px) {


  .logo img {

    width:
      175px;

  }


  .hero {

    min-height:
      560px;

  }


  .hero h1 {

    font-size:
      40px;

  }


  .section-heading h2 {

    font-size:
      37px;

  }


  .podcast-section {

    padding:
      65px 3%;

  }


  .podcast-content h2 {

    font-size:
      44px;

  }


  .podcast-actions {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .newsletter-form {

    flex-direction:
      column;

  }


  .newsletter-form input {

    border-right:
      1px solid
      rgba(
        255,
        255,
        255,
        .35
      );

  }


  .newsletter-form button {

    padding:
      16px;

  }


  .footer-top {

    grid-template-columns:
      1fr;

  }


  .footer-bottom {

    flex-direction:
      column;

  }


}