/* =============================================================
   MINDFUL ECHO — studio page styles (the colophon ground)
   Near-monochrome, generous whitespace. Each brand card carries a
   whisper of its own world; nothing else on this page does.
   Loaded only on /. Brand worlds never bleed.
   ============================================================= */

[data-brand="studio"] {
    --studio-paper: #FAF9F6;
    --studio-ink: #26232F;
    --studio-ink-mid: #5F5A6B;
    --studio-line: #E7E3DA;
}

body[data-brand="studio"] { background: var(--studio-paper); }

/* --- Hero: mark + thesis --- */
.studio-hero {
    text-align: center;
    padding: 96px 0 64px;
}
.studio-hero__mark { margin-bottom: 2rem; color: var(--studio-ink); }
.studio-hero h1 {
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(2rem, 4.5vw, 3rem);
    color: var(--studio-ink);
    margin-bottom: 1.25rem;
}
.studio-hero__thesis {
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.2rem;
    line-height: 1.65;
    color: var(--studio-ink-mid);
}

/* --- Brand cards --- */
.brand-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 24px 0 64px;
}
.brand-card {
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    padding: 2rem;
    min-height: 240px;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
a.brand-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(38, 35, 47, 0.14);
}
.brand-card__name {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1.5rem;
    margin-bottom: 0.6rem;
}
.brand-card__line { line-height: 1.55; flex-grow: 1; }
.brand-card__status {
    margin-top: 1.25rem;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Pause — a whisper of the indigo night */
.brand-card--pause {
    background: radial-gradient(ellipse 320px 200px at 85% -10%, #2A1B45, transparent 60%), #160E22;
}
.brand-card--pause .brand-card__name { color: #F4F1F8; }
.brand-card--pause .brand-card__line { color: #B9ABCF; }
.brand-card--pause .brand-card__status { color: #CDBAFF; }

/* Organise My Days — a whisper of calm blue on paper */
.brand-card--omd {
    background: linear-gradient(180deg, #EFF5FC 0%, #FFFFFF 100%);
    border: 1px solid #DCE7F4;
}
.brand-card--omd .brand-card__name { color: #1D1D1F; }
.brand-card--omd .brand-card__line { color: #55555C; }
.brand-card--omd .brand-card__status { color: #2F6FB5; }

/* Limina Oblita — a whisper of the threshold: warm brown-black ground
   with an ember glow rising from the sill (palette from
   docs/limina_oblita_brand_assets/; all pairs AA on #150D09). */
.brand-card--limina {
    background:
        radial-gradient(ellipse 220px 150px at 50% 115%, rgba(201, 123, 67, 0.28), transparent 70%),
        #150D09;
    border: 1px solid rgba(221, 153, 98, 0.3);
}
.brand-card--limina .brand-card__name { color: #EDE0CE; }
.brand-card--limina .brand-card__line { color: #C0A48D; }
.brand-card--limina .brand-card__status { color: #DD9962; }

/* --- Values strip --- */
.studio-values {
    border-top: 1px solid var(--studio-line);
    padding: 64px 0;
}
.studio-values h2 {
    font-family: var(--font-serif, Georgia, serif);
    text-align: center;
    color: var(--studio-ink);
    font-size: 1.6rem;
    margin-bottom: 2rem;
}
.studio-values ul {
    list-style: none;
    padding: 0;
    max-width: 620px;
    margin: 0 auto;
}
.studio-values li {
    padding: 0.7rem 0;
    color: var(--studio-ink-mid);
    font-size: 1.08rem;
    line-height: 1.6;
    text-align: center;
}

/* --- About / colophon --- */
.studio-about {
    border-top: 1px solid var(--studio-line);
    padding: 56px 0 72px;
    text-align: center;
}
.studio-about p {
    max-width: 560px;
    margin: 0 auto 0.9rem;
    color: var(--studio-ink-mid);
    line-height: 1.65;
}
.studio-about a { color: var(--studio-ink); }

@media (max-width: 820px) {
    .brand-cards { grid-template-columns: 1fr; }
}