:root {
      --ink: #081321;
      --ink-2: #0d1d31;
      --ink-3: #132a43;
      --cream: #f5f1e8;
      --paper: #fbfaf6;
      --muted: #a8b5c3;
      --muted-dark: #667789;
      --line: rgba(255,255,255,.13);
      --line-dark: rgba(8,19,33,.14);
      --gold: #f4b643;
      --gold-soft: #ffe2a4;
      --blue: #75b5ff;
      --max: 1180px;
      --shadow: 0 24px 80px rgba(4, 13, 25, .26);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    img { display: block; width: 100%; }

    .topline {
      background: var(--gold);
      color: var(--ink);
      min-height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
      padding: 8px 20px;
    }
    .site-header {
      background: var(--ink);
      color: #fff;
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .nav {
      width: min(100% - 48px, var(--max));
      min-height: 82px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }
    .brand-symbol {
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
      display: block;
      filter: drop-shadow(0 5px 12px rgba(0,0,0,.18));
      transition: transform .2s ease;
    }
    .brand:hover .brand-symbol { transform: translateY(-2px) rotate(-2deg); }
    .brand-name {
      font-size: 17px;
      font-weight: 900;
      letter-spacing: -.055em;
    }
    .brand-name span { color: var(--gold); }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
      margin-left: auto;
    }
    .nav-links a {
      color: #d8e0e8;
      font-size: 12px;
      font-weight: 700;
      transition: color .2s ease;
    }
    .nav-links a:hover { color: var(--gold); }
    .nav-cta {
      background: transparent;
      border: 1px solid rgba(255,255,255,.34);
      border-radius: 999px;
      color: #fff;
      padding: 11px 17px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .02em;
      cursor: pointer;
      transition: all .2s ease;
    }
    .nav-cta:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
    .menu-toggle { display: none; background: none; border: 0; color: #fff; font-size: 25px; cursor: pointer; }

    .hero {
      background: var(--ink);
      color: #fff;
      padding: 70px 0 92px;
      overflow: hidden;
      position: relative;
    }
    .hero::before {
      content: "";
      position: absolute;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(33,92,150,.30), transparent 68%);
      right: -230px;
      top: -200px;
      pointer-events: none;
    }
    .hero-inner {
      width: min(100% - 48px, var(--max));
      margin: auto;
      display: grid;
      grid-template-columns: .89fr 1.11fr;
      gap: 66px;
      align-items: center;
      position: relative;
      z-index: 1;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--gold);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .2em;
      text-transform: uppercase;
    }
    .eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }
    .hero h1 {
      margin: 21px 0 22px;
      max-width: 510px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(43px, 6vw, 78px);
      font-weight: 500;
      line-height: .98;
      letter-spacing: -.065em;
    }
    .hero h1 em { color: var(--gold); font-style: normal; }
    .hero-copy {
      color: #b7c4d0;
      max-width: 450px;
      font-size: 15px;
      line-height: 1.7;
      margin: 0;
    }
    .hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 33px; }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-radius: 999px;
      min-height: 45px;
      padding: 0 21px;
      font-size: 12px;
      font-weight: 900;
      transition: transform .2s ease, background .2s ease, color .2s ease;
    }
    .button:hover { transform: translateY(-2px); }
    .button-primary { background: var(--gold); color: var(--ink); }
    .button-secondary { color: #fff; border: 1px solid rgba(255,255,255,.28); }
    .button-secondary:hover { background: rgba(255,255,255,.1); }
    .hero-note { margin-top: 40px; color: #8092a6; font-size: 11px; display: flex; align-items: center; gap: 9px; }
    .hero-note strong { color: #dbe4ec; }
    .hero-visual { position: relative; min-height: 440px; }
    .hero-photo {
      height: 440px;
      object-fit: cover;
      border-radius: 3px;
      filter: saturate(.88) contrast(1.05);
      box-shadow: var(--shadow);
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(8,19,33,.58) 0%, transparent 35%, rgba(8,19,33,.08) 100%);
      border-radius: 3px;
    }
    .hero-caption {
      position: absolute;
      bottom: 20px;
      left: 20px;
      right: 20px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
      color: #fff;
    }
    .hero-caption small { display: block; font-size: 10px; color: #e8c16d; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
    .hero-caption a { transition: color .2s ease; }
    .hero-caption a:hover { color: var(--gold); }
    .hero-caption p { margin: 4px 0 0; font-family: Georgia, serif; font-size: 18px; line-height: 1.15; }
    .hero-caption .caption-meta { color: #d4dce5; font-size: 11px; white-space: nowrap; }

    .section { padding: 92px 0; }
    .container { width: min(100% - 48px, var(--max)); margin: auto; }
    .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
    .section-heading h2 {
      margin: 10px 0 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(31px, 4vw, 48px);
      font-weight: 500;
      letter-spacing: -.055em;
      line-height: 1;
    }
    .section-heading p { color: var(--muted-dark); font-size: 13px; max-width: 250px; margin: 0 0 2px; }
    .dark-label { color: #9aa8b7; }
    .dark-label::before { background: var(--gold); }

    .featured-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 22px; }
    .featured-card { position: relative; min-height: 420px; border-radius: 4px; overflow: hidden; color: #fff; background: var(--ink-2); }
    .featured-card img { height: 100%; min-height: 420px; object-fit: cover; filter: saturate(.82); }
    .featured-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,19,33,.95), rgba(8,19,33,.03) 70%); }
    .featured-content { position: absolute; inset: auto 28px 26px; z-index: 1; max-width: 570px; }
    .tag { display: inline-flex; padding: 6px 9px; border-radius: 2px; background: var(--gold); color: var(--ink); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
    .featured-content h3 { margin: 13px 0 9px; font-family: Georgia, serif; font-size: clamp(26px, 3vw, 39px); font-weight: 500; line-height: 1.02; letter-spacing: -.045em; }
    .featured-content p { color: #bfccd7; font-size: 13px; max-width: 470px; margin: 0 0 17px; }
    .article-meta { display: flex; align-items: center; gap: 12px; color: #b6c4d0; font-size: 10px; }
    .article-meta span + span::before { content: "•"; margin-right: 12px; color: var(--gold); }
    .side-stack { display: grid; gap: 22px; }
    .mini-card { display: grid; grid-template-columns: 132px 1fr; background: #fff; border: 1px solid var(--line-dark); min-height: 199px; }
    .mini-card img { height: 100%; object-fit: cover; }
    .mini-content { padding: 20px 18px; display: flex; flex-direction: column; justify-content: center; }
    .mini-content .tag { align-self: start; background: #e9f2fb; color: #245382; }
    .mini-content h3 { font-family: Georgia, serif; font-size: 21px; font-weight: 500; line-height: 1.05; letter-spacing: -.035em; margin: 10px 0 10px; }
    .mini-content p { margin: 0; color: var(--muted-dark); font-size: 11px; line-height: 1.5; }
    .mini-content .article-meta { color: #718294; margin-top: 14px; }

    .topics { background: var(--cream); border-top: 1px solid #e7e1d6; border-bottom: 1px solid #e7e1d6; }
    .topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
    .topic { background: var(--cream); padding: 25px 22px; min-height: 154px; transition: background .2s ease, transform .2s ease; }
    .topic:hover { background: #fff; transform: translateY(-2px); }
    .topic-number { color: #b29b6f; font: 500 25px Georgia, serif; }
    .topic h3 { font-size: 13px; margin: 17px 0 6px; letter-spacing: -.01em; }
    .topic p { color: var(--muted-dark); font-size: 11px; line-height: 1.45; margin: 0; }

    .etudo-portrait {
      min-height: 520px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: end;
      justify-content: center;
      background: radial-gradient(circle at 50% 30%, rgba(64, 126, 190, .28), transparent 52%), linear-gradient(145deg, #122a43, #081321 72%);
      border: 1px solid rgba(255,255,255,.12);
      isolation: isolate;
    }
    .etudo-portrait::before {
      content: "";
      position: absolute;
      width: 360px;
      height: 360px;
      border: 1px solid rgba(244,182,67,.34);
      border-radius: 50%;
      top: 54px;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 0 0 18px rgba(244,182,67,.035), 0 0 0 42px rgba(117,181,255,.035);
      z-index: -1;
    }
    .etudo-portrait::after {
      content: "";
      position: absolute;
      inset: 18px;
      border: 1px solid rgba(255,255,255,.08);
      pointer-events: none;
    }
    .etudo-portrait img {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 500px;
      object-fit: contain;
      object-position: center bottom;
      filter: drop-shadow(0 22px 24px rgba(0,0,0,.38));
    }
    .etudo-portrait-badge {
      position: absolute;
      top: 24px;
      left: 24px;
      z-index: 2;
      display: grid;
      gap: 3px;
      color: #fff;
    }
    .etudo-portrait-badge span {
      color: var(--gold);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .18em;
    }
    .etudo-portrait-badge small { color: #b6c6d4; font-size: 10px; }
    .etudo-portrait-caption {
      position: absolute;
      z-index: 2;
      right: 22px;
      bottom: 22px;
      max-width: 145px;
      text-align: right;
    }
    .etudo-portrait-caption strong { display: block; color: #fff; font: 500 22px/1 Georgia, serif; }
    .etudo-portrait-caption span { display: block; margin-top: 4px; color: #aebdca; font-size: 10px; line-height: 1.35; }
    .manifesto { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
    .manifesto::before { content: "ETUDO"; position: absolute; font: 800 265px/1 Georgia, serif; color: rgba(255,255,255,.025); right: -15px; bottom: -45px; letter-spacing: -.13em; }
    .manifesto-inner { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 75px; position: relative; z-index: 1; }
    .manifesto h2 { margin: 14px 0 0; font: 500 clamp(34px, 4vw, 54px)/.98 Georgia, serif; letter-spacing: -.06em; }
    .manifesto-copy { color: #b8c6d3; max-width: 520px; font-size: 15px; line-height: 1.7; margin: 0 0 25px; }
    .manifesto-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 30px; }
    .point { border-top: 1px solid var(--line); padding-top: 13px; }
    .point strong { display: block; color: #fff; font-size: 13px; margin-bottom: 5px; }
    .point span { display: block; color: #91a4b7; font-size: 11px; line-height: 1.45; }

    .newest { background: #fff; }
    .post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
    .post-card { border-top: 2px solid var(--ink); padding-top: 15px; }
    .post-card img { height: 185px; object-fit: cover; margin-bottom: 17px; }
    .post-card .tag { background: transparent; padding: 0; color: #9e7830; }
    .post-card h3 { font: 500 25px/1.08 Georgia, serif; letter-spacing: -.045em; margin: 10px 0 9px; }
    .post-card p { color: var(--muted-dark); font-size: 12px; line-height: 1.55; margin: 0 0 15px; }
    .read-more { color: var(--ink); font-size: 11px; font-weight: 900; }
    .read-more::after { content: "  →"; color: #b7862b; }

    .newsletter { padding: 70px 0; background: #e8eef4; }
    .newsletter-box { display: flex; align-items: center; justify-content: space-between; gap: 30px; background: var(--ink-2); color: #fff; padding: 38px 45px; }
    .newsletter h2 { margin: 0 0 8px; font: 500 34px/1 Georgia, serif; letter-spacing: -.05em; }
    .newsletter p { margin: 0; color: #a9b8c8; font-size: 12px; max-width: 450px; }
    .newsletter-form { display: flex; gap: 8px; min-width: 410px; }
    .newsletter-form input { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; min-height: 44px; padding: 0 15px; outline: none; flex: 1; font-size: 12px; }
    .newsletter-form input::placeholder { color: #8b9aaa; }
    .newsletter-form input:focus { border-color: var(--gold); }
    .newsletter-form button { border: 0; cursor: pointer; min-height: 44px; background: var(--gold); color: var(--ink); padding: 0 17px; font-size: 11px; font-weight: 900; }

    footer { background: var(--ink); color: #fff; padding: 44px 0 25px; }
    .footer-top { display: flex; justify-content: space-between; gap: 30px; padding-bottom: 35px; border-bottom: 1px solid var(--line); }
    .footer-about { max-width: 300px; }
    .footer-about p { color: #8fa0b0; font-size: 11px; line-height: 1.6; margin: 15px 0 0; }
    .footer-links { display: flex; gap: 64px; }
    .footer-links h4 { color: var(--gold); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 14px; }
    .footer-links a { display: block; color: #bdc8d2; font-size: 11px; margin: 8px 0; }
    .footer-bottom { display: flex; justify-content: space-between; gap: 20px; color: #708091; font-size: 10px; padding-top: 20px; }

    @media (max-width: 860px) {
      .nav-links { gap: 16px; }
      .hero-inner, .manifesto-inner { grid-template-columns: 1fr; gap: 40px; }
      .hero { padding: 55px 0 70px; }
      .hero-visual { min-height: 350px; }
      .hero-photo { height: 350px; }
      .manifesto-inner { gap: 35px; }
      .etudo-portrait { min-height: 420px; }
      .etudo-portrait img { height: 410px; }
      .featured-grid { grid-template-columns: 1fr; }
      .topic-grid { grid-template-columns: repeat(2, 1fr); }
      .newsletter-box { align-items: flex-start; flex-direction: column; }
      .newsletter-form { min-width: 0; width: 100%; }
    }
    @media (max-width: 620px) {
      .topline { font-size: 8px; letter-spacing: .13em; }
      .nav, .container, .hero-inner { width: min(100% - 32px, var(--max)); }
      .nav { min-height: 68px; }
      .brand-name { font-size: 15px; }
      .menu-toggle { display: block; }
      .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; padding: 16px; background: var(--ink-2); border-top: 1px solid var(--line); flex-direction: column; align-items: flex-start; gap: 15px; }
      .nav-links.open { display: flex; }
      .nav-cta { display: none; }
      .hero h1 { font-size: 49px; }
      .hero-actions { flex-wrap: wrap; }
      .hero-visual, .hero-photo { height: 280px; min-height: 280px; }
      .hero-caption { left: 15px; right: 15px; bottom: 15px; }
      .hero-caption p { font-size: 15px; }
      .section { padding: 65px 0; }
      .section-heading { display: block; }
      .section-heading p { margin-top: 15px; }
      .mini-card { grid-template-columns: 105px 1fr; min-height: 170px; }
      .mini-content { padding: 14px; }
      .mini-content h3 { font-size: 18px; }
      .post-list { grid-template-columns: 1fr; gap: 35px; }
      .post-card img { height: 210px; }
      .manifesto-points { grid-template-columns: 1fr; gap: 20px; }
      .newsletter-box { padding: 28px 23px; }
      .newsletter h2 { font-size: 29px; }
      .newsletter-form { flex-direction: column; }
      .newsletter-form button { width: 100%; }
      .footer-top, .footer-bottom { flex-direction: column; }
      .footer-links { gap: 35px; }
    }