@layer theme {
  /* Theme tokens for the page header */
  :root {
    /* Colors */
    --page-header-bg: var(--theme-background-color, #fff);
    --page-header-fg: var(--theme-text-color, #111);
    --page-header-accent: var(--theme-accent-color, #2a73ff);

    /* Sizing / rhythm */
    --page-header-max: 1200px;                     /* can override the site default */
    --page-header-pad-x: clamp(20px, 4vw, 40px);
    --page-header-pad-y: clamp(40px, 7vw, 120px);
    --page-header-gap: clamp(16px, 3vw, 32px);
    --page-header-text-max: 75ch;

    /* Typography scale specifically for the header */
    --page-header-heading-size: clamp(28px, 5vw, 56px);
    --page-header-subheading-size: clamp(16px, 2vw, 20px);
    --page-header-body-size: clamp(16px, 1.5vw, 18px);
    --page-header-heading-weight: 800;
    --page-header-body-weight: 400;

    /* Logo */
    --page-header-logo-height: clamp(48px, 15vw, 160px);
    --page-header-logo-gap: clamp(12px, 2vw, 20px);
  }

  /* Apply theme colors */
  #page-header {
    background: var(--page-header-bg);
    color: var(--page-header-fg);
  }

  /* Centered “hero” layout like the Paris example (no background image yet) */
  #page-header > #header-content {
    max-width: var(--page-header-max);
    padding: var(--page-header-pad-y) var(--page-header-pad-x);
    display: grid;
    gap: var(--page-header-gap);
    justify-items: center;     /* center the block */
    text-align: center;
  }

  /* Logo */
  #page-header img {
    height: var(--page-header-logo-height);
    margin-bottom: var(--page-header-logo-gap);
  }

  /* Title (you’re using <h2> in markup) */
  #page-header h2 {
    font-size: var(--page-header-heading-size);
    font-weight: var(--page-header-heading-weight);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
    max-width: 25ch; /* keep the big line tight */
  }

  /* Optional subheading style if you add one later (e.g., a <h3> or small) */
  #page-header h3,
  #page-header .subheading {
    font-size: var(--page-header-subheading-size);
    font-weight: 600;
    opacity: .9;
    margin: 0;
  }

  /* Body copy */
  #page-header p {
    font-size: var(--page-header-body-size);
    font-weight: var(--page-header-body-weight);
    max-width: var(--page-header-text-max);
    margin: 0;
    opacity: .92;
  }

  /* Optional actions row if/when you add buttons */
  #page-header .header-actions {
    display: flex;
    gap: clamp(10px, 2vw, 16px);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: calc(var(--page-header-gap) * 0.75);
  }

  /* A simple accent utility if you want to highlight a word with a brand underline */
  #page-header .accent {
    background: linear-gradient(to top, color-mix(in oklab, var(--page-header-accent) 25%, transparent) 0 40%, transparent 40% 100%);
    padding-inline: 2px;
    border-radius: 2px;
  }
  
  	@media all and (max-width: 720px) {
		:root {
			--page-header-logo-height: clamp(48px, 20vw, 600px);
		
		}
	
	}
}