/* Cebulski Construction — beta demo
   Palette and type follow the existing site: #333 header grey, Arial. */

:root{
  --ink:#333333;        /* header grey — now the whole page */
  --ink-deep:#282828;   /* recessed stage behind a slide */
  --ink-edge:#454545;   /* hairlines */
  --white:#ffffff;
  --mute:#b4b0aa;       /* warm-biased grey for secondary text */
  --amber:#d2952f;      /* single accent: active nav, hover */
  --font:Arial, "Helvetica Neue", Helvetica, sans-serif;
}

*{ box-sizing:border-box; }

/* Page frame: header / stage / footer, stage takes whatever is left. */
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:var(--ink);
  color:var(--white);
  font-family:var(--font);
  line-height:1.6;
}

img{ max-width:100%; }
[hidden]{ display:none !important; }

/* ---------- header ---------- */
.site-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.5rem 1.25rem;
  padding:.85rem 1.25rem;
  background:var(--ink);
  border-bottom:1px solid var(--ink-edge);
}
.wordmark{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  text-decoration:none;
  color:var(--white);
}
.wordmark .name{ font-size:1.3rem; font-weight:700; letter-spacing:.055em; }
.wordmark .est{
  margin-top:.15rem;
  font-size:.6rem; font-weight:400; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mute);
}

.site-nav{ display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .3rem; }
.site-nav a{
  padding:.4rem .6rem;
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--white); text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.site-nav a:hover{ color:var(--amber); }
.site-nav a[aria-current="page"]{ color:var(--amber); border-bottom-color:var(--amber); }

:is(.site-nav a, .wordmark, .arrow, .thumbs button, a):focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

/* ---------- stage ---------- */
.stage{
  min-height:0;              /* lets the photo shrink inside the grid row */
  display:grid;
}
.view{ min-height:0; }

/* HOME: the photograph fills the stage, never cropped.
   Whatever the aspect ratio leaves over stays header grey. */
.view-home{ padding:0; }
.view-home img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

/* GALLERY + text panels share a centered column */
.view-gallery,
.view-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  padding:1.25rem;
  text-align:center;
}
.view h2{
  margin:0;
  font-size:1.55rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
}
.count{
  margin:0;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute); font-variant-numeric:tabular-nums;
}
.hint{
  margin:0;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute);
}

/* slide viewer */
/* 685px is the true pixel width of the widest photo he has —
   sizing the frame past it would only upscale and soften them. */
.frame{
  position:relative;
  margin:0;
  width:min(100%, 685px);
  aspect-ratio:685 / 375;
  max-height:58vh;
  background:var(--ink-deep);
  border:1px solid var(--ink-edge);
}
.frame > img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
  transition:opacity .28s ease;
}
.frame > img.fading{ opacity:0; }

.arrow{
  position:absolute; top:50%;
  transform:translateY(-50%);
  width:3rem; height:3.75rem;
  display:grid; place-items:center;
  border:0; cursor:pointer;
  background:rgba(0,0,0,.42);
  color:var(--white);
  font-size:2rem; line-height:1;
  transition:background-color .15s ease, color .15s ease;
}
.arrow:hover{ background:rgba(0,0,0,.72); color:var(--amber); }
.arrow.prev{ left:0; }
.arrow.next{ right:0; }

/* thumbnails */
.thumbs{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.4rem;
  margin:0; padding:0;
  list-style:none;
  max-width:68rem;
}
.thumbs button{
  width:4.5rem; height:2.6rem;
  padding:0; cursor:pointer;
  border:1px solid var(--ink-edge);
  background:var(--ink-deep);
  opacity:.5;
  transition:opacity .15s ease, border-color .15s ease;
}
.thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumbs button:hover{ opacity:.85; }
.thumbs button[aria-current="true"]{ opacity:1; border-color:var(--amber); }

/* about / contact */
.prose{ max-width:38rem; }
.prose p{ margin:0 0 1rem; }
.prose .tag{ color:var(--mute); }

.offices{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr));
  gap:1.25rem;
  margin:0;
  width:100%; max-width:46rem;
}
.office dt{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute);
}
.office dd{
  margin:.15rem 0 0;
  font-size:1.1rem; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.office .email{ font-size:.92rem; }
.office a{ color:var(--white); text-decoration:none; }
.office a:hover{ color:var(--amber); }

/* ---------- footer ---------- */
.site-footer{
  padding:1rem 1.25rem;
  text-align:center;
  font-size:.78rem;
  color:var(--mute);
  background:var(--ink);
  border-top:1px solid var(--ink-edge);
}
.site-footer p{ margin:0; }
.demo-note{
  margin-top:.35rem;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  opacity:.75;
}

/* ---------- narrow screens ---------- */
@media (max-width:600px){
  .site-header{ justify-content:center; text-align:center; }
  .wordmark{ align-items:center; }
  .site-nav{ justify-content:center; }
  .arrow{ width:2.5rem; height:3rem; font-size:1.6rem; }
  .thumbs button{ width:3.4rem; height:2rem; }
  .frame{ max-height:50vh; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; }
}