/* Irina Bobrineva — Contacts page. Poster style (3c). */
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;900&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* Colors */
  --c-paper: #F3EFE6;      /* page background */
  --c-ink: #16161A;        /* main text, dark card */
  --c-cobalt: #2638C9;     /* name, contact cards */
  --c-tomato: #F0502D;     /* accent card, link hover */
  --c-on-dark: #F3EFE6;    /* text on cobalt / ink */

  /* Fonts */
  --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif; /* 900, uppercase */
  --f-body: "Instrument Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;               /* labels, uppercase */

  /* Type scale */
  --t-name: clamp(52px, 9vw, 84px);  /* lh .85 */
  --t-card-title: 40px;              /* lh .95 */
  --t-role: 18px;                    /* mono, ls .06em */
  --t-value: 18px;                   /* 600 */
  --t-body: 15px;
  --t-label: 12px;                   /* mono, uppercase */

  /* Shape & spacing */
  --radius-card: 14px;
  --pad-card: 18px 20px;
  --gap-grid: 14px;
  --gap-section: 40px;
  --container: 680px;
  --ease: .3s;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--c-paper); color: var(--c-ink); font-family: var(--f-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-tomato); }

.page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 64px 20px; }
.container { width: 100%; max-width: var(--container); display: flex; flex-direction: column; align-items: center; gap: var(--gap-section); }

.header { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.name { font: 900 var(--t-name)/.85 var(--f-display); text-transform: uppercase; color: var(--c-cobalt); }
.role { font: 400 var(--t-role)/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }

.grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--gap-grid); }

.card { padding: var(--pad-card); border-radius: var(--radius-card); display: flex; flex-direction: column; gap: 6px; transition: transform var(--ease); }
.card__label { font: 400 var(--t-label)/1.4 var(--f-mono); text-transform: uppercase; }
.card__value { font-size: var(--t-value); font-weight: 600; overflow-wrap: anywhere; }

.card--contact { background: var(--c-cobalt); color: var(--c-on-dark); }
a.card--contact:hover { color: var(--c-on-dark); transform: rotate(-1deg) scale(1.02); }

.section { width: 100%; display: flex; flex-direction: column; gap: var(--gap-grid); }
.section__head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font: 400 var(--t-label)/1.4 var(--f-mono); text-transform: uppercase; }

.card--work { gap: 10px; }
.card--work .card__title { font: 900 var(--t-card-title)/.95 var(--f-display); text-transform: uppercase; }
.card--work .card__desc { font-size: var(--t-body); }
.card--tomato { background: var(--c-tomato); color: var(--c-ink); transform: rotate(-1.5deg); }
.card--ink { background: var(--c-ink); color: var(--c-on-dark); transform: rotate(1.5deg); }
.card--tomato:hover { color: var(--c-ink); transform: none; scale: 1.02; }
.card--ink:hover { color: var(--c-on-dark); transform: none; scale: 1.02; }

.section__head h2 { margin: 0; font: inherit; }
a.card:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  a.card:hover, a.card:focus-visible { transform: none; scale: none; }
}