/* Landing page. Standalone: it does not load the dashboard stylesheet. */

:root {
  --ink: #1B1713;         /* espresso */
  --paper: #EAE3D6;       /* plaster — 78% of the site */
  --limewash: #C7BCA8;
  --muted: #7A6F60;
  --accent: #A8823F;      /* brass */
  --clay: #9A6551;        /* editorial emphasis in headlines only */
  --line: #D8CFBE;
  --r: 2px;
  --display: "Bodoni Moda", Georgia, serif;
  --body: Archivo, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Typography belongs to every page that loads this sheet - the landing page,
   the login page and a client's shared moodboard. Scoping it to .landing left
   the other two falling back to the browser's default serif. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

/* --- nav / footer --- */
.ss-nav, .ss-foot {
  position: relative; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 32px;
}
.ss-nav { position: fixed; top: 0; left: 0; right: 0; }
.ss-brand {
  font-family: var(--mono); font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; font-size: 11px;
}
.ss-link {
  color: var(--ink); text-decoration: none; font-size: 12.5px;
  border: 1px solid rgba(27,23,19,.26); border-radius: 999px;
  padding: 8px 17px; background: rgba(245,241,232,.7);
  backdrop-filter: blur(6px);
  transition: background .22s cubic-bezier(.22,.61,.36,1),
              border-color .22s cubic-bezier(.22,.61,.36,1);
}
.ss-link:hover { background: #F7F3EA; border-color: rgba(27,23,19,.5); }
.ss-foot { border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* --- the scroll stage --- */
.ss-stage { position: relative; width: 100%; height: 350vh; }
.ss-sticky {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  overflow: hidden;
}

/* --- centre copy --- */
.ss-copy, .ss-empty {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 0 6vw;
  pointer-events: none;
}
.ss-copy { opacity: 0; }
.ss-copy h1, .ss-empty h1 {
  margin: 0;
  font-family: var(--display);
  font-size: 5.4vw;
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.022em;
  white-space: pre-line;
}
/* one clay word per headline, never two */
.ss-copy h1 em, .ss-empty h1 em { font-style: italic; color: var(--clay); }
.ss-copy p, .ss-empty p {
  margin: 1.2vw 0 0;
  max-width: 42ch;
  font-size: 1.15vw;
  line-height: 1.6;
  color: var(--muted);
}
.ss-cta {
  pointer-events: auto;
  margin-top: 2vw; padding: 12px 28px;
  background: var(--ink); color: #F5F1E8; text-decoration: none;
  border-radius: 999px; font-size: 13.5px;
  transition: background .22s cubic-bezier(.22,.61,.36,1);
}
.ss-cta:hover { background: var(--accent); }
.ss-empty { opacity: 1; }
.ss-note { pointer-events: auto; font-size: 14px; margin-top: 18px; }
.ss-note a { color: var(--accent); }

/* --- the photographs --- */
.ss-cards { position: absolute; inset: 0; z-index: 10; }
.ss-card {
  position: absolute; left: 50%; top: 50%;
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: #ddd;
  will-change: transform;
  box-shadow: 0 14px 34px rgba(27, 23, 19, .16);
  /* the first paint before JS runs: clustered and centred */
  transform: translate(-50%, -50%) scale(.82);
}
.ss-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none;
}
.ss-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 12px 8px;
  background: linear-gradient(to top, rgba(15,12,9,.62), transparent);
  color: #F5F1E8; font-family: var(--mono); font-size: 10px;
  letter-spacing: .13em; text-transform: uppercase;
  opacity: 0; transition: opacity .2s;
}
.ss-card:hover figcaption { opacity: 1; }

/* --- scroll hint --- */
.ss-hint {
  position: absolute; left: 0; right: 0; bottom: 3vh; z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink); pointer-events: none;
}
.ss-hint svg { animation: ss-bounce 1.6s infinite; }
@keyframes ss-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* --- touch screens: taller stage, bigger type, column layout --- */
@media (pointer: coarse), (max-width: 700px) {
  .ss-stage { height: 420vh; }
  .ss-copy h1, .ss-empty h1 { font-size: 9vw; }
  .ss-copy p, .ss-empty p { font-size: 3.8vw; margin-top: 3vw; }

  /* Smaller cards in two columns, with the rows pushed away from the middle
     so the headline lands in a clear band rather than on top of a photo. */
  .ss-card { border-radius: 3.5vw; width: 38vw !important; height: 15vh !important; }

  /* Belt and braces: the copy sits above the photos and carries its own soft
     backdrop, so it stays readable whatever the photographs turn out to be. */
  .ss-copy, .ss-empty { z-index: 15; }
  .ss-copy h1, .ss-empty h1,
  .ss-copy p, .ss-empty p {
    background: rgba(236, 236, 235, .82);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    padding: 6px 12px;
  }
  .ss-copy p, .ss-empty p { padding: 8px 14px; }

  .ss-nav, .ss-foot { padding: 16px 20px; }
}

/* --- someone who asked for less motion gets the finished arrangement --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ss-stage { height: 100vh; }
  .ss-copy { opacity: 1; }
  .ss-hint { display: none; }
  .ss-hint svg { animation: none; }
}