:root{
  --bg: #b9e5e5; /* Light teal background */
  --white: #ffffff; /* Pure white for nav */
  --black: #000000; /* Black for accents */
  --grey: #cccccc; /* Light grey for secondary text */
  --light-grey: #f5f5f5; /* Light grey for subtle backgrounds */
  --dark-grey: #333333; /* Dark grey for accents */
  --card-bg: #93a2c4b4; /* Translucent for cards */
  --accent-purple: #9eafda; /* Light purple */
  --accent-teal: #b9e5e5; /* Light teal, matching bg */
  --frame-border: #014f50; /* dark teal */
  --title-color: #34135a; /* New color for specified titles */
  /* Research image size defaults (can be overridden per-entry) */
  --research-img-max-width: 360px;
  --research-img-max-height: 320px;
}
*{box-sizing:border-box}
html,body{height:100%}
.body, body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui;
  background:var(--bg);
  color:var(--dark-grey);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:16px; /* base size */
  line-height:1.6;
  border-bottom: none;
}

/* Page transition and toolbar-safe spacing */
body{transition:opacity 360ms ease; padding-top:64px}
.page-exit{opacity:0}
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:56px;
  z-index:80;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  padding:0.6rem 1rem;
  /* same color as the page background but 60% opaque; fallback then modern color-mix */
  background: rgba(185,229,229,0.6); /* fallback for browsers without color-mix */
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(6px);
}
.site-header h1{margin:0;font-size:1rem;color: var(--title-color)}
.main-nav a{
  color:var(--black);
  text-decoration:none;
  margin-left:0.6rem;
  padding:0.45rem 0.85rem;
  border-radius:999px;
  background: rgba(158,175,218,0.2);
  box-shadow:0 1px 4px rgba(0,0,0,0.1);
  border: 1px solid var(--title-color);
}
.main-nav a[aria-current="page"]{
  font-weight:700;
  background: var(--accent-purple);
  color: var(--dark-grey);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.container{max-width:900px;margin:2.5rem auto;padding:0 1rem}
.hero{
  max-width:900px;
  /* restored to a tighter spacing similar to the previous layout */
  margin:1.5rem auto 1rem auto;
  padding:1rem 1rem;
  border-radius:14px;
  background: var(--card-bg);
  box-shadow:0 6px 18px rgba(0,0,0,0.1);
  border: 1px solid var(--title-color);
  text-align:center;
}

/* global image handling */
img{max-width:100%;height:auto;display:block}

/* ensure homepage profile photo centers always */
.hero .profile-photo{display:block;margin:0 auto}

/* typographic scale */
h1{font-size:1.9rem;margin:0 0 0.4rem 0}
.hero h1{color: var(--title-color)}
h2{font-size:1.45rem;margin:0 0 0.6rem 0;color: var(--title-color)}
h3{font-size:1.15rem;margin:0 0 0.5rem 0;color: var(--title-color)}

/* slightly more breathing room for sections */
.section-box,
.hero,
.art-gallery,
.gallery{margin-bottom:1.5rem}

/* small subnav buttons on the research page */
.subnav a{display:inline-block;padding:0.5rem 1rem;border-radius:8px;background: var(--accent-teal);color: var(--black);text-decoration:none;font-size:0.95rem;border: none;transition:transform 200ms ease, box-shadow 200ms ease}
.subnav a:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,0.15); background: var(--frame-border); color: var(--white)}
.subnav{font-size:0.95rem}

/* art frame placeholder uses card-bg so empty areas match cards */
.art-frame{background:var(--card-bg)}
.art-frame img{background:transparent}

/* responsive nav: wrap and stack on small screens */
.main-nav{display:flex;gap:0.5rem;align-items:center;flex-direction:row;flex-wrap:wrap}
.main-nav a{display:inline-flex;align-items:center;justify-content:center}
@media (max-width:520px){
  .site-header{justify-content:space-between;padding:0.5rem}
  /* Keep navigation horizontal on mobile; allow wrapping if it overflows */
  .main-nav{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.4rem}
  .main-nav a{padding:0.36rem 0.6rem}
}

/* Add extra space under the hero heading and more bottom padding for the intro box */
.hero h2{margin-bottom:1rem}

/* page-specific: add space above the Art page heading only */
.art-page .hero{
  padding-top:1rem;
  padding-bottom:1rem;
}
.art-page .hero h2{padding-top:0;margin:1rem 0}
.section-box,
#about, #research, #projects{
  max-width:900px;
  margin:1.5rem auto;
  padding:1.5rem 1.25rem;
  border-radius:12px;
  background:var(--card-bg);
  color:var(--dark-grey);
  box-shadow:0 8px 20px rgba(0,0,0,0.1);
  border: 1px solid var(--title-color);
}
.section-box h2, #about h2, #research h2, #projects h2{
  margin-top:0;
  color: var(--title-color);
  text-align:left;
}
.section-box p, #about p, #research p, #projects p{
  color:var(--dark-grey);
  line-height:1.6;
}
.button-container{margin-top:1rem}
.button-container a{
  display:inline-block;
  margin:0.35rem;
  padding:0.5rem 0.9rem;
  border-radius:8px;
  background: var(--accent-teal);
  color: var(--black);
  text-decoration:none;
  box-shadow:0 6px 14px rgba(0,0,0,0.1);
  border: none;
  transition:transform 240ms ease, box-shadow 240ms ease;
}
.profile-photo{width:140px;height:140px;border-radius:50%;object-fit:cover;border:3px solid rgba(8,48,58,0.06);background:var(--muted)}
.intro-text h2{margin:0 0 0.5rem 0; color: var(--title-color)}
.intro-text p{margin:0;color:var(--dark-grey)}
.site-footer{padding:1rem;text-align:center;opacity:0.9;color:var(--dark-grey);border-bottom: none}

/* Art gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin-top:1rem}
.art-card{background: var(--accent-teal);padding:0.5rem;border-radius:8px;display:flex;flex-direction:column;align-items:center;border:1px solid var(--frame-border);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.art-card img{width:100%;height:160px;object-fit:cover;border-radius:12px}
.art-card p{margin:0.5rem 0 0 0;font-size:0.95rem;color:var(--dark-grey)}

/* Recipe cards */
.recipe-card{background: var(--accent-teal);padding:0.5rem;border-radius:8px;display:flex;flex-direction:column;align-items:center;border:1px solid var(--frame-border);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.recipe-card img{width:100%;height:57px;object-fit:cover;object-position:top;border-radius:12px}

/* Framed gallery styles */
.art-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:1rem;align-items:start}
.art-frame{background: var(--accent-teal);border-radius:10px;padding:0;display:flex;flex-direction:column;align-items:center;overflow:hidden;border:1px solid var(--frame-border);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.art-frame img{width:100%;height:220px;object-fit:cover;border-radius:12px;border:6px solid var(--bg);background:transparent;display:block}
.art-frame .art-meta{background: var(--accent-teal);width:100%;padding:0.5rem 0;margin-top:0;text-align:center}

/* ensure any gallery images have rounded corners */
.art-gallery img, .gallery img{border-radius:12px}
.art-meta{margin-top:0.6rem;font-size:0.85rem;color: var(--dark-grey)}

/* separate the art intro box from the main heading */
/* .art-intro removed: intro box deleted from art page */

/* Lightbox / zoom styles */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.8);z-index:1200;padding:2rem}
.lightbox.open{display:flex}
.lightbox-img{max-width:92%;max-height:92vh;border-radius:8px;box-shadow:0 18px 40px rgba(0,0,0,0.6)}
.lightbox-caption{color:var(--white);margin-top:0.75rem;text-align:center;opacity:0.95}
.lightbox-close{position:absolute;right:1rem;top:1rem;background:transparent;border:none;color:var(--white);font-size:2.2rem;line-height:1;cursor:pointer}
.lightbox-close:focus{outline:2px solid var(--white);outline-offset:4px}
.lightbox-download{position:absolute;right:3rem;top:1rem;background:transparent;border:none;color:var(--white);font-size:2.2rem;line-height:1;cursor:pointer}
.lightbox-download:focus{outline:2px solid var(--white);outline-offset:4px}

/* prevent background scroll when lightbox open */
body.lightbox-open{overflow:hidden}

/* Research section: image left, text right inside boxed section */
.research-content{display:flex;gap:1rem;align-items:flex-start}
.research-grid{display:flex;flex-direction:column;gap:1rem}
.research-row{display:grid;gap:1rem;align-items:center;grid-auto-flow:dense}
/* Non-reverse rows: media on the left (fixed max width), text on the right (flexible)
  Reverse rows: text on the left (flexible), media on the right (fixed max width) */
.research-row:not(.reverse){grid-template-columns: minmax(0, var(--research-img-max-width)) 1fr}
.research-row.reverse{grid-template-columns: 1fr minmax(0, var(--research-img-max-width))}
.research-row.reverse > .research-media{grid-column:2}
.research-row.reverse > .research-body{grid-column:1}
.research-row > .research-body,
.research-row > .research-media{min-width:0}
.research-media{display:flex;align-items:center;justify-content:center;background:transparent;padding:0;border-radius:10px}
.research-media img{display:block;width:100%;max-width:var(--research-img-max-width);max-height:var(--research-img-max-height);height:auto;object-fit:cover;border-radius:12px;flex:0 0 auto;border:6px solid var(--bg);background:var(--white)}
.research-media.small img{max-width:260px}
.research-media.medium img{max-width:360px}
.research-media.large img{max-width:520px}
/* Per-entry tweak: make an image exactly 5mm smaller in both dimensions */
.research-media.delta5 img{
  max-width: calc(var(--research-img-max-width) - 5mm);
  max-height: calc(var(--research-img-max-height) - 5mm);
}
.research-body{padding:0.25rem 0}

/* Subtle hover/interaction animations */
.instrument-card, .detector-card, .art-frame{transition:transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease}
.instrument-card:hover, .detector-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,0.15)}
.art-frame:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,0.15)}
.main-nav a{transition:background 220ms ease, transform 200ms ease}
.main-nav a:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.button-container a:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,0.15); background: var(--frame-border); color: var(--white)}

/* Contact strip in footer */
.contact-strip{display:flex;gap:1rem;justify-content:center;align-items:center;padding:0.6rem;background:var(--card-bg);border-top: none}
.contact-strip a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:transparent;color:var(--dark-grey);text-decoration:none;border:1px solid var(--title-color);transition:background 180ms ease, transform 180ms ease}
.contact-strip a:hover{background:var(--light-grey);transform:translateY(-3px)}
.contact-strip svg{width:20px;height:20px;display:block}

@media (prefers-reduced-motion:reduce){
  .instrument-card, .detector-card, .art-frame, .main-nav a, .button-container a{transition:none;transform:none}
}

@media (max-width:680px){
  /* Header/nav adjustments */
  .site-header{padding:0.5rem}
  .main-nav a{padding:0.32rem 0.6rem;font-size:0.95rem}

  /* Hero: make profile photo smaller and center it */
  .hero{margin:2rem auto 1rem auto;padding:1rem;border-radius:12px}
  .hero .profile-photo{width:110px;height:110px;display:block;margin:0 auto 0.75rem}

  /* Research: stack rows vertically and enforce media-first ordering
     For normal rows the DOM is media then body -> column shows media then body
     For reversed rows the DOM is body then media -> column-reverse shows media then body */
  .research-content{flex-direction:column}
  .research-row{display:flex !important;flex-direction:column;gap:0.75rem}
  .research-row.reverse{flex-direction:column-reverse}
  .research-row > .research-media,
  .research-row > .research-body{width:100%;min-width:0}
  .research-media img{height:auto;border-width:4px;max-width:100%;max-height:none}

  /* Gallery and buttons scale down: keep two items per row with good spacing */
  .art-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:0.9rem}
  .button-container a{display:inline-block;padding:0.45rem 0.7rem}
}

@media (max-width:420px){
  .profile-photo{width:96px;height:96px}
  .main-nav a{padding:0.3rem 0.45rem;font-size:0.9rem}
  .hero h1{font-size:1.25rem}
  .research-media.small img{max-width:220px}
  .research-media.medium img{max-width:300px}
}

/* Utility */
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}