/* =========================================================
   BAM SARALEE PROFILE — OOM PARITY v24.0
   Blush Pink + Sage Editorial Identity
   Homepage-standard global shell + unified profile typography
========================================================= */

:root {
  --gold: #a9657d;
  --gold-soft: #d7a7b8;
  --yellow: #f3dfe7;

  --blue: #c9d8c1;
  --blue-deep: #667b60;

  --paper: #fffdf9;
  --cream: #faf4f5;

  --ink: #29282b;
  --text: #61646a;
  --muted: #85878c;

  --line: rgba(44, 48, 55, 0.11);
  --shadow: 0 28px 80px rgba(52, 65, 75, 0.11);

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-script: "Great Vibes", cursive;

  /* unified type scale */
  --label-size: 0.72rem;
  --body-size: 0.92rem;
  --body-large: 1rem;
  --profile-label: 0.70rem;
  --profile-value: 0.98rem;
  --card-body: 0.78rem;
  --card-title: 1.12rem;

  --section-title: clamp(2rem, 2.8vw, 3rem);
  --hero-title: clamp(4.6rem, 7vw, 7rem);

  --ease: 220ms ease;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;

  display: block;

  background:
    radial-gradient(circle at 8% 7%, rgba(217, 166, 182, 0.34), transparent 28%),
    radial-gradient(circle at 92% 12%, rgba(184, 200, 174, 0.35), transparent 30%),
    linear-gradient(135deg, #f3e0e7 0%, #faf7f2 48%, #e6eee2 100%);

  color: var(--ink);

  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

/* =========================================================
   SHELL + HEADER
========================================================= */

.profile-shell {
  width: min(1480px, 96vw);
  margin: clamp(18px, 2.8vw, 40px) auto 42px;

  overflow: hidden;

  padding:
    28px
    clamp(26px, 3.8vw, 58px)
    34px;

  background: rgba(255, 253, 249, 0.96);

  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;

  box-shadow: var(--shadow);
}

.top-nav {
  position: relative;
  z-index: 30;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;

  gap: 24px;

  min-height: 74px;

  padding-bottom: 17px;

  border-bottom: 1px solid var(--line);
}

.brand-link {
  grid-column: 1;

  display: inline-flex;
  align-items: center;

  flex-shrink: 0;
}

.logo {
  width: clamp(145px, 11vw, 205px);
  max-height: 74px;

  object-fit: contain;
}

.nav-links {
  grid-column: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: clamp(10px, 1.25vw, 21px);

  min-width: 0;

  white-space: nowrap;
}

.nav-links a {
  position: relative;

  padding: 9px 1px;

  color: #5e595b;

  font-family: var(--font-body);
  font-size: 0.67rem;
  font-weight: 650;

  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.nav-links a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  height: 1px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--blue-deep)
    );

  transform: scaleX(0);
  transition: transform var(--ease);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

.nav-links a.active {
  padding: 8px 13px;

  color: var(--gold);

  border: 1px solid rgba(169, 101, 125, 0.5);
  border-radius: 999px;
}

.nav-links a.active::after {
  display: none;
}

.nav-actions {
  grid-column: 3;
  justify-self: end;

  display: flex;
  align-items: center;

  gap: 8px;
}

.icon-button,
.menu-toggle {
  display: grid;
  place-items: center;

  width: 39px;
  height: 39px;

  padding: 0;

  color: var(--ink);
  background: transparent;

  border: 1px solid var(--line);
  border-radius: 50%;

  cursor: pointer;
}

.icon-button {
  font-size: 1.2rem;
}

.menu-toggle {
  display: none;
}

.menu-toggle span {
  width: 19px;
  height: 1.5px;

  margin: 2px 0;

  background: currentColor;

  transition: var(--ease);
}

/* =========================================================
   SEARCH
========================================================= */

.site-search {
  margin-top: 14px;

  padding: 16px 18px;

  background: rgba(247, 233, 238, 0.48);

  border: 1px solid var(--line);
  border-radius: 14px;
}

.site-search label {
  display: block;

  margin-bottom: 8px;

  color: var(--gold);

  font-size: var(--label-size);
  font-weight: 700;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.search-row {
  display: flex;

  gap: 9px;
}

.search-row input {
  flex: 1;
  min-width: 0;

  padding: 11px 13px;

  color: var(--ink);
  background: var(--paper);

  border: 1px solid var(--line);
  border-radius: 10px;

  outline: none;
}

.search-row button {
  padding: 0 18px;

  color: #fff;
  background: var(--blue-deep);

  border: 0;
  border-radius: 10px;

  cursor: pointer;
}

.search-status {
  margin: 8px 0 0;

  color: var(--muted);

  font-size: 0.72rem;
}

.search-hit {
  outline: 2px solid rgba(215, 167, 184, 0.65);
  outline-offset: 5px;

  border-radius: 4px;
}

/* =========================================================
   PROFILE INTRO
========================================================= */

.profile-intro {
  display: grid;

  grid-template-columns:
    minmax(350px, 38%)
    minmax(0, 1fr);

  gap: clamp(40px, 5vw, 78px);

  align-items: start;

  padding-top: 38px;
}

.portrait-column {
  min-width: 0;
}

.portrait-card {
  position: relative;

  overflow: hidden;

  border-radius: 25px;

  box-shadow:
    0 20px 55px rgba(67, 83, 95, 0.11);
}

.editorial-photo {
  width: 100%;

  aspect-ratio: 4 / 5;

  object-fit: cover;
  object-position: center;
}

.portrait-gradient {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 57%,
      rgba(25, 28, 30, 0.12) 73%,
      rgba(25, 28, 30, 0.73) 100%
    );
}

.portrait-signature {
  position: absolute;
  right: 27px;
  bottom: 24px;
  left: 27px;

  display: flex;
  flex-direction: column;

  color: #fff;
}

.signature-script {
  font-family: var(--font-script);
  font-size: clamp(3.8rem, 5vw, 5.3rem);
  line-height: 0.9;
}

.signature-note {
  margin-top: 8px;

  font-size: 0.62rem;
  font-weight: 600;

  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* =========================================================
   FOLLOW + PROFILE
========================================================= */

.follow-card {
  padding: 26px 12px 24px;

  border-bottom: 1px solid var(--line);
}

.section-label,
.hero-kicker {
  margin: 0;

  color: var(--gold);

  font-family: var(--font-body);
  font-size: var(--label-size);
  font-weight: 700;

  line-height: 1.3;

  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.socials {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 10px;

  margin-top: 16px;
}

.socials a {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 6px;

  color: var(--blue-deep);
}

.socials a > span {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  background: var(--paper);

  border: 1px solid var(--line);
  border-radius: 50%;

  box-shadow:
    0 7px 18px rgba(65, 83, 96, 0.06);

  transition: transform var(--ease);
}

.socials a:hover > span {
  transform: translateY(-3px);
}

.socials small {
  color: var(--muted);

  font-size: 0.58rem;
}

.profile-facts {
  padding: 25px 12px 0;
}

.profile-facts dl {
  margin: 18px 0 0;
}

.profile-facts dl div {
  display: grid;

  grid-template-columns:
    105px
    minmax(0, 1fr);

  gap: 15px;

  padding: 10px 0;

  border-bottom:
    1px solid rgba(44, 48, 55, 0.075);
}

.profile-facts dt {
  color: var(--muted);

  font-family: var(--font-body);
  font-size: var(--profile-label);
  font-weight: 400;

  line-height: 1.45;
}

.profile-facts dd {
  margin: 0;

  color: #4d4f54;

  font-family: var(--font-display);
  font-size: var(--profile-value);
  font-weight: 500;

  line-height: 1.42;
}

/* =========================================================
   HERO / ABOUT / SELECTED WORKS
========================================================= */

.profile-story {
  min-width: 0;

  padding-top: 8px;
}

.editorial-hero {
  padding: 8px 0 30px;
}

.hero-kicker {
  color: var(--blue-deep);
}

.editorial-title {
  display: flex;
  flex-direction: column;

  margin: 15px 0 13px;

  color: #343337;

  font-family: var(--font-display);
  font-size: var(--hero-title);
  font-weight: 500;

  line-height: 0.78;

  letter-spacing: -0.02em;
}

.editorial-role {
  margin: 27px 0 0;

  color: #60636a;

  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;

  line-height: 1.5;

  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.editorial-role span {
  margin: 0 5px;

  color: var(--gold);
}

.hero-divider {
  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: 13px;

  margin: 30px 0 18px;
}

.hero-divider span {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(102, 123, 96, 0.5)
    );
}

.hero-divider span:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(169, 101, 125, 0.5),
      transparent
    );
}

.hero-divider b {
  color: var(--gold);

  font-size: 0.75rem;
}

.editorial-quote {
  margin: 0;

  color: var(--gold);

  font-family: var(--font-script);
  font-size: clamp(2.1rem, 3vw, 3.2rem);

  line-height: 1.2;
}

.content-rule {
  margin-top: 26px;

  padding-top: 32px;

  border-top: 1px solid var(--line);
}

.content-rule h2,
.panel h2,
.updates-section h2 {
  margin: 8px 0 15px;

  font-family: var(--font-display);
  font-size: var(--section-title);
  font-weight: 500;

  line-height: 1.08;
}

.about-section > p:not(.section-label):not(.closing-line) {
  max-width: 780px;

  margin: 0 0 13px;

  color: var(--text);

  font-family: var(--font-body);
  font-size: var(--body-large);
  font-weight: 400;

  line-height: 1.78;
}

.closing-line {
  margin: 20px 0 0;

  color: var(--gold);

  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;

  line-height: 1.55;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;

  gap: 20px;
}

.text-link {
  padding-bottom: 5px;

  color: var(--blue-deep);

  font-size: 0.68rem;
  font-weight: 700;

  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.featured-work {
  display: grid;

  grid-template-columns:
    75px
    minmax(0, 1fr);

  gap: 24px;

  margin-top: 24px;

  padding: 25px;

  background:
    linear-gradient(
      135deg,
      rgba(247, 233, 238, 0.56),
      rgba(255, 253, 249, 0.92) 55%,
      rgba(233, 239, 245, 0.6)
    );

  border:
    1px solid rgba(169, 101, 125, 0.12);
  border-radius: 18px;
}

.work-year {
  color: var(--gold);

  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
}

.work-type {
  margin: 0;

  color: var(--blue-deep);

  font-size: 0.64rem;
  font-weight: 700;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.featured-work h3 {
  margin: 5px 0 2px;

  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;

  line-height: 1.25;
}

.work-role {
  margin: 0 0 10px !important;

  color: var(--gold) !important;

  font-weight: 600;
}

.featured-work p {
  margin: 0;

  color: var(--text);

  font-size: var(--card-body);

  line-height: 1.65;
}

.source-note {
  margin: 10px 0 0;

  color: var(--muted);

  font-size: 0.68rem;
}

/* =========================================================
   RECENT APPEARANCES + FUN FACTS
========================================================= */

.lower-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 28px;

  margin-top: 52px;
}

.panel {
  padding: 34px;

  background:
    linear-gradient(
      145deg,
      rgba(247, 233, 238, 0.48),
      rgba(255, 253, 249, 0.9) 55%,
      rgba(233, 239, 245, 0.42)
    );

  border: 1px solid var(--line);
  border-radius: 20px;
}

.panel h2 {
  font-size: clamp(1.8rem, 2.4vw, 2.45rem);
}

.section-intro {
  margin: -4px 0 20px;

  color: var(--muted);

  font-size: 0.80rem;
}

.appearance-list article {
  display: grid;

  grid-template-columns:
    92px
    minmax(0, 1fr);

  gap: 16px;

  padding: 15px 0;

  border-top: 1px solid var(--line);
}

.appearance-list time {
  padding-top: 3px;

  color: var(--gold);

  font-size: 0.66rem;
  font-weight: 700;

  letter-spacing: 0.08em;
}

.appearance-list h3 {
  margin: 0 0 3px;

  font-family: var(--font-display);
  font-size: var(--card-title);
  font-weight: 600;

  line-height: 1.3;
}

.appearance-list p {
  margin: 0;

  color: var(--muted);

  font-size: var(--card-body);

  line-height: 1.5;
}

.facts-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 10px;
}

.facts-grid article {
  padding: 15px;

  background: rgba(255, 253, 248, 0.7);

  border: 1px solid var(--line);
  border-radius: 12px;
}

.facts-grid article.wide {
  grid-column: 1 / -1;
}

.facts-grid span {
  color: var(--gold);

  font-size: 0.66rem;
  font-weight: 700;

  line-height: 1.35;

  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.facts-grid p {
  margin: 6px 0 0;

  color: var(--text);

  font-size: var(--card-body);

  line-height: 1.55;
}

.facts-grid strong {
  color: var(--ink);

  font-weight: 600;
}

/* Keep all Fun Facts body text uniform */
.facts-grid article.wide p {
  font-size: var(--card-body);
}

/* =========================================================
   UPDATES
========================================================= */

.updates-section {
  display: grid;

  grid-template-columns:
    1fr
    minmax(260px, 38%);

  gap: 35px;

  align-items: center;

  margin-top: 34px;

  padding: 34px;

  background:
    linear-gradient(
      90deg,
      rgba(246, 237, 200, 0.46),
      rgba(255, 253, 249, 0.9),
      rgba(233, 239, 245, 0.5)
    );

  border: 1px solid var(--line);
  border-radius: 20px;
}

.updates-section h2 {
  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
}

.updates-section > div > p:last-child {
  margin: 0;

  color: var(--text);

  font-size: 0.82rem;
}

.updates-empty {
  display: grid;
  place-items: center;

  min-height: 92px;

  padding: 20px;

  color: var(--muted);
  background: rgba(255, 255, 255, 0.45);

  border:
    1px dashed rgba(69, 100, 126, 0.25);
  border-radius: 14px;

  font-family: var(--font-display);
  font-size: 0.9rem;
  font-style: italic;

  text-align: center;
}

/* =========================================================
   FOOTER
========================================================= */

.site-footer {
  display: block;

  width: auto;

  margin: 30px 0 0;

  padding: 16px 0 10px;

  background: transparent;

  border-top: 1px solid var(--line);
}

.footer-inner {
  display: grid;

  grid-template-columns:
    92px
    minmax(240px, 1fr)
    auto;

  align-items: center;

  column-gap: 28px;
}

.footer-logo {
  display: block;

  width: 82px;

  line-height: 0;
}

.footer-logo img {
  display: block;

  width: 100%;
  height: auto;
}

.footer-main-copy {
  justify-self: start;

  margin: 0;

  color: var(--text);

  font-size: 0.74rem;
  font-weight: 500;

  line-height: 1.45;

  text-align: left;
}

.footer-message {
  justify-self: end;

  margin: 0;

  color: var(--blue-deep);

  font-family: var(--font-script);
  font-size: 1.28rem;

  line-height: 1.1;

  white-space: nowrap;
}

.footer-bottom {
  margin-top: 8px;

  padding-top: 8px;

  color: var(--muted);

  border-top:
    1px solid rgba(83, 72, 77, 0.06);

  font-size: 0.64rem;

  line-height: 1.45;

  text-align: center;
}

.footer-bottom p {
  margin: 0;
}

/* =========================================================
   DARK MODE
========================================================= */

:root[data-theme="dark"] {
  --paper: #111214;
  --cream: #0d0e10;

  --ink: #f1eee7;
  --text: #c9c6c0;
  --muted: #929397;

  --line: rgba(255, 255, 255, 0.11);

  --blue-deep: #9abbd5;
  --gold: #d7a7b8;
}

html[data-theme="dark"] body {
  background: #090a0c;

  color: var(--ink);
}

html[data-theme="dark"] .profile-shell {
  background: #090a0c;

  border-color: #090a0c;

  box-shadow: none;
}

html[data-theme="dark"] .nav-links a {
  color: #c9c6c0;
}

html[data-theme="dark"] .profile-facts dd {
  color: #e1ddd5;
}

html[data-theme="dark"] .editorial-title {
  color: #f3efe8;
}

html[data-theme="dark"] .editorial-role {
  color: #d2cec7;
}

html[data-theme="dark"] .follow-card,
html[data-theme="dark"] .profile-facts,
html[data-theme="dark"] .content-rule {
  border-color: var(--line);
}

html[data-theme="dark"] .socials a > span,
html[data-theme="dark"] .facts-grid article,
html[data-theme="dark"] .search-row input {
  background: #141518;
}

html[data-theme="dark"] .featured-work,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .updates-section,
html[data-theme="dark"] .site-search {
  background: #111214;
}

html[data-theme="dark"] .updates-empty {
  background: #141518;
}

html[data-theme="dark"] .search-row button {
  color: #0b0c0d;
  background: #9abbd5;
}

html[data-theme="dark"] .site-footer {
  background: #090a0c;

  border-top-color:
    rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .footer-main-copy {
  color: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] .footer-message {
  color: #a9cee5;
}

html[data-theme="dark"] .footer-bottom {
  color: rgba(255, 255, 255, 0.48);

  border-top-color:
    rgba(255, 255, 255, 0.06);
}

/* =========================================================
   TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 1100px) {

  .profile-shell {
    width: calc(100% - 28px);
    max-width: none;
    margin: 14px auto 28px;
  }

  .menu-toggle {
    display: grid;
  }

  .nav-links {
    position: absolute;

    top: calc(100% + 8px);
    right: 0;

    display: block;

    width: min(320px, calc(100vw - 36px));
    max-height: min(560px, calc(100dvh - 90px));

    padding: 9px 17px;

    overflow-y: auto;

    background: var(--paper);

    border: 1px solid var(--line);
    border-radius: 16px;

    box-shadow:
      0 18px 45px rgba(20, 25, 30, 0.15);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-8px);

    transition: var(--ease);

    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: none;
  }

  .nav-links a,
  .nav-links a.active {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 44px;

    padding: 0 5px;

    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }

  .nav-links a:last-child {
    border-bottom: 0;
  }

  .nav-links a::after {
    display: none;
  }

  .profile-intro {
    grid-template-columns:
      minmax(300px, 37%)
      minmax(0, 1fr);

    gap: 38px;
  }

  .lower-grid {
    grid-template-columns: 1fr;
  }

  .facts-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

  .facts-grid article.wide {
    grid-column: auto;
  }

  .facts-grid article:last-child {
    grid-column: span 2;
  }
}

/* =========================================================
   MOBILE PORTRAIT
========================================================= */

@media
  (max-width: 760px)
  and (orientation: portrait) {

  body {
    padding: 0;

    background:
      linear-gradient(
        145deg,
        #f3e0e7,
        #faf7f2 50%,
        #e6eee2
      );
  }

  .profile-shell {
    width: 100%;
    min-height: 100vh;
    margin: 0;

    padding:
      16px
      16px
      28px;

    border: 0;
    border-radius: 0;

    box-shadow: none;
  }

  .top-nav {
    min-height: 66px;
  }

  .logo {
    width: 145px;
    max-height: 58px;
  }

  .icon-button {
    width: 36px;
    height: 36px;
  }

  .profile-intro {
    display: flex;
    flex-direction: column;

    gap: 0;

    padding-top: 22px;
  }

  .portrait-column,
  .profile-story {
    width: 100%;
  }

  .portrait-card {
    border-radius: 18px;
  }

  .follow-card {
    padding: 22px 4px 20px;
  }

  .profile-facts {
    order: 3;

    padding: 27px 4px 0;
  }

  .profile-story {
    display: contents;
  }

  .editorial-hero {
    order: 1;

    padding: 28px 4px 24px;

    text-align: left;
  }

  .about-section {
    order: 2;

    margin: 0 4px;

    padding-top: 28px;
  }

  .selected-works {
    order: 4;

    margin: 32px 4px 0;

    padding-top: 28px;
  }

  .editorial-title {
    font-size:
      clamp(
        4rem,
        20vw,
        5.5rem
      );
  }

  .editorial-role {
    font-size: 0.8rem;

    letter-spacing: 0.11em;
  }

  .editorial-quote {
    font-size: 2.25rem;
  }

  .about-section > p:not(.section-label):not(.closing-line) {
    font-size: 0.92rem;
    line-height: 1.72;
  }

  .profile-facts dl div {
    grid-template-columns:
      95px
      minmax(0, 1fr);
  }

  .profile-facts dd {
    font-size: 0.9rem;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;

    gap: 5px;
  }

  .featured-work {
    grid-template-columns: 1fr;

    gap: 8px;

    padding: 20px;
  }

  .lower-grid {
    margin-top: 34px;

    gap: 18px;
  }

  .panel {
    padding: 25px 20px;
  }

  .facts-grid {
    grid-template-columns:
      1fr
      1fr;
  }

  .facts-grid article.wide,
  .facts-grid article:last-child {
    grid-column: 1 / -1;
  }

  .updates-section {
    grid-template-columns: 1fr;

    gap: 18px;

    padding: 25px 20px;
  }

  .site-footer {
    padding-top: 16px;
  }

  .footer-inner {
    grid-template-columns: 1fr;

    justify-items: center;

    row-gap: 9px;

    text-align: center;
  }

  .footer-logo {
    width: 84px;
  }

  .footer-main-copy,
  .footer-message {
    justify-self: center;

    text-align: center;
  }

  .footer-message {
    white-space: normal;
  }

  .footer-bottom {
    margin-top: 8px;

    font-size: 0.62rem;
  }

  .search-row {
    flex-direction: column;
  }

  .search-row button {
    min-height: 42px;
  }
}

/* =========================================================
   MOBILE / TABLET LANDSCAPE
   One coherent scale — not a collection of patches
========================================================= */

@media
  (max-width: 1100px)
  and (max-height: 600px)
  and (orientation: landscape) {

  body {
    padding: 0;
  }

  .profile-shell {
    width: 100%;
    max-width: 100%;
    margin: 0;

    padding:
      10px
      18px
      22px;

    border-radius: 0;
  }

  /* Legacy header rules below are dormant; the active header is Global.css */
  .top-nav {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;

    min-height: 58px;

    gap: 12px;

    padding-bottom: 10px;
  }

  .logo {
    width: 88px;
    max-height: 46px;
  }

  .nav-actions {
    justify-self: end;

    gap: 7px;
  }

  .icon-button,
  .menu-toggle {
    width: 34px;
    height: 34px;
  }

  /* Compact menu */
  .nav-links {
    top: calc(100% + 6px);

    width: min(250px, 42vw);
    max-height: calc(100dvh - 72px);

    padding: 7px 13px;

    border-radius: 13px;
  }

  .nav-links a,
  .nav-links a.active {
    min-height: 34px;

    font-size: 0.68rem;
  }

  /* Main composition */
  .profile-intro {
    grid-template-columns:
      minmax(230px, 30%)
      minmax(0, 1fr);

    gap: 30px;

    padding-top: 18px;
  }

  .portrait-card {
    width: 100%;
    max-width: 285px;

    margin-inline: auto;
  }

  .editorial-photo {
    max-height: 64vh;

    object-fit: cover;
  }

  .portrait-signature {
    right: 18px;
    bottom: 16px;
    left: 18px;
  }

  .signature-script {
    font-size: 3rem;
  }

  .signature-note {
    margin-top: 5px;

    font-size: 0.56rem;
  }

  /* Follow + profile */
  .follow-card {
    padding: 14px 4px 14px;
  }

  .socials {
    gap: 5px;

    margin-top: 10px;
  }

  .socials a > span {
    width: 34px;
    height: 34px;
  }

  .socials small {
    font-size: 0.60rem;
  }

  .profile-facts {
    padding: 16px 4px 0;
  }

  .profile-facts dl {
    margin-top: 10px;
  }

  .profile-facts dl div {
    grid-template-columns:
      78px
      minmax(0, 1fr);

    gap: 8px;

    padding: 7px 0;
  }

  .profile-facts dt {
    font-size: 0.74rem;
  }

  .profile-facts dd {
    font-size: 0.88rem;

    line-height: 1.3;
  }

  /* Main hero */
  .editorial-hero {
    padding: 3px 0 18px;
  }

  .editorial-title {
    margin: 9px 0 7px;

    font-size:
      clamp(
        3rem,
        6vw,
        4.2rem
      );
  }

  .editorial-role {
    margin-top: 16px;

    font-size: 0.78rem;

    letter-spacing: 0.1em;
  }

  .hero-divider {
    margin: 18px 0 12px;
  }

  .editorial-quote {
    font-size: 1.85rem;
  }

  /* About */
  .content-rule {
    margin-top: 16px;

    padding-top: 18px;
  }

  .content-rule h2,
  .panel h2,
  .updates-section h2 {
    margin: 6px 0 10px;

    font-size:
      clamp(
        1.75rem,
        3vw,
        2.25rem
      );
  }

  .about-section > p:not(.section-label):not(.closing-line) {
    margin-bottom: 9px;

    font-size: 0.88rem;

    line-height: 1.58;
  }

  .closing-line {
    margin-top: 12px;

    font-size: 0.82rem;
  }

  /* Featured work */
  .text-link {
    font-size: 0.64rem;
  }

  .featured-work {
    grid-template-columns:
      56px
      minmax(0, 1fr);

    gap: 14px;

    margin-top: 14px;

    padding: 16px;
  }

  .work-year {
    font-size: 0.9rem;
  }

  .work-type {
    font-size: 0.62rem;
  }

  .featured-work h3 {
    font-size: 1.2rem;
  }

  .featured-work p {
    font-size: 0.82rem;

    line-height: 1.5;
  }

  .source-note {
    font-size: 0.64rem;
  }

  /* Lower sections */
  .lower-grid {
    margin-top: 28px;

    gap: 16px;
  }

  .panel {
    padding: 20px 18px;
  }

  .section-intro {
    margin-bottom: 13px;

    font-size: 0.74rem;
  }

  .appearance-list article {
    grid-template-columns:
      80px
      minmax(0, 1fr);

    gap: 10px;

    padding: 10px 0;
  }

  .appearance-list time {
    font-size: 0.68rem;
  }

  .appearance-list h3 {
    font-size: 1rem;
  }

  .appearance-list p {
    font-size: 0.76rem;

    line-height: 1.4;
  }

  .facts-grid {
    gap: 10px;
  }

  .facts-grid article {
    padding: 13px;
  }

  .facts-grid span {
    font-size: 0.68rem;
  }

  .facts-grid p,
  .facts-grid article.wide p {
    margin-top: 5px;

    font-size: 0.80rem;

    line-height: 1.45;
  }

  /* Updates */
  .updates-section {
    gap: 20px;

    margin-top: 20px;

    padding: 20px 18px;
  }

  .updates-section > div > p:last-child {
    font-size: 0.78rem;
  }

  .updates-empty {
    min-height: 68px;

    padding: 14px;

    font-size: 0.78rem;
  }

  .site-footer {
    margin-top: 22px;
  }
}

/* =========================================================
   VERY SMALL PORTRAIT
========================================================= */

@media
  (max-width: 430px)
  and (orientation: portrait) {

  .logo {
    width: 128px;
  }

  .nav-actions {
    gap: 5px;
  }

  .icon-button,
  .menu-toggle {
    width: 34px;
    height: 34px;
  }

  .socials {
    gap: 6px;
  }

  .socials a > span {
    width: 39px;
    height: 39px;
  }

  .socials small {
    font-size: 0.54rem;
  }

  .facts-grid {
    grid-template-columns: 1fr;
  }

  .facts-grid article.wide,
  .facts-grid article:last-child {
    grid-column: auto;
  }

  .appearance-list article {
    grid-template-columns:
      78px
      minmax(0, 1fr);

    gap: 11px;
  }

  .appearance-list time {
    font-size: 0.62rem;
  }

  .profile-facts dl div {
    grid-template-columns:
      84px
      minmax(0, 1fr);

    gap: 10px;
  }
}


/* =========================================================
   v24.0 — GLOBAL NAVIGATION INTEGRATION
   ---------------------------------------------------------
   The live header, search, theme control and mobile menu are
   owned by css/Global.css + js/script.js. The older .top-nav,
   .nav-links, .site-search and .menu-toggle rules above remain
   dormant for rollback safety and do not style the `ob-*` UI.
========================================================= */

body.page-bam > .ob-header,
body.page-bam > .ob-site-search {
  flex: none;
}

body.page-bam > .profile-shell {
  position: relative;
}


/* =========================================================
   v24.1 — PROFILE SHELL ALIGNMENT
   Match the homepage header → content transition.
   - Remove the desktop/tablet gap below the global header.
   - Keep header and profile content on one continuous canvas.
   - Tablet uses the same 14px outer gutter as the homepage.
   - Mobile portrait/short landscape remain edge-to-edge.
========================================================= */

/* Desktop: header and profile shell share the same 1480px / 96vw canvas. */
@media (min-width: 1101px) {
  body.page-bam > .profile-shell {
    width: min(1480px, 96vw);
    margin: 0 auto 42px;
    border-top: 0;
    border-radius: 0 0 24px 24px;
  }
}

/* Tablet: mirror the homepage outer gutter and remove the header/content gap. */
@media (min-width: 761px) and (max-width: 1100px) {
  body.page-bam {
    padding-inline: 14px;
  }

  body.page-bam > .profile-shell {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 28px;
    border-top: 0;
    border-radius: 0 0 22px 22px;
  }
}

/* Phone portrait remains fully edge-to-edge, matching the homepage. */
@media (max-width: 760px) and (orientation: portrait) {
  body.page-bam {
    padding-inline: 0;
  }

  body.page-bam > .profile-shell {
    width: 100%;
    margin: 0;
    border-radius: 0;
  }
}

/* Short landscape uses the same flush canvas as the homepage mobile menu layout. */
@media (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) {
  body.page-bam {
    padding-inline: 0;
  }

  body.page-bam > .profile-shell {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
  }
}


/* =========================================================
   v24.2 — DARK HEADER / CONTENT TRANSITION
   ---------------------------------------------------------
   Global.css now uses an opaque shared dark header surface so
   Oom and the homepage render the exact same menu background.
   Also reduce Oom's legacy double top-spacing (profile shell +
   profile intro), which was reading as a large black band below
   the header in dark mode.
========================================================= */

@media (min-width: 1101px) {
  body.page-bam > .profile-shell {
    padding-top: 0;
  }

  body.page-bam > .profile-shell > .profile-intro {
    padding-top: 22px;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  body.page-bam > .profile-shell {
    padding-top: 0;
  }

  body.page-bam > .profile-shell > .profile-intro {
    padding-top: 20px;
  }
}


/* =========================================================
   v24.4 — ACTUAL HEADER → PROFILE CONTENT ALIGNMENT FIX
   ---------------------------------------------------------
   The remaining visible "header gap" was not the global header:
   it was the profile intro's own top padding inside .profile-shell.
   Remove that internal strip so the first profile content begins
   directly beneath the shared header, matching the homepage hero.
========================================================= */
body.page-bam > .profile-shell {
  padding-top: 0 !important;
}

body.page-bam > .profile-shell > .profile-intro {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Keep the shell flush beneath the header at every supported size. */
@media (min-width: 1101px) {
  body.page-bam > .profile-shell {
    margin-top: 0 !important;
    border-top: 0 !important;
    border-radius: 0 0 24px 24px !important;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  body.page-bam > .profile-shell {
    margin-top: 0 !important;
    border-top: 0 !important;
    border-radius: 0 0 22px 22px !important;
  }
}

@media (max-width: 760px),
       (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) {
  body.page-bam > .profile-shell {
    margin-top: 0 !important;
    border-radius: 0 !important;
  }
}

/* =========================================================
   v24.5 — HOMEPAGE SHELL / OUTER-CANVAS PARITY
   ---------------------------------------------------------
   Match Oom's outer spacing to the stable homepage shell.
   The shared header remains a direct child of <body>, so the
   body gutter controls the visible breathing room above the
   header on desktop/tablet exactly as it does on Home.
========================================================= */

/* Desktop — same top/side breathing room as homepage. */
@media (min-width: 1101px) {
  body.page-bam {
    padding: clamp(24px, 4vw, 62px) 20px;
  }

  body.page-bam > .profile-shell {
    width: min(1480px, 96vw);
    margin: 0 auto 42px !important;
  }
}

/* Tablet — mirror homepage's 22px vertical / 14px horizontal gutter. */
@media (min-width: 601px) and (max-width: 1100px) {
  body.page-bam {
    padding: 22px 14px;
  }

  body.page-bam > .profile-shell {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 28px !important;
  }
}

/* Phone portrait — homepage is edge-to-edge. */
@media (max-width: 600px) {
  body.page-bam {
    padding: 0;
  }

  body.page-bam > .profile-shell {
    width: 100%;
    margin: 0 !important;
  }
}

/* Short landscape phones/tablets — same compact outer gutter as Home. */
@media (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) {
  body.page-bam {
    padding: 8px 8px 14px;
  }

  body.page-bam > .profile-shell {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
  }
}

/* In dark mode, use the same outer canvas as the homepage so the
   breathing room around the global header is visually identical. */
html[data-theme="dark"] body.page-bam,
body.dark-theme.page-oom {
  background: #1f2024 !important;
  background-image: none !important;
}

/* =========================================================
   v24.6 — BAM DARK-CANVAS PARITY + OOM PORTRAIT FRAMING
   ---------------------------------------------------------
   1) Match Bam's dark-mode page/shell canvas exactly.
   2) Keep Oom's gold + blue identity for accents and content.
   3) Preserve the same 4:5 portrait geometry as Bam while
      biasing the crop upward so Oom's hair/head is not clipped.
   4) This is page-specific. Global navigation behavior is
      intentionally untouched.
========================================================= */

/* --- Dark-mode canvas: exact Bam baseline --- */
html[data-theme="dark"] body.page-bam,
body.dark-theme.page-oom {
  background: #090a0c !important;
  background-image: none !important;
  color: var(--ink);
}

html[data-theme="dark"] body.page-bam > .profile-shell,
body.dark-theme.page-oom > .profile-shell {
  background: #090a0c !important;
  border-color: #090a0c !important;
  box-shadow: none !important;
}

/* Match the header surface to Bam's near-black canvas on Oom only.
   Higher specificity keeps this page override independent of Home. */
html[data-theme="dark"] body.page-bam > .ob-header,
body.dark-theme.page-oom > .ob-header {
  background: #090a0c !important;
  background-image: none !important;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow: none;
}

/* Keep Oom's content hierarchy equivalent to Bam's dark layout. */
html[data-theme="dark"] body.page-bam .featured-work,
html[data-theme="dark"] body.page-bam .panel,
html[data-theme="dark"] body.page-bam .updates-section {
  background: #111214;
}

html[data-theme="dark"] body.page-bam .socials a > span,
html[data-theme="dark"] body.page-bam .facts-grid article,
html[data-theme="dark"] body.page-bam .updates-empty {
  background: #141518;
}

/* --- Portrait: same geometry as Bam, corrected crop for Oom --- */
body.page-bam .portrait-card {
  width: 100%;
  overflow: hidden;
  border-radius: 25px;
}

body.page-bam .editorial-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;

  /* Oom's source portrait places her head closer to the top edge.
     Bias the crop upward instead of using the centered crop that
     visually trims the top of her hair. */
  object-position: 50% 18%;
}

/* Portrait tablet/mobile: keep the same card proportions but
   preserve slightly more headroom on smaller screens. */
@media (max-width: 1100px) {
  body.page-bam .editorial-photo {
    object-position: 50% 15%;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  body.page-bam .portrait-card {
    border-radius: 18px;
  }

  body.page-bam .editorial-photo {
    aspect-ratio: 4 / 5;
    object-position: 50% 12%;
  }
}

@media (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) {
  body.page-bam .editorial-photo {
    object-position: 50% 14%;
  }
}

/* =========================================================
   v24.7 — PROFILE INTRO SPACING PARITY WITH BAM
   ---------------------------------------------------------
   Earlier Oom header-alignment patches forced .profile-intro
   padding-top to 0 with !important. That made the portrait and
   profile narrative sit directly against the header divider.

   Bam's approved profile composition keeps 38px of breathing
   room between the navigation divider and the profile intro.
   Restore that exact editorial spacing on desktop while keeping
   responsive values proportional on smaller screens.
========================================================= */

/* Desktop: mirror Bam's approved 38px header-to-profile spacing. */
@media (min-width: 1101px) {
  body.page-bam > .profile-shell {
    padding-top: 0 !important;
  }

  body.page-bam > .profile-shell > .profile-intro {
    padding-top: 38px !important;
    margin-top: 0 !important;
  }
}

/* Tablet: retain breathing room without wasting vertical space. */
@media (min-width: 761px) and (max-width: 1100px) {
  body.page-bam > .profile-shell > .profile-intro {
    padding-top: 28px !important;
    margin-top: 0 !important;
  }
}

/* Mobile portrait: compact but visibly separated from the header. */
@media (max-width: 760px) and (orientation: portrait) {
  body.page-bam > .profile-shell > .profile-intro {
    padding-top: 22px !important;
    margin-top: 0 !important;
  }
}

/* Short mobile landscape: preserve the compact navigation layout. */
@media (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) {
  body.page-bam > .profile-shell > .profile-intro {
    padding-top: 18px !important;
    margin-top: 0 !important;
  }
}

/* =========================================================
   v24.8 — COMPLETE DESKTOP / TABLET SHELL CURVATURE
   ---------------------------------------------------------
   Oom's lower shell already finishes with rounded footer-side
   corners. Restore matching curvature to the top of the shared
   header so the complete page reads as one editorial card.
========================================================= */

@media (min-width: 1101px) {
  body.page-bam > .ob-header {
    width: min(1480px, 96vw);
    margin-inline: auto;
    border-radius: 24px 24px 0 0;
  }

  body.page-bam > .profile-shell {
    width: min(1480px, 96vw);
    margin-inline: auto;
    border-radius: 0 0 24px 24px !important;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  body.page-bam > .ob-header {
    width: 100%;
    border-radius: 22px 22px 0 0;
  }

  body.page-bam > .profile-shell {
    border-radius: 0 0 22px 22px !important;
  }
}

/* Phones remain edge-to-edge, matching the homepage mobile shell. */
@media (max-width: 760px) {
  body.page-bam > .ob-header,
  body.page-bam > .profile-shell {
    border-radius: 0 !important;
  }
}



/* =========================================================
   BAM v24.0 — OOM PAGE PARITY FINAL OVERRIDES
   Exact shell / spacing / responsive geometry as Oom v24.8.
========================================================= */

/* Bam's portrait source is already composed correctly for a centered 4:5 crop. */
body.page-bam .editorial-photo {
  object-position: 50% 50%;
}

@media (max-width: 1100px) {
  body.page-bam .editorial-photo {
    object-position: 50% 50%;
  }
}

/* Keep Bam's dark identity palette while using the same near-black
   shell hierarchy as Oom. */
html[data-theme="dark"] body.page-bam,
body.dark-theme.page-bam,
html[data-theme="dark"] body.page-bam > .profile-shell,
body.dark-theme.page-bam > .profile-shell,
html[data-theme="dark"] body.page-bam > .ob-header,
body.dark-theme.page-bam > .ob-header {
  background: #090a0c !important;
  background-image: none !important;
}

html[data-theme="dark"] body.page-bam .featured-work,
html[data-theme="dark"] body.page-bam .panel,
html[data-theme="dark"] body.page-bam .updates-section {
  background: #111214;
}

html[data-theme="dark"] body.page-bam .socials a > span,
html[data-theme="dark"] body.page-bam .facts-grid article,
html[data-theme="dark"] body.page-bam .updates-empty {
  background: #141518;
}