/* GITTANA — shared styles
   Brand palette, 2017 identity guide:
   #533F38 Pantone 7519 C · #788B91 Pantone 5425 C · #BEAE94 Pantone 7529 C
   Everything below is those three, plus tints and shades drawn from them. */

:root {
  --brown:       #533F38;
  --slate:       #788B91;
  --sand:        #BEAE94;

  --brown-deep:  #3A2A24;
  --slate-pale:  #C9D6D9;
  --sand-pale:   #E7DCC9;

  --ground:      #F3EBDE;
  --paper:       #FDFAF5;
  --ink:         #3A2A24;
  --muted:       #6B5950;
  --rule:        #DFD1BD;

  --card-1:      #E7DCC9;
  --card-2:      #CFDBDE;
  --card-3:      #FDFAF5;

  --on-dark:      #F7F0E6;
  --on-dark-soft: #C6B4A4;

  --pill-bg: #533F38;
  --pill-fg: #F7F0E6;

  --focus: #788B91;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:  #221A16;
    --paper:   #2E2420;
    --ink:     #F1E9E0;
    --muted:   #AE9C90;
    --rule:    #40332C;

    --card-1:  #3A2E25;
    --card-2:  #26312F;
    --card-3:  #2E2420;

    --pill-bg: #C9B79C;
    --pill-fg: #221A16;
    --focus:   #A9BEC4;
  }
}
:root[data-theme="dark"] {
  --ground:  #221A16;
  --paper:   #2E2420;
  --ink:     #F1E9E0;
  --muted:   #AE9C90;
  --rule:    #40332C;
  --card-1:  #3A2E25;
  --card-2:  #26312F;
  --card-3:  #2E2420;
  --pill-bg: #C9B79C;
  --pill-fg: #221A16;
  --focus:   #A9BEC4;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: "Jost", "PT Sans", Helvetica, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
  line-height: 1.12;
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

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

.eyebrow {
  font-family: "Jost", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
}

/* language switch --------------------------------------------------- */
.lang {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px var(--rule);
  backdrop-filter: blur(6px);
}
.lang.on-dark { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(247, 240, 230, 0.28); }
.lang button {
  font: inherit;
  font-family: "Jost", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.36rem 0.8rem;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.lang.on-dark button { color: var(--on-dark-soft); }
.lang button[aria-pressed="true"] { background: var(--pill-bg); color: var(--pill-fg); }
.lang.on-dark button[aria-pressed="true"] { background: var(--sand); color: var(--brown-deep); }

:root:not(.en) [lang="en"] { display: none; }
:root.en       [lang="es"] { display: none; }

/* link rows ---------------------------------------------------------- */
.links { display: flex; flex-direction: column; gap: 0.6rem; }
.links a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  border-radius: 3px;
  background: var(--card-3);
  box-shadow: inset 0 0 0 1px var(--rule);
  text-decoration: none;
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.links a:hover {
  transform: translateX(3px);
  background: var(--brown);
  box-shadow: inset 0 0 0 1px var(--brown);
  color: var(--on-dark);
}
.links a:hover .who { color: var(--sand); }
.links a:hover svg { stroke: var(--sand); }
@media (prefers-reduced-motion: reduce) { .links a { transition: none; } }

.links .what {
  font-family: "Jost", sans-serif;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.25;
}
.links .who {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.12rem;
}
.links svg { width: 16px; height: 16px; stroke: var(--slate); fill: none; stroke-width: 2; }