:root{
  --bg: #ffffff;
  --text: #111;
  --muted: #636363;
  --accent: #6e6e6e;
  --gap: 0.5lh;
  --maxw: 1120px;
  --shadow: 0 10px 30px rgba(0,0,0,.16);
}

* { box-sizing: border-box; }
html { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: 18px;
  font-weight: 400; /* lighter default text */
}

.bio-page .inner {
  max-width: none;       /* Removes the centered container width */
  margin: 0;             /* Aligns to left edge */
  padding-left: 2rem;    /* Adds a little breathing room from sidebar */
  padding-right: 2rem;   /* Keep consistent padding on right */
}
.contact-photo {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.contact-photo img {
  max-width: 600px; /* Adjust size as needed */
  width: 100%;
  height: auto;
  border-radius: 8px; /* Rounded corners for a softer look */
}
.pull-quotes {
  margin: 3rem 0;
  padding: 1rem;
  border-left: 5px solid #a0522d; /* warm earthy tone */
  background-color: #faf7f2;
}

.pull-quotes blockquote {
  font-size: 1.2rem;
  font-style: italic;
  margin: 1.5rem 0;
  line-height: 1.6;
}

.pull-quotes cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  font-style: normal;
  color: #555;
}
.links-section h2{
  margin: 1.5rem 0 .75rem;
  font-size: 1.15rem;
  font-weight: 600;
}
.linklist{
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}
.linklist li{
  margin: .4rem 0;
}
.linklist a{
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.linklist a:hover{
  color: #444;
  border-color: #444;
}



/* Sidebar */
.sidebar{
  position: fixed;
  inset: 0 auto 0 0;
  width: 300px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(0,0,0,0.06);
  background: var(--bg);
  z-index: 60; /* above backdrop so links are tappable */
}
.brand{
  text-decoration: none;
  color: var(--text);
  font-weight: 600; /* lighter than 800 */
  font-size: clamp(24px, 3.4vw, 34px);
  letter-spacing: .2px;
  line-height: 1.15;
}
.nav{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.nav a{
  color: var(--text);
  text-decoration: none;
  opacity: 0.9;
  font-size: 18px;
  font-weight: 400;
  transition: transform .18s ease, color .18s ease;
}
.nav a:hover,
.nav a[aria-current="page"]{ opacity: 1; }
.nav a:hover{ transform: scale(1.08); color: #444; }

/* Hamburger */
.hamburger{
  position: fixed;
  top: 14px; right: 14px;
  z-index: 70;
  width: 42px; height: 42px;
  display: none;
  align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.hamburger span{
  display: block; width: 20px; height: 2px;
  background: #111; margin: 3px 0;
}

/* Backdrop */
.backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.28);
  opacity: 0; pointer-events: none;
  z-index: 40; transition: opacity .2s ease;
}
body.menu-open .backdrop{ opacity: 1; pointer-events: auto; }

/* Content area */
.content{ margin-left: 300px; padding: 36px 40px 90px; }
.inner{ max-width: var(--maxw); margin-inline: auto; }
.text-center { text-align: center; }
.muted{ color: var(--muted); }

.page-head{ margin-bottom: calc(var(--gap) * 4); }
.page-head h1{ margin: 0 0 var(--gap) 0; }

/* Top intro (home) */
.top-intro{ margin: 24px 0; }
.top-intro .role-title{ font-size: 26px; font-weight: 600; margin: 0 0 8px; }
.top-intro .role-copy{ max-width: 90ch; margin: 0 auto; }
.single-line{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ====== Big card layout with visible description (desktop) ====== */
.hero-stack{ display: grid; gap: clamp(22px, 4vw, 40px); margin: 18px 0 32px; }
.hero-card{
  display: grid;
  grid-template-columns: 2fr 1fr; /* image | text */
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
}
.card-media{ position: relative; }
.card-info{ text-align: left; }
.card-info h3{ margin: 0 0 8px; font-weight: 600; font-size: 20px; }
.card-info p{ margin: 0; color: var(--muted); }
/* Panel clamps when text is taller than the image */
.card-info {
  text-align: left;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;        /* positioning context for hint */
}

.card-info.clamped {
  overflow: hidden;
  padding-bottom: 38px;      /* space for the hint */
}

.card-info.clamped::after {
  content:"";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 80%);
  z-index: 1;
}

/* Small professional hint link */
.info-hint{
  position: absolute;
  left: 0;
  bottom: 8px;
  z-index: 2;
  background: transparent;
  border: 0;
  padding: 0;
  color: #444;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .9;
}
.info-hint:hover{ opacity: 1; }

/* If text fits, no clamp, no hint, no fade */
.card-info.expanded{ /* not used anymore; safe noop */ }
.card-info.expanded::after{ display: none; }

@media (max-width: 920px){
  .card-info.clamped{ padding-bottom: 36px; }
  .card-info.clamped::after{ height: 36px; }
}


/* Project title inside media column for tight cohesion */
.project-title{
  margin: 0 0 10px 0;
  font-size: 22px;
  font-weight: 600;
}

/* Carousel container */
.process-view{
  position: relative;
  border-radius: 6px;
  box-shadow: 0 18px 50px -24px rgba(0,0,0,.35);
  aspect-ratio: 16 / 11;       /* prevents layout shift */
  background: #f7f7f7;         /* subtle backdrop while empty */
  overflow: hidden;
}

.process-view .ph.skeleton{
  position: absolute;
  inset: 0;
  display: none;
}
.process-view.loading .ph.skeleton{ display: block; }

/* Image (we reuse .thumb styles; ensure it shows immediately when set) */
.process-view .pv-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity .2s ease;
}
.process-view.loading .pv-img{ opacity: 0; }   /* fade out while switching */

/* Arrows */
.pv-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border: 0; border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: #111; font-size: 24px; line-height: 1;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  cursor: pointer; z-index: 2;
}
.pv-prev{ left: 10px; }
.pv-next{ right: 10px; }
.pv-nav:hover{ filter: brightness(1.04); }
.pv-nav:active{ transform: translateY(-50%) scale(.98); }

/* Click-to-zoom affordance */
.process-view .pv-img{ cursor: zoom-in; }

/* show full homepage write-ups (don’t clamp) */
.hero-card.no-clamp .card-info {
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

/* Collage grid — uniform tiles (all same size) */
.lb-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* BIGGER tiles */
  gap: 16px;
  margin-bottom: 16px;
}


.lb-grid .tile{ grid-column: auto !important; grid-row: auto !important; }

.lb-grid .tile{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: #f3f3f3;
  box-shadow: 0 12px 30px -18px rgba(0,0,0,.28);
  cursor: zoom-in;
}
.lb-grid .tile img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .18s ease;
}
.lb-grid .tile:hover img{ transform: scale(1.02); }

/* Optional single-image mode (unchanged) */
.lb-single{ display:none; }
.lb.single-open .lb-grid{ display:none; }
.lb.single-open .lb-single{ display:block; }
.lb-single img{
  width: 100%; height: auto; max-height: 70vh; object-fit: contain; border-radius: 12px;
}


/* Images + skeletons */
.thumb{
  width: 100%; height: auto; display: block;
  border-radius: 6px;
  box-shadow: 0 18px 50px -24px rgba(0,0,0,.35);
  opacity: 0;
}
.pop-in{ animation: popIn .5s ease-out forwards; }
@keyframes popIn{ from{ opacity: 0; transform: translateY(4px) scale(0.985); } to{ opacity: 1; transform: translateY(0) scale(1); } }

.ph{ width: 100%; aspect-ratio: 16 / 11; border-radius: 6px; }
.skeleton{ position: relative; overflow: hidden; background: #f1f1f1; }
.skeleton::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%); animation: shimmer 1.3s infinite;
}
@keyframes shimmer{ 100% { transform: translateX(100%); } }
.ph-error{ background: #e8e8e8; }

/* ====== Lightbox (overlay + collage + caption) ====== */

/* Overlay container */
.lb{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.78);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: opacity .18s ease;
}
.lb.open{ opacity: 1; pointer-events: auto; }

/* White card */
.lb-inner{
  width: min(96vw, 1600px);
  max-height: 86vh;
  background: #fff;             /* white panel */
  border-radius: 16px;
  padding: clamp(16px, 2vw, 24px);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  animation: lbPop .18s ease-out;
  overflow: hidden;              /* keep grid/caption inside */
}
@keyframes lbPop{
  from{ transform: translateY(6px) scale(.985); opacity:.98; }
  to{   transform: translateY(0)  scale(1);     opacity:1;  }
}

/* Collage grid — larger, uniform tiles */
.lb-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
  max-height: 56vh;             /* grid scrolls if many images */
  overflow: auto;
}
.lb-grid .tile{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: #f3f3f3;
  box-shadow: 0 12px 30px -18px rgba(0,0,0,.28);
  cursor: zoom-in;
}
.lb-grid .tile img{
  position: absolute; inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  max-height: none !important;
  transition: transform .18s ease;
}
.lb-grid .tile:hover img{ transform: scale(1.02); }

/* Caption (supports long descriptions) */
.lb-caption{
  color: #111;
  margin-top: 12px;
  max-height: 24vh;             /* caption scrolls if very long */
  overflow: auto;
  padding-right: 6px;
  text-align: left;
}
.lb-caption h3{ margin: 6px 0 6px; font-size: 20px; font-weight: 600; }
.lb-caption p{ margin: 0 0 .7em; }

/* Close + nav buttons */
.lb-close{
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px;
  border-radius: 10px; border: 0;
  background: #fff; color: #111;
  font-size: 26px; line-height: 1;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  cursor: pointer;
  z-index: 110;
}
.lb-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: #111; font-size: 26px; line-height: 1;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  cursor: pointer; z-index: 110;
}
.lb-prev{ left: 12px; }
.lb-next{ right: 12px; }
.lb-nav:hover{ filter: brightness(1.03); }
.lb-nav:active{ transform: translateY(-50%) scale(.98); }

/* Single-image zoom mode (optional) */
.lb-single{ display:none; }
.lb.single-open .lb-grid{ display:none; }
.lb.single-open .lb-single{ display:block; }
.lb-single img{
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 12px;
}

/* Prose (bio): left align + remove bullets */
.prose{ text-align: left; }
.prose ul, .prose ul li{ list-style: none !important; }
.prose ul{ padding-left: 0 !important; margin-left: 0 !important; }
.prose ul li{ margin-bottom: .5rem; }

/* Scroll reveal */
.reveal{ opacity: 0; translate: 0 8px; }
.reveal.visible{ opacity: 1; translate: 0 0; transition: opacity .6s ease, translate .6s ease; }
.fade-up{} .delay-1{ transition-delay: .08s; } .delay-2{ transition-delay: .16s; } .delay-3{ transition-delay: .24s; }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.visible{ opacity:1 !important; translate:0 0 !important; transition:none !important; }
  .thumb{ animation:none !important; }
}

/* ======== Mobile: drawer + stacked cards ======== */
@media (max-width: 920px){
  .hamburger{ display: inline-flex; }
  .sidebar{
    position: fixed; inset: 0 auto 0 0; width: min(84vw, 320px); height: 100vh;
    padding: 22px 18px; transform: translateX(-105%); transition: transform .22s ease;
    box-shadow: var(--shadow); border-right: 0;
  }
  body.menu-open .sidebar{ transform: translateX(0); }
  .content{ margin: 0; padding: 70px 18px 70px; }

  .hero-card{ grid-template-columns: 1fr; } /* image above, text below */
}
/* =========================
   Site-wide font: Alice
   (fixes “font doesn’t work” by forcing it globally)
========================= */
@import url('https://fonts.googleapis.com/css2?family=Alice&display=swap');
html { font-family: 'Alice', serif; }

/* =========================
   Statement meta line (size + year)
   — keep it readable per your feedback
========================= */
.card-info .meta {
  font-size: .85em;       /* was 0.5em; bumped for legibility */
  line-height: 1.3;
  margin-top: .45em;
  color: var(--muted);
}

/* =========================
   Image visibility + skeleton overlay
   — ensures photos show even if JS lazy-hydration doesn’t run
========================= */
.card-media .ph.skeleton { display: none; }   /* don’t cover images */
.thumb, .pv-img {
  opacity: 1 !important;   /* some pages set opacity:0 until JS runs */
  transform: none !important;
  filter: none !important;
  display: block;
  max-width: 100%;
  height: auto;
}

/* =========================
   Media framing helpers
========================= */
.hero-card .card-media { aspect-ratio: 16 / 11; overflow: hidden; }
.hero-card .card-media .thumb { width: 100%; height: 100%; object-fit: contain; }

/* Tight crop utility (use on Resilience image) */
.crop-tight { object-fit: cover !important; object-position: 50% 50% !important; }

/* =========================
   Misc polish
========================= */
.lb img { max-width: 100%; height: auto; }    /* lightbox image sizing */

/* View details: small black text, aligned to bottom of photo */
.hero-stack .hero-card{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 2rem;
  align-items: stretch;              /* image + caption become equal height */
}
.hero-stack .hero-card .card-info{
  display: flex;
  flex-direction: column;            /* lets us push .actions to the bottom */
}
.hero-stack .hero-card .card-info .actions{
  margin-top: auto !important;       /* sit at bottom of the caption column */
}
.hero-stack .hero-card .card-info .actions .details{
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: #000 !important;
  font-size: .9em;
  font-weight: 400;
  text-decoration: none;
  line-height: 1.2;
}
.hero-stack .hero-card .card-info .actions .details:hover{
  text-decoration: underline;
}

/* === Mobile fix: image left, text right; no clamp/hint on small screens === */
@media (max-width: 920px){
  /* two columns on mobile */
  .hero-card{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    align-items: start;
    gap: 12px;
  }

  /* keep source order: image first, text second */
  .card-media{ order: 1; }
  .card-info{
    order: 2;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  /* prevent any gradient/hint from covering content */
  .card-info::after{ display: none !important; }
  .info-hint{ display: none !important; }

  /* avoid grid overflow/wrapping weirdness on tiny screens */
  .hero-card > * { min-width: 0; }
  .card-info p { overflow-wrap: anywhere; }
}


/* --- MOBILE FIX: image left | text right, no clamp overlay --- */
@media (max-width: 920px){
  /* two columns on phones */
  .hero-stack .hero-card{
    grid-template-columns: minmax(0, 48%) minmax(0, 52%) !important;
    align-items: start;
  }

  /* keep DOM order: image first, text second */
  .hero-stack .hero-card .card-media{ order: 1; }
  .hero-stack .hero-card .card-info{
    order: 2;
    max-height: none !important;   /* un-clamp */
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  /* kill the fade overlay + hint that’s covering text */
  .hero-stack .hero-card .card-info::after,
  .hero-stack .info-hint{ display: none !important; }

  /* prevent grid overflow on tiny screens */
  .hero-stack .hero-card > * { min-width: 0; }

  /* let the photo size itself naturally on small screens */
  .hero-stack .hero-card .card-media{ aspect-ratio: auto !important; }
}

/* optional: for very narrow phones, stack again */
@media (max-width: 380px){
  .hero-stack .hero-card{ grid-template-columns: 1fr !important; }
}


/* Hide process-view arrows on small screens + make image tappable */
@media (max-width: 920px){
  .process-view .pv-nav{ display:none !important; }
  .process-view .pv-img{ cursor: zoom-in; }
  .process-view .ph.skeleton{ pointer-events: none; } /* let taps pass through */
}
/* Mobile: hide process arrows, keep photo tappable for fullscreen */
@media (max-width: 920px){
  .process-view .pv-nav{ display: none !important; }
  .process-view .pv-img{ cursor: zoom-in; }
  /* ensure the loading placeholder never blocks taps */
  .process-view .ph.skeleton{ pointer-events: none; }
}

/* Sidebar credit */
.sidebar-footer{
  margin-top: auto;                 /* pushes it to the bottom */
  padding-top: 12px;
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid rgba(0,0,0,0.06);
}
.sidebar-footer a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.sidebar-footer a:hover{
  border-color: currentColor;
}