:root { color-scheme: light; --ink: #191b22; --paper: #f3f6fb; --line: #cad5e6; --accent: #1854ae; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.6 system-ui, sans-serif; }
.shell { width: min(1180px, calc(100% - 2.5rem)); margin-inline: auto; }
a { color: inherit; text-underline-offset: .25em; }
a:hover, a[aria-current="page"] { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.top, nav { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; flex-wrap: wrap; }
.top { padding-block: 1.15rem; border-bottom: 1px solid var(--line); }
.brand { font-weight: 850; letter-spacing: .1em; text-decoration: none; }
.brand span { color: var(--accent); margin-left: .4em; }
nav a { text-decoration: none; font-weight: 650; }
.hero { padding-block: clamp(1.5rem, 5vw, 4rem); }
.label { color: var(--accent); font: 700 .78rem/1.4 ui-monospace, monospace; letter-spacing: .12em; }
h1, h2, h3, h4 { line-height: 1.12; }
h1 { font-size: clamp(3.2rem, 8vw, 7rem); margin: .1em 0; letter-spacing: -.075em; }
h1 span { color: var(--accent); }
h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); letter-spacing: -.05em; margin: .2em 0 .65em; }
.hero-bottom { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.button { color: var(--accent); font-weight: 750; }
#projetos, .about { padding-block: 1.25rem 2rem; border-top: 1px solid var(--line); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
article h3 { margin: .25rem 0; font-size: clamp(1.15rem, 2vw, 1.5rem); }
article .label { margin-bottom: .25rem; }
.cover { display: block; background: #e6edf7; aspect-ratio: 808 / 632; }
.cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cover:hover { outline: 2px solid var(--accent); }
.bio { max-width: 52rem; font-size: clamp(1.15rem, 2vw, 1.45rem); }
.profile { border-top: 0; padding-top: clamp(1.5rem, 5vw, 4rem); }
.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; margin-top: 2rem; }
.about-grid > div { border-top: 3px solid var(--accent); padding-top: .8rem; }
.trajectory { list-style: none; padding: 0; }
.trajectory li { border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.trajectory h4 { margin: .3rem 0; }
footer.top { border-top: 1px solid var(--line); border-bottom: 0; }
@media (max-width: 680px) { .grid, .about-grid { grid-template-columns: 1fr; } }


/* Artboard labels and surfaces */
.artboard { position: relative; background: #fff; border: 1px solid var(--line); border-radius: .4rem; }
.hero.artboard, .about.artboard { margin-block: 2rem; padding: clamp(1rem, 4vw, 3rem); }
.grid { row-gap: 2rem; }
.artboard::before { content: attr(data-board); display: block; color: var(--accent); font: 700 .7rem/1.4 ui-monospace, monospace; letter-spacing: .08em; }
article.artboard::before { padding: .5rem 1rem; border-bottom: 1px solid var(--line); }
article .label, article h3 { margin-inline: 1rem; }
article h3 { margin-bottom: 1rem; }dialog .tools { background:#181b20; color:#191b22; padding:.8rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
dialog button { font:inherit; cursor:pointer; color:inherit; background:#eff5ff; border:1px solid #aabbd3; padding:.45rem .7rem; }
dialog button:focus-visible, dialog a:focus-visible { outline:2px solid #75bcff; outline-offset:3px; }
dialog a { color:#1854ae; }
.cover { position:relative; }
.cover:is(:hover,:focus-visible) { outline:2px solid #1854ae; }
.cover:is(:hover,:focus-visible)::after { content:""; position:absolute; inset:-4px; pointer-events:none; background:linear-gradient(#1854ae,#1854ae) top left/8px 8px no-repeat,linear-gradient(#1854ae,#1854ae) top right/8px 8px no-repeat,linear-gradient(#1854ae,#1854ae) bottom left/8px 8px no-repeat,linear-gradient(#1854ae,#1854ae) bottom right/8px 8px no-repeat; }
dialog{width:min(94vw,1000px);max-height:92vh;margin:auto;padding:0;border:1px solid #aabbd3;background:#ffffff;color:#191b22}
dialog::backdrop{background:#101217df}
.viewport{height:min(57vh,620px);overflow:hidden;background:#f7faff}
.viewport img{display:block;width:100%;height:100%;object-fit:contain;max-width:none}
.tools button:disabled{opacity:.45;cursor:default}


/* Accent colors for the portfolio workspace */
.hero.artboard { background: linear-gradient(115deg, #e6efff, #eef0ff 72%, #f5eaff); border-top: 3px solid #3b6ccc; }
.about.artboard { background: #f3effc; border-top: 3px solid #7955b0; }
.button { display: inline-block; padding: .45rem .85rem; background: #1854ae; color: white; border-radius: .3rem; text-decoration: none; }
.button:hover { background: #124384; color: white; }
article.artboard { --tag-bg: #e1edff; --tag-ink: #234d91; }
article.artboard:nth-child(3n + 2) { --tag-bg: #dff4ee; --tag-ink: #176153; }
article.artboard:nth-child(3n) { --tag-bg: #eee5fa; --tag-ink: #633987; }
article.artboard::before { background: var(--tag-bg); color: var(--tag-ink); border-radius: .35rem .35rem 0 0; }
article.artboard .label { color: var(--tag-ink); }
dialog .tools:first-child { border-top: 3px solid #75bcff; }
.projects-board { padding-inline: clamp(1rem, 4vw, 3rem); }

.project-description { padding: .75rem 1rem; margin: 0; }
dialog .project-link { display: inline-block; padding: .5rem .75rem; background: #1854ae; color: #fff; border-radius: .25rem; font-weight: 700; text-decoration: none; }
.viewport { outline: 1px solid #75bcff; outline-offset: -1px; }

@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: project-open 420ms cubic-bezier(.25,.1,.25,1) both; }
  dialog[open]::backdrop { animation: project-backdrop 320ms ease-out both; }
  dialog[open] .viewport::after { animation: selection-handles 440ms ease-out both; }
}
.viewport { position: relative; }
.viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(#75bcff, #75bcff) top left / 8px 8px no-repeat,
    linear-gradient(#75bcff, #75bcff) top right / 8px 8px no-repeat,
    linear-gradient(#75bcff, #75bcff) bottom left / 8px 8px no-repeat,
    linear-gradient(#75bcff, #75bcff) bottom right / 8px 8px no-repeat;
}
@keyframes project-open {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes project-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes selection-handles {
  0%, 45% { opacity: 0; }
  100% { opacity: 1; }
}


dialog .file-bar { padding-bottom: 0; border-bottom: 1px solid #aabbd3; }
.file-bar button { margin-bottom: .55rem; }
.file-tab { background: #ffffff; border: 1px solid #aabbd3; border-bottom: 0; border-top: 2px solid #75bcff; padding: .55rem .9rem; align-self: end; }
.file-tab::before { content: "▧"; color: #1854ae; margin-right: .55rem; }

.project-window { width: min(96vw, 1180px); background: #ffffff; border-radius: 12px; border-color: #9bafcb; box-shadow: 0 24px 95px #0009; }
.project-window[open] { transform-origin: 50% 35%; }
.window-bar, .window-status { display: flex; align-items: center; gap: .8rem; padding: .65rem 1rem; background: #e6efff; }
.window-bar { border-bottom: 1px solid #cad5e6; }
.window-mark { color: #1854ae; font-size: 1.35rem; }
.window-bar button { margin-left: auto; font-size: 1.4rem; line-height: 1; }
.window-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 28%); }
.window-canvas { min-width: 0; padding: clamp(.75rem, 3vw, 2rem); background: radial-gradient(#a9b9d0 1px, transparent 1px) 0 0 / 16px 16px #edf3fc; }
.window-canvas .file-tab { width: fit-content; font-size: .8rem; }
.window-canvas .file-tab::before { content: none; }
.window-canvas .file-tab span { color: #75bcff; }
.window-canvas .viewport { height: min(55vh, 570px); background: #f7faff; }
.window-inspector { border-left: 1px solid #cad5e6; padding: clamp(1rem, 3vw, 2rem); }
.window-label { color: #1854ae; font: 700 .72rem monospace; letter-spacing: .13em; }
.window-inspector h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); margin: .5rem 0; }
.window-inspector .project-description { padding: 0; margin-bottom: 1.25rem; color: #46546a; }
.window-status { justify-content: space-between; border-top: 1px solid #cad5e6; font-size: .85rem; }
.window-nav { display: flex; gap: .5rem; }
.window-bar button:hover, .window-nav button:hover { background: #dceaff; }
@media (max-width: 700px) {
  .window-workspace { grid-template-columns: 1fr; }
  .window-inspector { border-left: 0; border-top: 1px solid #cad5e6; }
  .window-canvas .viewport { height: min(43vh, 360px); }
}

/* Shared dark palette */
:root { color-scheme: dark; --paper: #181b21; --ink: #edf2fa; --line: #414b5c; --accent: #96c5ff; }
.artboard, .project-window { background: #232831; color: var(--ink); }
.hero.artboard { background: linear-gradient(115deg, #222f47, #27283c); }
.about.artboard { background: #272738; }
.cover, .window-canvas .viewport { background: #171b23; }
article.artboard { --tag-bg: #273b58; --tag-ink: #b1d3ff; }
article.artboard:nth-child(3n + 2) { --tag-bg: #203e3b; --tag-ink: #a7e3d2; }
article.artboard:nth-child(3n) { --tag-bg: #3a304d; --tag-ink: #dec4ff; }
.window-bar, .window-status { background: #1b2029; border-color: var(--line); }
.window-canvas { background: radial-gradient(#465164 1px, transparent 1px) 0 0 / 16px 16px #1e2530; }
.window-inspector { border-color: var(--line); }
.window-label, .window-mark { color: var(--accent); }
.window-inspector .project-description { color: #c8d2e2; }
.window-canvas .file-tab, .project-window button { background: #2d3747; border-color: #566782; color: var(--ink); }
.window-canvas .file-tab { border-top-color: var(--accent); }
.project-window button:hover { background: #3c4d66; }
dialog .project-link { background: var(--accent); color: #142137; }
.cover:is(:hover,:focus-visible) { outline-color: var(--accent); }

#language-toggle { font: inherit; font-weight: 750; color: var(--accent); background: transparent; border: 1px solid var(--line); border-radius: .3rem; padding: .25rem .6rem; cursor: pointer; }

.project-window { border-color: var(--project-accent); }
.project-window .window-bar, .project-window .window-status { background: var(--project-surface); }
.project-window .window-label, .project-window .window-mark, .project-window .file-tab span { color: var(--project-accent); }
.project-window .file-tab { border-top-color: var(--project-accent); }
.project-window .viewport { outline-color: var(--project-accent); }
.project-window .viewport::after {
  background:
    linear-gradient(var(--project-accent), var(--project-accent)) top left / 8px 8px no-repeat,
    linear-gradient(var(--project-accent), var(--project-accent)) top right / 8px 8px no-repeat,
    linear-gradient(var(--project-accent), var(--project-accent)) bottom left / 8px 8px no-repeat,
    linear-gradient(var(--project-accent), var(--project-accent)) bottom right / 8px 8px no-repeat;
}
dialog.project-window .project-link { background: var(--project-accent); }
.hero .intro-bio { max-width: none; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.6; }

article.artboard:nth-child(2), article.artboard:nth-child(6) { --tag-bg: #273b58; --tag-ink: #b1d3ff; }

article.artboard:nth-child(1) { --tag-bg: #3a304d; --tag-ink: #dec4ff; }

article.artboard:nth-child(3) { --tag-bg: #482c2c; --tag-ink: #ffb1a8; }
article.artboard:nth-child(4) { --tag-bg: #482c34; --tag-ink: #efb0bb; }

/* Link buttons */
nav a,
main p > a,
footer.top > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: .55rem .9rem;
  border: 1px solid #536580;
  border-radius: .4rem;
  background: #28364a;
  color: #d6e7ff;
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
}
nav a:hover,
main p > a:hover,
footer.top > a:hover {
  background: #354b68;
  border-color: #96c5ff;
  color: #fff;
}
nav a[aria-current="page"] {
  background: #354b68;
  border-color: #96c5ff;
  color: #fff;
}
#language-toggle { min-height: 42px; padding: .55rem .8rem; }
@media (prefers-reduced-motion: no-preference) {
  nav a, main p > a, footer.top > a, .project-link {
    transition: background-color 160ms ease, border-color 160ms ease;
  }
}

.preview-thumbnails { display: flex; gap: .6rem; padding-top: .8rem; overflow-x: auto; }
.project-window .preview-thumbnails button { flex: 0 0 72px; padding: 3px; border: 2px solid transparent; border-radius: .25rem; }
.project-window .preview-thumbnails button[aria-pressed="true"] { border-color: var(--project-accent); }
.preview-thumbnails img { display: block; width: 62px; height: 52px; object-fit: contain; }
.preview-count { color: #c8d2e2; margin: .5rem 0 0; font-size: .8rem; }

.viewport .outgoing-preview { position: absolute; inset: 0; pointer-events: none; }
.window-canvas .viewport { overflow: hidden; }

.social-links { display: flex; gap: .7rem; margin-top: 1.25rem; }
.social-links a { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 44px; border: 1px solid #536580; border-radius: .4rem; background: #28364a; color: #d6e7ff; text-decoration: none; }
.social-links a:hover { background: #354b68; border-color: #96c5ff; color: #fff; }
.social-links svg { display: block; }

.social-links { flex-wrap: wrap; align-items: center; }
.social-links .trajectory-link { width: auto; height: auto; min-height: 44px; padding: .55rem .9rem; font-size: .9rem; font-weight: 650; line-height: 1.4; }

.contact-links { display: flex; flex-wrap: wrap; gap: .7rem; }
.contact-links a { display: inline-flex; align-items: center; min-height: 42px; padding: .55rem .9rem; border: 1px solid #536580; border-radius: .4rem; background: #28364a; color: #d6e7ff; font-size: .9rem; font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
.contact-links a:hover { background: #354b68; border-color: #96c5ff; color: #fff; }

/* Additional project palettes, based on their covers */
article.artboard[data-client="UNENDTALKS"] { --tag-bg: #463426; --tag-ink: #f3c49a; }
article.artboard[data-client="PODSER+"] { --tag-bg: #223b59; --tag-ink: #a9d4ff; }
article.artboard[data-client="CONTENT CLUB"] { --tag-bg: #2b2c47; --tag-ink: #c4bdef; }
article.artboard[data-client="LSA EVENTOS"] { --tag-bg: #252f46; --tag-ink: #a9c7ee; }
article.artboard[data-client="POSTERS"] { --tag-bg: #423c2e; --tag-ink: #e8d7ad; }

/* Ambient workspace lighting */
@property --ambient-primary { syntax: "<color>"; inherits: true; initial-value: #96c5ff; }
@property --ambient-secondary { syntax: "<color>"; inherits: true; initial-value: #dec4ff; }
@property --ambient-tertiary { syntax: "<color>"; inherits: true; initial-value: #a7e3d2; }

body {
  isolation: isolate;
  background-color: var(--paper);
  background-image: radial-gradient(circle, rgba(155, 180, 220, .15) .8px, transparent 1px);
  background-size: 24px 24px;
  transition: --ambient-primary 1.6s ease, --ambient-secondary 1.6s ease, --ambient-tertiary 1.6s ease;
}
body::before {
  content: "";
  position: fixed;
  inset: -10vh -8vw;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 65% at 20% 12%, color-mix(in srgb, color-mix(in srgb, var(--ambient-primary) 70%, #111827) 24%, transparent), transparent 78%),
    radial-gradient(ellipse 70% 70% at 80% 40%, color-mix(in srgb, color-mix(in srgb, var(--ambient-secondary) 70%, #111827) 21%, transparent), transparent 78%),
    radial-gradient(ellipse 75% 65% at 30% 92%, color-mix(in srgb, color-mix(in srgb, var(--ambient-tertiary) 70%, #111827) 19%, transparent), transparent 78%);
  animation: ambient-drift 26s ease-in-out infinite alternate;
}
@keyframes ambient-drift {
  from { transform: translate(-1%, -2%); }
  to { transform: translate(2%, 3%); }
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  body::before { animation: none; }
}