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

html{scroll-behavior:smooth}

:root{
  --bg:#0c0b09;
  --fg:#e8e4dc;
  --soft:rgba(232,228,220,.78);
  --dim:rgba(232,228,220,.62);
  --muted:rgba(232,228,220,.36);
  --line:rgba(232,228,220,.12);
  --accent:#c8b89a;
  --serif:'Cormorant',serif;
  --sans:'Inter',system-ui,sans-serif
}

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

body{
  max-width:100vw;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans)
}

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

/* ─── Navigation ─────────────────────────────────── */
.site-nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  padding:1rem 1.6rem;
  background:linear-gradient(to bottom,rgba(12,11,9,.92),rgba(12,11,9,0));
  transition:opacity .28s,transform .28s
}

.site-nav.is-hidden{
  opacity:0;
  transform:translateY(-12px);
  pointer-events:none
}

.nav-logo{
  width:clamp(180px,18vw,260px);
  flex:0 0 auto;
  position:relative;
  z-index:2
}

.nav-logo img{width:100%;height:auto}

/* Desktop nav links */
.nav-links{
  display:flex;
  gap:clamp(1rem,2.2vw,2rem);
  list-style:none
}

.nav-links a{
  color:var(--dim);
  text-decoration:none;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:color .18s
}

.nav-links a:hover,
.nav-links a[aria-current="page"]{color:var(--fg)}

/* Hamburger button — hidden by default, shown on mobile */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0 6px;
  position:relative;
  z-index:2;
  flex-shrink:0
}

.nav-toggle span{
  display:block;
  width:100%;
  height:1px;
  background:var(--dim);
  transition:transform .28s,opacity .18s,background .18s
}

.nav-toggle:hover span{background:var(--fg)}

/* Hamburger → X animation */
.site-nav.menu-open .nav-toggle span:nth-child(1){
  transform:translateY(6px) rotate(45deg)
}
.site-nav.menu-open .nav-toggle span:nth-child(2){
  opacity:0
}
.site-nav.menu-open .nav-toggle span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg)
}

/* ─── Mosaic grid ─────────────────────────────────── */
.mosaic{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:78px;
  gap:4px;
  min-height:100vh
}

.cell{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  color:inherit;
  text-decoration:none;
  background:#15120f;
  isolation:isolate
}

.cell::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(to top,rgba(12,11,9,.72),rgba(12,11,9,.08) 58%,rgba(12,11,9,.18)),
    linear-gradient(to bottom,rgba(12,11,9,.3),transparent 35%)
}

.cell-img{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.76) saturate(.92);
  transition:.8s
}

.cell:hover .cell-img{
  transform:scale(1.025);
  filter:brightness(.62) saturate(.9)
}

.cell-content{
  position:relative;
  z-index:2;
  width:100%;
  padding:clamp(1rem,2vw,1.6rem)
}

.cell-kicker{
  margin-bottom:.45rem;
  color:var(--accent);
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase
}

.cell-title{
  font-family:var(--serif);
  font-size:clamp(2rem,5.2vw,5.8rem);
  font-weight:500;
  line-height:.86;
  letter-spacing:-.045em
}

.cell-small .cell-title{font-size:clamp(1.8rem,3.6vw,3.4rem)}

.cell-meta{
  max-width:34rem;
  margin-top:.9rem;
  color:var(--soft);
  font-size:.78rem;
  line-height:1.55;
  opacity:0;
  transform:translateY(6px);
  transition:.28s
}

.cell:hover .cell-meta{opacity:1;transform:none}

.cell-tags{
  position:absolute;
  z-index:3;
  top:1rem;
  right:1rem;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.3rem;
  color:var(--dim);
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase
}

.cell-tags em{
  color:var(--accent);
  font-family:var(--serif);
  font-size:.82rem;
  font-style:italic;
  font-weight:400;
  text-transform:none;
  letter-spacing:.02em
}

/* Grid placements */
.cell-bonga{grid-column:1/8;grid-row:1/9}
.cell-carro{grid-column:8/13;grid-row:1/6}
.cell-kikuyo{grid-column:8/11;grid-row:6/12}
.cell-padre{grid-column:11/13;grid-row:6/12}
.cell-gigante{grid-column:1/8;grid-row:9/17}
.cell-almas{grid-column:8/13;grid-row:12/17}

/* ─── Band strip ──────────────────────────────────── */
.band{
  display:grid;
  grid-template-columns:1.1fr 2fr;
  gap:clamp(2rem,6vw,7rem);
  padding:clamp(4rem,9vw,8rem) clamp(1.4rem,4vw,4rem);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.band h2,.section-title{
  font-family:var(--serif);
  font-size:clamp(2.4rem,6vw,6rem);
  font-weight:500;
  line-height:.86;
  letter-spacing:-.055em
}

.band ul{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.2rem 3rem;
  list-style:none;
  align-self:end
}

.band li{
  padding-top:.85rem;
  border-top:1px solid var(--line);
  color:var(--dim);
  font-size:.78rem;
  line-height:1.55
}

.band em{
  color:var(--accent);
  font-family:var(--serif);
  font-size:1rem
}

/* ─── About section ───────────────────────────────── */
.about{padding:clamp(4rem,8vw,7rem) clamp(1.4rem,4vw,4rem) 2rem}

.about-inner{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(260px,.8fr);
  gap:clamp(3rem,7vw,8rem);
  max-width:1400px;
  margin:0 auto
}

.about-copy{
  max-width:760px;
  color:var(--soft);
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.6vw,2.35rem);
  line-height:1.22;
  letter-spacing:-.025em
}

.detail-group+.detail-group{margin-top:1.6rem}

.detail-label,.fact-label{
  margin-bottom:.45rem;
  color:var(--accent);
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase
}

.detail-value,.fact-value{
  color:var(--dim);
  font-size:.86rem;
  line-height:1.65
}

.detail-value a{
  color:var(--dim);
  text-decoration:none;
  transition:color .18s
}

.detail-value a:hover{color:var(--fg)}

/* ─── Footer ─────────────────────────────────────── */
.footer-bar{
  max-width:1400px;
  margin:5rem auto 0;
  padding-top:1.3rem;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  color:var(--muted);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase
}

/* ─── Project hero ───────────────────────────────── */
.project-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  isolation:isolate;
  background:#15120f
}

.project-hero::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(to top,rgba(12,11,9,.88),rgba(12,11,9,.2) 55%,rgba(12,11,9,.45)),
    linear-gradient(to right,rgba(12,11,9,.46),transparent 55%)
}

.project-hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  object-fit:cover;
  filter:brightness(.72) saturate(.88)
}

.project-hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding:8rem clamp(1.4rem,4vw,4rem) clamp(2rem,5vw,5rem)
}

.project-kicker{
  color:var(--accent);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:.7rem
}

.project-title{
  max-width:950px;
  font-family:var(--serif);
  font-size:clamp(4rem,12vw,12rem);
  font-weight:500;
  line-height:.78;
  letter-spacing:-.065em
}

.project-logline{
  max-width:720px;
  margin-top:1.6rem;
  color:var(--soft);
  font-family:var(--serif);
  font-size:clamp(1.35rem,2.2vw,2.1rem);
  line-height:1.2;
  letter-spacing:-.025em
}

/* ─── Project body ───────────────────────────────── */
.project-body{
  display:grid;
  grid-template-columns:minmax(260px,.75fr) minmax(0,1.5fr);
  gap:clamp(3rem,7vw,8rem);
  padding:clamp(4rem,8vw,8rem) clamp(1.4rem,4vw,4rem);
  max-width:1500px;
  margin:0 auto
}

.project-facts{display:grid;gap:1.4rem;align-content:start}

.fact,.credit-item{
  padding-top:.9rem;
  border-top:1px solid var(--line)
}

.project-text{max-width:820px}

.project-text p{
  color:var(--soft);
  font-family:var(--serif);
  font-size:clamp(1.35rem,2vw,2rem);
  line-height:1.28;
  letter-spacing:-.025em
}

.project-text p+p{margin-top:1.4rem}

/* ─── Buttons ─────────────────────────────────────── */
.button{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:2rem;
  padding:.85rem 1rem;
  border:1px solid var(--line);
  color:var(--fg);
  text-decoration:none;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:border-color .18s,color .18s
}

.button:hover{
  border-color:var(--accent);
  color:var(--accent)
}

.button+.button{margin-left:.75rem}

/* ─── Trailer / credits sections ─────────────────── */
.credits-section,.trailer-section{
  padding:clamp(4rem,8vw,8rem) clamp(1.4rem,4vw,4rem);
  border-top:1px solid var(--line)
}

.credit-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem 3rem;
  margin-top:3rem;
  max-width:1100px
}

/* Video embed – 16:9 */
.trailer-wrap{
  position:relative;
  margin-top:3rem;
  max-width:1100px;
  aspect-ratio:16/9;
  background:#15120f
}

.trailer-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0
}

/* Audio embed – Spotify / podcast */
.trailer-wrap--audio{
  aspect-ratio:unset;
  height:232px
}

.trailer-wrap--audio iframe{
  position:static;
  width:100%;
  height:100%;
  border-radius:4px
}

.trailer-note{
  max-width:680px;
  margin-top:1rem;
  color:var(--dim);
  font-size:.82rem;
  line-height:1.6
}

/* ─── Lazy iframe overlay ────────────────────────── */
.iframe-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#15120f;
  cursor:pointer
}

/* Dark tint over thumbnail */
.iframe-overlay::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(12,11,9,.38);
  transition:background .25s
}

.iframe-overlay:hover::after{
  background:rgba(12,11,9,.22)
}

.iframe-play{
  position:relative;
  z-index:1;
  width:72px;
  height:72px;
  border:1px solid rgba(200,184,154,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  transition:border-color .22s,transform .22s,background .22s
}

.iframe-play svg{
  width:28px;
  height:28px;
  margin-left:4px /* optical nudge for play triangle */
}

.iframe-overlay:hover .iframe-play{
  border-color:var(--accent);
  background:rgba(200,184,154,.08);
  transform:scale(1.06)
}

/* ─── Scroll reveal ──────────────────────────────── */
.js-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .65s ease, transform .65s ease
}

.js-reveal.is-visible{
  opacity:1;
  transform:none
}

/* Slight stagger for section title vs its siblings */
.section-title.js-reveal{ transition-delay:.05s }
.next-project.js-reveal{ transition-delay:.08s }

/* ─── Next project strip ─────────────────────────── */
.next-project{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:4px;
  min-height:42vw;
  color:var(--fg);
  text-decoration:none;
  border-top:4px solid var(--bg)
}

.next-project:hover .next-image img{
  filter:brightness(.62) saturate(.88)
}

.next-copy{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(1.4rem,4vw,4rem);
  background:rgba(200,184,154,.06)
}

.next-label{
  margin-bottom:.8rem;
  color:var(--accent);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase
}

.next-title{
  font-family:var(--serif);
  font-size:clamp(3rem,8vw,8rem);
  font-weight:500;
  line-height:.84;
  letter-spacing:-.055em
}

.next-image{
  overflow:hidden;
  background:#15120f
}

.next-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.72) saturate(.88);
  transition:filter .5s
}

/* ─── Tablet (≤920px) ─────────────────────────────── */
@media(max-width:920px){
  .mosaic{
    grid-template-columns:repeat(6,1fr);
    grid-auto-rows:70px
  }
  .cell-bonga{grid-column:1/7;grid-row:1/7}
  .cell-carro{grid-column:1/4;grid-row:7/13}
  .cell-gigante{grid-column:4/7;grid-row:7/13}
  .cell-kikuyo{grid-column:1/4;grid-row:13/18}
  .cell-almas{grid-column:4/7;grid-row:13/18}
  .cell-padre{grid-column:1/7;grid-row:18/22}

  .band,
  .about-inner,
  .project-body{grid-template-columns:1fr}

  .band ul,
  .credit-grid{grid-template-columns:1fr}

  /* next-project: keep side-by-side on tablet, reduce height */
  .next-project{min-height:52vw}
}

/* ─── Mobile (≤640px) ─────────────────────────────── */
@media(max-width:640px){

  /* ── Nav: show hamburger, hide links until open ── */
  .nav-toggle{display:flex}

  .site-nav{
    padding:.8rem 1rem;
    align-items:center;
    /* solid background when menu is open */
    transition:opacity .28s,transform .28s,background .28s
  }

  .site-nav.menu-open{
    background:var(--bg)
  }

  .nav-logo{width:140px}

  /* Full-screen overlay menu */
  .nav-links{
    position:fixed;
    inset:0;
    z-index:1;           /* below .site-nav (z-index:100) buttons */
    background:var(--bg);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2.4rem;
    list-style:none;
    /* hidden state */
    opacity:0;
    pointer-events:none;
    transition:opacity .3s
  }

  .site-nav.menu-open .nav-links{
    opacity:1;
    pointer-events:auto
  }

  .nav-links a{
    font-size:1.1rem;
    letter-spacing:.18em;
    color:var(--soft)
  }

  .nav-links a:hover,
  .nav-links a[aria-current="page"]{color:var(--fg)}

  /* ── Mosaic: stacked full-height cards ─────────── */
  .mosaic{display:block;min-height:0}

  .cell{
    min-height:85svh;   /* use svh to avoid mobile browser chrome issues */
    border-bottom:1px solid rgba(232,228,220,.08)
  }

  .cell-content{padding:1.4rem 1.2rem 1.4rem}

  .cell-title,.cell-small .cell-title{
    font-size:clamp(3rem,15vw,5rem)
  }

  /* Meta always visible on mobile */
  .cell-meta{
    opacity:1;
    transform:none;
    font-size:.84rem;
    max-width:100%
  }

  /* Tags: top-left, stay absolute so they don't push content */
  .cell-tags{
    top:1rem;
    right:auto;
    left:1.2rem;
    align-items:flex-start
  }

  /* ── Sections ───────────────────────────────────── */
  .band,
  .about,
  .project-body,
  .credits-section,
  .trailer-section{padding:3.5rem 1.2rem}

  .band h2,.section-title{
    font-size:clamp(2.2rem,11vw,3.6rem)
  }

  /* ── Project hero ───────────────────────────────── */
  .project-hero{min-height:90svh}

  .project-hero-content{
    padding:5.5rem 1.2rem 2.2rem
  }

  .project-title{
    font-size:clamp(3.4rem,16vw,6rem)
  }

  .project-logline,
  .project-text p,
  .about-copy{font-size:1.4rem;line-height:1.3}

  /* ── Buttons: stack vertically ──────────────────── */
  .project-text .button,
  .trailer-section .button{
    display:flex;
    width:fit-content
  }

  .button+.button{
    margin-left:0;
    margin-top:.75rem
  }

  /* ── Credit grid ────────────────────────────────── */
  .credit-grid{margin-top:2rem}

  /* ── Next project: single column, shorter ───────── */
  .next-project{
    grid-template-columns:1fr;
    min-height:0
  }

  .next-copy{
    padding:2rem 1.2rem
  }

  .next-image{
    height:56vw;
    min-height:220px
  }

  /* ── Footer ─────────────────────────────────────── */
  .footer-bar{
    flex-direction:column;
    gap:.6rem;
    margin-top:3rem
  }

  /* ── Audio embed ────────────────────────────────── */
  .trailer-wrap--audio{height:152px}
}

/* ─── Stills gallery ─────────────────────────────── */
.stills-section{
  padding:clamp(4rem,8vw,8rem) clamp(1.4rem,4vw,4rem);
  border-top:1px solid var(--line)
}

.stills-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  max-width:1500px
}

.stills-grid img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  filter:brightness(.82) saturate(.88);
  transition:filter .4s,transform .4s;
  display:block;
  cursor:zoom-in
}

.stills-grid img:hover{
  filter:brightness(1) saturate(1);
  transform:scale(1.015)
}

/* ─── Lightbox ──────────────────────────────────────── */
.lb-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(10,9,7,.96);
  display:flex;align-items:center;justify-content:center;
  cursor:zoom-out;
  opacity:0;pointer-events:none;
  transition:opacity .25s
}
.lb-overlay.is-open{opacity:1;pointer-events:auto}

.lb-img{
  max-height:92vh;max-width:92vw;
  object-fit:contain;
  cursor:default
}

.lb-close{
  position:fixed;top:1rem;right:1.4rem;
  background:none;border:none;
  color:var(--fg);font-size:2rem;line-height:1;
  cursor:pointer;opacity:.6;
  transition:opacity .18s;z-index:201
}
.lb-close:hover{opacity:1}

.lb-prev,.lb-next{
  position:fixed;top:50%;transform:translateY(-50%);
  background:none;border:none;
  color:var(--fg);font-size:2rem;line-height:1;
  cursor:pointer;opacity:.45;padding:.8rem;
  transition:opacity .18s;z-index:201
}
.lb-prev{left:.4rem}
.lb-next{right:.4rem}
.lb-prev:hover,.lb-next:hover{opacity:1}

@media(max-width:640px){
  .lb-prev,.lb-next{font-size:1.4rem;padding:.4rem}
}

/* ─── Festivals / awards section ─────────────────── */
.festivals-section{
  padding:clamp(4rem,8vw,8rem) clamp(1.4rem,4vw,4rem);
  border-top:1px solid var(--line)
}

.awards-list{
  margin-top:3rem;
  max-width:1100px;
  list-style:none
}

.awards-list li{
  padding:.8rem 0;
  border-top:1px solid var(--line);
  color:var(--dim);
  font-size:.86rem;
  line-height:1.6
}

.awards-list li em{
  color:var(--accent);
  font-family:var(--serif);
  font-style:italic
}

/* ─── Founder bios ────────────────────────────────── */
.bios-section{
  padding:clamp(4rem,8vw,8rem) clamp(1.4rem,4vw,4rem);
  border-top:1px solid var(--line)
}

.bio-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(3rem,7vw,8rem);
  margin-top:3rem;
  max-width:1400px
}

.bio-name{
  font-family:var(--serif);
  font-size:clamp(1.8rem,3.2vw,3rem);
  font-weight:500;
  line-height:.9;
  letter-spacing:-.04em;
  margin-bottom:1.2rem
}

.bio-text{
  color:var(--soft);
  font-size:.88rem;
  line-height:1.7
}

.bio-links{
  display:flex;
  gap:1.2rem;
  margin-top:1.2rem;
  list-style:none
}

.bio-links a{
  color:var(--accent);
  text-decoration:none;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:color .18s
}

.bio-links a:hover{color:var(--fg)}

/* ─── Quote / intro text ─────────────────────────── */
.project-quote{
  max-width:820px;
  margin-top:0;
  padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(1.5rem,3vw,2.5rem) 1.4rem;
  border-left:2px solid var(--accent);
  color:var(--soft);
  font-family:var(--serif);
  font-size:clamp(1.2rem,1.8vw,1.7rem);
  line-height:1.35;
  letter-spacing:-.02em;
  font-style:italic
}

/* ── Very small screens (≤380px) ─────────────────── */
@media(max-width:380px){
  .project-title{font-size:clamp(2.8rem,14vw,4rem)}
  .cell-title,.cell-small .cell-title{font-size:clamp(2.6rem,13vw,4rem)}
}

/* ─── Responsive overrides for new sections ──────── */
@media(max-width:920px){
  .stills-grid{grid-template-columns:repeat(2,1fr)}
  .bio-grid{grid-template-columns:1fr;gap:3rem}
}

@media(max-width:640px){
  .stills-section,
  .festivals-section,
  .bios-section{padding:3.5rem 1.2rem}

  .stills-grid{grid-template-columns:1fr;gap:3px}

  .stills-grid img{aspect-ratio:4/3}

  .bio-grid{margin-top:2rem}
}

/* ─── Language switcher ──────────────────────────── */
.nav-langs{
  display:flex;
  align-items:center;
  gap:.28rem;
  list-style:none
}
.nav-lang{
  font-size:.65rem;font-weight:600;letter-spacing:.1em;
  color:var(--muted);
  text-decoration:none;
  transition:color .18s
}
.nav-lang:hover,.nav-lang[aria-current="true"]{color:var(--fg)}
.nav-lang-sep{
  color:var(--muted);
  font-size:.58rem;
  user-select:none
}

/* ─── Director's note / production statement ─────── */
.production-note{
  padding:clamp(4rem,8vw,8rem) clamp(1.4rem,4vw,4rem);
  border-top:1px solid var(--line)
}
.production-note blockquote{
  max-width:820px;
  color:var(--soft);
  font-family:var(--serif);
  font-size:clamp(1.35rem,2vw,2rem);
  line-height:1.28;
  letter-spacing:-.025em
}
.production-note .note-attribution{
  margin-top:1.4rem;
  color:var(--accent);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase
}