/* Skylab Studios — website UI kit shared styles.
   Pairs with ../../colors_and_type.css for the token + type foundation. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-ink);
  color: var(--color-cream);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Eyebrow — mono, gold, uppercase, tracked */
.sky-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.8;
}

/* Mono detail line */
.sky-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Primary button — gold outline (matches ghost) */
.sky-btn-primary {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--color-gold);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 14px 30px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: border-color .2s, color .2s;
}
.sky-btn-primary:hover { border-color: var(--color-gold); color: var(--color-gold-light); }

/* Ghost button — gold outline */
.sky-btn-ghost {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--color-gold);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 14px 30px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}
.sky-btn-ghost:hover { border-color: var(--color-gold); color: var(--color-gold-light); }

@keyframes skyFade { from { opacity: 0; } to { opacity: 1; } }

::selection { background: rgba(184,146,74,0.3); color: var(--color-cream); }

/* Headline accent: italic phrases inside headings use DM Serif Display Italic (Young Serif has no italic). */
h1 em,h2 em,h3 em,blockquote em{font-family:var(--font-accent,'DM Serif Display',Georgia,serif);font-style:italic;font-size:1.06em;}

/* Phone layout — overrides inline desktop values */
@media (max-width: 760px){
  [data-screen-label],section,header,footer{padding-left:20px!important;padding-right:20px!important}
  [data-m="stack"]{grid-template-columns:minmax(0,1fr)!important;gap:14px 0!important}
  [data-m="stack"]>*{grid-column:auto!important}
  [data-m="grid2"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important}
  [data-m="era"]{grid-template-columns:52px 1px minmax(0,1fr)!important;gap:0 18px!important}
  [data-m="era"] [data-m="stack"]{gap:24px!important}
  [data-m="hero"]{padding-top:72px!important;padding-bottom:64px!important}
  article{padding:32px 22px 28px!important}
  /* dim photos behind text on phones */
  header [style*="background-image"],[data-section="The Rooms"] [style*="background-image"]{filter:brightness(.6)!important}
  header[data-screen-label="Hero"] [style*="background-image"]{filter:brightness(.7) saturate(1.04)!important}
}