/* Sub-site bindings of roles to specific components */
@layer components {
  /* Site nav colours via roles (structure in shared components) */
  :where(#site-nav, #site22) {
    background: var(--site-nav-bg);
    color: var(--site-nav-ink);
    border-bottom: var(--site-nav-rule);
  }
  
  /* page-nav*/
	
nav.page > ul > li:first-child > a {
	height: calc(.8 * var(--page-nav-height))
}

  /* Buttons (shared structure) */
  .button, .btn, button, input[type="submit"] {
    --btn-bg:  var(--link);
    --btn-ink: var(--color-on-accent);
    --btn-bg-hover: color-mix(in oklab, var(--btn-bg), black 8%);

    background: var(--btn-bg);
    color: var(--btn-ink);
  }
  .button:hover, .btn:hover, button:hover, input[type="submit"]:hover {
    background: var(--btn-bg-hover);
  }

  label[for="collapsed"], #show-sitenav {
    display: none
  }  
  
  /* Alternating coloured media-object callouts — but NOT the quote, which is a
     plain transparent block with default (dark) text. */
  .media-object:nth-of-type(odd):not(.quote) {
  	background-color: var(--color-accent);
  	color: var(--palette-on-accent);
  }


  .media-object:nth-of-type(even):not(.quote) {
  	background-color: var(--color-accent-2);
  	color: var(--palette-on-accent);
  }
  
  .media-object .button, .media-object .btn {
/* 
	--btn-bg:  var(--color-accent-2);
    --btn-bg-hover: color-mix(in oklab, var(--btn-bg), black 20%);

    background: var(--btn-bg);
 */
    text-decoration: none;
  }
  
  .media-object a {
  	color: inherit;
  	text-decoration: underline;
  
  }
  
  .media-object .portrait {
  	border-radius: var(--radius-50);
  }
  
  /* Grid so the portrait matches the height of the text block beside it:
     the text column (1fr) sets the row height; the image stretches to it and
     stays square via aspect-ratio, so the icon = the size of the text block. */
  .quote.media-object {
  	display: grid;
  	grid-template-columns: auto auto;
  	justify-content: center;
  	align-items: stretch;
  	padding-inline: 2%;
  	padding-block: clamp(2rem, 3vw, 3rem);
  	gap: clamp(16px, 2vw, 32px);
  }

  /* Square cell whose height tracks the text block (the absolutely-positioned
     image inside contributes no intrinsic height, so the text column drives the
     row); aspect-ratio then makes the width equal that height. */
  .quote .portrait-cell {
  	position: relative;
  	align-self: start;
  	aspect-ratio: 1;
  	height: 75%;
  	min-height: 0;
  }

  .quote .portrait-cell img {
  	position: absolute;
  	inset: 0;
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  }
  
  .quote .details {
	  width: auto;
	  max-width: 52ch;
  	font-size: var(--font-size-regular);
  	font-weight: var(--weight-regular);
  }

  /* Attribution line ("Shawn (Swyx) Wang, Founder AI Engineer") in bold. */
  .quote .details p:last-child {
  	font-weight: var(--weight-bold);
  }
  
  
  
}