/* Concept II — The Sunroom: airy conservatory, linen, morning light. */
.room-sunroom {
  --bg: #f7f4ec;
  --ink: #3a352c;
  --muted: #8a8172;
  --focus: #cf9a4e;
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  color: var(--ink);
  background:
    linear-gradient(180deg, #fffdf8 0%, #f7f4ec 30%),
    /* soft light streaming from the upper-left, like a glass wall */
    linear-gradient(115deg, rgba(255, 246, 224, 0.9) 0%, rgba(255, 246, 224, 0) 42%);
  background-blend-mode: normal;
  position: relative;
}

/* Faint muntin/glass-roof grid to suggest a conservatory ceiling. */
.room-sunroom::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(90deg, rgba(180, 170, 150, 0.09) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(180, 170, 150, 0.07) 0 1px, transparent 1px 96px);
}

.room-sunroom > * {
  position: relative;
  z-index: 1;
}

.room-sunroom .room-nav a {
  color: var(--ink);
}

.room-intro {
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1rem, 3vw, 2rem);
}

.room-intro .eyebrow {
  color: var(--focus);
  letter-spacing: 0.32em;
}

.room-intro h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  margin: 0.5rem 0 0.6rem;
}

.room-intro__lead {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--muted);
  font-style: italic;
  font-size: 1.1rem;
}

.conservatory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 7vw, 6rem);
  align-items: start;
}

.room-sunroom .work {
  text-align: center;
}

/* Generous white mat + slim white frame, like sunlit paper. */
.room-sunroom .work__btn {
  cursor: zoom-in;
  background: #ffffff;
  padding: clamp(14px, 2.4vw, 30px);
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 22px 40px -26px rgba(120, 100, 60, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.room-sunroom .work__btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 50px -28px rgba(120, 100, 60, 0.6);
}

.room-sunroom .work__img {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.room-sunroom .work__cap {
  margin-top: 0.9rem;
}

.room-sunroom .work__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.room-sunroom .work__meta {
  color: var(--muted);
}