/* tirth.me — a calling card, nothing more.
   Fraunces (display + text) + JetBrains Mono (labels). */

:root {
  --paper:   #F2ECDD;
  --ink:     #1A1612;
  --ink-soft:#2A231C;
  --muted:   #7A6E5A;
  --rule:    rgba(26, 22, 18, .18);
  --ember:   #C24A28;

  --serif:   "Fraunces", "Hoefler Text", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --ease:    cubic-bezier(.2, .7, .15, 1);
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 24, "SOFT" 40;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* a barely-there warmth in the paper */
  background-image:
    radial-gradient(900px 700px at 10% -10%, #F7F1E1 0%, transparent 65%),
    radial-gradient(700px 600px at 110% 110%, #ECE2C9 0%, transparent 60%);
  background-attachment: fixed;

  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 3rem);
}

::selection { background: var(--ember); color: var(--paper); }

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

/* card */

.card {
  width: 100%;
  max-width: 34rem;
}

/* name */

.name {
  font-family: var(--serif);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(4.5rem, 14vw, 8.5rem);
  line-height: .92;
  letter-spacing: -.035em;
  margin: 0;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.3rem, 1.5vw, .9rem);
}

.name--italic {
  font-style: italic;
  font-weight: 320;
  color: var(--ember);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

/* role */

.role {
  margin: 1.4rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  color: var(--muted);
  font-variation-settings: "opsz" 24, "SOFT" 80;
}

/* links — italic display verbs with stroke icons */

.links {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.links a {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 320;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(1.75rem, 3.8vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
  transition: color .3s var(--ease);
  width: max-content;
}

.links a svg {
  width: .95em;
  height: .95em;
  flex-shrink: 0;
  stroke: var(--muted);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: stroke .3s var(--ease), transform .35s var(--ease);
}

.links a .dot {
  color: var(--ember);
  margin-left: -.05em;
}

.links a .arrow {
  font-family: var(--mono);
  font-style: normal;
  font-size: .55em;
  color: var(--muted);
  margin-left: .35rem;
  opacity: 0;
  transform: translate(-.2rem, 0);
  transition: opacity .3s var(--ease), transform .35s var(--ease), color .3s var(--ease);
}

.links a:hover { color: var(--ember); }
.links a:hover svg { stroke: var(--ember); transform: rotate(-4deg); }
.links a:hover .arrow {
  opacity: 1;
  transform: translate(.2rem, -.25em);
  color: var(--ember);
}

/* reveal */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(8px);
    animation: rise .8s var(--ease) forwards;
    animation-delay: var(--d, 0ms);
  }
}
@keyframes rise { to { opacity: 1; transform: none; } }