/* Ian A.W. Edwards — self-contained static rebuild
   Faithful to the source (ianawedwards.com, Cwicly). Tokens resolved from the
   source's fluid scale; no WordPress/Cwicly dependencies. */

:root {
  /* Brand palette (source cc-color tokens) */
  --cc-color-1: #b29400;   /* gold accent */
  --cc-color-2: #b29400;   /* gold hover */
  --cc-color-5: #020202;   /* near-black text */
  --cc-color-6: #bababa;   /* grey (shadow base) */
  --cc-color-7: #ffffff;   /* white */

  /* Fluid spacing scale (source: clamps 480px → 1600px) */
  --xs: clamp(0.4rem, 0.36rem + 0.13vw, 0.5rem);
  --sm: clamp(0.8rem, 0.71rem + 0.27vw, 1rem);
  --md: clamp(1.375rem, 1.10rem + 0.84vw, 2rem);
  --lg: clamp(2.125rem, 1.74rem + 1.17vw, 3rem);
  --xl: clamp(2.625rem, 2.02rem + 1.84vw, 4rem);
  --section: clamp(3.5rem, 2.43rem + 3.35vw, 6rem);

  /* Derived spacing steps used by the source */
  --xs7: calc(var(--xs) * 0.7);
  --sm7: calc(var(--sm) * 0.7);
  --sm8: calc(var(--sm) * 0.85);
  --md7: calc(var(--md) * 0.7);
  --md8: calc(var(--md) * 0.85);
  --lg7: calc(var(--lg) * 0.7);

  /* Fluid type scale (source: min 15px @1.125 ratio, max 15px @1.33 ratio) */
  --step-0: clamp(0.9375rem, 0.90rem + 0.19vw, 1.05rem);
  --step-1: clamp(1.055rem, 0.98rem + 0.36vw, 1.40rem);
  --step-2: clamp(1.186rem, 1.06rem + 0.62vw, 1.86rem);

  /* Type roles */
  --tx: var(--step-0);
  --tx-md: calc(var(--tx) * 1.125);
  --tx-lg: calc(var(--tx) * 1.25);
  --head-sm: var(--step-1);
  --head-md: calc(var(--step-2) * 1.125);

  --container-max: 70rem;
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  font-size: var(--step-0);
  color: var(--cc-color-5);
  background-color: var(--cc-color-7);
}

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

a { text-decoration: none; color: inherit; }

h1, h2, h3 { font-family: 'Inter', sans-serif; line-height: 1.1; }

/* Page frame: centered, max 70rem, like the source container */
.page {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  width: 100%;
  max-width: var(--container-max);
}

/* Two-column grid: bio 2/5, links 3/5 (source columns-cf7def8) */
.columns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.columns > .col-bio   { grid-column: 1 / 3; grid-row: 1 / 2; }
.columns > .col-links { grid-column: 3 / 6; grid-row: 1 / 2; }

/* Bio column with gold right border */
.col-bio {
  border-right: 1px solid var(--cc-color-1);
}

.profile-wrapper { padding: var(--lg7); }

/* Banner image strip */
.banner {
  position: relative;
  height: calc(var(--section) * 2);
  background-image: url('../images/ianedwards-bg.jpg');
  background-size: cover;
  background-position: 53% 51%;
  background-repeat: no-repeat;
}

/* Circular headshot overlapping the banner's lower edge */
.headshot-rail { position: relative; height: var(--section); }
.headshot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  height: calc(var(--section) * 2);
  width: calc(var(--section) * 2);
  border-radius: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
}

.bio-name { font-size: var(--head-md); font-weight: 600; }

.bio-text > * + * { margin-top: var(--sm); }
.bio-text a { color: var(--cc-color-1); }
.bio-text a:hover { color: var(--cc-color-5); }

/* Links column */
.col-links { overflow: hidden; }
.links-wrapper { padding: var(--lg7); }
.links-wrapper > * + * { margin-top: var(--lg); }

.section > * + * { margin-top: var(--sm); }

/* Two-up link row (source: Mobile + Mobile+WhatsApp share a row) */
.link-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sm);
}
@media screen and (max-width: 992px) {
  .link-grid-2 { grid-template-columns: 1fr; }
}

/* Gold-ruled section heading */
.section-head {
  position: relative;
  display: block;
  font-size: var(--head-sm);
  font-weight: 700;
  z-index: 2;
}
.section-head::after {
  content: "";
  position: absolute;
  top: calc(var(--sm7) * -1);
  left: 0;
  height: 2px;
  width: var(--lg);
  background-color: var(--cc-color-1);
}

/* Bio link rows */
.bio-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--sm);
  min-height: calc(var(--xl) * 1.25);
  padding: var(--md7);
  background-color: var(--cc-color-7);
  border-radius: var(--xs);
  box-shadow: 1px -6px 18px 12px #bababa38;
  transition: all 0.25s;
}
.bio-link:hover { transform: translateY(calc(var(--xs7) * -1)); }

.bio-link__icon {
  height: var(--md8);
  width: var(--md);
  object-fit: contain;
  object-position: center center;
  flex-shrink: 0;
}
.bio-link__icon svg { height: 100%; width: 100%; }
.bio-link:hover .bio-link__icon svg path { fill: var(--cc-color-1); }

.bio-link__text {
  font-size: var(--tx-md);
  font-weight: 600;
  margin-right: auto;
  transition: all 0.25s;
}
.bio-link:hover .bio-link__text { color: var(--cc-color-2); }

.bio-link__arrow {
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(calc(var(--sm) * -1));
  transition: all 0.25s;
}
.bio-link__arrow svg { height: var(--md8); width: var(--md8); }
.bio-link:hover .bio-link__arrow { opacity: 1; transform: translateX(0); }
.bio-link:hover .bio-link__arrow svg path { fill: var(--cc-color-2); }

/* Videos */
.video-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--md);
}
.video-nav { display: flex; align-items: center; column-gap: var(--sm7); }
.video-nav button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
  color: var(--cc-color-5);
}
.video-nav button svg { height: var(--md); width: var(--md); }
.video-nav button:hover { color: var(--cc-color-1); }

.carousel { position: relative; overflow: hidden; width: 100%; }
.carousel-track {
  display: flex;
  gap: var(--sm7);
  transition: transform 0.4s ease;
}
.slide {
  flex: 0 0 calc((100% - var(--sm7)) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--sm8);
}
.video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border: 1px solid #ededed;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-title {
  font-size: var(--tx);
  font-weight: 600;
  line-height: var(--tx-lg);
  text-align: center;
  padding: 0 var(--sm);
}

/* vCard download — fixed floating gold button (source), icon + label stacked */
.bio-link__download {
  position: fixed;
  bottom: var(--md7);
  right: var(--md7);
  z-index: 50;
}
.bio-link__download-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--xs) * 0.5);
  width: calc(var(--xl) * 1.6);
  height: calc(var(--xl) * 1.6);
  padding: var(--sm8);
  background-color: #c09c00;
  color: var(--cc-color-7);
  border-radius: 100%;
  box-shadow: 1px -6px 18px 12px #bababa38;
  cursor: pointer;
  transition: all 0.25s;
}
.bio-link__download-btn:hover { transform: translateY(calc(var(--xs7) * -1)); }
.bio-link__download .bio-link__icon { height: var(--md); width: var(--md); }
.bio-link__download .bio-link__icon svg path { fill: var(--cc-color-7); }
.bio-link__download-label {
  font-size: var(--tx-xs, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cc-color-7);
}

/* Hover/focus tooltip */
.bio-link__download-btn { position: relative; }
.bio-link__download-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + var(--sm7));
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background-color: var(--cc-color-5);
  color: var(--cc-color-7);
  font-size: var(--tx-xs, 0.8rem);
  font-weight: 500;
  padding: var(--xs) var(--sm8);
  border-radius: var(--xs);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.bio-link__download-btn:hover::after,
.bio-link__download-btn:focus-visible::after { opacity: 1; }

@media (max-width: 992px) {
  .bio-link__download-btn { width: calc(var(--xl) * 1.4); height: calc(var(--xl) * 1.4); }
}

/* Responsive: stack to single column ≤992px (source breakpoint) */
@media screen and (max-width: 992px) {
  .columns { grid-template-columns: 1fr; }
  .columns > .col-bio   { grid-column: 1 / 2; grid-row: 1 / 2; }
  .columns > .col-links { grid-column: 1 / 2; grid-row: 2 / 3; }
  .col-bio { border-right: none; }
  .slide { flex: 0 0 100%; }
}