/* ================================================
   BYCAROARTE — Sistema Visual
   Demo
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ================================================
   SCROLL REVEAL
   ================================================ */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  0.75s ease,
    transform 0.75s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--d1 { transition-delay: 0.1s; }
.reveal--d2 { transition-delay: 0.2s; }
.reveal--d3 { transition-delay: 0.3s; }

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

/* ---- Variables ---- */
:root {
  --c-bg:          #EAE0D2;
  --c-bg-deep:     #DDD2C1;
  --c-bg-dark:     #1C1A17;
  --c-text:        #1C1A17;
  --c-mid:         #8A857E;
  --c-faint:       #D0C9BF;
  --c-placeholder: #E5E1DA;
  --c-accent:      #A84B28;

  --font:         'DM Sans', system-ui, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;

  --nav-h:  56px;
  --px:     clamp(24px, 5.5vw, 88px);
  --max-w:  1360px;

  --sp-s:   clamp(12px, 1.5vw, 18px);
  --sp-m:   clamp(20px, 2.5vw, 28px);
  --sp-l:   clamp(32px, 4vw, 48px);
  --sp-xl:  clamp(48px, 6vw, 72px);
  --sp-2xl: clamp(64px, 8vw, 96px);
}

/* ---- Base ---- */
html {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--c-bg);
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

/* ================================================
   NAVIGATION
   ================================================ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--px);
  background: var(--c-bg);
  transition: background-color 0.5s ease;
}

/* En páginas con hero, empieza transparente */
body.has-hero .nav:not(.scrolled) {
  background: transparent;
}

.nav-group {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  flex: 1;
}

.nav-group--right { justify-content: flex-end; }

.nav-brand {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text);
  flex: 0 0 auto;
  transition: color 0.4s ease;
}

body.has-hero .nav:not(.scrolled) .nav-brand { color: #fff; }

.nav-link {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-mid);
  transition: color 0.25s ease;
}

body.has-hero .nav:not(.scrolled) .nav-link { color: rgba(255,255,255,0.72); }

.nav-link:hover,
.nav-link.active { color: var(--c-text); }

body.has-hero .nav:not(.scrolled) .nav-link:hover,
body.has-hero .nav:not(.scrolled) .nav-link.active { color: #fff; }

/* Toggle mobile */
.nav-toggle {
  display: none;
  position: absolute;
  right: var(--px);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-mid);
  transition: color 0.3s ease;
  padding: 0;
}

body.has-hero .nav:not(.scrolled) .nav-toggle { color: rgba(255,255,255,0.72); }

/* Overlay mobile */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--c-bg);
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.nav-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.nav-overlay-close {
  position: absolute;
  top: 18px;
  right: var(--px);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-mid);
}

.nav-overlay-link {
  font-size: clamp(28px, 5.5vw, 40px);
  font-weight: 300;
  color: var(--c-text);
  letter-spacing: 0.01em;
}

@media (max-width: 768px) {
  .nav-group--left,
  .nav-group--right { display: none; }
  .nav-toggle { display: block; }
  .nav { justify-content: center; }
}

/* ================================================
   LAYOUT
   ================================================ */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
}

/* ================================================
   HERO
   ================================================ */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

@media (max-width: 768px) {
  .hero {
    height: calc(100vh - 28px);
    height: calc(100svh - 28px);
  }
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, transparent 22%),
    linear-gradient(to top,    rgba(0,0,0,0.18) 0%, transparent 28%),
    linear-gradient(to top,    #EAE0D2 0%, rgba(234,224,210,0) 22%);
  pointer-events: none;
}

.hero-bottom {
  position: absolute;
  bottom: 28px;
  left: var(--px);
  right: var(--px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.hero-piece-name {
  font-size: 11px;
  font-weight: 300;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.05em;
}

.hero-phrase {
  font-size: 12px;
  font-weight: 300;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
  font-style: italic;
}

/* ================================================
   TIPOGRAFÍA
   ================================================ */

.t-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-mid);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--c-accent);
  transition: opacity 0.2s ease;
}

.link-arrow:hover { opacity: 0.6; }

.divider {
  width: 100%;
  height: 1px;
  background: var(--c-faint);
}

/* ================================================
   HOME — Declaración
   ================================================ */

.section-declaration {
  padding: var(--sp-xl) 0 var(--sp-l);
}

.declaration-text {
  max-width: 72%;
}

.declaration-text p {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 68px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-text);
}

@media (max-width: 768px) {
  .declaration-text { max-width: 100%; }
}

/* ================================================
   HOME — Obras
   ================================================ */

.section-works { padding-bottom: var(--sp-xl); }

.works-grid {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 4vw, 52px);
}

.work-link {
  display: block;
}

.work-primary { flex: 0 0 62%; }

.work-secondary {
  flex: 1;
  padding-top: clamp(72px, 17vw, 168px);
}

.work-img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s ease;
}

.work-link:hover .work-img { opacity: 0.88; }

.work-caption {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.work-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--c-text);
}

.work-status {
  font-size: 11px;
  font-weight: 300;
  color: var(--c-mid);
}

.works-footer {
  margin-top: var(--sp-l);
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .works-grid {
    flex-direction: column;
    gap: var(--sp-l);
  }
  .work-primary,
  .work-secondary {
    flex: none;
    width: 100%;
    padding-top: 0;
  }
}

/* ================================================
   HOME — Ale
   ================================================ */

.section-ale-home {
  padding: var(--sp-xl) 0;
  background: linear-gradient(to bottom, var(--c-bg) 0%, var(--c-bg-deep) 120px);
  border-top: none;
}

.ale-home-inner {
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.ale-home-img {
  width: 100%;
  height: auto;
  display: block;
}

.ale-home-text { max-width: 400px; }

.ale-home-name {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0;
  margin-bottom: var(--sp-m);
}

.ale-home-bio {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.78;
  color: var(--c-mid);
  margin-bottom: var(--sp-m);
}

@media (max-width: 768px) {
  .ale-home-inner {
    grid-template-columns: 1fr;
  }
}

/* ================================================
   HOME — Intervenciones
   ================================================ */

.section-int-home {
  padding: var(--sp-xl) 0 var(--sp-2xl);
  background: var(--c-bg-deep);
  border-top: none;
}

.section-int-home .int-home-eyebrow {
  color: var(--c-mid);
}

.section-int-home .int-home-headline {
  color: var(--c-text);
}

.section-int-home .int-home-subtext {
  color: var(--c-mid);
}

.section-int-home .link-arrow {
  color: var(--c-accent);
}

.int-home-inner { max-width: 540px; }

.int-home-eyebrow {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-mid);
  margin-bottom: var(--sp-m);
}

.int-home-headline {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 56px);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: var(--sp-m);
}

.int-home-subtext {
  font-size: 14px;
  font-weight: 300;
  color: var(--c-mid);
  margin-bottom: var(--sp-l);
}

/* ================================================
   PAGE HEADER (Obra, Intervenciones, Ale)
   ================================================ */

.page-header {
  padding: calc(var(--nav-h) + var(--sp-l)) 0 var(--sp-l);
}

.page-title {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.page-subtitle {
  font-size: 14px;
  font-weight: 300;
  color: var(--c-mid);
}

/* ================================================
   GALERÍA — OBRA
   ================================================ */

.gallery-grid {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 4vw, 52px);
  padding-bottom: var(--sp-2xl);
}

.gallery-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gallery-item-1 { flex: 0 0 63%; }

.gallery-item-2 {
  flex: 1;
  padding-top: clamp(88px, 18vw, 180px);
}

.gallery-img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-img { opacity: 0.88; }

.gallery-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (max-width: 768px) {
  .gallery-grid {
    flex-direction: column;
    gap: var(--sp-xl);
  }
  .gallery-item-1,
  .gallery-item-2 {
    flex: none;
    width: 100%;
    padding-top: 0;
  }
}

/* ================================================
   PIEZA INDIVIDUAL — Nav
   ================================================ */

.piece-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 900;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--px);
}

.piece-nav-back {
  position: absolute;
  left: var(--px);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-mid);
  transition: color 0.2s ease;
}

.piece-nav-back:hover { color: var(--c-text); }

.piece-nav-brand {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text);
}

/* ================================================
   PIEZA INDIVIDUAL — Layout
   ================================================ */

.piece-page {
  padding-top: calc(var(--nav-h) + var(--sp-l));
  padding-bottom: var(--sp-2xl);
}

.piece-layout {
  display: grid;
  grid-template-columns: 57fr 43fr;
  gap: clamp(40px, 5.5vw, 88px);
  align-items: start;
}

.piece-images {
  display: flex;
  flex-direction: column;
  gap: var(--sp-s);
}

.piece-img-main {
  width: 100%;
  height: auto;
  display: block;
}

.piece-img-secondary {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.82;
}

.piece-info {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-m));
  display: flex;
  flex-direction: column;
}

.piece-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}

.piece-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
}

.piece-author {
  font-size: 11px;
  font-weight: 300;
  color: var(--c-mid);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.piece-type {
  font-size: 12px;
  font-weight: 300;
  color: var(--c-mid);
  margin-bottom: var(--sp-m);
}

.piece-divider {
  height: 1px;
  background: var(--c-faint);
  margin: var(--sp-m) 0;
}

.piece-text {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.82;
  color: var(--c-text);
}

.piece-unique {
  font-size: 11px;
  font-weight: 400;
  color: var(--c-mid);
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.piece-action {
  font-size: 14px;
  font-weight: 400;
  color: var(--c-accent);
  letter-spacing: 0.02em;
  display: inline-block;
  margin-bottom: 8px;
  transition: opacity 0.2s ease;
}

.piece-action:hover { opacity: 0.6; }

.piece-context {
  font-size: 11px;
  font-weight: 300;
  color: var(--c-mid);
}

/* Piezas relacionadas */
.piece-related {
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-l);
  border-top: 1px solid var(--c-faint);
}

.piece-related-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-mid);
  margin-bottom: var(--sp-l);
}

.piece-related-grid {
  display: flex;
  gap: var(--sp-l);
}

.piece-related-item {
  flex: 0 0 clamp(160px, 18vw, 240px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.piece-related-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 12%;
  display: block;
  transition: opacity 0.3s ease;
}

.piece-related-item:hover .piece-related-img { opacity: 0.85; }

@media (max-width: 768px) {
  .piece-layout {
    grid-template-columns: 1fr;
  }
  .piece-info {
    position: static;
  }
}

/* ================================================
   INTERVENCIONES
   ================================================ */

.int-hero {
  width: 100%;
  height: 62vh;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  margin-top: var(--nav-h);
}

.int-opening {
  padding: var(--sp-l) 0 var(--sp-xl);
}

.int-opening-text {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.3;
  max-width: 680px;
}

.int-body { padding-bottom: var(--sp-xl); }

.int-concept-text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--c-mid);
  max-width: 500px;
  margin-bottom: var(--sp-xl);
}

/* Steps */
.int-steps {
  display: flex;
  flex-direction: column;
  max-width: 600px;
}

.int-step {
  display: flex;
  gap: var(--sp-l);
  align-items: baseline;
  padding: var(--sp-m) 0;
  border-top: 1px solid var(--c-faint);
}

.int-step:last-child { border-bottom: 1px solid var(--c-faint); }

.int-step-num {
  font-size: 11px;
  font-weight: 400;
  color: var(--c-faint);
  letter-spacing: 0.08em;
  flex: 0 0 24px;
}

.int-step-title {
  font-size: 15px;
  font-weight: 400;
  color: var(--c-text);
  margin-bottom: 4px;
}

.int-step-text {
  font-size: 13px;
  font-weight: 300;
  color: var(--c-mid);
  line-height: 1.65;
}

/* Examples */
.int-examples { padding: var(--sp-xl) 0; }

.int-examples-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-mid);
  margin-bottom: var(--sp-l);
}

.int-examples-grid {
  display: flex;
  gap: clamp(16px, 3vw, 40px);
}

.int-example-item { flex: 1; }

.int-example-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 10%;
  display: block;
}

@media (max-width: 600px) {
  .int-examples-grid { flex-direction: column; }
}

/* CTA */
.int-cta { padding: var(--sp-xl) 0 var(--sp-2xl); }

.int-cta-label {
  font-size: 14px;
  font-weight: 300;
  color: var(--c-mid);
  margin-bottom: var(--sp-m);
}

.int-cta-action {
  font-size: 16px;
  font-weight: 400;
  color: var(--c-accent);
  display: inline-block;
  margin-bottom: 8px;
  transition: opacity 0.2s ease;
}

.int-cta-action:hover { opacity: 0.6; }

.int-cta-context {
  font-size: 12px;
  font-weight: 300;
  color: var(--c-mid);
}

/* ================================================
   ALE
   ================================================ */

.ale-page {
  padding-top: calc(var(--nav-h) + var(--sp-xl));
  padding-bottom: var(--sp-2xl);
}

.ale-opening {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: var(--sp-xl);
}

.ale-main {
  display: grid;
  grid-template-columns: 38fr 62fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
  margin-bottom: var(--sp-2xl);
}

.img-placeholder {
  background: var(--c-placeholder);
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
}

.img-placeholder--square { aspect-ratio: 1 / 1; }

.img-placeholder-label {
  font-size: 10px;
  font-weight: 300;
  color: var(--c-mid);
  letter-spacing: 0.04em;
}

.ale-story p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--c-text);
}

.ale-story p + p { margin-top: var(--sp-m); }

.ale-process { padding-top: var(--sp-xl); border-top: 1px solid var(--c-faint); }

.ale-process-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-mid);
  margin-bottom: var(--sp-l);
}

.ale-process-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.5vw, 20px);
}

.process-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .ale-main { grid-template-columns: 1fr; }
  .ale-process-strip { grid-template-columns: 1fr 1fr; }
}

/* ================================================
   CONTACTO
   ================================================ */

.contact-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + var(--sp-xl)) var(--px) var(--sp-2xl);
}

.contact-inner {
  width: 100%;
  max-width: 440px;
}

.contact-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0;
  margin-bottom: var(--sp-xl);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-m);
  margin-bottom: var(--sp-xl);
}

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-mid);
  margin-bottom: 8px;
}

.form-input,
.form-textarea {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 300;
  color: var(--c-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-faint);
  padding: 10px 0;
  width: 100%;
  outline: none;
  transition: border-color 0.25s ease;
  resize: none;
}

.form-input:focus,
.form-textarea:focus { border-bottom-color: var(--c-text); }

.form-textarea { min-height: 96px; }

.form-submit {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-m) 0 0;
  text-align: left;
  transition: opacity 0.2s ease;
}

.form-submit:hover { opacity: 0.45; }

.contact-or {
  font-size: 11px;
  font-weight: 300;
  color: var(--c-faint);
  margin-bottom: var(--sp-m);
}

.contact-channels {
  display: flex;
  gap: var(--sp-l);
}

.contact-channel {
  font-size: 13px;
  font-weight: 400;
  color: var(--c-text);
  letter-spacing: 0.03em;
  transition: opacity 0.2s ease;
}

.contact-channel:hover { opacity: 0.5; }

/* ================================================
   FOOTER
   ================================================ */

.footer {
  background: #1C1A17;
  padding: var(--sp-xl) var(--px) var(--sp-l);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-m);
}

.footer-brand {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}

.footer-links { display: flex; gap: var(--sp-l); }

.footer-link {
  font-size: 12px;
  font-weight: 300;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
}

.footer-link:hover { color: rgba(255,255,255,0.85); }

.footer-bottom {
  display: flex;
  gap: var(--sp-l);
  align-items: center;
  padding-top: var(--sp-m);
  border-top: 1px solid rgba(255,255,255,0.1);
  width: 100%;
  max-width: var(--max-w);
  justify-content: center;
  flex-wrap: wrap;
}

.footer-copy,
.footer-credit {
  font-size: 10px;
  font-weight: 300;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-credit a {
  color: rgba(255,255,255,0.25);
  transition: color 0.2s ease;
}

.footer-credit a:hover { color: rgba(255,255,255,0.55); }