/* ============================================================
   Isabella Bof — Portfolio
   Tokens
   ============================================================ */
:root{
  --paper: #EFEAE0;
  --paper-2: #E4DCC8;
  --ink: #221F1A;
  --ink-soft: #514C42;
  --white: #FFFDF8;
  --teal: #3F6358;
  --teal-dark: #2B463D;
  --mustard: #E7AE3C;
  --coral: #C6553F;
  --sage: #8A9A6B;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Work Sans", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1080px;
  --radius: 6px;
}

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

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(34,31,26,0.05) 1px, transparent 0);
  background-size: 22px 22px;
}

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

img{ max-width:100%; display:block; }

a{ color: inherit; }

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

section{ padding: 88px 0; }
@media (max-width:700px){ section{ padding:60px 0; } }

h1,h2,h3{
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 .4em 0;
  letter-spacing: -0.01em;
}

h2{ font-size: clamp(2rem, 3.4vw, 2.7rem); color: var(--teal-dark); }
h3{ font-size: 1.35rem; }

p{ margin: 0 0 1em 0; }

.lede{
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}

/* ============================================================
   Little paper-craft primitives: tape, sticker labels, torn edge
   ============================================================ */

.tape{
  position:absolute;
  background: rgba(231,174,60,0.55);
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
  height: 34px;
  width: 110px;
}
.tape::before, .tape::after{
  content:"";
  position:absolute; top:0; bottom:0; width:6px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 2px, transparent 2px 5px);
}
.tape::before{ left:0; }
.tape::after{ right:0; }

.sticker-label{
  display:inline-block;
  font-family: var(--serif);
  font-weight:600;
  font-size: 1rem;
  padding: 5px 16px 7px;
  border-radius: 3px;
  transform: rotate(-2deg);
  box-shadow: 2px 3px 0 rgba(34,31,26,0.12);
}
.sticker-label.mustard{ background: var(--mustard); color: var(--ink); }
.sticker-label.teal{ background: var(--teal); color: var(--white); transform: rotate(1.5deg); }
.sticker-label.coral{ background: var(--coral); color: var(--white); transform: rotate(-1deg); }
.sticker-label.sage{ background: var(--sage); color: var(--white); transform: rotate(2deg); }

.torn-panel{
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
  position:relative;
  padding: 46px 40px;
}
.torn-panel::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-9px; height:18px;
  background: var(--paper);
  clip-path: polygon(0% 0%, 3% 100%, 7% 10%, 12% 90%, 17% 5%, 22% 95%, 27% 15%, 32% 100%,
    37% 10%, 42% 90%, 47% 0%, 52% 100%, 57% 10%, 62% 90%, 67% 5%, 72% 95%,
    77% 10%, 82% 100%, 87% 5%, 92% 90%, 97% 15%, 100% 100%, 100% 0%);
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size: .88rem;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  margin: 0 8px 8px 0;
}

.pin{
  position:absolute;
  width:16px; height:16px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--coral) 60%);
  box-shadow: 0 2px 3px rgba(0,0,0,.35);
}

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(239,234,224,0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1.5px solid var(--ink);
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
}
.nav-mark{
  font-family: var(--serif); font-weight:700; font-size:1.25rem;
  text-decoration:none;
}
.nav-links{
  display:flex; align-items:center; gap: 26px;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none;
  font-size: .96rem;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.nav-links a:hover{ border-color: var(--coral); }

.lang-toggle{
  display:flex; border: 1.5px solid var(--ink); border-radius: 999px; overflow:hidden;
  font-family: var(--sans); font-weight:600; font-size:.82rem;
}
.lang-toggle button{
  border:0; background:transparent; padding: 7px 14px; cursor:pointer;
  color: var(--ink); font-family: inherit; font-weight:inherit; font-size:inherit;
}
.lang-toggle button.active{ background: var(--ink); color: var(--paper); }

@media (max-width:700px){
  .nav-links{ display:none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero .wrap{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items:center;
  padding-top: 64px;
}
@media (max-width:820px){
  .hero .wrap{ grid-template-columns: 1fr; }
  .hero-photo{ order:-1; margin: 0 auto; }
}

.hero-copy .sticker-label{ margin-bottom: 22px; }

.hero h1{
  font-size: clamp(2.6rem, 5.6vw, 4.2rem);
}
.hero h1 span{ color: var(--coral); }

.hero-role{
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

.stat-row{
  display:flex; flex-wrap:wrap; gap: 22px;
  margin: 30px 0 34px;
}
.stat{ min-width: 120px; }
.stat b{
  display:block; font-family: var(--serif); font-size: 1.7rem; color: var(--teal-dark);
}
.stat span{ font-size: .85rem; color: var(--ink-soft); }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

.btn{
  display:inline-block;
  font-family: var(--sans); font-weight:600; font-size:.95rem;
  padding: 13px 24px;
  border-radius: 999px;
  text-decoration:none;
  border: 1.5px solid var(--ink);
  transition: transform .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn.primary{ background: var(--ink); color: var(--paper); }
.btn.ghost{ background: transparent; color: var(--ink); }

.hero-photo{
  position:relative;
  width: 300px;
  justify-self:center;
}
.polaroid{
  background: var(--white);
  padding: 16px 16px 60px;
  box-shadow: 0 18px 30px rgba(34,31,26,0.22);
  transform: rotate(4deg);
  position:relative;
}
.polaroid img{
  width:100%; aspect-ratio: 1/1.05; object-fit:cover; object-position: center 18%;
  filter: sepia(6%) contrast(1.02);
}
.polaroid figcaption{
  position:absolute; bottom:16px; left:16px; right:16px;
  font-family: "Caveat", var(--serif);
  font-size: 1.3rem;
  text-align:center;
  color: var(--ink-soft);
}
.hero-photo .tape{ top:-14px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
.hero-photo .pin{ top: 34px; right: -6px; }

/* ============================================================
   About
   ============================================================ */
.about .wrap{
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items:start;
}
@media (max-width:820px){ .about .wrap{ grid-template-columns:1fr; } }

.about-panel-wrap{ position:relative; }
.about-panel-wrap .tape{ top:-14px; left: 30px; transform: rotate(-4deg); }

.qual-list{ list-style:none; margin:20px 0 0; padding:0; }
.qual-list li{
  padding: 16px 0;
  border-top: 1px solid rgba(34,31,26,0.15);
}
.qual-list li:first-child{ border-top:0; padding-top:6px; }
.qual-list h4{
  font-family: var(--serif); margin:0 0 4px; font-size: 1.05rem; color: var(--teal-dark);
}
.qual-list p{ margin:0; color: var(--ink-soft); font-size: .97rem; }

.award-strip{
  margin-top: 28px;
  display:flex; flex-wrap:wrap; gap:14px;
}
.award-card{
  flex:1 1 220px;
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  padding: 16px 18px;
  position:relative;
}
.award-card b{ display:block; font-family:var(--serif); color:var(--coral); font-size:1.05rem; }
.award-card span{ font-size:.88rem; color:var(--ink-soft); }

/* ============================================================
   Skills / tools
   ============================================================ */
.skills-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 26px; margin-top: 34px;
}
.skill-block h4{
  font-family: var(--serif); color: var(--teal-dark); margin: 0 0 12px;
  font-size: 1.05rem;
}
.chips{ display:flex; flex-wrap:wrap; }

/* ============================================================
   Experience timeline
   ============================================================ */
.timeline{ margin-top: 40px; position:relative; }
.timeline::before{
  content:""; position:absolute; left: 118px; top:6px; bottom:6px; width:2px;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 6px, transparent 6px 12px);
}
@media (max-width:640px){ .timeline::before{ left: 14px; } }

.tl-item{
  display:grid;
  grid-template-columns: 100px 36px 1fr;
  gap: 0 16px;
  margin-bottom: 40px;
  position:relative;
}
@media (max-width:640px){
  .tl-item{ grid-template-columns: 28px 1fr; }
  .tl-date{ display:none; }
  .tl-dot{ grid-column: 1; }
  .tl-card{ grid-column: 2; }
}
.tl-date{
  font-family: var(--serif); font-weight:600; color: var(--ink-soft); font-size:.92rem;
  padding-top: 4px; text-align:right;
}
.tl-dot{
  width: 16px; height:16px; border-radius:50%;
  background: var(--coral); border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px var(--ink);
  margin-top: 6px; justify-self:center;
}
.tl-card{
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  padding: 22px 26px;
}
.tl-card h3{ margin-bottom:2px; }
.tl-role{ font-size:.92rem; color: var(--ink-soft); margin-bottom: 12px; }
.tl-card ul{ margin: 10px 0 0; padding-left: 20px; }
.tl-card li{ margin-bottom: 6px; font-size:.96rem; }
.tl-card details{ margin-top: 10px; }
.tl-card summary{
  cursor:pointer; font-weight:600; color: var(--teal-dark); font-size:.92rem;
  list-style: none;
}
.tl-card summary::-webkit-details-marker{ display:none; }
.tl-card summary::before{ content:"+ "; color: var(--coral); }
.tl-card details[open] summary::before{ content:"– "; }
.tl-substack{
  font-size:.88rem; color: var(--ink-soft); margin-top:10px;
}

/* ============================================================
   Projects
   ============================================================ */
.projects-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 24px; margin-top: 38px;
}
.project-card{
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  padding: 24px 24px 22px;
  position:relative;
  display:flex; flex-direction:column;
}
.project-card .badge{
  position:absolute; top:-12px; right:16px;
  font-size:.78rem; font-weight:700;
  background: var(--mustard); color: var(--ink);
  padding: 4px 10px; border-radius: 999px;
  border: 1.5px solid var(--ink);
}
.project-card h3{ color: var(--teal-dark); }
.project-card .client{
  font-size:.85rem; text-transform: none; color: var(--coral); font-weight:600; margin-bottom:8px;
}
.project-card p{ color: var(--ink-soft); font-size:.96rem; flex:1; }

/* ============================================================
   Education / languages
   ============================================================ */
.edu-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 30px;
}
@media (max-width:700px){ .edu-grid{ grid-template-columns:1fr; } }
.edu-item{ margin-bottom: 20px; }
.edu-item b{ font-family: var(--serif); display:block; color: var(--teal-dark); }
.edu-item span{ font-size:.9rem; color: var(--ink-soft); }

.lang-row{ display:flex; align-items:center; gap: 14px; margin-bottom:14px; }
.lang-bar{ flex:1; height:8px; background: var(--paper-2); border-radius:4px; overflow:hidden; border:1px solid var(--ink); }
.lang-bar i{ display:block; height:100%; background: var(--teal); }

/* ============================================================
   Contact / footer
   ============================================================ */
.contact{
  background: var(--teal-dark);
  color: var(--white);
  position:relative;
  overflow:hidden;
}
.contact .wrap{ position:relative; z-index:2; text-align:center; }
.contact h2{ color: var(--white); }
.contact .lede{ color: rgba(255,253,248,0.8); margin: 0 auto 30px; }
.contact-links{
  display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin-top: 28px;
}
.contact-links a{
  text-decoration:none; font-weight:600;
  padding: 12px 22px; border-radius:999px; border:1.5px solid var(--white);
}
.contact-links a:hover{ background: var(--white); color: var(--teal-dark); }

footer.site-foot{
  text-align:center; padding: 22px 0; font-size:.82rem; color: rgba(255,253,248,0.65);
}

/* language visibility — revert lets each element keep its own display
   (block for p/h4/ul, inline for span/b, inline-flex for .chip, etc.) */
[data-lang]{ display:none !important; }
html[lang="pt"] [data-lang="pt"],
html[lang="en"] [data-lang="en"]{ display: revert !important; }
html[lang="pt"] .chip[data-lang="pt"],
html[lang="en"] .chip[data-lang="en"]{ display: inline-flex !important; }
html[lang="pt"] .edu-item b[data-lang="pt"],
html[lang="en"] .edu-item b[data-lang="en"]{ display: block !important; }