/* Kayla Baker portfolio — migrated from Canva.
   The Canva design is a 1366px-wide canvas. On desktop every size is expressed in
   "canvas units" (--u = 1/1366 of the page width) so the layout scales the way the
   Canva site did. Below 820px the layout switches to a stacked, phone-first version. */

@font-face {
  font-family: "Antonio";
  src: url("fonts/antonio-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("fonts/sora-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #191919;
  --accent: #93a9ff;
  --ink: #ffffff;
  --page: min(100vw, 1680px);
  --u: calc(var(--page) / 1366);
  --display: "Antonio", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --body: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 600;
  /* Sora runs a little wider than the Telegraf used in Canva; tighten to match. */
  letter-spacing: -0.03em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

main { width: var(--page); margin: 0 auto; }

img, video { display: block; max-width: 100%; }

h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
}

h1 {
  font-size: calc(117.33 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2 {
  font-size: calc(56 * var(--u));
  line-height: 1.286;
  letter-spacing: -0.02em;
}

.accent { color: var(--accent); }

a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, video:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

section, header, footer { min-height: calc(768 * var(--u)); }

/* ---------- 1. Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: calc(567.3 * var(--u)) 1fr;
}
.hero__photo {
  background: var(--accent);
  padding: calc(38 * var(--u)) calc(50 * var(--u)) calc(46 * var(--u)) calc(53 * var(--u));
  /* carry the purple panel out to the left edge on very wide screens */
  box-shadow: -100vmax 0 0 0 var(--accent);
  clip-path: inset(0 0 0 -100vmax);
}
.hero__photo img {
  width: 100%;
  height: calc(684 * var(--u));
  object-fit: cover;
  object-position: 50% 30%;
}
.hero__text {
  padding: calc(138 * var(--u)) calc(40 * var(--u)) calc(50 * var(--u)) calc(121.3 * var(--u));
}
.hero__roles {
  margin-top: calc(48 * var(--u));
  font-size: calc(28 * var(--u));
  line-height: 1.18;
}

/* ---------- 2. Background ---------- */
.background {
  padding: calc(105 * var(--u)) calc(55 * var(--u)) calc(50 * var(--u));
  text-align: center;
}
.background h2 { letter-spacing: 0; margin-bottom: calc(30 * var(--u)); }
.background p {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  font-size: calc(42.67 * var(--u));
  line-height: 1.289;
  letter-spacing: 0.02em;
}

/* ---------- 3 + 4. Photo galleries ---------- */
.gallery {
  display: grid;
  grid-template-columns: calc(513.3 * var(--u)) 1fr;
  min-height: 0;
}
.gallery__text {
  padding-left: calc(76.8 * var(--u));
  align-self: center;
}
.gallery__text h2 { letter-spacing: 0; }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(25.6 * var(--u)) calc(24.5 * var(--u));
}
.gallery__grid img {
  width: 100%;
  height: calc(371.2 * var(--u));
  object-fit: cover;
}
.gallery--lens { padding-top: calc(25.6 * var(--u)); }
.gallery--lens .gallery__text {
  padding-left: calc(63.2 * var(--u));
  align-self: start;
  padding-top: calc(4 * var(--u));
}
.gallery--lens h2, .gallery--lens h3 {
  font-size: calc(56 * var(--u));
  line-height: 1.089;
  letter-spacing: 0;
}
.gallery--lens h3 { margin-top: calc(51 * var(--u)); }
.brands {
  margin-top: calc(58 * var(--u));
  color: var(--accent);
  font-size: calc(28 * var(--u));
  line-height: 1.18;
}
.brands li + li { margin-top: calc(26.6 * var(--u)); }

/* ---------- 5. Three fun facts ---------- */
.facts {
  padding: calc(57.5 * var(--u)) calc(76.8 * var(--u)) calc(64 * var(--u));
}
.facts > h2 { text-align: center; margin-bottom: calc(39 * var(--u)); }
.fact {
  display: grid;
  grid-template-columns: calc(501 * var(--u)) 1fr;
  align-items: center;
  min-height: calc(165 * var(--u));
  padding: calc(8 * var(--u)) calc(50 * var(--u)) calc(8 * var(--u)) calc(52 * var(--u));
  border: max(1px, calc(1.6 * var(--u))) solid var(--accent);
}
.fact + .fact { margin-top: calc(19.6 * var(--u)); }
.fact h3 {
  font-size: calc(42.67 * var(--u));
  line-height: 1.289;
  letter-spacing: 0.02em;
}
.fact p {
  color: var(--accent);
  font-size: calc(21.6 * var(--u));
  line-height: 1.17;
}

/* ---------- 6 + 7. Merch and design work ---------- */
.work {
  padding: calc(38 * var(--u)) calc(76.8 * var(--u)) calc(113 * var(--u));
}
.work__head {
  display: grid;
  grid-template-columns: calc(603 * var(--u)) 1fr;
  align-items: start;
  min-height: calc(200 * var(--u));
}
.work__head p {
  padding-top: calc(10 * var(--u));
  color: var(--accent);
  font-size: calc(23.4 * var(--u));
  line-height: 1.17;
}
.work__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(31.3 * var(--u));
  /* breathing room between the paragraph and the pictures, even when it runs to 7 lines */
  margin-top: calc(28 * var(--u));
}
.work__row img {
  width: 100%;
  height: calc(387.4 * var(--u));
  object-fit: cover;
}

/* ---------- 8–11. Video sections ---------- */
.reels {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  column-gap: calc(84 * var(--u));
  padding: calc(69.5 * var(--u)) calc(76.8 * var(--u)) calc(90 * var(--u));
}
.reels h2 { grid-column: 1 / -1; margin-bottom: calc(22 * var(--u)); }
.reels__videos { display: flex; gap: calc(44 * var(--u)); }
.reels > p {
  align-self: center;
  max-width: calc(530 * var(--u));
  color: var(--accent);
  font-size: calc(33 * var(--u));
  line-height: 1.18;
}

.reel {
  position: relative;
  width: calc(268 * var(--u));
  aspect-ratio: 9 / 16;
  background: #000;
  overflow: hidden;
}
.reel video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reel__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.reel__play span {
  display: grid;
  place-items: center;
  width: clamp(52px, calc(70 * var(--u)), 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.72);
  transition: transform 0.15s ease, background 0.15s ease;
}
.reel__play:hover span { transform: scale(1.08); background: rgba(17, 17, 17, 0.88); }
.reel__play svg { width: 36%; height: 36%; margin-left: 6%; fill: #fff; }
.reel.is-playing .reel__play { display: none; }

/* ---------- 12. Events ---------- */
.events {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: calc(30 * var(--u));
  padding: calc(76.8 * var(--u)) calc(48 * var(--u)) calc(41 * var(--u)) calc(90.6 * var(--u));
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 0 100vmax var(--accent);
  clip-path: inset(0 -100vmax);
}
.events__text { padding-top: calc(8 * var(--u)); max-width: calc(815 * var(--u)); }
.events h3 {
  color: #282431;
  font-size: calc(30.67 * var(--u));
  line-height: 1.27;
  letter-spacing: -0.02em;
  margin-top: calc(-4 * var(--u));
}
.events p {
  margin-top: calc(11 * var(--u));
  font-size: calc(24.4 * var(--u));
  line-height: 1.22;
  letter-spacing: -0.035em;
}
.events p + p { margin-top: calc(30 * var(--u)); }
.reel--events { width: calc(387 * var(--u)); aspect-ratio: 572 / 960; }
.events a:focus-visible, .events button:focus-visible { outline-color: var(--bg); }

/* ---------- 13. Closing ---------- */
.closing {
  display: grid;
  grid-template-columns: 1fr calc(608 * var(--u));
  column-gap: calc(30 * var(--u));
  align-items: start;
  padding: calc(91 * var(--u)) calc(33 * var(--u)) calc(91 * var(--u)) calc(90.6 * var(--u));
}
.closing__text { padding-top: calc(23 * var(--u)); }
.closing h2 { color: var(--accent); margin-bottom: calc(22 * var(--u)); }
.closing p {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: calc(29.33 * var(--u));
  line-height: 1.296;
  letter-spacing: -0.02em;
  max-width: calc(606 * var(--u));
}
.closing p.closing__connect {
  display: flex;
  align-items: flex-end;
  gap: calc(22 * var(--u));
  margin-top: calc(0 * var(--u));
  font-size: calc(56 * var(--u));
  line-height: 1.286;
}
.closing__connect svg {
  width: calc(150 * var(--u));
  height: auto;
  color: var(--accent);
  margin-bottom: calc(10 * var(--u));
}
.closing__photo {
  width: 100%;
  height: calc(586 * var(--u));
  object-fit: cover;
  border-radius: calc(40 * var(--u));
}

.dk { display: inline; }

/* ---------- Phones and small tablets ---------- */
@media (max-width: 820px) {
  :root { --pad: clamp(20px, 6vw, 40px); }

  section, header, footer { min-height: 0; }
  .dk { display: none; }

  h1 { font-size: clamp(54px, 16.5vw, 120px); line-height: 1.06; }
  h2,
  .gallery--lens h2, .gallery--lens h3 { font-size: clamp(36px, 10.5vw, 64px); line-height: 1.15; }

  .hero { display: block; }
  .hero__photo { padding: var(--pad); box-shadow: none; clip-path: none; }
  .hero__photo img { height: auto; aspect-ratio: 4 / 5; }
  .hero__text { padding: calc(var(--pad) * 1.4) var(--pad) calc(var(--pad) * 2); }
  .hero__roles { margin-top: 24px; font-size: clamp(17px, 4.8vw, 24px); line-height: 1.3; }

  .background { padding: calc(var(--pad) * 2) var(--pad); }
  .background h2 { margin-bottom: 20px; }
  .background p { font-size: clamp(22px, 6.2vw, 38px); line-height: 1.3; }
  .background p + p { margin-top: 0.8em; }

  .gallery, .gallery--lens { display: block; padding-top: calc(var(--pad) * 1.5); }
  .gallery__text, .gallery--lens .gallery__text { padding: 0 var(--pad) var(--pad); }
  .gallery--lens h3 { margin-top: 18px; }
  .brands { margin-top: 22px; font-size: clamp(17px, 4.8vw, 24px); }
  .brands li + li { margin-top: 10px; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 8px; }
  .gallery__grid img { height: auto; aspect-ratio: 268 / 371; }

  .facts { padding: calc(var(--pad) * 2.5) var(--pad) calc(var(--pad) * 1.5); }
  .facts > h2 { margin-bottom: 24px; }
  .fact { display: block; min-height: 0; padding: 22px 20px 24px; border-width: 1.5px; }
  .fact + .fact { margin-top: 14px; }
  .fact h3 { font-size: clamp(26px, 7.4vw, 40px); line-height: 1.2; margin-bottom: 12px; }
  .fact p { font-size: clamp(15px, 4.2vw, 19px); line-height: 1.4; }

  .work { padding: calc(var(--pad) * 1.5) var(--pad); }
  .work__head { display: block; min-height: 0; }
  .work__head p { padding-top: 14px; font-size: clamp(15px, 4.2vw, 19px); line-height: 1.4; }
  .work__row { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; }
  .work__row img { height: auto; aspect-ratio: 280 / 387; }

  .reels { display: block; padding: calc(var(--pad) * 1.5) var(--pad); }
  .reels h2 { margin-bottom: 18px; }
  .reels__videos { gap: 10px; }
  .reels__videos .reel { width: auto; flex: 1 1 0; }
  .reels > p { max-width: none; margin-top: 20px; font-size: clamp(16px, 4.5vw, 21px); line-height: 1.4; }

  .events { display: block; padding: calc(var(--pad) * 2) var(--pad); }
  .events__text { padding-top: 0; max-width: none; }
  .events h3 { font-size: clamp(20px, 5.6vw, 30px); margin-top: 4px; }
  .events p { margin-top: 16px; font-size: clamp(15px, 4.2vw, 19px); line-height: 1.4; letter-spacing: -0.03em; }
  .events p + p { margin-top: 1em; }
  .reel--events { width: min(100%, 360px); margin: 28px auto 0; }

  .closing { display: block; padding: calc(var(--pad) * 2) var(--pad) calc(var(--pad) * 2.5); }
  .closing__text { padding-top: 0; }
  .closing h2 { margin-bottom: 16px; }
  .closing p { max-width: none; font-size: clamp(19px, 5.4vw, 30px); line-height: 1.3; }
  .closing p + p { margin-top: 0.7em; }
  .closing p.closing__connect { margin-top: 28px; gap: 16px; font-size: clamp(36px, 10.5vw, 64px); line-height: 1.1; }
  .closing__connect svg { width: clamp(64px, 20vw, 110px); margin-bottom: 6px; }
  .closing__photo { height: auto; aspect-ratio: 608 / 586; margin-top: 32px; border-radius: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reel__play span { transition: none; }
}

/* ---------- Additions, November 2026: buttons, results, contact ---------- */
.btn {
  display: inline-block;
  font-family: var(--body);
  font-weight: 600;
  font-size: calc(21 * var(--u));
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-transform: none;
  padding: calc(17 * var(--u)) calc(30 * var(--u));
  border-radius: 999px;
  border: max(1.5px, calc(1.6 * var(--u))) solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }

.hero__cta { display: flex; flex-wrap: wrap; gap: calc(16 * var(--u)); margin-top: calc(40 * var(--u)); }

.background p.background__body,
.background p.background__note {
  font-family: var(--body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-size: calc(25 * var(--u));
  line-height: 1.34;
  max-width: calc(980 * var(--u));
  margin: calc(26 * var(--u)) auto 0;
}
.background p.background__note { color: var(--accent); font-size: calc(21.6 * var(--u)); margin-top: calc(34 * var(--u)); }

.results {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
  gap: calc(19.6 * var(--u));
  margin: calc(56 * var(--u)) calc(21.8 * var(--u)) 0;
  text-align: left;
}
.results li {
  border: max(1px, calc(1.6 * var(--u))) solid var(--accent);
  padding: calc(26 * var(--u)) calc(26 * var(--u)) calc(28 * var(--u));
}
.results strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(58 * var(--u));
  line-height: 1.05;
  letter-spacing: 0;
  white-space: nowrap;
}
.results span {
  display: block;
  margin-top: calc(12 * var(--u));
  color: var(--accent);
  font-size: calc(19 * var(--u));
  line-height: 1.25;
}

.contact { display: flex; flex-wrap: wrap; gap: calc(14 * var(--u)); margin-top: calc(30 * var(--u)); }
.closing p.contact__note {
  font-family: var(--body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-size: calc(19 * var(--u));
  line-height: 1.3;
  margin-top: calc(18 * var(--u));
}

/* a quiet tile while a photo is still loading */
.gallery__grid img, .work__row img { background: #232323; }

@media (min-width: 821px) {
  .hero__text { padding-top: calc(74 * var(--u)); }
}

@media (max-width: 820px) {
  .btn { font-size: clamp(15px, 4.2vw, 18px); padding: 14px 22px; border-width: 1.5px; }
  .hero__cta { gap: 10px; margin-top: 26px; }

  .background p.background__body,
  .background p.background__note { font-size: clamp(16px, 4.5vw, 20px); line-height: 1.4; max-width: none; margin-top: 16px; }
  .background p.background__note { font-size: clamp(15px, 4.2vw, 19px); margin-top: 22px; }

  .results { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 28px 0 0; }
  .results li { padding: 16px 14px 18px; border-width: 1.5px; }
  .results strong { font-size: clamp(26px, 7.6vw, 44px); }
  .results span { margin-top: 8px; font-size: clamp(13px, 3.7vw, 16px); line-height: 1.3; }

  .contact { gap: 10px; margin-top: 22px; }
  .closing p.contact__note { font-size: clamp(14px, 4vw, 17px); margin-top: 14px; }
}

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