:root{
  color-scheme:light;
  --paper:#f6f4dd;
  --content:#0d2211;
  --green-deep:#266433;
  --green-mid:#349552;
  --green-soft:#bee0c7;
  --orange:#f06838;
  --grey:#585858;
  --toggle-track:#ededf2;
  --toggle-border:#d1d1d9;
  --toggle-on:#262633;
  --toggle-off:#737380;
  --toggle-active-bg:#ffffff;
  --toggle-active-shadow:0 1px 3px 0 rgba(0,0,0,.08);
  --slot-bg:rgba(13,34,17,.06);
  --slot-outline:rgba(13,34,17,.35);
  --nav-border:rgba(13,34,17,.12);
  --footer-bg:#266433;
  --on-brand:#f6f4dd;
  --font-display:'Londrina Solid','Trebuchet MS',sans-serif;
  --font-serif:'Fraunces',Georgia,'Times New Roman',serif;
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#14160f;
  --content:#f2f0e2;
  --green-deep:#82e0a0;
  --green-mid:#3cae63;
  --green-soft:#1e3a27;
  --orange:#ff7e55;
  --grey:#b8b8b8;
  --toggle-track:#24262b;
  --toggle-border:#3a3d44;
  --toggle-on:#f2f0e2;
  --toggle-off:#9b9ba5;
  --toggle-active-bg:#34363d;
  --toggle-active-shadow:0 1px 3px 0 rgba(0,0,0,.4);
  --slot-bg:rgba(242,240,226,.07);
  --slot-outline:rgba(242,240,226,.4);
  --nav-border:rgba(242,240,226,.14);
}

/* "Technology" category: re-points the accent tokens (badge, section
   heading, empty-state text, footer) at the neutral slate/grey values
   already used for the toggle pills instead of the green palette — a
   cooler, more minimal "tech" read, built only from colors already in
   this file. --footer-bg is a literal (not var-chained) so it stays
   fixed across light/dark, same as the marketing footer does. */
:root[data-category="tech"]{
  --green-deep:#262633;
  --green-soft:#ededf2;
  --footer-bg:#262633;
}
:root[data-theme="dark"][data-category="tech"]{
  --green-deep:#f2f0e2;
  --green-soft:#24262b;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--content);
  font-family:var(--font-ui);
  overflow-x:hidden;
  transition:background-color .2s ease,color .2s ease;
}

.fraunces{
  font-family:var(--font-serif);
  font-variation-settings:"SOFT" 0,"WONK" 1;
}
.londrina{font-family:var(--font-display);font-weight:400;}

.page{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  width:100%;
  overflow:clip;
}

/* ---------- Menu ---------- */
.menu{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  width:100%;
  padding-block:20px;
  padding-inline:40px;
  overflow:clip;
  /* Sticky but deliberately quiet: same paper background as the page
     (so it doesn't flash a new color on scroll) with just a hairline
     separator for definition — there when you reach for it, not
     shouting for attention. */
  position:sticky;
  top:0;
  z-index:40;
  background:var(--paper);
  box-shadow:0 1px 0 var(--nav-border);
  transition:background-color .2s ease,box-shadow .2s ease;
}

.logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:10px;
  overflow:clip;
  color:inherit;
  text-decoration:none;
}
.logo__name{
  margin:0;
  font-size:22px;
  line-height:normal;
  color:var(--content);
  white-space:nowrap;
}
.logo__rule{position:relative;height:0;width:100%;}
.logo__rule img{
  display:block;
  position:absolute;
  left:-0.44%;
  top:-0.5px;
  width:100.88%;
  height:auto;
  max-width:none;
}
.logo__tag{
  margin:0;
  font-size:18px;
  font-weight:100;
  line-height:normal;
  color:var(--content);
  white-space:nowrap;
}

/* Main nav links (Projects, Contact) — sits between the logo and the
   lang/theme toggles. margin-left:auto pushes this whole right-hand
   cluster (nav, then lang, then theme, in DOM order) to the far edge;
   reset to 0 in the mobile drawer, where everything stacks centered
   instead of spreading apart. */
.nav{display:flex;align-items:center;gap:24px;margin-left:auto;padding:10px;}
.nav__link{
  font-size:16px;
  font-family:var(--font-serif);
  color:var(--content);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease;
}
.nav__link:hover,.nav__link:focus-visible{border-bottom-color:var(--content);}

/* .toggles is transparent to layout on desktop, same trick as
   .menu__collapse below — it only becomes a real row on mobile so the
   language and theme pills can sit side by side there. */
.toggles{display:contents;}
.lang,.theme{display:flex;align-items:center;justify-content:center;padding:10px;overflow:clip;}
.toggle-track{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px;
  background:var(--toggle-track);
  border:1px solid var(--toggle-border);
  border-radius:24px;
  overflow:clip;
}
.toggle-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px;
  border:0;
  border-radius:20px;
  background:transparent;
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:400;
  color:var(--toggle-off);
  cursor:pointer;
  overflow:clip;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.toggle-btn[aria-pressed="true"]{
  background:var(--toggle-active-bg);
  color:var(--toggle-on);
  font-weight:600;
  box-shadow:var(--toggle-active-shadow);
}
.theme__icon{display:block;width:16px;height:16px;}
/* Sized to match .theme__icon (16px) so the language and theme pills
   come out the same height. */
.flag{
  position:relative;
  flex-shrink:0;
  width:16px;
  height:16px;
  max-width:100%;
  border-radius:8px;
  overflow:hidden;
}

.flag img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none;}

/* On desktop the collapse wrapper is transparent to layout, so .lang and
   .nav sit as direct flex children of .menu exactly as the frame has them.
   Below 900px it becomes the drawer panel. */
.menu__collapse{display:contents;}

.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:10px;
  margin-left:auto;
  border:0;
  background:transparent;
  cursor:pointer;
}
.hamburger__bar{
  display:block;
  width:24px;
  height:2px;
  background:var(--content);
  border-radius:2px;
  transition:transform .24s ease,opacity .18s ease;
}
.menu[data-open="true"] .hamburger__bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu[data-open="true"] .hamburger__bar:nth-child(2){opacity:0;}
.menu[data-open="true"] .hamburger__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

:focus-visible{outline:2px solid var(--orange);outline-offset:3px;}

/* ---------- Footer ---------- */
.footer{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:350px;
  background:var(--footer-bg);
  overflow:clip;
}
.footer__inner{
  display:flex;
  flex:1 0 0;
  flex-wrap:wrap;
  min-width:1px;
  align-items:center;
  justify-content:center;
  gap:30px;
  padding:10px;
  overflow:clip;
}
.footer__logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7.179px;
  padding:14.359px;
  overflow:clip;
}
.footer__logo .logo__name{font-size:clamp(26px,1.645vw,31.59px);color:var(--on-brand);}
.footer__logo .logo__tag{font-size:clamp(20px,1.346vw,25.846px);color:var(--on-brand);}
/* Unlike .logo__name/.logo__tag, this had no color of its own, so it
   fell back to inheriting --content — which flips with the theme
   toggle, unlike everything else in this fixed-dark footer. Pinned to
   --on-brand to match its siblings. */
.footer__logo .logo__rule{color:var(--on-brand);}
.footer__logo .logo__rule img{top:-0.72px;}
.contact{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:10px;
  padding:10px;
  overflow:clip;
}
.socials{display:flex;align-items:center;gap:16px;}
.social{position:relative;display:block;width:28px;height:28px;opacity:.85;transition:opacity .18s ease;}
.social:hover,.social:focus-visible{opacity:1;}
.social img{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;}
.contact__email{
  margin:0;
  font-size:clamp(18px,1.146vw,22px);
  line-height:normal;
  color:var(--on-brand);
  white-space:nowrap;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease;
}
.contact__email:hover,.contact__email:focus-visible{border-bottom-color:var(--on-brand);}

/* ---------- Project pages (projetos/*.html) ----------
   Shared across every projetos/*.html detail page — previously duplicated
   nearly verbatim in each page's own <style> block. .badge/.badge p stay
   page-specific (see the note near the top of this file), as does anything
   a given project needs beyond this baseline — e.g. interactive-graph.html
   wraps .project-media in its own .project-media-wrap for the fullscreen
   button, so it overrides .project-media's sizing locally. */
.back-row{width:100%;padding:0 40px;}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px;
  font-size:16px;
  color:var(--content);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease;
}
.back-link:hover,.back-link:focus-visible{border-bottom-color:var(--content);}

.project-hero{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  width:100%;
  padding-block:20px 40px;
  padding-inline:40px;
  overflow:clip;
}
.project-hero__content{
  display:flex;
  flex:1 0 0;
  min-width:1px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:10px;
}
.project-title{
  margin:0;
  font-size:clamp(32px,3vw,56px);
  font-weight:400;
  line-height:normal;
  align-items:center;
  text-align:center;
  color:var(--content);
  text-wrap:balance;
}
.tools{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;}
.tools__label{margin:0;font-size:18px;color:var(--content);}
.tools__list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px;}
.tool{display:flex;align-items:center;gap:8px;}
.tool__icon{flex-shrink:0;height:30px;color:var(--content);}
.tool__icon img{display:block;height:30px;width:auto;max-width:none;}
.tool__icon svg{display:block;height:30px;width:auto;max-width:none;} 

.project-about{display:flex;flex-direction:column;gap:6px;width:100%;}
.project-about__label{margin:0;font-size:16px;font-weight:700;color:var(--content);}
.project-about__desc{margin:0;font-size:16px;font-weight: 300;line-height:1.5;color:var(--content);display:flex;flex-direction:column;gap:12px;}
.project-about__desc p{margin:0;}
.download-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  margin-top:8px;
  padding:10px 20px;
  border:0;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  color:var(--paper);
  background:var(--green-deep);
  border-radius:100px;
  text-decoration:none;
  cursor:pointer;
  transition:opacity .18s ease;
}
.download-link:hover,.download-link:focus-visible{opacity:.85;}
.download-link[hidden]{display:none;}

.project-media{
  flex:1 0 0;
  min-width:1px;
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:24px;
  overflow:hidden;
}
.project-media img{width:100%;height:100%;max-width:none;object-fit:cover;display:block;}
.project-media iframe{width:100%;height:100%;border:0;display:block;background:#fff;}

/* ---------- Project media with a fullscreen button ----------
   Used by every projetos/*.html detail page that embeds an interactive
   demo and offers a "view full screen" control (currently all of them).
   .project-media-wrap takes over the flex-sizing role .project-media plays
   above, so the fullscreen button can sit absolutely positioned on top of
   the embed; nested inside the wrap, .project-media just fills it at
   100%/100% instead of sizing itself, via the higher-specificity override
   below. */
.project-media-wrap{
  position:relative;
  flex:1 0 0;
  min-width:1px;
  aspect-ratio:4/3;
  border-radius:24px;
  overflow:hidden;
}
.project-media-wrap .project-media{
  flex:none;
  aspect-ratio:auto;
  width:100%;
  height:100%;
}
.fullscreen-btn{
  position:absolute;
  left:12px;
  top:12px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border:0;
  border-radius:100px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background .18s ease;
}
.fullscreen-btn svg{flex-shrink:0;}
.fullscreen-btn:hover,.fullscreen-btn:focus-visible{background:rgba(0,0,0,.75);}
.fullscreen-btn[hidden]{display:none;}
/* Fallback for browsers with no Fullscreen API for arbitrary elements —
   notably iOS Safari, which only supports it for <video>. Expands the wrap
   to cover the viewport with plain CSS instead (see each page's click
   handler), so the "view full screen" action still works everywhere, just
   without taking over the OS-level chrome. */
.project-media-wrap.is-fullscreen{
  position:fixed;
  inset:0;
  z-index:1000;
  aspect-ratio:auto;
  border-radius:0;
  background:#000;
}

/* ---------- Pending-asset slots ----------
   Every <img> points at its real file under assets/. Until that file is
   added the image fails to load and this dashed marker shows in its place,
   at the asset's exact geometry — so the page never shows a broken-image
   icon, and no code changes when the real assets arrive. --slot-bg /
   --slot-outline flip with the theme so the marker stays visible against
   either background; the .slot--light variant is for markers that sit on
   the fixed-dark footer and stays as-is in both themes. */
.slot{background:var(--slot-bg);outline:1px dashed var(--slot-outline);outline-offset:-1px;}
.slot--light{background:rgba(246,244,221,.12);outline-color:rgba(246,244,221,.45);}
.slot--rule{height:1px;background:currentColor;opacity:.9;outline:0;}
img.is-missing{opacity:0;}

/* ---------- Tablet and below: the menu collapses to a drawer ---------- */
@media (max-width:900px){
  .menu{
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:0;
    padding-inline:20px;
  }
  .hamburger{display:flex;}

  .menu__collapse{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    width:100%;
    max-height:0;
    visibility:hidden;
    overflow:hidden;
    transition:max-height .28s ease,visibility 0s linear .28s;
  }
  .menu[data-open="true"] .menu__collapse{
    max-height:520px;
    visibility:visible;
    transition:max-height .28s ease,visibility 0s;
  }

  .nav{
    flex-direction:column;
    gap:4px;
    width:100%;
    margin-left:0;
    padding:14px 10px 4px;
  }
  .nav__link{padding:6px 10px;}

  .toggles{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    padding:4px 10px;
  }
  .lang,.theme{padding:10px;}

  .footer{min-height:0;padding-block:40px;}
  .footer__inner{flex-direction:column;gap:20px;}
  .contact{align-items:center;}

  /* ---------- Project page reorder on mobile ---------- */
  .back-row{padding-inline:20px;}
  .project-hero{flex-direction:column;align-items:center;padding-inline:20px;gap:24px;}
  .project-hero__content{display:contents;}
  .project-hero__content .badge{order:1;}
  .project-title{order:2;}
  .tools{order:3;}
  .project-media{order:4;flex:none;width:100%;aspect-ratio:16/10;}
  .project-media-wrap{order:4;flex:none;width:100%;aspect-ratio:16/10;}
  .project-about{order:5;}
  
}

/* ---------- Phone ---------- */
@media (max-width:520px){
  .menu{padding-inline:16px;}
  .footer__logo{padding-inline:0;}
  .contact__email{white-space:normal;word-break:break-word;text-align:center;}

  .back-row{padding-inline:16px;}
  .project-hero{padding-inline:16px;}
  .project-title{white-space:normal;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms !important;}
}