/* Self-hosted, Latin-subset fonts (Young Serif and Outfit from Google Fonts, Satoshi from Fontshare) */
@font-face { font-family: "Young Serif"; src: url("assets/fonts/YoungSerif-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("assets/fonts/Outfit-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("assets/fonts/Outfit-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("assets/fonts/Satoshi-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --red: #f84f4d;
  --mid-gray: #605f5f;
  --black: #1e1e1e;
  --cyan: #1effd2;
  --cyan-highlight: #9fffec;
  --off-white: #f5f1eb;

  --font-display: "Young Serif", Georgia, serif;
  --font-body: "Outfit", system-ui, sans-serif;
  --font-ui: "Satoshi", "Outfit", system-ui, sans-serif;

  /* Subtle paper grain, matching the textured background in the Figma mockup */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 0 0.12 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px;
  background: var(--grain), var(--off-white);
  color: var(--mid-gray);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, p, figure { margin: 0; }

/* ---------- Layout ---------- */

/*
  Desktop: the card is sized so the photo is always 3:4 and the text column is equally wide.
  --ph is the photo height: as tall as the viewport allows (minus the 40px margin and borders),
  unless the width runs out first. The card is then centred, giving equal margins on opposite sides.
  Type and spacing scale with --ph so the text column keeps the proportions of the Figma mockup.
*/
.card {
  --ph: clamp(460px, min(calc(100vh - 84px), calc((100vw - 106px) / 1.5)), 1200px);
  display: flex;
  gap: 20px;
  width: calc(var(--ph) * 1.5 + 26px);
  /* One Figma pixel, scaled with the card at the same rate as the body text (16-30px for 24px) */
  --u: clamp(0.6667px, calc(var(--ph) / 940), 1.25px);
  /* Buttons scale the same way but stop shrinking once the 16px label reaches 13px */
  --bu: max(var(--u), 0.8125px);
  height: calc(var(--ph) + 4px);
  border: 2px solid var(--red);
  transition: opacity 0.5s ease;
}

/* Hidden until the photo has loaded (see the script in index.html) */
.is-loading .card { opacity: 0; }

@supports (height: 100svh) {
  .card { --ph: clamp(460px, min(calc(100svh - 84px), calc((100vw - 106px) / 1.5)), 1200px); }
}

.intro {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, calc(var(--ph) * 0.0425), 48px);
}

.copy {
  flex: 0 1 calc(var(--ph) * 0.53);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, calc(var(--ph) * 0.068), 80px);
}

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, calc(var(--ph) * 0.051), 60px);
  line-height: normal;
  color: var(--red);
}

.text {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, calc(var(--ph) * 0.0255), 30px);
  font-size: clamp(16px, calc(var(--ph) * 0.0255), 30px);
  line-height: 1.5;
  font-weight: 500;
  text-wrap: pretty;
}

.soon { font-weight: 700; }

.actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* ---------- Photo ---------- */

.photo {
  position: relative;
  flex: none;
  height: 100%;
  width: calc(var(--ph) * 0.75 + 2px); /* 3:4 image plus the 2px divider */
  overflow: hidden;
  /* Only the divider edge: the card's own border already frames the other sides */
  border-left: 2px solid var(--red);
  background: var(--red);
  /* Finger drags on the photo move the light instead of scrolling the page */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.photo img,
.photo canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.photo img { object-fit: cover; }

.photo canvas {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.photo.is-live canvas { opacity: 1; }

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(44 * var(--bu));
  overflow: hidden;
  background: var(--cyan);
  border: 1px solid var(--black);
  color: var(--black);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-contact { width: calc(166 * var(--bu)); }

.btn-social {
  width: calc(44 * var(--bu));
  justify-content: center;
}

.btn-label {
  flex: 1;
  padding: 0 calc(15 * var(--bu));
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: calc(16 * var(--bu));
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(56 * var(--bu));
  height: calc(56 * var(--bu));
  border-left: 1px dashed var(--black);
}

.icon { display: block; width: calc(24 * var(--bu)); height: calc(24 * var(--bu)); }

.icon-hover {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  opacity: 0;
}

.btn:hover,
.btn:focus-visible {
  background: var(--cyan-highlight);
  color: var(--red);
}

.btn:hover .icon-hover,
.btn:focus-visible .icon-hover { opacity: 1; }

.btn:hover .icon:not(.icon-hover),
.btn:focus-visible .icon:not(.icon-hover) { opacity: 0; }

.btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* ---------- Mobile (and portrait screens, where the side-by-side card would be tiny) ---------- */

@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }

  .card {
    flex: 1;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 560px;
    height: auto;
    --u: 1px;
  }

  .photo {
    order: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 382 / 487;
    border-left: 0;
    border-bottom: 2px solid var(--red);
  }

  .intro {
    flex: 1 0 auto;
    padding: 20px;
    gap: 48px;
  }

  .copy {
    flex: none;
    gap: 20px;
  }

  h1 { font-size: 32px; }

  .text {
    gap: 20px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .card, .photo canvas { transition: none; }
}