@layer components {
  /* Structural tokens (no colors / typography here) */
  :root {
    --page-header-max: 1200px;
    --page-header-pad-x: 24px;
    --page-header-pad-y: 32px;
    --page-header-gap: clamp(16px, 3vw, 32px);
    --page-header-logo-height: auto; /* theme can set a real value */
  }

  /* Wrapper */
  #page-header {
    display: block;
    background: var(--page-header-bg, transparent); /* safe, theme sets real color */
    color: var(--page-header-fg, inherit);
  }

  /* Content area */
  #page-header > #header-content {
    max-width: var(--page-header-max);
    margin-inline: auto;
    padding: var(--page-header-pad-y) var(--page-header-pad-x);
    display: grid;
    gap: var(--page-header-gap);
    align-items: center;
    justify-items: start; /* theme may center */
  }

  #page-header img {
    display: block;
    max-width: 100%;
    height: var(--page-header-logo-height);
  }

  #page-header h1,
  #page-header h2,
  #page-header p { margin: 0; }
  
  #page-header p:last-child { 
  	display: flex;
	width: 60%;
    justify-content: space-evenly;}
}