/* Colors and type ------------------------------------------------------- */

:root {
  --background: #f4f5f6;
  --ink: #1d232a;
  --ink-muted: #46505b;
  --denim: #263650;
  --display-font: "Cormorant Garamond", Georgia, serif;
  --body-font: Karla, system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --gap: clamp(10px, 1.6vw, 18px);
  /* Height left for a row of photos once the menu is on screen. */
  --row-height: calc(100svh - 180px);
}

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

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--denim); outline-offset: 3px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Header ----------------------------------------------------------------- */

.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px var(--gutter) 16px;
}

.wordmark {
  font-family: var(--display-font);
  font-size: 32px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nav { display: flex; justify-content: center; gap: clamp(14px, 2.4vw, 34px); }

.nav a {
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  color: var(--ink-muted);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: currentColor; }

/* Card: photo beside the denim panel (Home and Contact) ------------------ */

.card-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  max-width: 1180px;
  height: calc(100svh - 200px);
  min-height: 480px;
  max-height: 820px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.card-hero img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 22%; }

.card-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: clamp(24px, 5vw, 64px);
  background: var(--denim);
  color: #f1f4f6;
  text-align: center;
}

.card-panel h1 {
  margin: 0 0 6px;
  color: #fff;
  font-family: var(--display-font);
  font-size: clamp(36px, 4.6vw, 58px);
  font-weight: 600;
  line-height: 1;
}

.card-panel .meta {
  margin: 0;
  color: #c9d4dc;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 56px;
  margin-top: 26px;
  padding: 0 30px;
  border: 1px solid #fff;
  background: #fff;
  color: var(--denim);
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s;
}

.card-button::after { content: "↗" / ""; margin-left: 10px; letter-spacing: 0; }
.card-button:hover { background: #dbe4ea; border-color: #dbe4ea; }

.card-email {
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  color: #fff;
  font-family: var(--display-font);
  font-size: clamp(18px, 2.05vw, 28px);
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}

.card-email:hover { border-bottom-color: #fff; }

/* Inner pages (Headshots and Resume) ------------------------------------- */

.inner {
  display: flex;
  flex-direction: column;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(8px, 1.5vw, 20px) var(--gutter) 16px;
}

/* Every tile is the same 2:3 size. The grid is capped so a full row of two
   fits on screen below the menu. The two older 4:5 shots lose a sliver at
   the sides. */
.headshot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  width: 100%;
  max-width: max(420px, calc(var(--row-height) * 4 / 3 + var(--gap)));
  align-self: center;
}

.headshot { display: block; overflow: hidden; }
.headshot img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; transition: transform .5s ease; }
.headshot:hover img { transform: scale(1.02); }

/* The photo (2:3) and the resume (a US letter page) share one height, neither
   cropped, as on bellaorobaton.com/resume. */
.resume-pair {
  --resume-shape: calc(8.5 / 11);
  display: flex;
  gap: var(--gap);
  width: 100%;
  max-width: max(420px, calc(var(--row-height) * (2 / 3 + var(--resume-shape)) + var(--gap)));
  align-self: center;
}

.resume-photo { flex: calc(2 / 3) 1 0%; min-width: 0; margin: 0; }
.resume-page { flex: var(--resume-shape) 1 0%; min-width: 0; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.resume-photo img, .resume-page img { width: 100%; }

/* Footer ----------------------------------------------------------------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px 28px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px var(--gutter);
  font-size: 14.5px;
}

/* Lines the footer up with the card on the pages that have one. */
.page-home .site-footer, .page-contact .site-footer { max-width: 1180px; }

.footer-email { text-decoration: none; }
.footer-email:hover { color: var(--denim); }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a { color: var(--ink-muted); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }

/* Phones ----------------------------------------------------------------- */

@media (max-width: 820px) {
  .wordmark { font-size: 26px; }
  .nav { gap: 20px; }

  .card-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; height: auto; max-height: none; padding: 0; }
  .card-hero img { aspect-ratio: 4 / 5; height: auto; }
  .card-panel { gap: 6px; padding: 22px 24px 28px; }
  .card-button { min-height: 50px; margin-top: 14px; }
  .card-email { font-size: 22px; }

  /* The name is already in the header; dropping the big one keeps the button
     on the first screen. Still there for screen readers. */
  .page-home .card-panel h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Everything in the footer is a tap away in the menu. */
  .site-footer { display: none; }

  .resume-pair { flex-direction: column; max-width: none; }
  /* No room for the pair, and the face is on every other page: resume only. */
  .resume-photo { display: none; }
  .resume-page { flex: none; }
}

/* Small tablets held upright get the phone layout; keep the card phone-sized so
   it isn't a screen-tall photo with the button below it. */
@media (min-width: 600px) and (max-width: 820px) {
  .card-hero { max-width: 480px; margin: 0 auto; }
}

/* Short phones (iPhone SE, mini): the 4:5 photo would push the button off the
   first screen, so the photo takes only the height the header and panel leave. */
@media (max-width: 820px) and (max-height: 750px) {
  .page-home, .page-contact { display: flex; flex-direction: column; height: 100svh; }
  .card-hero { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .card-hero img { flex: 1; min-height: 220px; aspect-ratio: auto; object-position: 50% 30%; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}