/* ============================================================
   DESIGN CSS — restored verbatim from the approved design bundle.
   This is the custom stylesheet the design shipped alongside its
   inline styles. Every page needs the base; the archive-gallery and
   form rules are used by About and Contact respectively.
   ============================================================ */

html, body { margin: 0; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 2px; }
a:hover { opacity: .78; }

/* ---- Motion ---- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes riseIn { from { transform: translateY(115%); } to { transform: translateY(0); } }
@keyframes blink  { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.cursor { animation: blink 1.05s steps(1) infinite; }
.riseWrap { overflow: hidden; display: block; }
.riseWrap > span { display: block; animation: riseIn .85s cubic-bezier(.16,.84,.44,1) both; }

/* ---- Archive gallery (About) ---- */
.archive-swiper { padding-bottom: 8px; }
.archive-swiper .swiper-slide { height: auto; }
.archive-card {
  position: relative; display: block; aspect-ratio: 3/4; border-radius: 5px;
  overflow: hidden; border: 1px solid #E2D8C6; cursor: zoom-in; background: #FBF7EE;
  transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s; text-decoration: none;
}
.archive-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(18,55,66,.16); opacity: 1; }
.archive-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.archive-card .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px;
  background: linear-gradient(0deg, rgba(27,23,18,.82), rgba(27,23,18,0));
  display: flex; flex-direction: column; gap: 5px;
}
.archive-card .era { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .1em; color: #D9AC5B; }
.archive-card .lab { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .04em; color: #F3EDE1; }
.archive-card .zoom {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(27,23,18,.62); color: #F3EDE1; display: flex; align-items: center;
  justify-content: center; font-size: 15px; opacity: 0; transform: scale(.8); transition: .25s;
}
.archive-card:hover .zoom { opacity: 1; transform: scale(1); }
.archive-nav {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid #1B1712; background: transparent;
  color: #1B1712; font-size: 18px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: .2s;
}
.archive-nav:hover { background: #1B1712; color: #F3EDE1; }
.archive-nav.swiper-button-disabled { opacity: .3; cursor: default; }
.archive-swiper .swiper-pagination { position: static; margin-top: 22px; }
.archive-swiper .swiper-pagination-bullet { background: #CBBFA9; opacity: 1; width: 9px; height: 9px; transition: .3s; }
.archive-swiper .swiper-pagination-bullet-active { background: #123742; width: 26px; border-radius: 5px; }

/* ---- Lightbox theming ---- */
.glightbox-clean .gslide-description { background: #1B1712; }
.glightbox-clean .gslide-title { color: #F3EDE1; font-family: 'Hanken Grotesk', sans-serif; }
.glightbox-clean .gslide-desc { color: #D9AC5B; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }

/* ---- Form fields (Contact) ---- */
.fld {
  width: 100%; font-family: 'Hanken Grotesk', sans-serif; font-size: 16px; color: #1B1712;
  background: #FBF7EE; border: 1px solid #E2D8C6; border-radius: 5px; padding: 14px 16px; outline: none;
}
.fld:focus { border-color: #123742; box-shadow: 0 0 0 3px rgba(18,55,66,.12); }
.fld::placeholder { color: #A89E8E; }

/* ============================================================
   MEDIA BOXES — when a real image is present, drop the striped
   placeholder and show the artifact whole on a clean surface.
   Photographs use cover; product shots / documents use contain
   so nothing is cropped away.
   ============================================================ */
.hc-media.has-img {
  background-image: none !important;
  background-color: var(--paper2);
  overflow: hidden;
  padding: 0;
}
.hc-media.has-img img.hc-img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 10px;
}
.hc-media.has-img.fit-cover img.hc-img { object-fit: cover; padding: 0; }

/* Dark-surface variant keeps product mockups legible */
.hc-media.has-img.on-dark { background-color: var(--blue); }

/* ============================================================
   SCROLL REVEAL — sections ease in as they enter the viewport,
   using the same easing curve as the hero's riseIn.
   Content is visible by default; JS opts in, so no-JS is safe.
   ============================================================ */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* Card / tile hover lift, matching the archive card behaviour */
.hover-lift { transition: transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(18,55,66,.13); opacity: 1; }

/* Media boxes get a subtle zoom on hover */
.hc-media.has-img img.hc-img { transition: transform .5s cubic-bezier(.16,.84,.44,1); }
.hc-media.has-img:hover img.hc-img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hover-lift:hover { transform: none; }
  .hc-media.has-img:hover img.hc-img { transform: none; }
}

/* Header rule spans the full viewport instead of stopping at the 1280px
   content column — otherwise it reads as a stray line on wide screens. */
.site-headwrap { border-bottom: 2px solid var(--ink); }
.site-headwrap nav { border-bottom: none !important; }