/* ============================================================
   Silverstream Atelier — site-wide layout + responsive + image styling
   Loaded by every page after colors_and_type.css
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--color-cream); color: var(--color-ink); }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
::selection { background: var(--color-rose); color: var(--color-cream); }
a { color: inherit; }
img { display: block; }

/* ---- photography frames (replaces the Claude Design <image-slot> editor) ---- */
.ss-img { position: relative; overflow: hidden; background: var(--color-stone);
  background-image: linear-gradient(150deg, var(--color-stone-light) 0%, var(--color-stone) 70%, var(--color-stone-dark) 100%); }
.ss-img.on-forest { background: var(--color-forest-mid);
  background-image: linear-gradient(150deg, var(--color-forest-mid) 0%, var(--color-forest) 100%); }
.ss-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-img-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-style: italic; font-size: 11px; color: var(--color-ink-light);
  border: 1px solid var(--color-stone-dark); }
.ss-img.on-forest .ss-img-empty { color: var(--color-sage); border-color: rgba(194,194,196,0.3); }

/* ---- nav: wordmark left · links centered · icons right (desktop) ---- */
.ss-nav-word { grid-column: 1; justify-self: start; }
.ss-nav-links { grid-column: 2; justify-self: center; }
.ss-nav-icons { grid-column: 3; justify-self: end; }
.ss-nav-menu { grid-column: 1; justify-self: start; display: none; }

/* ---- responsive ---- */
@media (max-width: 880px) {
  .ss-nav-links { display: none !important; }
  .ss-nav-menu { display: inline-flex !important; }
  .ss-nav-word { grid-column: 2 !important; justify-self: center !important; }
  .ss-nav-icons { grid-column: 3 !important; }
  .ss-nav-inner { grid-template-columns: 1fr auto 1fr !important; padding: 16px 22px !important; }
  .ss-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
  .ss-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .ss-split { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ss-pad { padding-left: 22px !important; padding-right: 22px !important; }
  .ss-hero { min-height: 480px !important; }
  .ss-display-xl { font-size: clamp(38px, 11vw, 60px) !important; }
}
@media (max-width: 560px) {
  .ss-footer-grid { grid-template-columns: 1fr !important; }
  .ss-grid-3 { grid-template-columns: 1fr !important; }
}

/* fade-rise on scroll (slow, considered) — progressive enhancement only.
   Content is visible by default; the hidden start state is armed by JS
   (html.js-rise) so a frozen observer/transition can never blank the page. */
.ss-rise { opacity: 1; transform: none; }
html.js-rise .ss-rise { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease-luxe), transform 700ms var(--ease-luxe); }
html.js-rise .ss-rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ss-rise, html.js-rise .ss-rise { opacity: 1 !important; transform: none !important; }
}

/* form fields — rose focus per brand hover logic */
input:focus, textarea:focus, select:focus { border-color: var(--color-rose) !important; }
input::placeholder, textarea::placeholder { color: var(--color-ink-light); opacity: 0.6; }
@media (max-width: 620px) {
  .ss-field-2 { grid-template-columns: 1fr !important; }
}