/* Guide layout only. Identity and component styles are shared with the site. */
.guide-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 100px; }
.guide-home { font-size: var(--co-text-small); }
.guide-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; padding-top: 40px; padding-bottom: 64px; }
.guide-intro h1 { font-size: clamp(2.5rem, 4.6vw, 4rem); }
.guide-intro .lead { margin-top: 24px; max-width: 42ch; }
.guide-label { font-size: 13px; font-weight: 600; color: var(--co-brass-ink); margin-bottom: 16px; }
.guide-character { margin: 0; }
.guide-character img { width: 100%; height: auto; }
.guide-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 30px; }
.guide-nav a { font-size: 14px; padding: 8px 0; text-decoration: underline; text-underline-offset: 5px; }
.identity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.identity-stage { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--co-ivory); border-radius: var(--radius); margin-bottom: 24px; padding: 24px; }
.identity-character { width: 180px; height: auto; }
.identity-sample h3 { margin-bottom: 10px; }
.identity-sample p { color: var(--muted); font-size: 14px; }
.identity-sample > a { display: inline-block; margin-top: 16px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.identity-stage .brand-word { font-size: 26px; }
.icon-sizes { flex-direction: row; align-items: center; gap: 24px; }
.identity-dark { display: flex; align-items: center; gap: 48px; background: var(--co-forest); border-radius: var(--radius); padding: 32px; margin-top: 40px; }
.identity-dark .brand-word { color: var(--co-ivory); }
.identity-dark img { background: var(--co-paper); padding: 3px; border-radius: 16px; }
.identity-dark p { color: var(--co-on-dark); font-size: 14px; max-width: 48ch; }
.palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.swatch { min-height: 190px; padding: 24px 20px; border-radius: var(--radius); display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--co-line); }
.swatch b { font-size: 18px; margin-bottom: 8px; }
.swatch span { font-size: 13px; }
.swatch small { font-size: 11px; margin-top: 8px; }
.swatch--forest { background: var(--co-forest); color: var(--co-ivory); }
.swatch--ivory { background: var(--co-ivory); }
.swatch--paper { background: var(--co-paper); }
.swatch--brass { background: var(--co-brass); color: #14241e; }
.swatch--ink { background: var(--co-ink); color: var(--co-ivory); }
.guide-note { font-size: 13px; color: var(--muted); margin-top: 24px; max-width: 80ch; }
.type-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.type-display { font-family: var(--co-font-display); font-size: clamp(2rem, 3.3vw, 3rem); line-height: 1.2; }
.type-body { border-block: 1px solid var(--border); padding-block: 24px; margin-block: 24px; }
.type-body h3 { font-size: 22px; margin-bottom: 8px; }
.type-body > p:not(.guide-label) { color: var(--muted); }
.type-numbers { margin-top: 20px; font-size: 24px; font-variant-numeric: tabular-nums; }
.type-specimen code { font-family: var(--mono); font-size: 14px; }
.component-sample h3 { margin-top: 0; }
.sample-controls, .sample-states { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.sample-states { gap: 24px; padding: 16px 0; }
.geometry { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 48px; }
.geometry p { margin-top: 10px; font-size: 14px; color: var(--muted); max-width: 45ch; }
.spacing-sample { display: flex; align-items: flex-end; gap: 8px; margin-top: 20px; }
.spacing-sample i { width: 18px; height: 4px; background: var(--co-forest); border-radius: 2px; }
.spacing-sample i:nth-child(2) { height: 8px; }
.spacing-sample i:nth-child(3) { height: 12px; }
.spacing-sample i:nth-child(4) { height: 16px; }
.spacing-sample i:nth-child(5) { height: 24px; }
.spacing-sample i:nth-child(6) { height: 32px; }
.spacing-sample i:nth-child(7) { height: 48px; }
.spacing-sample i:nth-child(8) { height: 64px; }
.usage-grid { gap: 40px; }
.usage-grid p { font-size: 14px; color: var(--co-muted-on-dark); margin-top: 12px; }
.guide-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 32px; padding-bottom: 32px; font-size: 12px; color: var(--muted); }
@media (max-width: 1000px) {
  .identity-grid { grid-template-columns: 1fr; }
  .identity-sample { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .identity-stage { grid-row: span 3; margin: 0; }
  .identity-sample h3 { align-self: end; }
  .identity-sample > a { align-self: start; }
  .palette { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .guide-header { flex-wrap: wrap; padding-top: 24px; padding-bottom: 24px; min-height: auto; }
  .guide-intro, .type-layout, .geometry { grid-template-columns: 1fr; gap: 32px; }
  .guide-character { width: min(100%, 340px); margin: auto; }
  .identity-sample { display: block; }
  .identity-stage { margin-bottom: 24px; }
  .identity-dark { flex-direction: column; align-items: flex-start; gap: 24px; }
  .palette { grid-template-columns: repeat(2, 1fr); }
  .swatch { padding: 20px 16px; min-height: 170px; }
  .guide-intro { padding-top: 24px; }
}