/* Professional site. Shared chrome matches the live mmikita.me identity. */
* { box-sizing: border-box; }
body { min-height: 100svh; margin: 0; }
a { color: inherit; }
.business-card {
  /* Same reading width and desktop gutters as the live homepage. */
  width: 100%;
  max-width: 924px;
  min-width: 0;
  margin-inline: auto;
  padding: clamp(var(--s-8), 14vh, var(--s-11)) var(--s-6) var(--s-8);
}
.about { margin: var(--s-6) 0 0; max-width: 52ch; }
.availability { color: var(--fg-3); font-size: var(--fs-sm); margin: var(--s-5) 0 var(--s-2); }
.contact { display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--s-6); row-gap: var(--s-2); }
/* Compact business card: identity, introduction, then a shared contact edge. */
body > .business-card { flex: 0 0 auto; }
.business-card { max-width: 924px; padding-block: 0 var(--s-9); }
/* The card hangs from the header: its divider starts at the header rule. */
.card-face { display: grid; grid-template-columns: var(--s-11) minmax(0, 1fr); }
.identity { border-right: 1px solid var(--border); padding: var(--s-7) var(--s-6) var(--s-7) 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); }
.portrait { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center; }
.introduction { padding: var(--s-7); padding-right: 0; }
.introduction h1 { max-width: 24ch; text-wrap: balance; }
.about { margin-bottom: 0; max-width: 52ch; }
.card-contact { border-block: 1px solid var(--border-strong); padding-block: var(--s-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); }
.availability { margin: 0; }
.contact { column-gap: var(--s-5); }
.areas { margin: 0; border-top: 1px solid var(--border-strong); }
@media (max-width: 700px) {
  .business-card { padding-block: 0 var(--s-7); }
  .card-face { grid-template-columns: 1fr; }
  .identity { border-right: 0; padding: var(--s-5) 0; flex-direction: row; align-items: center; }
  .portrait { width: var(--s-9); }
  .introduction { padding: 0 0 var(--s-6); }
  .introduction h1 { font-size: var(--fs-2xl); }
  .about { margin-top: var(--s-5); font-size: var(--fs-base); }
  .card-contact { align-items: stretch; flex-direction: column; }
  /* CV button on its own full-width row; the three links share the row below. */
  .contact { column-gap: var(--s-4); row-gap: var(--s-4); justify-content: space-between; }
  .contact .btn { flex: 1 1 100%; justify-content: center; }
  .business-card { padding-inline: var(--s-5); }
}

/* Request CV dialog. One box-ascii frame; a .t-label masthead with a hairline, like the
   section labels; underline-only fields, like the composer; red only on focus. */
.cv-dialog { width: min(100% - 2 * var(--s-5), 28rem); max-height: calc(100svh - 2 * var(--s-5)); overflow: auto; padding: var(--s-5) var(--s-6) var(--s-6); color: var(--fg); }
.cv-dialog::backdrop { background: color-mix(in srgb, var(--bg) 85%, transparent); }
.cv-head { display: flex; align-items: center; gap: var(--s-3); }
.cv-head .t-label { margin: 0; }
.cv-line { flex: 1; height: 1px; background: var(--border); }
.cv-close { border: 0; background: none; color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-base); line-height: 1; padding: var(--s-1) var(--s-2); margin-right: calc(-1 * var(--s-2)); cursor: pointer; }
.cv-close:hover { color: var(--fg); }
.cv-form, .cv-done { display: flex; flex-direction: column; gap: var(--s-5); padding-top: var(--s-5); }
.cv-form[hidden], .cv-done[hidden] { display: none; }
.cv-lead { margin: 0; color: var(--fg-2); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.cv-field { display: flex; flex-direction: column; gap: var(--s-1); }
.cv-opt { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: var(--s-1); }
.cv-field input, .cv-field textarea { font: inherit; font-size: var(--fs-base); color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--border-strong); border-radius: 0; padding: var(--s-1) 0 var(--s-2); width: 100%; transition: border-color var(--dur-fast) var(--ease-out); }
.cv-field textarea { resize: vertical; min-height: var(--s-8); line-height: var(--lh-normal); }
/* The field's own underline turns red; the ring stays off so the line reads as the focus. */
.cv-field input:focus-visible, .cv-field textarea:focus-visible { outline: none; border-bottom: 2px solid var(--accent); padding-bottom: calc(var(--s-2) - 1px); }
.cv-check:empty { display: none; }
.cv-msg { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg); }
.cv-msg::before { content: "! "; color: var(--fg-3); }
.cv-msg:empty { display: none; }
.cv-submit { align-self: flex-start; margin-top: var(--s-1); }
.cv-submit:disabled { opacity: 0.6; cursor: progress; }
/* a.t-link styles anchors only; this button borrows the same underline. */
.cv-back { align-self: flex-start; border: 0; background: none; padding: 0; font: inherit; font-size: var(--fs-sm); color: var(--fg); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cv-back:hover { text-decoration-color: var(--accent); }
.cv-dialog[open] { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
@starting-style { .cv-dialog[open] { opacity: 0; transform: translateY(var(--s-2)); } }
@media (prefers-reduced-motion: reduce) { .cv-dialog[open] { transition: none; } }