/* Import web fonts: must be at the very top */
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Libre+Bodoni:ital,wght@0,700;1,700&display=swap');

/* Home page utilities */
.fade-in { opacity: 0; transition: opacity 1s ease; }
.fade-in.visible { opacity: 1; }
.navbar.hidden { opacity: 0; pointer-events: none; transition: opacity 1s ease; }

/* Founder/Services/Social/Contact shared base */
body.page { font-size: 1rem; }
.biotitle, .resultstitle { font-size: 1.5rem; font-weight: 700; font-family: "Libre Bodoni", serif; color: #DA291C; line-height: 1.6; margin: 0 0 1rem 0; letter-spacing: 0.02em; }
body {
  font-family: 'Arimo', sans-serif;
}

/* Navigation links */
.nav-links a { text-decoration: none; color: white; font-weight: 400; transition: color 0.2s ease, text-shadow 0.2s ease; }
.nav-links a:hover { color: #DA291C; text-shadow: none; }

/* Content link styles (consistent across pages) */
.about-text a, .results-text a, .text-col a, .gallery-text-list a {
  color: #DA291C;
  text-decoration: none;
}
.about-text a:hover, .results-text a:hover, .text-col a:hover, .gallery-text-list a:hover,
.about-text a:focus, .results-text a:focus, .text-col a:focus, .gallery-text-list a:focus {
  text-decoration: none;
}

/* Results page shared layout and components */
html, body { height: 100%; }
*, *::before, *::after { box-sizing: border-box; }
main { flex: 1 0 auto; display: flex; min-height: 0; }
.media-col { flex: 0 0 40vw; min-height: 0; overflow: hidden; }
.media-col img { width: 100%; height: 100%; object-fit: cover; display:block; }
.text-col { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }

body {
      margin: 0;
      font-family: "Arimo", sans-serif;
      background-color: white;
      font-size: 1rem;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

.resultstitle {
  font-size: 1.5rem;
  font-weight: bold;
  white-space: nowrap;
  position: relative;
  font-family: "Libre Bodoni", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  color: #DA291C;
  line-height: 1.6;
  margin: 0 0 1rem 0;
  letter-spacing: 0.02em;
}

.biotitle {
      font-size: 1.5rem;
      font-weight: bold;
      white-space: nowrap;
      position: relative;
      font-family: "Libre Bodoni", serif;
      font-optical-sizing: auto;
      font-weight: 700;
      font-style: normal;
      color: #DA291C;
      line-height: 1.6;
      margin: 0 0 1rem 0;
      letter-spacing: 0.02em;
    }

h1 { font-family: 'Libre Bodoni', serif; font-weight: 700; color: black; }

.navbar { display: block; padding-left: 3rem; background-color: black; border-bottom: 0px solid #ddd; flex: 0 0 auto; }
.nav-inner { display: flex; align-items: baseline; padding: 3rem 2rem; gap: 1rem; position: relative; }
.nav-right { position: absolute; left: calc(40vw - 0rem); width: 675px; max-width: calc(100% - (40vw + 2rem)); box-sizing: border-box; top: 0; bottom: 0; display: flex; align-items: center; gap: 1rem; }
.brand { 
  font-size: 2.5rem !important; 
  font-weight: 700; 
  white-space: nowrap; 
  position: relative; 
  font-family: "Libre Bodoni", serif; 
  font-optical-sizing: auto; 
  font-style: normal; 
  transform: translateY(-0.12em); 
}
.navi-dot { position: relative; display: inline-block; line-height: 1; }
.navi-dot::after {
  content: "";
  position: absolute;
  width: var(--navi-dot-size, var(--nav-dot-size-desktop, 0.19em));
  height: var(--navi-dot-size, var(--nav-dot-size-desktop, 0.19em));
  background: rgb(128, 128, 128); /* gray dot to match built-in dot color */
  border-radius: 50%;
  top: var(--navi-dot-offset, var(--nav-dot-offset-desktop, 0.05em)); /* adjustable offset */
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

/* Global adjustable defaults for dot alignment and size */
:root {
  /* Navbar */
  --nav-dot-offset-desktop: 0.02em;
  --nav-dot-size-desktop: 0.22em;
  --nav-dot-offset-mobile: 0.04em;
  --nav-dot-size-mobile: 0.22em;
  /* Home headline */
  --home-dot-offset-desktop: 0.02em;
  --home-dot-size-desktop: 0.24em;
  --home-dot-offset-mobile: 0.02em;
  --home-dot-size-mobile: 0.22em;
  /* Adjustable vertical nudge for home headline alignment */
  --home-offset: -8px;
}

/* Apply navbar desktop defaults explicitly */
.navbar .navi-dot { 
  --navi-dot-offset: var(--nav-dot-offset-desktop);
  --navi-dot-size: var(--nav-dot-size-desktop);
}

/* Mobile: ensure navbar dot is visible and aligned */
@media (max-width: 1000px) {
  /* Navbar dot: finer mobile alignment */
  .navbar .navi-dot {
    --navi-dot-offset: var(--nav-dot-offset-mobile);
    --navi-dot-size: var(--nav-dot-size-mobile);
  }
}


.brand .think, .brand .next { font-size: inherit !important; line-height: inherit; }
.brand .think { color: white; position: relative; }
.brand .next { color: #DA291C; }
.nav-links { display: flex; gap: 0; flex-wrap: nowrap; flex: 1 1 auto; justify-content: space-between; font-weight: 400; }
.brand, .menu-toggle, .nav-links a { line-height: 1; vertical-align: baseline; }
.menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; color: white; }

@media (max-width: 1000px) {
  .nav-inner { padding: 1.5rem 1rem; justify-content: space-between; flex-wrap: nowrap; align-items: center; position: relative; }
  .nav-right { position: static; transform: none; margin-left: auto; display: flex; align-items: center; gap: 0.5rem; width: auto; }
  .menu-toggle { display: block; margin-left: 0; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 100%; background: black; flex-direction: column; gap: 0.5rem; padding: 0.75rem 1rem; box-sizing: border-box; z-index: 50; }
  .nav-links a { padding: 0.5rem 0; }
  .nav-links.active { display: flex; }
  .navbar { padding: 0; }
}

/* Home page specific */
.home-text { font-family: "Libre Bodoni", serif; font-size: min(var(--home-max-font, 1000px), calc(var(--home-scale, 1) * clamp(1rem, 9vw, 9rem))); font-weight: 700; margin: 0; width: 100%; padding: 0 5rem; overflow-x: hidden; overflow-y: visible; }
/* Ensure children inherit scaling on desktop. Line spacing for homeText animation */
.home-text p, .home-text span, .home-text .highlight { font-size: inherit; line-height: 1.08; letter-spacing: -0.02em; }
/* Prevent wrapping so text stays on one line */
.home-text p { white-space: nowrap; }
/* Desktop: slight optical baseline lift to center the line,
   plus a small top pad to avoid visual clipping under navbar */
@media (min-width: 1001px) {
  .home-text { padding-top: 0.2em; padding-bottom: 0.2em; }
  .home-text p { margin: 0; transform: translateY(-0.08em); }
}
/* Highlight color for emphasis */
.home-text .highlight { color: #DA291C; }
/* Home text specific i-dot alignment (independent from navbar) */
.home-text .navi-dot { position: relative; display: inline-block; line-height: 1; }
.home-text .navi-dot::after {
  content: "";
  position: absolute;
  width: var(--home-dot-size, var(--home-dot-size-desktop));
  height: var(--home-dot-size, var(--home-dot-size-desktop));
  background: rgb(128, 128, 128);
  border-radius: 50%;
  top: var(--home-dot-offset, var(--home-dot-offset-desktop)); /* adjustable offset for headline */
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}
/* Apply home headline desktop defaults explicitly */
.home-text .navi-dot {
  --home-dot-offset: var(--home-dot-offset-desktop);
  --home-dot-size: var(--home-dot-size-desktop);
}
@media (max-width: 1000px) {
  /* Home headline dot: mobile alignment */
  .home-text .navi-dot {
    --home-dot-offset: var(--home-dot-offset-mobile);
    --home-dot-size: var(--home-dot-size-mobile);
  }
}
/* Slide-in animations for sentences */
.home-text .slide-left, .home-text .slide-right {
  display: inline-block;
  will-change: transform, opacity;
  position: relative;
  z-index: 2;
  transition: transform 600ms ease, opacity 600ms ease;
}
/* Only apply offscreen + opacity when playing animation */
.home-text.playing .slide-left, .home-text.playing .slide-right { opacity: 0; }
.home-text.playing .slide-left { transform: translate3d(-100%, 0, 0); }
.home-text.playing .slide-right { transform: translate3d(100%, 0, 0); }
.home-text.playing .slide-left.in, .home-text.playing .slide-right.in { transform: translateX(0); opacity: 1; }

/* Disable transition when setting initial offscreen state */
.home-text .notrans { transition: none !important; }

@media (max-width: 1000px) {
  /* Children inherit the scaled size; don't override container's font-size */
  .home-text p, .home-text span, .home-text .highlight { font-size: inherit; line-height: 1.08; }
  /* Make base size large so JS can scale down to fit width on mobile */
  .home-text {
    font-size: min(var(--home-max-font, 1000px), calc(var(--home-scale, 1) * clamp(2rem, 20vw, 18rem)));
    padding-top: 0.2em; padding-bottom: 0.2em; padding-left: 1rem; padding-right: 1rem;
  }
  .home-text p { margin: 0; transform: translateY(-0.08em); }
}

.about-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1 0 auto;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.about-image {
  flex: 0 0 auto;
  width: 40vw;
  align-self: stretch;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  min-height: 0;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-text {
  flex: 1;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 675px;
  font-size: 1.5rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  color: rgb(128, 128, 128);
}

.about-text h1 {
      font-size: 2rem;
      margin-bottom: 1rem;
}

.about-text p {
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

@media (max-width: 1400px) {
  .about-container {
    flex-direction: column;
}

  .about-image {
    width: 100%;
    height: auto;
}

  .about-text {
    padding: 2rem;
    max-width: 90%;
  }
}



:root { --content-width: 675px; --hero-width: 40vw; --gallery-strip: 0.6rem; }
.results-container { 
  display: grid; 
  grid-template-columns: 40vw 1fr; 
  grid-auto-rows: auto; 
  gap: 0; 
  flex: 1 0 auto; 
  margin: 0; 
  padding-left: 0rem; 
  min-height: 0; 
  align-items: start; 
}


.about-image { grid-column: 1 / 2; }
.results-image img { 
  width: 675px; 
  height: 100%; 
  object-fit: cover; 
  display: block; }
.results-image { 
  grid-column: 1 / 2; 
  margin: 0; 
  
  position: relative; 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
}
/* Removed global square crop to allow flexible scaling across pages */
/* Fine-tune hero crop on Results page: shift image slightly left */
/* Results page: shift hero image slightly left */

.results-container .results-image img { 
  transform: translateX(-2.5rem); 
  margin-top: 2.6rem;

}

/* Mobile: ensure hero image scales and doesn't get cropped */
@media (max-width: 1400px) {
  .results-image { width: 100%; height: auto; }
  .results-container .results-image img,
  #heroImage {
    width: 100%;
    height: auto;
    transform: none;
    margin: 0;
    object-fit: contain; /* avoid cropping on narrow screens */
  }
}

.static-gallery { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.gallery-text-list { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.gallery-text-list .g-item h4 { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1; }
.gallery-text-list .g-item p { margin: 0; color: rgb(128, 128, 128); line-height: 1.4; }
.gallery-images { display: block; }
.img-wrap { box-sizing: border-box; width: 100%; max-width: var(--content-width); justify-self: start; margin: 0 0 0 3rem; position: relative; padding: 0; overflow: hidden; aspect-ratio: 4 / 4; background: transparent; border-radius: 0; align-self: start; }
.img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; border: none; box-shadow: none; }
.img-wrap::before, .img-wrap::after { content: ""; position: absolute; left: 0; right: 0; height: var(--gallery-strip); background: white; z-index: 3; pointer-events: none; }
.img-wrap::before { top: 0; }
.img-wrap::after { bottom: 0; }
.img-wrap img { position: relative; z-index: 1; }
  .g-item {
    /* Previously we used padding-top to nudge the text; that moved the text in the
       unintended direction for some viewports. Use a transform to move the text
       in the opposite direction (up by the gallery strip) so the title visually
       lines up with the image area exposed below the white ::before strip. */
    padding: 0 0 0.5rem 4.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0; /* no gap so the year sits immediately under the title */
    align-self: start; /* make sure the text cell aligns to the top of the row */
    /* move up by the strip height */
    transform: translateY(calc(var(--gallery-strip) * -1.75));
  }
 .g-year {
    display: inline-block;
    font-size: 0.9rem;
    color: #666;
    line-height: 1;
    margin: 0;
    margin-top: -1.5rem; /* micro-nudge upward so year sits directly under the title */
  }
 .resultstitle.gallery-heading {
    /* keep the heading on its own full-width row so it doesn't break the gallery grid flow,
       but visually align the text with the gallery titles by adding the same left offset */
     font-family: "Arimo", sans-serif;
     color: rgb(128, 128, 128);
       grid-column: 1 / -1;
    padding-left: 4.5rem; /* match .g-item left offset so the heading aligns with titles */
    margin-top: 0; /* heading sits directly under the rule */
    margin-bottom: 1.5rem;
    padding-bottom: 0; /* keep title snug against the rule */
  }
.gallery-rule {
    grid-column: 1 / -1;
    height: 2.5px;
    background: rgb(128, 128, 128);
    border: none;
    margin: 0;
    margin-top: 15mm; /* visual buffer above the gallery - rule is spaced away from main content */
    /* align left edge with gallery text start (same offset as .g-item) */
    margin-left: 4.5rem;
    /* width spans image column (40vw) plus the constrained image width and its left margin,
       minus the left offset so the rule ends at the image edge */
    width: calc(40vw + var(--content-width) - 1.5rem);
    max-width: calc(100% - 4.5rem);
  }

@media (max-width: 1400px) {
  .gallery-rule { margin-left: 1rem; width: calc(100% - 2rem); }
  .resultstitle.gallery-heading { grid-column: 1 / -1; padding-left: 1rem; padding-right: 1rem; margin-top: 0.8rem; }
  .results-container { display: block; padding-left: 0; }
  .results-image { width: 100%; }
  .results-text { padding: 2rem; max-width: 90%; }
  .design.principles { max-width: 100%; margin: 0 0 1.5rem 0; }
  .gallery-text-list { gap: 0.75rem; }
  .gallery-text-list .g-item { padding-bottom: 0.5rem; }
  .gallery-images .img-wrap { margin-bottom: 1rem; }
  .g-item { padding-left: 1rem; padding-right: 1rem; }
  .img-wrap { padding-left: 1rem; padding-right: 1rem; max-width: 100%; justify-self: stretch; margin-left: 0; }
}

.results-text { 
  flex: 1;
  grid-column: 2 / 3; 
  padding: 3rem; 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-start; 
  max-width: 675px; 
  font-size: 1.5rem; 
  overflow: auto; 
  -webkit-overflow-scrolling: touch;}
.results-container .results-text, .results-container .text-col { min-width: 0; }
.results-text p { overflow: auto; }
.results-container .text-col { overflow: auto; }
.results-container .about-text { overflow: auto; }
.results-text h1 { font-size: 2rem; margin-bottom: 1rem; }
.results-text p { line-height: 1.6; margin: 0 0 1rem 0; }