/* styles.css (global) */

:root{
  --text:#111;
  --muted:#777;
  --rule:#eee;

  --page:980px;
  --page-wide:1100px;

  --pad:2rem;
  --logo-height:75px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{height:100%;scroll-behavior:smooth;}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;

  font-family:"Roboto",sans-serif;
  font-weight:400;
  background:#fff;
  color:var(--text);
  line-height:1.6;
}

/* Header / Nav */
header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff;
  border-bottom:none;

  padding:0 3rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

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

.logo{
  height:var(--logo-height);
  width:auto;
  display:block;
}

.logo-sm{--logo-height:75px;}
.logo-md{--logo-height:95px;}
.logo-lg{--logo-height:110px;}
.logo-xl{--logo-height:170px;}

nav{
  display:flex;
  gap:2rem;
  align-items:center;
}

nav a{
  text-decoration:none;
  color:var(--text);
  font-size:0.9rem;
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:none;
  position:relative;
}

nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:1px;
  background:var(--text);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.2s ease;
}

nav a:hover::after{transform:scaleX(1);}

/* Sticky-footer layout (footer not sticky; just sits at bottom on short pages) */
main{flex:1;}
footer{
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.8rem;
  color:var(--muted);
  border-top:1px solid var(--rule);
}

/* Main padding helpers */
.main-pad{padding:var(--pad);}
.main-pad-loose{padding:var(--pad) var(--pad) 6rem;}

/* Containers */
.page{
  width:100%;
  max-width:var(--page);
  margin:0 auto;
  text-align:left;
  margin-left: auto;
  margin-right: auto;
}

.page-wide{
  width:100%;
  max-width:var(--page-wide);
  margin:0 auto;
  text-align:left;
}

/* 2-col grid (resume + story pages) */
.grid-2{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:2.5rem;
  align-items:start;
}

.full-span{grid-column:1 / -1;}

/* Typography */
h1{
  font-size:1.8rem;
  font-weight:500;
  letter-spacing:0.02em;
  margin-bottom: 2rem;
}

p{
  max-width:700px;
  font-size:1rem;
  color:var(--muted);
}

.lead,
.kicker,
.subhead{
  font-size:1.2rem;
  line-height:1.6;
  font-weight:300;
  max-width:860px;
  color:var(--text);
  letter-spacing:0.02em;
}

/* Cards / sections */
.card{
  border:1px solid var(--rule);
  border-radius:0;
  padding:1.25rem;
  background:#fff;
}

.section{margin-top:2.25rem;}

.section h2{
  font-size:0.95rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:0.9rem;
  color:var(--text);
}

.section h3{
  font-size:1.05rem;
  font-weight:600;
  margin:1.25rem 0 0.25rem;
  color:var(--text);
}

.section p{max-width:none;}

/* Lists */
ul.clean{list-style:none;padding-left:0;margin:0;}
ul.clean li{
  padding-left:1.1rem;
  position:relative;
  margin:0.5rem 0;
  color:var(--muted);
}
ul.clean li::before{
  content:"•";
  position:absolute;
  left:0;
  color:var(--text);
}

/* Meta / refs */
.meta{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem 1.2rem;
  color:var(--muted);
  font-size:0.95rem;
}

.refs .ref{padding:0.9rem 0;border-top:1px solid var(--rule);}
.refs .ref:first-child{border-top:none;padding-top:0;}
.refs .name{font-weight:600;color:var(--text);}
.refs .role{color:var(--muted);}

.refs a{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.refs a:hover{border-bottom-color:var(--text);}

/* Index layout */
.content{
  width:90%;
  max-width:1000px;
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:2rem;
  align-items:center;
}

.hero-image{
  max-width:800px;
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--rule);
  border-radius:0;
}

/* Stories landing grid (capped) */
.stories-grid{
  margin:2.5rem auto 0;
  width:100%;
  max-width:750px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.story-tile{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid var(--rule);
  border-radius:0;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  display:block;
}

.story-tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(100%);
  transition:filter 300ms ease, transform 300ms ease;
}

.story-tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
  transition:background 300ms ease;
}

.story-tile .tile-title{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  padding:1.25rem;
  font-weight:500;
  letter-spacing:0.03em;
  z-index:1;
  color:#fff;
}

.story-tile:hover img{
  filter:grayscale(0%);
  transform:scale(1.03);
}
.story-tile:hover::after{background:rgba(0,0,0,0.2);}

/* Story media (detail pages + resume stories) */
.media img,
.story-media img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--rule);
  border-radius:0;
}

/* Resume story layout (text left, image right) */
.story{padding:0.9rem 0;border-top:1px solid var(--rule);}
.story:first-of-type{border-top:none;padding-top:0;}
.story-table{width:100%;border-collapse:collapse;}
.story-table td{vertical-align:top;}
.story-text{padding-right:1.5rem;}
.story-media{width:320px;}

/* Lightbox */
.lightbox-image{
  cursor:zoom-in;
  transition:transform 0.2s ease;
}
.lightbox-image:hover{transform:scale(1.01);}

.lightbox-overlay{
  position:fixed;
  inset:0;
  background:rgba(255,255,255,0.96);
  display:none;
  justify-content:center;
  align-items:center;
  padding:3rem;
  z-index:2000;
}
.lightbox-overlay.active{display:flex;}

.lightbox-overlay img{
  max-width:95%;
  max-height:90vh;
  object-fit:contain;
  border:1px solid var(--rule);
  border-radius:0;
  background:#fff;
}

.lightbox-close{
  position:absolute;
  top:2rem;
  right:2.5rem;
  font-size:1.75rem;
  cursor:pointer;
  color:#111;
  line-height:1;
  user-select:none;
}

/* ---------- Lightbox Carousel ---------- */

.lightbox-content {
  width: min(1200px, 95vw);
  height: min(80vh, 900px);
  position: relative;
  display: grid;
  align-items: center;
}

.lightbox-viewport {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.lightbox-track {
  height: 100%;
  display: flex;
  gap: 18px;
  align-items: center;
  transition: transform 260ms ease;
  will-change: transform;
}

.lightbox-slide {
  flex: 0 0 min(900px, 82vw);
  height: 100%;
  display: grid;
  place-items: center;
  opacity: 0.25;
  transition: opacity 220ms ease;
}

.lightbox-slide.is-adjacent { opacity: 0.5; }
.lightbox-slide.is-center { opacity: 1; }

.lightbox-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: #fff;
}

/* Carousel buttons inside overlay */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  color: var(--text);
  user-select: none;
}

.lightbox-nav:hover { border-color: #ddd; }

.lightbox-prev { left: -60px; }
.lightbox-next { right: -60px; }

/* Keep controls accessible on smaller screens */
@media (max-width: 980px) {
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-content { width: 95vw; height: 85vh; }
  .lightbox-slide { flex-basis: 86vw; }
}

/* Responsive */
@media (max-width:980px){
  .grid-2{grid-template-columns:1fr;}
  .story-table, .story-table tbody, .story-table tr, .story-table td{
    display:block;width:100%;
  }
  .story-text{padding-right:0;}
  .story-media{width:100%;margin-top:1rem;}
  .lightbox-overlay{padding:1.5rem;}
  .lightbox-close{top:1.25rem;right:1.25rem;}
}

@media (max-width:900px){
  header{padding:0 2rem;}
  nav{gap:1.5rem;}
}

@media (max-width:768px){
  header{
    flex-direction:column;
    justify-content:center;
    gap:1rem;
    padding:1.5rem 1rem;
  }
  nav{gap:1.25rem;}
}

@media (max-width:560px){
  .stories-grid{grid-template-columns:1fr;}
}

.grid-2 aside .section:first-child { margin-top: 0; }
.card p { margin: 0; }

/* Lead spacing when multiple lead paragraphs appear back-to-back */
.lead + .lead,
.kicker + .lead,
.lead + .kicker {
  margin-top: 1rem;
}

/* Back link (used on story detail pages) */
.back-link {
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--text);
  text-decoration: none;
  position: relative;
}

.back-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.back-link:hover::after {
  transform: scaleX(1);
}

/* Back link states */
.back-link,
.back-link:link,
.back-link:visited,
.back-link:hover,
.back-link:active {
  color: var(--text);
}
/* Story content text */
.grid-2 p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: none;
}
.grid-2 .lead {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  max-width: none;
}

.story-lead {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  max-width: none;
}
.story-lead + .story-lead {
  margin-top: 1.25rem;
}

/* ---------- Contact Layout ---------- */
/* ---------- Contact Page ---------- */

.contact-centered {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center; /* hard-center all children on the same axis */
}

.contact-centered .hero-image {
  display: block;
  margin: 0 auto 2rem;
}

/* Contact info group */
.contact-group {
  margin-top: 2rem;
  width: 100%;
  max-width: 520px;
  text-align: center;
}

.contact-group p {
  margin: 0;
  line-height: 1.0;   /* 1.0 is too tight and looks mis-registered */
  color: var(--muted);
}

.contact-group p + p {
  margin-top: 0.25rem;
}

.contact-name {
  font-weight: 500;
  color: var(--text);
}

.contact-centered .hero-image {
  border: none;
}
/* Contact: prevent .back-link from adding extra vertical spacing */
.contact-group .back-link {
  margin-top: 0; /* overrides the global back-link margin */
}

/* Contact: single-spaced grouping */
.contact-group p {
  line-height: 1.25;
}

.contact-group p + p {
  margin-top: -0.5rem;
}

/* Contact: force tight single-spaced stack */
.contact-group p {
  margin: 0 !important;
  line-height: 1.5 !important;
}

.contact-group p + p {
  margin-top: 0.2rem !important;
}

/* Contact: neutralize back-link spacing + inline-block behavior */
.contact-group a.back-link {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep underline behavior but don’t push spacing */
.contact-group a.back-link::after {
  bottom: -2px;
}

/* Contact page: tighten space below h1 */
.contact-centered h1 {
  margin-bottom: 1rem !important;
}