@layer reset, base, card, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, p, figure { margin: 0; }
  img, video { display: block; max-width: 100%; }
}

@layer base {
  :root {
    --cream: #f1ede4;
    --paper: #fbfaf6;
    --ink: #181512;
    --ink-soft: #3f3a34;
    --signal: #c33715;
    --signal-dark: #912307;
    --photo-bg: #120f0c;
    --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --font-body: "Barlow", "Segoe UI", sans-serif;
    --ease-out: cubic-bezier(.16, .84, .24, 1);
    --ease-io: cubic-bezier(.77, 0, .18, 1);
  }

  html { background: var(--cream); color: var(--ink); font-family: var(--font-body); }
  body { min-width: 320px; font-size: 17px; line-height: 1.5; }
  ::selection { background: #d6f447; color: var(--ink); }
  :focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
  .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

@layer card {
  .card { display: grid; grid-template-columns: 42% 1fr; grid-template-rows: 1fr; min-height: 100vh; min-height: 100svh; }

  .portrait { position: relative; overflow: hidden; background: var(--photo-bg); }
  .portrait-frame { position: absolute; inset: 0; }
  .portrait-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .portrait-video { opacity: 0; transition: opacity .8s ease-out; }
  .portrait-video.is-live { opacity: 1; }

  .info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 6vh 7vw; }
  .name { font-family: var(--font-display); font-size: 9.4vw; font-size: min(9.4vw, 16.5svh); font-weight: 700; line-height: .84; letter-spacing: -.02em; text-transform: uppercase; }
  .name .line { display: block; }
  .rule { display: block; width: min(12vw, 21svh); height: max(4px, .45vw); margin-top: min(2.4vw, 4.2svh); background: var(--signal); transform-origin: left; }
  .role { max-width: 22ch; margin-top: min(2.4vw, 4.2svh); color: var(--ink-soft); font-size: clamp(17px, min(2.1vw, 3.7svh), 34px); font-weight: 500; line-height: 1.3; }
  .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: min(3.6vw, 6.4svh); }
  .btn { display: inline-flex; min-height: clamp(48px, min(4.9vw, 8.7svh), 72px); align-items: center; justify-content: center; padding: 0 clamp(20px, 2.6vw, 40px); border-radius: 2px; font-family: var(--font-display); font-size: clamp(15px, min(1.5vw, 2.7svh), 22px); font-weight: 700; letter-spacing: .05em; line-height: 1; text-decoration: none; text-transform: uppercase; }
  .btn-primary { background: var(--signal); color: #fff; }
  .btn-primary:hover { background: var(--signal-dark); }
  .btn-dark { background: var(--ink); color: var(--paper); }
  .contact { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: min(2.2vw, 3.9svh); font-size: clamp(16px, min(1.35vw, 2.4svh), 22px); font-weight: 500; line-height: 1.3; }
  .contact a { color: var(--ink-soft); text-decoration: none; }
  .contact a:hover { color: var(--signal); text-decoration: underline; }

  @media (orientation: portrait) {
    .card { grid-template-columns: 1fr; grid-template-rows: minmax(38vh, 1fr) auto; grid-template-rows: minmax(38svh, 1fr) auto; }
    .info { padding: 7vw 7vw max(7vw, env(safe-area-inset-bottom)); }
    .name { font-size: 16.5vw; font-size: min(16.5vw, 9.5svh); }
    .rule { width: 21vw; height: 5px; margin-top: 4vw; }
    .role { margin-top: 3.4vw; font-size: clamp(17px, 5vw, 26px); }
    .actions { flex-direction: column; align-self: stretch; gap: 10px; margin-top: 6vw; }
    .btn { min-height: max(48px, 12.5vw); font-size: clamp(15px, 4.4vw, 20px); }
    .contact { gap: 4px 18px; margin-top: 4.5vw; font-size: clamp(16px, 4.3vw, 19px); }
  }
}

@layer motion {
  @keyframes wipe { to { clip-path: inset(0 0 0 0); } }
  @keyframes settle { to { transform: scale(1); } }
  @keyframes rise { to { transform: translateY(0); } }
  @keyframes draw { to { transform: scaleX(1); } }
  @keyframes up { to { opacity: 1; translate: 0 0; } }

  @media (prefers-reduced-motion: no-preference) {
    .js .portrait { clip-path: inset(0 100% 0 0); }
    .js .portrait-frame { transform: scale(1.14); }
    .js .ch { display: inline-block; overflow: hidden; padding: .18em 0 .04em; margin: -.18em 0 -.04em; vertical-align: top; }
    .js .ch > span { display: inline-block; transform: translateY(118%); }
    .js .rule { transform: scaleX(0); }
    .js .role, .js .btn, .js .contact { opacity: 0; translate: 0 1.4rem; }

    .is-playing .portrait { animation: wipe 1.15s var(--ease-io) forwards; }
    .is-playing .portrait-frame { animation: settle 2.3s var(--ease-out) forwards; }
    .is-playing .ch > span { animation: rise .95s var(--ease-out) forwards; animation-delay: calc(.5s + var(--i) * 42ms); }
    .is-playing .rule { animation: draw .8s cubic-bezier(.65, 0, .35, 1) 1.1s forwards; }
    .is-playing .role { animation: up .8s var(--ease-out) 1.2s forwards; }
    .is-playing .btn:nth-child(1) { animation: up .7s var(--ease-out) 1.35s forwards; }
    .is-playing .btn:nth-child(2) { animation: up .7s var(--ease-out) 1.45s forwards; }
    .is-playing .contact { animation: up .7s var(--ease-out) 1.6s forwards; }

    .btn { transition: transform .35s var(--ease-out), background-color .2s ease-out; }
    .btn:hover { transform: translateY(-2px); }
  }
}