:root {
  --stone: #f1f3f8; --paper: #fbfbfe; --ink: #1d1a25; --ink-soft: #625d69;
  --purple: #654378; --purple-dark: #35213f; --lavender: #ddd5e5; --line: rgba(29,26,37,.17);
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { background: var(--stone); color: var(--ink); font: 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: .25em; }
img { display: block; max-width: 100%; }
.shell { width: min(100% - 4rem, 75rem); margin-inline: auto; }
.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; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--ink); color: var(--paper); padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid #9676a7; outline-offset: 5px; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner { min-height: 5.25rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.wordmark { font: 1.2rem var(--serif); text-decoration: none; }
.header-inner nav { display: flex; align-items: center; gap: 1.75rem; font-size: .85rem; }
.header-inner nav a { text-decoration: none; padding-block: .6rem; }
.header-inner nav a:hover { text-decoration: underline; }
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(3rem,7vw,7rem); align-items: center; padding-block: 5.5rem 6rem; }
.eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--purple); }
h1, h2, .project-copy h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
h1 { font-size: clamp(3.5rem,6.3vw,5.8rem); line-height: .98; letter-spacing: -.05em; margin-top: 1.5rem; }
.hero-lead { margin-top: 1.8rem; color: var(--ink-soft); font-size: 1.15rem; max-width: 30rem; }
.button-link { display: inline-flex; align-items: center; gap: 1.5rem; min-height: 3.25rem; padding: .7rem 1.2rem; margin-top: 2rem; background: var(--purple-dark); color: var(--paper); font-weight: 600; font-size: .85rem; text-decoration: none; }
.button-link:hover { background: var(--purple); }
.project-index { background: var(--purple-dark); color: var(--paper); padding: 2.25rem; }
.index-heading { display: flex; justify-content: space-between; gap: 1rem; color: #d8c8e2; font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1.75rem; }
.project-index > a { display: grid; grid-template-columns: 1.5rem 1fr 1rem; align-items: center; gap: 1rem; border-top: 1px solid #6b5776; padding: 1.65rem 0; text-decoration: none; }
.project-index > a:hover strong { text-decoration: underline; text-underline-offset: .15em; }
.index-number { color: #d8c8e2; font-size: .65rem; }
.project-index strong { display: block; font: 1.65rem/1.2 var(--serif); }
.project-index small { display: block; margin-top: .4rem; font-size: .73rem; color: #d8c8e2; }
.index-arrow { font-size: 1.2rem; }
.project-index > p { border-top: 1px solid #6b5776; padding-top: 1.25rem; font-size: .75rem; color: #d8c8e2; }
.projects-section { background: var(--paper); border-block: 1px solid var(--line); padding-block: 4.5rem 1rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; padding-bottom: 2.5rem; }
h2 { font-size: clamp(2rem,3.3vw,3rem); letter-spacing: -.035em; line-height: 1.1; }
.section-heading p { max-width: 22rem; color: var(--ink-soft); font-size: .88rem; }
.project-row { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(2.5rem,6vw,5.5rem); border-top: 1px solid var(--line); padding-block: 4.25rem; }
.project-copy h3 { font-size: clamp(2.3rem,3.7vw,3.6rem); line-height: 1.05; letter-spacing: -.035em; margin-top: .75rem; }
.project-summary { margin-top: 1.5rem; font-size: 1.1rem; }
.project-copy > p:not(.eyebrow):not(.project-summary):not(.project-status) { margin-top: 1rem; color: var(--ink-soft); font-size: .91rem; }
.tech-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin-top: 1.5rem; }
.tech-list li { border: 1px solid var(--line); padding: .2rem .55rem; color: var(--purple-dark); font-size: .7rem; }
.project-status { margin-top: 1rem; color: var(--ink-soft); font-size: .74rem; }
.project-links { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.35rem; }
.project-links a, .text-link { font-size: .82rem; font-weight: 650; text-decoration: none; border-bottom: 1px solid var(--purple); padding-block: .4rem; }
.project-links a:hover, .text-link:hover { color: var(--purple); }
figcaption { color: var(--ink-soft); font-size: .68rem; margin-top: .7rem; line-height: 1.45; }
.about-section { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem,8vw,8rem); padding-block: 5.5rem; }
.about-copy h2 { margin-top: 1rem; }
.about-copy > p:not(.eyebrow) { margin-top: 1.4rem; color: var(--ink-soft); font-size: .95rem; }
.text-link { display: inline-block; margin-top: 1.5rem; }
.skills h3 { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1.4rem; color: var(--purple); }
.skills dl > div { border-top: 1px solid var(--line); padding-block: 1.2rem; }
.skills dt { font-weight: 650; font-size: .9rem; }
.skills dd { color: var(--ink-soft); font-size: .87rem; margin-top: .45rem; }
.site-footer { background: var(--paper); border-top: 1px solid var(--line); }
.footer-inner { min-height: 6rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; color: var(--ink-soft); font-size: .75rem; }
@media (max-width: 850px) {
  .hero { gap: 2rem; grid-template-columns: 1fr 1fr; }
  .project-index { padding: 1.5rem; }
  .project-index strong { font-size: 1.45rem; }
  .project-row { gap: 2rem; }
}
@media (max-width: 680px) {
  .shell { width: min(100% - 2.5rem,75rem); }
  .header-inner { min-height: 4.5rem; gap: 1rem; }
  .wordmark { font-size: 1.05rem; }
  .header-inner nav { gap: .9rem; font-size: .75rem; }
  .header-inner nav a:last-child { display: none; }
  .hero { grid-template-columns: 1fr; gap: 3rem; padding-block: 3rem 4rem; }
  h1 { font-size: clamp(3.5rem,14vw,5rem); }
  .hero-lead { font-size: 1rem; }
  .project-index { padding: 1.6rem; }
  .project-index > a { padding-block: 1.25rem; }
  .project-index strong { font-size: 1.65rem; }
  .projects-section { padding-top: 3rem; }
  .section-heading { display: block; padding-bottom: 2rem; }
  .section-heading p { margin-top: 1rem; }
  .project-row { grid-template-columns: 1fr; gap: 2rem; padding-block: 3rem; }
  .project-copy h3 { font-size: 2.8rem; }
  .about-section { grid-template-columns: 1fr; gap: 3rem; padding-block: 3.5rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; justify-content: center; gap: .65rem; padding-block: 1.5rem; }
}
@media (max-width: 350px) {
  .shell { width: calc(100% - 2rem); }
  .header-inner nav { gap: .6rem; }
  .wordmark { font-size: .95rem; }
  h1 { font-size: 3.2rem; }
  .project-index { padding: 1.25rem; }
  .project-index > a { gap: .65rem; }
  .project-index strong { font-size: 1.5rem; }
  .project-copy h3 { font-size: 2.45rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
.more-section { padding-block: 4.5rem; }
.more-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.small-project { padding: 2.25rem 2.25rem 2.25rem 0; display: flex; flex-direction: column; align-items: flex-start; border-bottom: 1px solid var(--line); }
.small-project:nth-child(even) { padding-left: 2.25rem; padding-right: 0; border-left: 1px solid var(--line); }
.small-project h3 { margin-top: .8rem; font: 1.65rem/1.2 var(--serif); letter-spacing: -.02em; }
.small-project > p:not(.eyebrow) { color: var(--ink-soft); font-size: .9rem; margin-top: 1rem; max-width: 32rem; }
.small-project .tech-list { margin-top: 1.2rem; margin-bottom: .7rem; }
.small-project > .text-link, .small-project > .project-links { margin-top: auto; }
.more-links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1.5rem; color: var(--ink-soft); font-size: .78rem; }
.about-section { border-top: 1px solid var(--line); padding-top: 4.5rem; }
.image-dialog { position: fixed; inset: 0; margin: auto; width: min(94vw,90rem); max-height: 94dvh; padding: 1rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); overflow: auto; }
.image-dialog::backdrop { background: #17121ed9; }
.dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.dialog-bar p { font-size: .82rem; font-weight: 600; }
.image-dialog button { min-height: 2.75rem; padding: .4rem .8rem; border: 1px solid var(--line); background: var(--paper); font-size: .8rem; }
.image-dialog > img { width: 100%; height: auto; max-height: calc(94dvh - 10.5rem); object-fit: contain; background: #eae8f0; }
.dialog-caption { margin-top: .7rem; color: var(--ink-soft); font-size: .75rem; }
.dialog-navigation { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; }
.dialog-navigation span { font-size: .75rem; }
@media (max-width: 680px) {
  .header-inner nav a[href="#mais-projetos"] { display: none; }
  .more-section { padding-block: 3rem; }
  .more-grid { grid-template-columns: 1fr; }
  .small-project, .small-project:nth-child(even) { padding: 2rem 0; border-left: 0; }
  .image-dialog { width: 96vw; padding: .75rem; }
}

/* The offset layer is a real second card, with its own projects. */
.project-deck { min-width: 0; }
.deck-stage { display: grid; gap: 1rem; }
.index-card { --card-muted: #d8c8e2; --card-line: #6b5776; display: grid; grid-template-rows: auto repeat(3,minmax(5.7rem,1fr)) auto; border: 1px solid #493251; }
.index-card-2 { --card-muted: #67526f; --card-line: #baacc6; background: var(--lavender); color: var(--purple-dark); border-color: #c4b6cf; }
.index-card .index-heading, .index-card .index-number, .index-card small, .index-card > p { color: var(--card-muted); }
.index-card > a, .index-card > p { border-color: var(--card-line); }
.index-card > a { padding-block: 1.35rem; }
.index-card strong { font-size: clamp(1.3rem,2vw,1.65rem); }
.deck-enhanced .index-card { grid-area: 1 / 1; position: relative; transform: translate(12px,12px); z-index: 0; pointer-events: none; }
.deck-enhanced .is-front { transform: translate(0,0); z-index: 2; pointer-events: auto; box-shadow: 0 12px 24px #35213f0a; }
.deck-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.8rem; }
.deck-choices { display: flex; flex-wrap: wrap; gap: .8rem; }
.deck-choices button { min-height: 2.75rem; padding: .35rem 0; border: 0; background: none; font-size: .75rem; color: var(--ink-soft); position: relative; }
.deck-choices button::after { content: ''; position: absolute; left: 0; right: 0; bottom: .3rem; height: 1px; background: transparent; }
.deck-choices button[aria-pressed="true"] { color: var(--purple-dark); }
.deck-choices button[aria-pressed="true"]::after { background: var(--purple); }
.deck-next { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: .35rem .4rem; border: 0; background: none; color: var(--purple-dark); }
.deck-next [data-deck-count] { font-size: .7rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.deck-next > span:last-child { font-size: 1.3rem; }
.deck-controls button:hover { color: var(--purple); }
/* A screenshot stage, a quiet toolbar and a visual filmstrip. */
.gallery { min-width: 0; --frame: #e8e4ed; }
#mindcanary .gallery { --frame: #e6ece7; }
#uduck .gallery { --frame: #e2e0e8; }
#pbia .gallery { --frame: #e3ebe7; }
.gallery-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; }
.gallery-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.gallery-enhanced .gallery-track { display: block; overflow: visible; padding-bottom: 0; }
.gallery-enhanced .gallery-slide { animation: screenshot-in 220ms ease-out; }
.gallery-enhanced .gallery-slide figcaption { display: none; }
.image-link { display: block; position: relative; padding: .8rem; border: 1px solid #35213f12; border-radius: .85rem; background: var(--frame); box-shadow: 0 14px 35px #35213f08; }
.image-link img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; border-radius: .35rem; box-shadow: 0 3px 10px #00000012; }
.image-zoom { position: absolute; right: 1.2rem; bottom: 1.2rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fbfbfef2; color: var(--purple-dark); box-shadow: 0 2px 12px #0002; font-size: 1rem; transition: background 160ms,color 160ms; }
.image-link:hover .image-zoom { background: var(--purple-dark); color: var(--paper); }
.gallery-controls { margin-top: .65rem; }
.gallery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; min-height: 2.75rem; }
.gallery-toolbar > p { font-size: .7rem; color: var(--ink-soft); line-height: 1.45; }
.gallery-steps { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.gallery-steps button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: transparent; color: var(--purple-dark); font-size: 1.1rem; }
.gallery-steps button:hover { background: var(--frame); }
.gallery-steps span { min-width: 2.4rem; text-align: center; color: var(--ink-soft); font-size: .68rem; font-variant-numeric: tabular-nums; }
.gallery-select { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }
.gallery-select button { min-width: 0; padding: .3rem .3rem .45rem; border: 1px solid transparent; border-radius: .45rem; background: transparent; text-align: left; color: var(--ink-soft); font-size: .68rem; }
.gallery-select img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: .2rem; opacity: .58; transition: opacity 160ms; }
.gallery-select button > span { display: block; margin-top: .4rem; padding-inline: .2rem; }
.gallery-select button:hover img, .gallery-select button[aria-pressed="true"] img { opacity: 1; }
.gallery-select button[aria-pressed="true"] { border-color: #65437865; color: var(--purple-dark); background: var(--frame); }
@keyframes screenshot-in { from { opacity: .5; } to { opacity: 1; } }
@media (max-width: 850px) {
  .index-card { padding: 1.5rem; }
  .index-card > a { gap: .7rem; }
  .index-card strong { font-size: 1.3rem; }
  .deck-choices { gap: .6rem; }
  .deck-choices button { font-size: .7rem; }
}
@media (max-width: 680px) {
  .index-card { padding: 1.6rem; }
  .index-card strong { font-size: 1.5rem; }
  .index-card > a { padding-block: 1.1rem; }
  .index-heading { margin-bottom: 1.25rem; }
  .deck-controls { margin-top: 1.4rem; }
  .image-link { padding: .55rem; border-radius: .65rem; }
  .image-zoom { right: .85rem; bottom: .85rem; width: 2.25rem; height: 2.25rem; }
  .gallery-toolbar { gap: .35rem; }
  .gallery-toolbar > p { font-size: .65rem; }
  .gallery-select { gap: .4rem; }
  .gallery-select button { font-size: .63rem; padding: .2rem .2rem .4rem; }
  .gallery-steps { gap: 0; }
  .gallery-steps span { min-width: 2rem; }
}
@media (max-width: 350px) { .index-card { padding: 1.25rem; } .index-card strong { font-size: 1.35rem; } }
@media (prefers-reduced-motion: reduce) {
  .gallery-enhanced .gallery-slide { animation: none; }
  .image-zoom, .gallery-select img { transition: none; }
}