/*
 * Maison — production stylesheet for the wardrobe surface.
 *
 * Direction: docs/design/Household Maison Design System/.
 * Single cream-paper surface, serif throughout (Cormorant Garamond),
 * hairline structure, editorial photography as principal visual content.
 *
 * SCOPING: every Maison token is defined inside `.m-shell` so the rest
 * of the application (which uses the Voyager Midnight palette) is
 * unaffected. The wardrobe-landing view wraps itself in `.m-shell` to
 * inherit Maison and the cream surface.
 *
 * The `.m-*` component classes also only apply inside `.m-shell` — no
 * accidental cross-contamination if other views happen to use these
 * class names later.
 */

.m-shell {
  /* ── Surfaces ─────────────────────────────────────────────────── */
  --surface-bg:       oklch(0.94 0.008 85);
  --surface-mute:     oklch(0.91 0.008 80);
  --surface-panel:    oklch(0.97 0.005 85);
  --surface-white:    oklch(0.99 0.003 85);
  --surface-image-bg: oklch(0.88 0.008 80);

  /* ── Ink ──────────────────────────────────────────────────────── */
  --ink-1:        oklch(0.18 0.005 80);
  --ink-2:        oklch(0.40 0.005 80);
  --ink-3:        oklch(0.62 0.005 80);
  --ink-on-image: oklch(1 0 0);

  /* ── Hairlines (the only structural device) ──────────────────── */
  --rule-hair:   rgba(20, 20, 20, 0.10);
  --rule-soft:   rgba(20, 20, 20, 0.06);
  --rule-strong: rgba(20, 20, 20, 0.40);
  --rule-image:  rgba(255, 255, 255, 0.85);

  /* ── Shadow (reserved for modals only) ───────────────────────── */
  --shadow-modal: 0 24px 64px -16px rgba(20, 20, 20, 0.18),
                  0 4px 16px -8px rgba(20, 20, 20, 0.10);

  /* ── Radii ───────────────────────────────────────────────────── */
  --radius-tile:   0px;
  --radius-button: 2px;

  /* ── Spacing ─────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* ── Type ────────────────────────────────────────────────────── */
  --serif-display: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --serif-body:    "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --serif-sc:      "Cormorant SC", "Cormorant Garamond", Garamond, serif;

  /* ── Motion ──────────────────────────────────────────────────── */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-quick:  150ms;
  --dur-normal: 240ms;
  --dur-modal:  320ms;

  /* ── Surface paint ───────────────────────────────────────────── */
  background: var(--surface-bg);
  color: var(--ink-1);
  font-family: var(--serif-body);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100%;
}

/* ── Selection on the cream surface ───────────────────────────── */
.m-shell ::selection { background: var(--ink-1); color: var(--surface-bg); }

/* ── Typography (sentence case only; no uppercase, no caps tracking) ─ */
.m-shell .m-display { font-family: var(--serif-display); font-weight: 400; font-size: 80px; letter-spacing: -0.005em; line-height: 1.05; color: var(--ink-1); margin: 0; }
.m-shell .m-h1      { font-family: var(--serif-display); font-weight: 400; font-size: 56px; letter-spacing: -0.005em; line-height: 1.1;  color: var(--ink-1); margin: 0; }
.m-shell .m-h2      { font-family: var(--serif-display); font-weight: 400; font-size: 40px; line-height: 1.15; margin: 0; }
.m-shell .m-h3      { font-family: var(--serif-display); font-weight: 500; font-size: 28px; line-height: 1.2;  margin: 0; }
.m-shell .m-title   { font-family: var(--serif-display); font-weight: 500; font-size: 22px; line-height: 1.25; margin: 0; }
.m-shell .m-detail  { font-family: var(--serif-body);    font-weight: 400; font-size: 18px; line-height: 1.5;  color: var(--ink-1); margin: 0; }
.m-shell .m-body    { font-family: var(--serif-body);    font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--ink-1); margin: 0; }
.m-shell .m-caption { font-family: var(--serif-body);    font-weight: 400; font-size: 13px; line-height: 1.4;  color: var(--ink-2); margin: 0; }
.m-shell .m-italic  { font-style: italic; }
.m-shell .m-sc      { font-family: var(--serif-sc); font-weight: 500; letter-spacing: 0.02em; }
.m-shell .m-nums    { font-variant-numeric: tabular-nums; }

/* ── Material Symbols default (weight 300, FILL 0) ───────────────── */
.m-shell .material-symbols-outlined {
  font-weight: normal;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 18;
}

/* ── Layout ─────────────────────────────────────────────────────── */
.m-shell {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.m-shell .m-page {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(320px, 360px) 1fr;
  min-height: 0; /* allow scroll inside the right pane */
}

/* ── Left nav column (Dior-style) ───────────────────────────────── */
.m-shell .m-nav-col {
  background: var(--surface-mute);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border-right: 1px solid var(--rule-hair);
}

.m-shell .m-crumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--serif-body);
  font-size: 16px;
  color: var(--ink-1);
  background: transparent;
  border: 0;
  padding: var(--space-2) 0;
  cursor: pointer;
  text-align: left;
}

.m-shell .m-crumb .material-symbols-outlined { font-size: 18px; color: var(--ink-2); }

.m-shell .m-hair {
  border: 0;
  border-top: 1px solid var(--rule-hair);
  margin: var(--space-3) 0;
}

.m-shell .m-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.m-shell .m-nav-link {
  font-family: var(--serif-body);
  font-size: 16px;
  color: var(--ink-1);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  align-self: flex-start;
  padding-bottom: 3px;
  background: transparent;
  border: 0;
}

.m-shell .m-nav-link:hover { border-bottom: 1px solid var(--rule-hair); }

.m-shell .m-nav-link.is-active {
  border-bottom: 1px solid var(--rule-strong);
}

.m-shell .m-nav-link.is-active::after {
  content: "•";
  position: absolute;
  left: calc(100% + 10px);
  top: -2px;
  color: var(--ink-1);
  font-size: 18px;
}

/* ── Right grid column ──────────────────────────────────────────── */
.m-shell .m-grid-col {
  background: var(--surface-panel);
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  min-height: 100%;
}

/* ── Editorial tile ─────────────────────────────────────────────── */
.m-shell .m-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-tile);
  background: var(--surface-image-bg);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  cursor: pointer;
  min-height: 280px;
}

.m-shell .m-tile__img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform var(--dur-normal) var(--ease-soft);
}

.m-shell .m-tile:hover .m-tile__img { transform: scale(1.02); }

.m-shell .m-tile__caption {
  position: absolute;
  left: 0; right: 0; bottom: var(--space-5);
  text-align: center;
  font-family: var(--serif-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-on-image);
  pointer-events: none;
}

.m-shell .m-tile__caption-text {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule-image);
}

.m-shell .m-tile__meta {
  position: absolute;
  top: var(--space-3); left: var(--space-3);
  font-family: var(--serif-body);
  font-size: 13px;
  color: var(--ink-on-image);
  font-style: italic;
  opacity: 0.85;
  pointer-events: none;
}

/* ── CTAs ───────────────────────────────────────────────────────── */
.m-shell .m-cta {
  display: inline-block;
  font-family: var(--serif-body);
  font-size: 16px;
  color: var(--ink-1);
  background: transparent;
  border: 0;
  padding: 4px 0;
  border-bottom: 1px solid var(--ink-1);
  cursor: pointer;
  transition: border-color var(--dur-quick) var(--ease-soft);
  white-space: nowrap;
}
.m-shell .m-cta:hover { border-bottom-color: var(--ink-3); }

.m-shell .m-cta--bordered {
  border: 1px solid var(--ink-1);
  border-radius: var(--radius-button);
  padding: 12px 32px;
  background: transparent;
  color: var(--ink-1);
  font-size: 16px;
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-soft), color var(--dur-quick) var(--ease-soft);
  white-space: nowrap;
  font-family: var(--serif-body);
}
.m-shell .m-cta--bordered:hover {
  background: var(--ink-1);
  color: var(--surface-bg);
}

/* ── Wardrobe-landing specific patterns ─────────────────────────── */
.m-shell .m-page-head {
  padding: var(--space-6) var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--rule-hair);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
}

.m-shell .m-page-head__title { display: flex; flex-direction: column; gap: var(--space-2); }
.m-shell .m-page-head__deck   { color: var(--ink-2); font-style: italic; font-size: 18px; line-height: 1.45; max-width: 56ch; }
.m-shell .m-page-head__actions { display: flex; gap: var(--space-5); align-items: center; }

/* ── Mobile reflow ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .m-shell .m-page { grid-template-columns: 1fr; }
  .m-shell .m-nav-col { padding: var(--space-4); border-right: 0; border-bottom: 1px solid var(--rule-hair); }
  .m-shell .m-nav-list { flex-direction: row; gap: var(--space-4); flex-wrap: wrap; overflow-x: auto; }
  .m-shell .m-grid-col { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(220px, auto)); }
  .m-shell .m-page-head { flex-direction: column; align-items: flex-start; padding: var(--space-5) var(--space-4); }
  .m-shell .m-page-head__actions { flex-wrap: wrap; }
  .m-shell .m-display { font-size: 48px; }
  .m-shell .m-h1 { font-size: 36px; }
}