/*
 * Canonical portfolio foundation; values follow ../MASTER.md.
 * Edit this source, then run sync_design_system.py for the intended target.
 * Consumers opt in with .portfolio-system and map their own components to these
 * tokens. Product-specific selectors and player behavior belong to consumers.
 */
:root {
  --portfolio-color-brand: #002d5c;
  --portfolio-color-on-brand: #ffffff;
  --portfolio-color-action: #c01953;
  --portfolio-color-action-hover: #a51447;
  --portfolio-color-on-action: #ffffff;
  --portfolio-color-background: #ffffff;
  --portfolio-color-surface: #f2f5f7;
  --portfolio-color-text: #132f4b;
  --portfolio-color-text-muted: #4f6172;
  --portfolio-color-divider: #d2dce4;
  --portfolio-color-field-border: #6a7b8b;
  --portfolio-color-focus: #006fbb;
  --portfolio-color-focus-on-brand: #93cfff;
  --portfolio-color-error: #b3261e;
  --portfolio-color-scheme: light;

  --portfolio-font-family: Arial, Helvetica, sans-serif;
  --portfolio-font-weight-normal: 400;
  --portfolio-font-weight-heading: 700;
  --portfolio-font-size-hero: clamp(1.875rem, 1.65rem + 1.1vw, 2.25rem);
  --portfolio-font-size-section: clamp(1.625rem, 1.45rem + 0.8vw, 1.875rem);
  --portfolio-font-size-subheading: clamp(1.3125rem, 1.2rem + 0.5vw, 1.4375rem);
  --portfolio-font-size-body: 1.0625rem;
  --portfolio-font-size-control: 1rem;
  --portfolio-font-size-navigation: 1rem;
  --portfolio-font-size-note: 0.875rem;
  --portfolio-line-height-hero: 1.12;
  --portfolio-line-height-heading: 1.2;
  --portfolio-line-height-body: 1.6;
  --portfolio-line-height-control: 1.5;
  --portfolio-measure-text: 65ch;

  --portfolio-space-1: 0.25rem;
  --portfolio-space-2: 0.5rem;
  --portfolio-space-3: 0.75rem;
  --portfolio-space-4: 1rem;
  --portfolio-space-6: 1.5rem;
  --portfolio-space-8: 2rem;
  --portfolio-space-10: 2.5rem;
  --portfolio-space-14: 3.5rem;
  --portfolio-space-18: 4.5rem;
  --portfolio-content-max: 77rem;
  --portfolio-page-gutter: 1.25rem;
  --portfolio-section-padding: var(--portfolio-space-10);
  --portfolio-hero-padding: var(--portfolio-space-6);
  --portfolio-hero-gap: var(--portfolio-space-8);
  --portfolio-navigation-max-height: 4.75rem;
  --portfolio-target-min: 2.75rem;
  --portfolio-control-gap: var(--portfolio-space-2);

  --portfolio-radius-media: 0.75rem;
  --portfolio-radius-card: 0.75rem;
  --portfolio-radius-control: 0.5rem;
  --portfolio-radius-round: 50%;
  --portfolio-shadow-media: 0 0.5rem 1.5rem rgb(0 45 92 / 0.1);
  --portfolio-shadow-overlay: 0 1rem 3rem rgb(0 45 92 / 0.2);
  --portfolio-focus-width: 3px;
  --portfolio-focus-offset: 3px;

  --portfolio-hero-photo-height: clamp(7.5rem, 36vw, 9.375rem);
  --portfolio-hero-photo-position: 50% 50%;
  --portfolio-explainer-image-max: 22rem;
  --portfolio-video-preview-mobile-max: 14.375rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --portfolio-color-background: #112438;
    --portfolio-color-surface: #193148;
    --portfolio-color-text: #d6e8fa;
    --portfolio-color-text-muted: #abbcce;
    --portfolio-color-divider: #42596e;
    --portfolio-color-field-border: #8ca0b4;
    --portfolio-color-focus: #93cfff;
    --portfolio-color-error: #ffb4ab;
    --portfolio-color-scheme: dark;
  }
}

@media (max-width: 359px) {
  :root {
    --portfolio-page-gutter: var(--portfolio-space-4);
  }
}

@media (min-width: 768px) {
  :root {
    --portfolio-page-gutter: var(--portfolio-space-6);
  }
}

/* Hero composition changes at 1024px; navigation changes independently at 1140px. */
@media (min-width: 1024px) {
  :root {
    --portfolio-font-size-hero: clamp(2.625rem, 2rem + 1vw, 3rem);
    --portfolio-font-size-section: clamp(1.875rem, 1.25rem + 1vw, 2.375rem);
    --portfolio-font-size-subheading: clamp(1.375rem, 1.1rem + 0.4vw, 1.5rem);
    --portfolio-font-size-body: 1.125rem;
    --portfolio-section-padding: var(--portfolio-space-14);
    --portfolio-hero-padding: var(--portfolio-space-8);
    --portfolio-hero-photo-height: clamp(10rem, 14vw, 12.5rem);
  }
}

@media (min-width: 1280px) {
  :root {
    --portfolio-page-gutter: var(--portfolio-space-10);
    --portfolio-hero-padding: var(--portfolio-space-10);
    --portfolio-hero-gap: var(--portfolio-space-10);
  }
}

.portfolio-system {
  color-scheme: var(--portfolio-color-scheme);
  background-color: var(--portfolio-color-background);
  color: var(--portfolio-color-text);
  font-family: var(--portfolio-font-family);
  font-size: var(--portfolio-font-size-body);
  font-weight: var(--portfolio-font-weight-normal);
  line-height: var(--portfolio-line-height-body);
}

.portfolio-system,
.portfolio-system *,
.portfolio-system *::before,
.portfolio-system *::after {
  box-sizing: border-box;
}

/* On a fixed brand surface, set --portfolio-focus-color to
 * var(--portfolio-color-focus-on-brand) on that surface. */
.portfolio-system:focus-visible,
.portfolio-system :focus-visible {
  outline: var(--portfolio-focus-width) solid var(--portfolio-focus-color, var(--portfolio-color-focus));
  outline-offset: var(--portfolio-focus-offset);
}

/* Both image classes support <img> directly or a responsive <picture> wrapper.
 * Each product can override the photo position for its reviewed composition.
 * Intrinsic width/height and alt text still belong in the HTML. */
.portfolio-hero-photo {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: var(--portfolio-hero-photo-height);
  margin: 0;
  overflow: hidden;
  border-radius: var(--portfolio-radius-media);
  background-color: var(--portfolio-color-surface);
  object-fit: cover;
  object-position: var(--portfolio-hero-photo-position);
}

.portfolio-hero-photo > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--portfolio-hero-photo-position);
}

/* Keep explanatory art compact and uncropped; never invert photographs or art. */
.portfolio-explainer-image {
  display: block;
  inline-size: min(100%, var(--portfolio-explainer-image-max));
  max-inline-size: 100%;
  block-size: auto;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--portfolio-radius-media);
  background-color: var(--portfolio-color-surface);
  object-fit: contain;
}

.portfolio-explainer-image > img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  object-fit: contain;
}

/* Homepage narrative: clear reading order, one primary action, optional detail. */
.portfolio-narrative{padding:var(--portfolio-section-padding) var(--portfolio-page-gutter);background:var(--portfolio-color-background)}
.portfolio-narrative-inner{max-width:var(--portfolio-content-max);margin-inline:auto}
.portfolio-soft{background:var(--portfolio-color-surface)}
.portfolio-narrative h2{max-width:30ch;margin:0 0 24px;font-size:var(--portfolio-font-size-section);line-height:1.2}
.portfolio-section-intro{max-width:65ch;margin:0 0 32px;color:var(--portfolio-color-text-muted)}
.portfolio-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:28px 0}
.portfolio-choice-grid article{min-width:0;padding:0;background:transparent;border:0;box-shadow:none}
.portfolio-choice-grid h3{font-size:var(--portfolio-font-size-subheading);margin:0 0 12px}
.portfolio-choice-grid p{color:var(--portfolio-color-text-muted);margin:0}
.portfolio-choice-pair{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px}
.portfolio-detail{border-bottom:1px solid var(--portfolio-color-divider);max-width:100%;margin:0}
.portfolio-detail>summary{display:list-item;min-height:56px;padding:16px 0;font-size:var(--portfolio-font-size-control);font-weight:700;cursor:pointer;color:var(--portfolio-color-text)}
.portfolio-detail-body{padding:8px 0 28px;max-width:100%}
.portfolio-detail-body>p{max-width:65ch;margin:0 0 16px}
.portfolio-detail-body>section{padding:16px 0;background:transparent}
.portfolio-detail-body>section>div{padding:0;max-width:100%}
.portfolio-detail-body h2,.portfolio-detail-body h3{font-size:var(--portfolio-font-size-subheading);margin:0 0 16px;text-align:left}
.portfolio-process{list-style:none;counter-reset:process;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding:0;margin:32px 0}
.portfolio-process li{counter-increment:process;padding-top:16px;border-top:1px solid var(--portfolio-color-divider)}
.portfolio-process h3{font-size:var(--portfolio-font-size-subheading);margin:0 0 12px}
.portfolio-process h3::before{content:counter(process) '. ';color:var(--portfolio-color-text-muted)}
.portfolio-process p{margin:0;color:var(--portfolio-color-text-muted)}
.portfolio-adviser{display:grid;grid-template-columns:128px minmax(0,1fr);gap:24px;align-items:center;max-width:800px}
.portfolio-adviser img{width:128px;height:128px;object-fit:cover;object-position:top;border-radius:var(--portfolio-radius-media)}
.portfolio-adviser p{margin:0 0 12px}
.portfolio-adviser a{display:inline-flex;align-items:center;min-height:44px;color:var(--portfolio-color-text);text-underline-offset:4px}
.portfolio-home .portfolio-header .portfolio-offer{background:transparent!important;color:var(--portfolio-color-on-brand)!important;border:1px solid #ffffff80;box-shadow:none}
.portfolio-home .portfolio-header .portfolio-offer:hover{background:#ffffff18!important}
.portfolio-reading-links{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
.portfolio-reading-links a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px}
@media(max-width:767px){
 .portfolio-choice-grid,.portfolio-choice-pair,.portfolio-process{grid-template-columns:1fr;gap:24px}
 .portfolio-adviser{grid-template-columns:88px minmax(0,1fr);gap:16px;align-items:start}
 .portfolio-adviser img{width:88px;height:96px}
 .portfolio-process{margin:24px 0}
 .portfolio-reading-links{grid-template-columns:1fr}
 .portfolio-home .portfolio-header .portfolio-offer{border-color:transparent;padding-inline:8px!important}
}