/* ════════════════════════════════════════════════════════════════
   BLUE MOSS — site styles (MVP, dark)
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,500&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --ink: #0e1a2b;
  --ink-2: #1f2c40;
  --paper: #f4f1ea;
  --moss: #5b7e6e;
  --moss-soft: #94aea3;
  --muted: rgba(244,241,234,0.55);
  --rule: rgba(244,241,234,0.15);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

/* — Layout shell — */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 32px 48px;
}
@media (max-width: 720px) {
  .site { padding: 24px 28px; }
}

/* — Nav — */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.nav-brand {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--paper);
  white-space: nowrap;
}
.nav-links {
  display: flex;
  gap: 36px;
}
@media (max-width: 720px) {
  .nav-links { gap: 22px; }
  .nav-brand { font-size: 16px; }
}

/* Hover underline animation */
.nav-link {
  position: relative;
  color: var(--paper);
  opacity: 0.78;
  padding-bottom: 4px;
  font-weight: 400;
  letter-spacing: 0.005em;
  transition: opacity 240ms ease;
}
.nav-link:hover,
.nav-link.is-active { opacity: 1; }

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--moss-soft);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}

/* — Main — */
.main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
  overflow: visible;
}

/* — Footer — */
.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 12px;
}
.foot a:hover { color: var(--paper); }

/* ════════════════════════════════════════════════════════════════
   MOSSLINE LOGO (V4 final)
   ════════════════════════════════════════════════════════════════ */
.mossline {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: var(--paper);
}
.mossline .blue-moss {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 76px;
  line-height: 1;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  opacity: 0;
  animation: bm-fade-up 0.9s 0.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.mossline .rule-svg {
  width: 240px;
  height: 16px;
  overflow: visible;
  display: block;
}
.mossline .rule-path {
  fill: none;
  stroke: var(--moss-soft);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 212;
  stroke-dashoffset: 212;
  animation: bm-draw 1.6s 0.9s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}
.mossline .rule-dot {
  fill: var(--moss-soft);
  transform-origin: 236px 8px;
  transform: translateY(-140px) scaleY(1);
  opacity: 0;
  animation: bm-ball 1.9s 2.5s cubic-bezier(0.55, 0, 0.6, 0.4) forwards;
}
.mossline .capital {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-top: 10px;
  opacity: 0;
  animation: bm-cap 0.7s 4.0s ease-out forwards;
}

@media (max-width: 520px) {
  .mossline .blue-moss { font-size: 56px; }
  .mossline .rule-svg { width: 180px; }
}

@keyframes bm-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bm-draw {
  from { stroke-dashoffset: 212; }
  to   { stroke-dashoffset: 0; }
}
@keyframes bm-cap { to { opacity: 0.7; } }
@keyframes bm-ball {
  0%   { opacity: 0; transform: translateY(-140px) scaleY(1) scaleX(1);
         animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  10%  { opacity: 1; transform: translateY(-140px) scaleY(1.2) scaleX(0.85);
         animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  42%  { transform: translateY(0) scaleY(0.5) scaleX(1.4);
         animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  62%  { transform: translateY(-22px) scaleY(1.12) scaleX(0.9);
         animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  80%  { transform: translateY(0) scaleY(0.78) scaleX(1.15);
         animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  90%  { transform: translateY(-6px) scaleY(1.04) scaleX(0.98);
         animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  100% { opacity: 1; transform: translateY(0) scaleY(1) scaleX(1); }
}

/* Respect Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  .mossline .blue-moss,
  .mossline .rule-path,
  .mossline .rule-dot,
  .mossline .capital {
    animation: none;
    opacity: 1;
  }
  .mossline .rule-path { stroke-dashoffset: 0; }
  .mossline .rule-dot { transform: translateY(0); }
  .mossline .capital { opacity: 0.7; }
}

/* ════════════════════════════════════════════════════════════════
   SUBPAGE CONTENT (Login, Contact)
   Restrained, single column.
   ════════════════════════════════════════════════════════════════ */
.page {
  max-width: 520px;
  width: 100%;
  text-align: center;
}
.page .eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.page h1 {
  font-family: var(--serif);
  font-size: clamp(48px, 7vw, 72px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: 20px;
}
.page .lede {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  color: rgba(244,241,234,0.75);
  font-weight: 400;
  margin-bottom: 36px;
}
.page .field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  text-align: left;
}
.page label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.page input,
.page textarea {
  background: transparent;
  color: var(--paper);
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
  font-family: var(--sans);
  font-size: 16px;
  outline: none;
  transition: border-color 200ms ease;
  width: 100%;
}
.page input:focus,
.page textarea:focus { border-bottom-color: var(--moss-soft); }
.page textarea { min-height: 96px; resize: vertical; }
.page .btn {
  background: var(--paper);
  color: var(--ink);
  border: none;
  padding: 14px 22px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin-top: 18px;
  width: 100%;
  transition: background 200ms ease;
}
.page .btn:hover { background: #ffffff; }
.page .small {
  margin-top: 20px;
  font-size: 12px;
  color: var(--muted);
}
.page .small a {
  color: var(--moss-soft);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.page .small a:hover { border-bottom-color: var(--moss-soft); }

/* Form error message */
.page .form-error {
  font-size: 13px;
  color: #e08474;
  letter-spacing: 0.005em;
  min-height: 18px;
  text-align: left;
  margin-top: -4px;
  opacity: 0;
  transition: opacity 220ms ease;
}
.page .form-error.show { opacity: 1; }

/* Success message (e.g. after Netlify form submit) */
.page .form-success {
  display: none;
  margin-top: 12px;
  padding: 18px 20px;
  border: 1px solid var(--moss-soft);
  color: var(--paper);
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.005em;
  text-align: center;
}
.page .form-success.show { display: block; }

/* Page-level scroll-in for subpage content */
@media (prefers-reduced-motion: no-preference) {
  .page > * {
    opacity: 0;
    transform: translateY(8px);
    animation: page-fade 700ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
  .page > *:nth-child(1) { animation-delay: 100ms; }
  .page > *:nth-child(2) { animation-delay: 200ms; }
  .page > *:nth-child(3) { animation-delay: 300ms; }
  .page > *:nth-child(4) { animation-delay: 400ms; }
  .page > *:nth-child(5) { animation-delay: 500ms; }
}
@keyframes page-fade {
  to { opacity: 1; transform: translateY(0); }
}