/* Pieces shared by every page: language switch, blog cards and the newsletter band. Page tokens (colors, fonts, grid) come from each page's own style block. */

/* Before Portuguese is applied, hide the page for a moment so English text doesn't flash. */
.i18n-wait body{opacity:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Language switch */
.nav .links{margin-left:auto}
.lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1.5px solid var(--line);border-radius:999px;background:var(--raised);flex:none}
.lang button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 11px 0 8px;border:0;border-radius:999px;background:transparent;font:600 13px var(--body);letter-spacing:.06em;color:var(--ink-muted);cursor:pointer;transition:background .2s ease,color .2s ease}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--lilac);color:var(--ink)}
.flag{width:20px;height:20px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(24,21,30,.18)}
@media (max-width:760px){
  .nav{gap:10px}
  .logo{height:28px}
  .lang button{padding:0 7px;gap:0}
  .lang button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
.links a{white-space:nowrap}
@media (max-width:400px){.nav{gap:8px}.links .btn{padding:0 12px}.lang button{padding:0 5px}.logo{height:24px}}

/* Blog cards */
.posts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut)}
.posts > *{grid-column:span 4}
@media (max-width:1060px){.posts > *{grid-column:span 6}}
@media (max-width:680px){.posts > *{grid-column:1 / -1}}
.post-card{display:flex;flex-direction:column;gap:14px;padding:28px 28px 26px;min-height:340px;border:2.5px solid var(--ink);border-radius:28px;background:var(--raised);color:var(--ink);text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.post-card:hover{transform:translateY(-4px) rotate(-.6deg)}
.post-card h3{font-size:clamp(24px,2.2vw,30px);line-height:1.08}
.post-card .ex{color:var(--ink-muted)}
.post-card .go{margin-top:auto;padding-top:6px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.post-card .go span{transition:transform .2s ease;display:inline-block}
.post-card:hover .go span{transform:translateX(4px)}
.pillar{align-self:flex-start;display:inline-flex;align-items:center;padding:5px 12px;border:2px solid var(--ink);border-radius:999px;font-size:13px;font-weight:600;background:var(--lilac);white-space:nowrap}
.pillar.pov{background:var(--pink)}
.pillar.teardown{background:var(--yellow)}
.pillar.work{background:var(--green)}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.more{display:flex;justify-content:flex-end;margin-top:32px}
@media (max-width:680px){.more{justify-content:flex-start}}

/* Newsletter */
.news{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:32px;align-items:center;padding:clamp(32px,5vw,64px);border:2.5px solid var(--ink);border-radius:36px;background:var(--raised)}
.news > .news-copy{grid-column:1 / span 6}
.news > .news-form{grid-column:8 / span 5}
@media (max-width:900px){.news > .news-copy,.news > .news-form{grid-column:1 / -1}}
.news h2{margin-top:16px;font-size:clamp(34px,4.2vw,56px)}
.news-copy p{margin-top:18px;color:var(--ink-muted);max-width:52ch}
.news-form{position:relative}
.news-form .field{display:flex;gap:10px;flex-wrap:wrap}
.news-form input{flex:1 1 220px;min-width:0;min-height:52px;padding:0 20px;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);font:500 16px var(--body);color:var(--ink)}
.news-form input::placeholder{color:var(--ink-muted)}
.news-form input:focus{outline:none;border-color:var(--lilac-deep);box-shadow:0 0 0 4px var(--lilac-soft)}
.news-form input[aria-invalid="true"]{border-color:#b3261e}
.news-form .btn{min-height:52px;cursor:pointer;font-family:var(--body)}
.news-form .hand{margin-top:16px;font-family:var(--hand);font-weight:700;font-size:26px;line-height:1;transform:rotate(-3deg);transform-origin:left;display:flex;align-items:center;gap:10px}
.news-form .hand svg{width:44px;height:26px;flex:none;color:var(--ink)}
.news-msg{margin-top:14px;min-height:1.6em;font-size:15px;font-weight:500;color:var(--ink-muted)}
.news-msg.err{color:#b3261e}
.news-msg.ok{color:var(--lilac-deep)}