/* ============================================================
   Meyer CSS Reset
   ============================================================ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1.5; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  --color-primary:   #3F402E;
  --color-secondary: #C8CBB0;
  --color-surface:   #E6E6E4;

  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Source Sans 3', system-ui, sans-serif;

  --spacing-edge:        5vw;
  --spacing-edge-mobile: 1.75rem;
}

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

::selection {
  background-color: var(--color-secondary);
  color: var(--color-primary);
}

body {
  background: var(--color-surface);
  cursor: none;
}

/* ============================================================
   Custom cursor
   ============================================================ */
#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;        /* adjust size here */
  height: 20px;       /* adjust size here */
  pointer-events: none;
  z-index: 9999;
  opacity: 0.48;      /* adjust transparency here (0 = invisible, 1 = full) */
  transform: translate(-2px, -2px); /* fine-tune hotspot offset */
  will-change: transform;
}

#custom-cursor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (hover: none) {
  #custom-cursor { display: none; }
  body { cursor: auto; }
}

/* ============================================================
   Hero — Desktop
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  view-transition-name: hero-image;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 75%;
  padding: 4rem var(--spacing-edge);
  color: var(--color-primary);
}

/* ============================================================
   Typography
   ============================================================ */
h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1.05;
  color: var(--color-primary);
  view-transition-name: hero-heading;
}

/* .divider {
  border: none;
  border-top: 1px solid #3b3b1f;
  width: 200px;
  margin: 1.25rem 0 1.75rem;
} */

.tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.65;
  color: var(--color-primary);
  margin-top: 1.5rem;
  margin-bottom: 4rem;
  view-transition-name: hero-tagline;
}

.word-flourish {
  position: relative;
  display: inline-block;
}

.underline-flourish {
  color: var(--color-primary);
  position: absolute;
  bottom: -5px;
  left: -2px;
  width: calc(100% + 4px);
  height: 10px;
  overflow: visible;
  transform: scaleY(-1);
}

.name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.linkedin-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  line-height: 0;
}

.linkedin-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
  transition: opacity 0.2s ease;
}

.linkedin-link:hover .linkedin-icon {
  opacity: 0.48;
}

.linkedin-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

.role {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.10em;
  line-height: 1.275em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.identity {
  view-transition-name: hero-identity;
}

.role-break,
.h1-break {
  display: none;
}

@media (max-width: 600px) {
  .role-break {
    display: block;
  }
}

@media (max-width: 767px) {
  .h1-break {
    display: block;
  }
}

/* ============================================================
   Copyright
   ============================================================ */
.copyright {
  position: fixed;
  bottom: 1.25rem;
  left: var(--spacing-edge);
  z-index: 10;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  view-transition-name: site-copyright;
}

/* ============================================================
   Ripple canvas
   ============================================================ */
#ripple-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

/* ============================================================
   Page load animations  (@starting-style + transitions)
   ============================================================ */

@view-transition {
  navigation: auto;
}

.hero-img {
  transition: opacity 700ms cubic-bezier(0.25, 0, 0.1, 1) 0ms;
}

@starting-style {
  .hero-img { opacity: 0; }
}

h1 {
  transition:
    opacity   600ms cubic-bezier(0.25, 0, 0.1, 1) 100ms,
    translate 600ms cubic-bezier(0.25, 0, 0.1, 1) 100ms;
}

@starting-style {
  h1 { opacity: 0; translate: 0 12px; }
}

.tagline {
  transition:
    opacity   600ms cubic-bezier(0.25, 0, 0.1, 1) 200ms,
    translate 600ms cubic-bezier(0.25, 0, 0.1, 1) 200ms;
}

@starting-style {
  .tagline { opacity: 0; translate: 0 10px; }
}

.identity {
  transition: opacity 500ms cubic-bezier(0.25, 0, 0.1, 1) 320ms;
}

@starting-style {
  .identity { opacity: 0; }
}

.copyright {
  transition: opacity 500ms cubic-bezier(0.25, 0, 0.1, 1) 400ms;
}

@starting-style {
  .copyright { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-img, h1, .tagline, .identity, .copyright { transition: none; }
}

/* ============================================================
   Tablet (< 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .tagline-break {
    display: block;
  }
}

/* ============================================================
   Mobile (< 768px)
   ============================================================ */
@media (max-width: 767px) {
  .hero-content {
    max-width: 100%;
    padding: 2.5rem var(--spacing-edge-mobile);
  }

  .copyright {
    left: var(--spacing-edge-mobile);
  }

  .tagline {
    font-size: 1.25rem;
  }
}