:root {
  --md-primary-fg-color: #506337;
  --md-primary-fg-color--light: #72834f;
  --md-primary-fg-color--dark: #334729;
  --md-accent-fg-color: #87552e;
  --oakgate-ink: #293b25;
  --oakgate-panel: #f4f4ea;
  --oakgate-border: #dce2cf;
  --md-text-font: system-ui, sans-serif;
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #506337;
  --md-accent-fg-color: #d9ab75;
  --oakgate-ink: #e9efdc;
  --oakgate-panel: #262d25;
  --oakgate-border: #45503e;
}
.oakgate-hero { padding: clamp(1.5rem, 4vw, 3rem); text-align: center; background: var(--oakgate-panel); border-block: 1px solid var(--oakgate-border); margin-bottom: 1.5rem; }
.oakgate-mark { display: block; width: 9rem; height: 9rem; object-fit: contain; margin: 0 auto 1rem; }
.oakgate-eyebrow { font-size: .6rem; font-weight: 700; letter-spacing: .18em; color: var(--oakgate-ink); }
.md-typeset .oakgate-hero h1 { color: var(--oakgate-ink); font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; letter-spacing: -.04em; margin: .4rem 0 .6rem; }
.oakgate-tagline { color: var(--oakgate-ink); font-size: 1.25rem; font-weight: 650; margin: 0 0 .75rem; }
.oakgate-intro { max-width: 34rem; margin: 0 auto 1.4rem; line-height: 1.65; }
.oakgate-hero .md-button { margin: .25rem; }
.oakgate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin: 1.5rem 0 2rem; }
.oakgate-card { border: 1px solid var(--oakgate-border); border-radius: 8px; padding: 1rem; }
.md-typeset .oakgate-card h3 { margin-top: 0; color: var(--oakgate-ink); }
.oakgate-card p { font-size: .78rem; }
.oakgate-independence { padding: 1.4rem 1.6rem; border-left: 4px solid #a37342; background: var(--oakgate-panel); margin: 1.5rem 0 2rem; }
.md-typeset .oakgate-independence h2 { margin-top: 0; color: var(--oakgate-ink); }
.oakgate-family { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.oakgate-family p { border-bottom: 2px solid var(--oakgate-border); padding-bottom: .8rem; font-size: .76rem; }
.md-header__button.md-logo img { background: #faf8f1; border-radius: 4px; }
@media (max-width: 52rem) {
  .oakgate-grid, .oakgate-family { grid-template-columns: 1fr; }
  .oakgate-hero { padding: 1.2rem .9rem; }
  .oakgate-mark { width: 7rem; height: 7rem; }
  .oakgate-hero .md-button { display: block; margin: .6rem 0; }
}

.oakgate-experience-preview { display:grid; grid-template-columns:minmax(120px,180px) minmax(0,1fr); align-items:center; gap:1.5rem; padding:1.2rem; border:1px solid var(--oakgate-border); border-radius:10px; background:var(--oakgate-panel); }
.oakgate-experience-preview > p { margin:0; }
.oakgate-experience-preview img { display:block; width:100%; height:auto; border-radius:6px; }
.md-typeset .oakgate-experience-preview h2 { margin-top:0; }
.oakgate-experience-image { display:block; max-width:44rem; margin:1.5rem auto; }
.oakgate-experience-image img { display:block; width:100%; height:auto; border-radius:8px; border:1px solid var(--oakgate-border); }
@media(max-width:36rem) { .oakgate-experience-preview { grid-template-columns:1fr; gap:1rem; } .oakgate-experience-preview > p { max-width:200px; margin-inline:auto; } }

/* The person and their story introduce OakGate before deployment details. */
.oakgate-community-story { margin:1.4rem auto 2rem; max-width:48rem; }
.oakgate-community-image { display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--oakgate-border); }
.md-typeset .oakgate-community-story h2 { color:var(--oakgate-ink); font-size:clamp(1.35rem, 3vw, 1.8rem); line-height:1.25; font-weight:650; margin:1.2rem auto .7rem; }
.oakgate-community-story > p:first-child { max-width:none; }
.oakgate-community-story p { max-width:34rem; margin:.7rem auto; line-height:1.65; }
@media(max-width:36rem) {
  .oakgate-community-story { margin-top:1rem; }
  .oakgate-community-image { border-radius:6px; }
}

/* Portrait video shorts stay within the page and a typical viewport. */
.oakgate-video-short { width:min(100%, 360px, 42.1875svh); aspect-ratio:9 / 16; margin:1.2rem auto; background:#000; border:1px solid var(--oakgate-border); border-radius:10px; overflow:hidden; }
.oakgate-video-short iframe { display:block; width:100%; height:100%; border:0; }

.oakgate-video-wide { width:100%; aspect-ratio:16 / 9; margin:1.2rem auto; background:#000; border:1px solid var(--oakgate-border); border-radius:10px; overflow:hidden; }
.oakgate-video-wide iframe { display:block; width:100%; height:100%; border:0; }

/* A high-contrast, phone-sized code for sharing the public site in person. */
.oakgate-site-qr { text-align:center; }
.md-typeset .oakgate-site-qr-code { display:block; width:min(100%, 400px); margin:1rem auto; }
.md-typeset .oakgate-site-qr-code img { display:block; width:100%; max-width:100%; height:auto; margin:0 auto; background:#000; border-radius:24px; border:1px solid #333; box-sizing:border-box; }
.oakgate-site-qr p { overflow-wrap:anywhere; }