/* Regenerative Orthopedics Portland — athletic charcoal + orange, condensed type */
:root {
  /* Never let a forced-dark UA repaint the coal/orange palette. Must be "only light";
     the bare "light" value does not opt out of automatic dark-mode inversion. */
  color-scheme: only light;

  --coal: #191c1f;

  /* Bright orange is a FILL/RULE colour and is only used on coal (5.99:1 there).
     On the bone page it is 2.62:1, so anything that has to be READ on a light
     background uses --orange-text instead. Same hue family, same attitude. */
  --orange: #ff6a2b;
  --orange-hi: #ff8552;      /* hover fill, coal text on top */
  --orange-text: #b64008;    /* deep burnt orange: links, eyebrows, rules on light bg */

  --bone: #f6f5f2;
  --bone-2: #efede8;         /* row-hover tint — the worst-case light background */
  --ink: #22262a;
  --steel: #5f666d;          /* secondary text on light backgrounds */
  --coal-mute: #8a9199;      /* muted text on coal */
  --silver: #b8bdc2;         /* body text on coal */
  --nav: #c9ccd0;            /* nav links on coal */
  --line: #898680;           /* rules, cell gridlines, control borders (>=3:1 on bone) */

  --cond: "Barlow Condensed", sans-serif;
  --sans: "Barlow", -apple-system, sans-serif;

  /* Full-bleed rail. Three columns: gutter | content | gutter. Lets .hero span the
     viewport with NO vw units, so there is nothing to clip and no 200vw box. */
  --rail-cols:
    [full-start] minmax(1.4rem, 1fr)
    [rail-start] minmax(0, 62.2rem)
    [rail-end] minmax(1.4rem, 1fr)
    [full-end];
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--sans); background: var(--bone); color: var(--ink); line-height: 1.65; }
.rail { max-width: 1040px; margin: 0 auto; padding: 0 1.4rem; }
h1, h2, h3 { font-family: var(--cond); text-transform: uppercase; letter-spacing: .015em; line-height: 1.05; overflow-wrap: break-word; }
a { color: var(--orange-text); }
p { margin-bottom: 1rem; }

/* main is the full-bleed rail: normal blocks sit in the centre column, .hero spans edge to edge */
main.rail { max-width: none; padding: 0; display: grid; grid-template-columns: var(--rail-cols); align-content: start; }
main.rail > * { grid-column: rail; }
main.rail > .hero { grid-column: full; }

/* skip link — offscreen until focused, never display:none (must stay focusable) */
.skip-link {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: .75rem; left: .75rem; z-index: 1000;
  width: auto; height: auto; overflow: visible; clip: auto; clip-path: none;
  background: var(--orange); color: var(--coal); border: 3px solid var(--coal);
  font-family: var(--cond); font-weight: 700; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: .05em; text-decoration: none;
  padding: .65rem 1.2rem;
}

/* focus-visible — coal ring on light surfaces, white ring on the coal ones */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
details:focus-visible,
[tabindex]:focus-visible { outline: 3px solid var(--coal); outline-offset: 3px; }
.masthead a:focus-visible,
.hero a:focus-visible,
.cta-slab a:focus-visible,
.basefoot a:focus-visible { outline-color: #fff; }

/* masthead */
.masthead { background: var(--coal); border-bottom: 4px solid var(--orange); }
.masthead .rail { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.wordmark, .wordmark-foot { font-family: var(--cond); font-weight: 700; font-size: 1.45rem; color: #fff; text-decoration: none; letter-spacing: .04em; }
.wordmark em, .wordmark-foot em { color: var(--orange); font-style: normal; }
.masthead nav { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.4rem; row-gap: .55rem; justify-content: flex-end; }
.masthead nav a { color: var(--nav); text-decoration: none; font-weight: 600; font-size: .92rem; text-transform: uppercase; letter-spacing: .06em; }
.masthead nav a:hover { color: #fff; }
.mast-cta { background: var(--orange); color: var(--coal) !important; padding: .5rem 1.1rem; }
.mast-cta:hover { background: var(--orange-hi); }

/* hero — full-bleed band via the rail grid (no vw, no body overflow clipping) */
.hero { background: var(--coal); color: #fff; display: grid; grid-template-columns: var(--rail-cols); padding: 4.5rem 0 4rem; }
.hero > * { grid-column: rail; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.2rem); max-width: 800px; }
.hero h1 span { color: var(--orange); }
.hero .lede { color: var(--silver); font-size: 1.15rem; max-width: 620px; margin: 1.2rem 0 2rem; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

.btn { display: inline-block; text-decoration: none; font-family: var(--cond); text-transform: uppercase; font-weight: 700; letter-spacing: .05em; padding: .75rem 1.7rem; font-size: 1.05rem; }
.btn-primary { background: var(--orange); color: var(--coal); }
.btn-primary:hover { background: var(--orange-hi); }
/* Light surfaces are the DEFAULT for the outline button; the coal surfaces opt in below.
   (The old rule keyed on `main`, which also matched .hero — inside <main> — and painted the
   hero's only link to the article library coal-on-coal, 1.00:1.) */
.btn-secondary { border: 2px solid var(--coal); color: var(--coal); }
.btn-secondary:hover { background: #eceae4; }
.hero .btn-secondary,
.cta-slab .btn-secondary,
.masthead .btn-secondary,
.basefoot .btn-secondary { border-color: #fff; color: #fff; }
.hero .btn-secondary:hover,
.cta-slab .btn-secondary:hover,
.masthead .btn-secondary:hover,
.basefoot .btn-secondary:hover { background: rgba(255,255,255,.14); }

/* sections */
section { padding: 3rem 0; }
.tag { font-family: var(--cond); text-transform: uppercase; color: var(--orange-text); font-weight: 700; letter-spacing: .12em; font-size: .95rem; }
section h2 { font-size: 2.2rem; margin: .3rem 0 1rem; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }

.injury-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--line); border: 2px solid var(--line); margin-top: 1.5rem; }
.injury { background: #fff; padding: 1.3rem 1.2rem; }
.injury h3 { font-size: 1.25rem; color: var(--coal); margin-bottom: .35rem; }
.injury p { font-size: .88rem; color: var(--steel); margin: 0; }

.playbook { margin-top: 1.5rem; border-left: 4px solid var(--orange-text); }
.play { padding: 1.1rem 0 1.1rem 1.5rem; border-bottom: 1px solid var(--line); }
.play:last-child { border-bottom: none; }
.play h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.play p { color: var(--steel); font-size: .95rem; margin: 0; }

.faq details { border: 2px solid var(--line); background: #fff; margin-bottom: .7rem; padding: 1rem 1.2rem; }
.faq summary { font-family: var(--cond); text-transform: uppercase; font-weight: 700; font-size: 1.1rem; cursor: pointer; }
.faq details p { margin: .7rem 0 0; color: var(--steel); }

.cta-slab { background: var(--coal); color: #fff; padding: 3rem 2rem; margin: 1.5rem 0 3.5rem; border-left: 8px solid var(--orange); }
.cta-slab h2 { color: #fff; font-size: 2.4rem; }
.cta-slab p { color: var(--silver); max-width: 600px; margin-bottom: 1.5rem; }

/* articles */
.articles-hero { padding: 3.2rem 0 .8rem; max-width: 760px; }
.articles-hero h1 { font-size: 2.8rem; margin-bottom: .7rem; }
.articles-hero p { color: var(--steel); font-size: 1.05rem; }
.post-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 3px solid var(--coal); margin-bottom: 3.5rem; }
.post-card { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 0 1.5rem; align-items: center; padding: 1.5rem .5rem; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: background .15s; }
/* explicit placement: the card has four children in three columns, so auto-flow used to
   push "Read the excerpt" onto a second row underneath the date */
.post-card .post-date { grid-column: 1; grid-row: 1 / span 2; }
.post-card h2 { grid-column: 2; grid-row: 1; }
.post-card .post-teaser { grid-column: 2; grid-row: 2; }
.post-card .post-more { grid-column: 3; grid-row: 1 / span 2; }
.post-card:hover { background: var(--bone-2); }
.post-date { font-family: var(--cond); text-transform: uppercase; color: var(--steel); font-size: .95rem; margin: 0; }
.post-card h2 { font-size: 1.5rem; margin: 0 0 .3rem; }
.post-teaser { color: var(--steel); font-size: .92rem; margin: 0; }
.post-more { font-family: var(--cond); text-transform: uppercase; font-weight: 700; color: var(--orange-text); white-space: nowrap; }

/* article page */
.article-page { max-width: 760px; margin: 0 auto; padding: 3rem 0; }
.article-eyebrow { font-family: var(--cond); text-transform: uppercase; color: var(--orange-text); font-weight: 700; letter-spacing: .1em; }
.article-page h1 { font-size: clamp(2rem, 5vw, 3rem); margin: .4rem 0; }
.article-date { color: var(--steel); font-size: .9rem; margin-bottom: 1.8rem; }
.article-date time { color: inherit; white-space: nowrap; }
/* <blockquote>: kill the UA margin/indent, mark it as quoted with the orange rule the
   playbook already uses, and keep it at reading size — not a pull-quote */
.article-body { margin: 0; padding: .1rem 0 .1rem 1.5rem; border-left: 4px solid var(--orange-text); font-size: 1.05rem; font-style: normal; quotes: none; }
.article-body p { font-size: 1.05rem; }
.article-body p:last-child { margin-bottom: 0; }
.read-full { border: 3px solid var(--coal); background: #fff; padding: 1.7rem; margin-top: 2rem; }
.read-full p { color: var(--steel); font-size: .95rem; }
.read-full .btn { margin: .3rem .6rem .3rem 0; }
.source-link { margin: 1rem 0 0; }
.source-link a { color: var(--orange-text); font-family: var(--cond); text-transform: uppercase; font-weight: 700; letter-spacing: .04em; font-size: 1rem; text-decoration: underline; text-underline-offset: 3px; }
.source-link a:hover { color: var(--coal); }
.back-link a { font-family: var(--cond); text-transform: uppercase; font-weight: 700; text-decoration: none; }
.back-link a:hover { text-decoration: underline; }

.about-page, .notfound { width: min(740px, 100%); margin: 0 auto; padding: 3.5rem 0; }
.about-page h1, .notfound h1 { font-size: 2.6rem; margin-bottom: 1rem; }

/* footer */
.basefoot { background: var(--coal); color: var(--silver); padding: 3rem 0 2rem; margin-top: 2rem; font-size: .93rem; border-top: 4px solid var(--orange); }
.basefoot a { color: var(--orange); }
.wordmark-foot { margin-bottom: .6rem; }
.legal { font-size: .78rem; color: var(--coal-mute); margin-top: 1.2rem; }

/* ---------------------------------------------------------------- responsive */
/* intermediate step: 3+ column grids drop to 2 before anything drops to 1 */
/* original site-authored commentary under the quoted excerpt */
.commentary { margin: 2rem 0 0; }
.commentary h2 { font-size: 1.6rem; margin: 1.7rem 0 .6rem; }
.commentary p { color: var(--ink); }


/* ---- featured / related / hub pages ---- */
.featured { padding: 3rem 0; }
.featured h2 { font-size: 2.2rem; margin-bottom: 1.2rem; }
.featured-more { margin-top: 1rem; }
.featured-more a { font-family: var(--cond); text-transform: uppercase; font-weight: 700; text-decoration: none; }

.related { margin: 2.5rem 0 0; padding: 1.4rem 0 0; border-top: 3px solid var(--coal); }
.related h2 { font-size: 1.5rem; margin-bottom: .7rem; }
.related ul { list-style: none; display: grid; gap: 0; }
.related li { border-bottom: 1px solid var(--line); }
.related li a { display: block; padding: .7rem 0; text-decoration: none; font-weight: 600; }
.related li a:hover { color: var(--orange-text); }

/* These are grid items of main.rail. `max-width` + `margin: 0 auto` would stop them
   stretching to the track and size them to min-content instead, which overflows at
   narrow widths (a 454px word in a 345px track). A definite width centres safely. */
.hub { width: min(800px, 100%); margin: 0 auto; padding: 3rem 0; }
.hub h1 { font-size: clamp(2.4rem, 6vw, 3.4rem); margin-bottom: 1rem; }
.hub .hub-lede { font-size: 1.15rem; color: var(--steel); margin-bottom: 2rem; }
.hub h2 { font-size: 2rem; margin: 2.4rem 0 .8rem; }
.hub h3 { font-size: 1.35rem; margin: 1.6rem 0 .5rem; }
.hub ul, .hub ol { margin: 0 0 1.2rem 1.3rem; }
.hub li { margin-bottom: .5rem; }
.hub table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.8rem; font-size: .93rem; }
.hub th, .hub td { text-align: left; padding: .7rem .8rem; border-bottom: 2px solid var(--line); vertical-align: top; }
.hub th { font-family: var(--cond); text-transform: uppercase; font-weight: 700; font-size: 1.05rem; }
.hub dl { margin-bottom: 1.4rem; }
.hub dt { font-family: var(--cond); text-transform: uppercase; font-weight: 700; font-size: 1.1rem; margin-top: 1rem; }
.hub dd { margin-left: 0; color: var(--steel); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 980px) {
  .injury-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-card { grid-template-columns: 130px minmax(0, 1fr); }
  .post-card .post-date { grid-row: 1 / span 3; }
  .post-card .post-more { grid-column: 2; grid-row: 3; padding-top: .35rem; }
}
@media (max-width: 640px) {
  .split, .injury-grid { grid-template-columns: minmax(0, 1fr); }
  .post-card { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .post-card .post-date,
  .post-card h2,
  .post-card .post-teaser,
  .post-card .post-more { grid-column: 1; grid-row: auto; padding-top: 0; }
  .masthead .rail { flex-direction: column; align-items: flex-start; }
  .masthead nav { justify-content: flex-start; }
  .hero { padding: 3.2rem 0 3rem; }
}
@media (max-width: 480px) {
  .cta-slab { padding: 2.2rem 1.3rem; }
  .article-body { padding-left: 1.1rem; }
  .read-full { padding: 1.2rem; }
}

/* ---------------------------------------------------------------- print */

/* ---- featured images ---- */
.article-figure { margin: 0 0 2rem; border-top: 4px solid var(--orange); }
.article-figure img { width: 100%; height: auto; display: block; filter: saturate(.92); }
/* index rows: thumb | date | title+teaser | more  (explicit placement, matching the base rules) */
.post-card { grid-template-columns: 168px 120px minmax(0, 1fr) auto; }
.post-card .post-thumb { grid-column: 1; grid-row: 1 / span 2; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.post-card .post-date { grid-column: 2; }
.post-card h2 { grid-column: 3; }
.post-card .post-teaser { grid-column: 3; }
.post-card .post-more { grid-column: 4; }
/* homepage featured: three cards, image on top */
.featured .post-grid { border-top: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.featured .post-card { display: block; padding: 0; border: 2px solid var(--line); background: #fff; }
.featured .post-card .post-thumb { aspect-ratio: 16 / 9; border-bottom: 4px solid var(--orange); }
.featured .post-card > :not(.post-thumb) { margin: 0 1.2rem; }
.featured .post-card .post-date { margin-top: 1rem; }
.featured .post-card .post-more { display: inline-block; margin-bottom: 1.2rem; }
@media (max-width: 980px) {
  .post-card { grid-template-columns: 150px minmax(0, 1fr); }
  .post-card .post-thumb { grid-row: 1 / span 4; }
  .post-card .post-date { grid-column: 2; grid-row: 1; }
  .post-card h2 { grid-column: 2; grid-row: 2; }
  .post-card .post-teaser { grid-column: 2; grid-row: 3; }
  .post-card .post-more { grid-column: 2; grid-row: 4; padding-top: .35rem; }
}
@media (max-width: 820px) { .featured .post-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .post-card { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .post-card .post-thumb { grid-column: 1; grid-row: auto; aspect-ratio: 16 / 9; margin-bottom: .5rem; }
  .post-card .post-date, .post-card h2, .post-card .post-teaser, .post-card .post-more { grid-column: 1; grid-row: auto; padding-top: 0; }
}


/* ---- narrow-screen safety ---- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.2rem 0 1.8rem; }
.table-scroll table { margin: 0; min-width: 100%; }
.post-thumb, .article-figure img { max-width: 100%; min-width: 0; }
.post-card { min-width: 0; }


/* ---- nav submenu (keeps the bar on one line; no JS) ---- */
.submenu { position: relative; }
.submenu > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
}
.submenu > summary::-webkit-details-marker { display: none; }
.submenu > summary::after { content: "\25BE"; font-size: .7em; line-height: 1; transform: translateY(1px); }
.submenu[open] > summary::after { transform: rotate(180deg) translateY(-1px); }
.submenu-panel {
  position: absolute; top: calc(100% + .55rem); left: 0; z-index: 60;
  min-width: 15rem; display: grid; gap: .1rem; padding: .5rem;
  background:var(--coal);border:2px solid var(--orange);box-shadow:0 14px 30px rgba(0,0,0,.45);
}
.submenu-panel a { display: block; padding: .5rem .7rem; white-space: nowrap; color:var(--nav);text-decoration:none;font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em; }
.submenu-panel a:hover, .submenu-panel a:focus-visible { background:var(--orange);color:var(--coal); }
@media (max-width: 980px) {
  .submenu { width: 100%; }
  .submenu-panel { position: static; min-width: 0; width: 100%; margin-top: .4rem; }
  .submenu-panel a { white-space: normal; }
}


.masthead .submenu > summary { color: var(--nav); font-weight: 600; font-size: .92rem; text-transform: uppercase; letter-spacing: .06em; }
.masthead .submenu > summary:hover, .masthead .submenu[open] > summary { color: #fff; }
.masthead .submenu-panel a { color: var(--nav); }
.masthead .submenu-panel a:hover, .masthead .submenu-panel a:focus-visible { background: var(--orange); color: var(--coal); }

@media print {
  @page { margin: 14mm; }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  /* nav, CTAs and the skip link are noise on paper — and the coal/orange panels
     would otherwise print as white-on-white or a solid ink block */
  .skip-link, .masthead nav, .hero-ctas, .cta-slab, .btn, .back-link { display: none !important; }
  .masthead, .hero, .basefoot, .read-full, .injury, .faq details {
    background: #fff !important; color: #000 !important;
    border-color: #767676 !important; box-shadow: none !important;
  }
  .masthead { border-bottom-width: 1px; }
  .basefoot { border-top-width: 1px; margin-top: 1rem; }
  .hero { padding: 0 0 1.5rem; display: block; }
  .injury-grid { background: #fff !important; border-color: #767676 !important; gap: 0; }
  .injury { border: 1px solid #767676 !important; }
  main.rail { display: block; }
  .wordmark, .wordmark-foot, .wordmark em, .wordmark-foot em,
  .hero h1, .hero h1 span, .cta-slab h2 { color: #000 !important; }
  .hero .lede, .basefoot, .legal, .article-date, .post-date, .post-teaser,
  .injury p, .play p, .faq details p, .read-full p, .articles-hero p { color: #26292c !important; }
  .tag, .article-eyebrow, .post-more { color: #000 !important; }
  a, .basefoot a, .source-link a { color: #000 !important; text-decoration: underline; }
  .article-body { border-left: 3px solid #767676; break-inside: auto; }
  .playbook { border-left: 3px solid #767676; }
  .post-card, .play, .article-body p { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}

/* Homepage row teasing the "What is Regen Ortho?" explainer */
.explainer-row { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center;
  justify-content: space-between; margin: 2.4rem 0; padding: 1.5rem 1.7rem;
  border-top: 3px solid var(--orange); background: #fff; }
.explainer-copy { flex: 1 1 22rem; min-width: 0; }
.explainer-kicker { font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em;
  font-size: .85rem; color: var(--steel); margin-bottom: .3rem; }
.explainer-row h2 { font-size: 1.5rem; margin: 0 0 .45rem; }
.explainer-row p { margin: 0; color: var(--steel); }
.explainer-more { white-space: nowrap; font-family: var(--cond); text-transform: uppercase;
  font-weight: 700; letter-spacing: .04em; }