/*
 * UnderConstructionPage
 * North by Colin theme CSS
 * Based on the WebFactory Ltd Light Bulb theme scaffold
 */

:root {
  --ink: #1F2629;
  --bone: #EDE7DC;
  --bone-dim: rgba(237, 231, 220, 0.82);
  --bone-faint: rgba(237, 231, 220, 0.55);
}

* { box-sizing: border-box; }

html {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  padding: 0;
  margin: 0;
  min-height: 100%;
  color: var(--bone);
  /* Fallback background: the wave sits on the body too, so if the fixed
     layer ever comes up short (e.g. iOS Safari toolbar resize), the gap is
     filled by the same image rather than a flat colour. */
  background-color: var(--ink);
  background-image: url('hero-wave.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Full-bleed wave background ----
   Fixed positioning with dynamic viewport height (dvh) so it always fills
   the CURRENT visible area on mobile, even as Safari's toolbars show/hide.
   Oversized on all sides so the drift animation or a viewport resize can
   never expose an edge. */
.nbc-bg {
  position: fixed;
  top: -3%;
  left: -3%;
  width: 106%;
  height: 106%;
  height: 106dvh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
  /* very slow, gentle drift so it feels alive without being distracting */
  animation: nbc-drift 30s ease-in-out infinite alternate;
  transform-origin: center;
  will-change: transform;
}
@keyframes nbc-drift {
  from { transform: scale(1.03); }
  to   { transform: scale(1.09); }
}

/* dark scrim for legibility — also oversized to cover any edge */
.nbc-scrim {
  position: fixed;
  top: -3%;
  left: -3%;
  width: 106%;
  height: 106%;
  height: 106dvh;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(31, 38, 41, 0.55) 0%,
      rgba(31, 38, 41, 0.38) 40%,
      rgba(31, 38, 41, 0.48) 100%);
}

/* ---- Centre stage ---- */
.nbc-stage {
  position: relative;
  z-index: 2;
  min-height: 100vh;   /* fallback for old browsers */
  min-height: 100dvh;  /* tracks the live viewport on mobile */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.nbc-inner {
  text-align: center;
  max-width: 640px;
}

/* contour mark */
.nbc-mark {
  margin-bottom: 26px;
}
.nbc-mark svg {
  width: 76px;
  height: 76px;
}

/* wordmark */
.nbc-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 68px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: 0;
}

/* rule */
.nbc-rule {
  width: 50px;
  height: 1px;
  background: var(--bone);
  opacity: 0.5;
  margin: 30px auto;
}

/* message */
.nbc-content {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--bone-dim);
  max-width: 540px;
  margin: 0 auto;
}
.nbc-content p { margin: 0 0 10px; }
.nbc-content p:last-child { margin-bottom: 0; }
/* the plugin lets you add a plain (non-italic) line; this keeps any link readable */
.nbc-content a {
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid var(--bone-faint);
  padding-bottom: 1px;
  font-style: normal;
  transition: border-color 0.25s ease;
}
.nbc-content a:hover { border-color: var(--bone); }

/* ---- Social icons ---- */
.nbc-social {
  margin-top: 40px;
  text-align: center;
}
.nbc-social a {
  display: inline-block;
  margin: 0 12px;
  color: var(--bone-dim);
  transition: color 0.25s ease, transform 0.25s ease;
}
.nbc-social a:hover {
  color: var(--bone);
  transform: translateY(-2px);
}
.nbc-social a i {
  font-size: 22px;
}
/* if the plugin outputs SV/img icons instead of font icons */
.nbc-social a img,
.nbc-social a svg {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}

/* ---- Studio coordinate ---- */
.nbc-coord {
  position: fixed;
  bottom: 22px;
  right: 26px;
  z-index: 3;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--bone-faint);
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
  .nbc-name { font-size: 46px; }
  .nbc-content { font-size: 19px; }
  .nbc-mark svg { width: 62px; height: 62px; }
  .nbc-rule { margin: 24px auto; }
  .nbc-coord { bottom: 16px; right: 18px; font-size: 10px; }
}

@media (max-width: 400px) {
  .nbc-name { font-size: 38px; }
}