:root { --font: 'Atkinson Hyperlegible', 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif; --r: 6px; }
[data-theme='dark'] { color-scheme: dark; --bg: #121011; --surface: #181516; --line: #2d282a; --ink: #efeaea; --muted: #ada4a6; --accent: #f28ba0; }
[data-theme='light'] { color-scheme: light; --bg: #f6f5f1; --surface: #fbfaf7; --line: #dcd9d0; --ink: #1a1a18; --muted: #54544e; --accent: #a3141b; }
[data-theme='sepia'] { color-scheme: light; --bg: #f0e6d2; --surface: #f5ecda; --line: #d8c9a8; --ink: #2f261b; --muted: #5e4f3a; --accent: #85301a; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; font: 1rem/1.7 var(--font); color: var(--ink); background: var(--bg); }
button, select, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 0; padding: 0.75rem 1rem; background: var(--ink); color: var(--bg); font-weight: 700; z-index: 10; }
.skip:focus { left: 0; }
.page { width: min(100% - 2rem, 28rem); margin-inline: auto; padding: 1rem 0 3rem; }

.ico { display: inline-block; flex: none; width: 1.25rem; height: 1.25rem; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.ico--ig { -webkit-mask-image: url(img/instagram.svg); mask-image: url(img/instagram.svg); }
.ico--in { -webkit-mask-image: url(img/linkedin.svg); mask-image: url(img/linkedin.svg); }
.ico--globe { -webkit-mask-image: url(img/globe.svg); mask-image: url(img/globe.svg); }
.ico--ext { -webkit-mask-image: url(img/link-external.svg); mask-image: url(img/link-external.svg); }
.ico--x { -webkit-mask-image: url(img/close.svg); mask-image: url(img/close.svg); }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


.hero { display: grid; justify-items: center; gap: 0.5rem; padding: 3.5rem 0 2rem; text-align: center; }
.logo { display: block; width: clamp(80px, 28vw, 104px); max-width: 104px; height: auto; aspect-ratio: 316.1741 / 283.51282; stroke: none; }
.logo__rl { fill: var(--ink); }
.logo__dot { fill: var(--accent); }
.logo + h1 { margin-top: 1.5rem; }
h1 { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.34em; margin-right: -0.34em; text-transform: uppercase; }
.tagline { max-width: 20rem; margin-top: 1.25rem; font: italic 500 1.625rem / 1.45 'Cormorant Garamond', 'Noto Serif JP', Georgia, serif; }
:lang(ja) .tagline { font-style: normal; font-size: 1.375rem; letter-spacing: 0.1em; }
.social { display: flex; justify-content: center; gap: 0.25rem; margin-bottom: 1rem; }
.icon-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r); color: var(--muted); }
.icon-btn:hover { color: var(--ink); }

.cta { width: 100%; min-height: 3rem; padding: 0 1.25rem; border-radius: var(--r); background: var(--ink); color: var(--bg); font-weight: 700; }

.menu { margin-top: 2rem; border-top: 1px solid var(--line); }
.menu__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 3.25rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); text-align: left; }
.menu__item:hover { text-decoration: underline; text-underline-offset: 4px; }
.menu__item svg { width: 1.125rem; height: 1.125rem; }
.menu__item svg, .menu__item .ico { color: var(--muted); }

.work { margin-top: 3rem; }
.work h2 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.work-list { padding: 0; list-style: none; }
.work-item { padding: 1rem 0; border-top: 1px solid var(--line); }
.work-name { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.work-cat { color: var(--muted); font-size: 0.875rem; }
.work-title { font-size: 1rem; }
.work-desc { color: var(--muted); }
.work-stack { margin-top: 0.25rem; color: var(--muted); font-size: 0.875rem; }
.work-item details { margin-top: 0.25rem; }
.work-item summary { display: flex; align-items: center; min-height: 2.75rem; font-weight: 700; cursor: pointer; }
.work-item summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.work-item details ul { padding-left: 1.25rem; color: var(--muted); }
.work-item details li + li { margin-top: 0.25rem; }

.footer { margin-top: 3rem; text-align: center; color: var(--muted); font-size: 0.875rem; }

dialog { width: min(100% - 1.5rem, 32rem); max-height: 86dvh; margin: auto; padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.modal__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.75rem 0.75rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.modal__head h2 { font-size: 1.125rem; }
.modal__body { padding: 1.25rem; }
.m-text + .m-text { margin-top: 1rem; }
.m-list { display: grid; gap: 1.25rem; padding: 0; list-style: none; }
.m-item { display: flex; gap: 0.9rem; }
.m-item h3 { font-size: 1rem; }
.m-item p { color: var(--muted); }
.m-item__num { flex: none; width: 1.25rem; color: var(--muted); font-weight: 700; }

.form { display: grid; gap: 1rem; margin-top: 1.25rem; }
.field { display: grid; gap: 0.35rem; }
.field label { font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; min-height: 2.75rem; padding: 0.6rem 0.8rem; border: 1.5px solid var(--muted); border-radius: var(--r); background: var(--bg); }
.field textarea { min-height: 6rem; resize: vertical; }
.field [aria-invalid='true'] { border-color: var(--ink); border-width: 2.5px; }
.field__err { font-weight: 700; }
.form__actions { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.btn { min-height: 3rem; padding: 0 1.25rem; border: 1.5px solid var(--ink); border-radius: var(--r); font-weight: 700; }
.btn--primary { background: var(--ink); color: var(--bg); }
.toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 20; display: grid; width: min(100% - 2rem, 24rem); padding: 0.85rem 1.1rem; transform: translateX(-50%); border-radius: var(--r); background: var(--ink); color: var(--bg); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.work-name { font-weight: 400; }
.work-item summary { color: var(--muted); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; list-style: none; }
.work-item summary::-webkit-details-marker { display: none; }
.work-item summary::after { content: '\2193'; content: '\2193' / ''; margin-left: 0.5rem; }
.work-item details[open] summary::after { content: '\2191'; content: '\2191' / ''; }
.work-item summary:hover { color: var(--ink); text-decoration: none; }

/* Seletores de idioma e tema: sem fundo, sem hover, sem barra lateral */
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dd summary { display: flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; border-radius: var(--r); color: var(--ink); font-size: 0.875rem; font-weight: 700; cursor: pointer; list-style: none; }
.dd summary::-webkit-details-marker { display: none; }
.dd summary::after { content: ''; width: 0.4rem; height: 0.4rem; margin-top: -0.2rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dd[open] summary::after { margin-top: 0.2rem; transform: rotate(-135deg); }
.dd summary svg { width: 1.25rem; height: 1.25rem; }
.dd__list { display: grid; padding: 0.25rem 0; }
#theme-dd .dd__list { justify-items: end; }
.dd__list button { display: flex; align-items: center; gap: 0.75rem; min-height: 2.5rem; color: var(--muted); font-size: 0.9375rem; }
.dd__list button[aria-pressed='true'] { color: var(--ink); font-weight: 700; }
#theme-dd .dd__list button { justify-content: center; width: 2.5rem; }
.dd__list svg { width: 1.25rem; height: 1.25rem; }
.dd__code { min-width: 1.75rem; font-weight: 700; }

/* Ritmo e hierarquia */
.hero { gap: 0; padding: 2.5rem 0 2.5rem; }
.tagline { margin-top: 1.25rem; }
.menu { margin-top: 2.5rem; }
.work { margin-top: 4rem; }
.work h2 { margin-bottom: 0.5rem; font-size: 1.375rem; line-height: 1.3; }
.work-item { display: grid; justify-items: start; gap: 0.25rem; padding: 1.5rem 0; }
.work-title { font-size: 1.1875rem; line-height: 1.35; }
.work-cat { font-size: 0.875rem; }
.work-name { min-height: 2.5rem; margin-top: 0.25rem; color: var(--accent); font-size: 0.9375rem; }
.work-desc { margin-top: 0.5rem; color: var(--ink); }
.work-stack { margin-top: 0.25rem; font-size: 0.8125rem; }
.work-item details { margin-top: 0.75rem; }
.work-item summary { font-size: 0.75rem; letter-spacing: 0.14em; }
.footer { margin-top: 4rem; }

/* Menus suspensos sobrepostos (não empurram o conteúdo) */
.dd { position: relative; }
.dd__list { position: absolute; top: 100%; z-index: 5; margin-top: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
#lang-dd .dd__list { left: 0; }
#theme-dd .dd__list { right: 0; }
.dd__list button { white-space: nowrap; }
.work h2 { color: var(--ink); }

/* Ícones de tema padronizados: mesmo traço, mesma cor (inativo = cinza, ativo = texto) */
.dd svg, .dd svg * { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dd summary { color: var(--ink); }
.dd__list button { color: var(--muted); }
.dd__list button[aria-pressed='true'] { color: var(--ink); }