:root {
  color-scheme: light;
  --ink: #26373e;
  --accent: #2e5869;
  --card: #dce5e4;
  --card-width: 900px;
  --card-height: 385px;
  --card-gap: 18px;
  font-family: "Arial", "Helvetica Neue", Helvetica, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
/* Preserve scrolling while hiding scrollbar tracks on all major desktop browsers.
   With no scrollbar gutter, the centered cards never shift sideways. */
html {
  min-width: 320px;
  min-height: 100%;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: clip;
}
body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  scrollbar-width: none;
  background: #334750;
  color: var(--ink);
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; border-radius: 3px; }

.background,
.background-tint,
.noise--background {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.background {
  z-index: -3;
  inset: 0;
  background: url("assets/background.webp") center / cover no-repeat;
  filter: blur(9px) saturate(.83) contrast(.98);
  transform: scale(1.045);
}
.background-tint {
  z-index: -2;
  background: linear-gradient(120deg,rgba(31,61,73,.10),rgba(12,25,34,.19));
}
.noise--background {
  z-index: -1;
  background: url("assets/grain.png") repeat;
  opacity: .23;
  mix-blend-mode: multiply;
}

.page {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 38px 24px;
  isolation: isolate;
  /* Animated elements must not temporarily create page overflow. */
  overflow: clip;
}
.cards {
  width: min(var(--card-width),100%);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}
.card {
  width: 100%;
  height: var(--card-height); /* Both cards share the same size. */
  flex: 0 0 var(--card-height);
  position: relative;
  overflow: hidden;
  border-radius: 33px;
  background: linear-gradient(120deg,#ebf0ed 0%,var(--card) 58%,#d5dfdf 100%);
  box-shadow: 0 22px 55px rgba(11,28,37,.23),0 4px 14px rgba(11,28,37,.08);
  border: 1px solid rgba(250,255,255,.36);
  will-change: transform, opacity;
}
.card::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 4;
  inset: 0;
  background: url("assets/grain.png") repeat;
  opacity: .14;
  mix-blend-mode: multiply;
}

/* Split the shared flower exactly at the empty space between the two cards.
   Source image: transparent cut starts at pixel 209 and ends at pixel 233.
   Offset each piece independently so no extra line appears *inside* a card. */
.flower {
  position: absolute;
  width: 368px;
  height: 593px;
  left: 532px;
  top: calc(var(--card-height) - 209px);
  max-width: none;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.card--contact .flower { top: -234px; }

.card__content { position: relative; z-index: 2; padding: 56px 67px; }
/* True vertical alignment: equal flexible empty space above and below the copy. */
.card--about .card__content {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 24px;
}
/* Quiet signature in the upper-right corner of the about card. */
.brand-mark {
  position: absolute;
  top: 28px;
  right: 42px;
  z-index: 3;
  color: var(--accent);
  opacity: .74;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
  white-space: nowrap;
}

/* Small personal introduction above the main portfolio statement. */
.greeting {
  margin: 0 0 17px;
  display: flex;
  gap: 18px;
  align-items: center;
  width: 390px;
  max-width: 76%;
  color: var(--accent);
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 700;
}
.greeting__line {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .42;
}
.card--about h1,
.card--contact h2 {
  padding: 0;
  margin: 0;
  font-weight: 760;
  letter-spacing: -.041em;
  color: #26373e;
}
.card--about h1 {
  font-size: 34px;
  line-height: 1.16;
  max-width: 770px;
}
.credentials { margin-top: 29px; }
.credentials p {
  margin: 0 0 12px;
  line-height: 1.27;
  font-size: 23px;
  letter-spacing: -.018em;
}
.credentials p:last-child { margin-bottom: 0; }
.credentials a {
  color: var(--accent);
  font-weight: 700;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.4px;
  transition: color .2s ease, text-decoration-thickness .2s ease;
}
.credentials a:hover { color: #173c4b; text-decoration-thickness: 3px; }

/* Keep heading in its original spot and anchor contact details near the lower edge. */
.card--contact .card__content {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 52px;
  padding-bottom: 25px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 34px;
  width: 415px;
  max-width: 70%;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 400;
}
.eyebrow__line { display: block; flex: 1; height: 1px; background: #38515a; opacity: .8; }
.card--contact h2 {
  font-size: 32px;
  line-height: 1.16;
  margin-top: 43px;
}
/* Body-style contact line — no pill button, just two links. */
.contact-links {
  margin: auto 0 0;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -.018em;
  font-weight: 400;
  max-width: 76%;
}
.contact-links a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.4px;
  white-space: nowrap;
  transition: color .2s ease, text-decoration-thickness .2s ease;
}
.contact-links a:hover {
  color: #173c4b;
  text-decoration-thickness: 3px;
}
.contact-links__separator { margin: 0 .35em; color: var(--ink); }

/* Entrance: rise from below and fade to full opacity; each card is staggered. */
@keyframes card-appear {
  from { opacity: 0; transform: translate3d(0,82px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
.card--about { animation: card-appear 1.05s cubic-bezier(.18,.73,.2,1) .18s both; }
.card--contact { animation: card-appear 1.05s cubic-bezier(.18,.73,.2,1) .39s both; }

@media (max-width: 980px) {
  :root { --card-width: 780px; --card-height: 365px; }
  .card__content { padding: 48px 50px; }
  .greeting { font-size: 18px; margin-bottom: 15px; }
  .card--about h1 { font-size: 31px; }
  .credentials p { font-size: 21px; }
  .flower { left: calc(100% - 365px); width: 368px; }
  .card--contact .card__content { padding-top: 46px; padding-bottom: 25px; }
  .card--contact h2 { font-size: 29px; }
  .contact-links { font-size: 20px; }
}

@media (max-width: 660px) {
  :root { --card-height: 375px; --card-gap: 16px; }
  .page { padding: 25px 14px; }
  .brand-mark { top: 18px; right: 24px; font-size: 11px; }
  .card { border-radius: 25px; }
  .card__content,
  .card--contact .card__content { padding: 33px 28px; }
  .card--contact .card__content { padding-bottom: 25px; }
  .card--about .card__content { padding: 24px 28px; }
  .desktop-break { display: none; }
  .greeting { font-size: 16px; margin-bottom: 14px; gap: 12px; max-width: 90%; }
  .card--about h1 { font-size: clamp(22px,4.6vw,27px); line-height: 1.16; }
  .credentials { margin-top: 25px; max-width: 93%; }
  .credentials p { font-size: clamp(15px,3.4vw,19px); line-height: 1.33; margin-bottom: 16px; }
  /* The source cut is resized with the image (265 / 368); align both edges to the gap. */
  .flower { width: 265px; height: auto; left: calc(100% - 235px); top: calc(var(--card-height) - 151px); opacity: .68; }
  .card--contact .flower { top: -169px; }
  .card--contact h2 { margin-top: 48px; font-size: clamp(23px,4.8vw,29px); }
  .eyebrow { max-width: 85%; gap: 18px; font-size: 12px; }
  .contact-links { margin-top: auto; font-size: 18px; max-width: 100%; }
}

@media (max-width: 395px) {
  :root { --card-height: 420px; }
  .card__content,
  .card--contact .card__content, .card--about .card__content { padding-left: 23px; padding-right: 23px; }
  .greeting { font-size: 16px; margin-bottom: 12px; }
  .card--about h1 { font-size: 22px; }
  .credentials p { font-size: 16px; }
  .flower { opacity: .38; }
  .contact-links { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .card--about, .card--contact { animation: none; }
  .contact-links a, .credentials a { transition: none; }
}