/* Dr. Georges Sioufi — theme + page composition, built on scrollcraft.css.
   See scrollcraft/builds/drsioufi/BRIEF.md for the original brief; the
   goniometer scroll gauge and the collapsible jump-index panel it carried
   were removed after live feedback in favour of a plain, always-visible
   horizontal nav bar. */

:root {
  /* ---- brand: warm near-black world, one clay accent, two lightnesses ---- */
  --sc-canvas:      #14100c;
  --sc-surface:     #1d1712;
  --sc-ink:         #f4ece0;
  --sc-ink-soft:    #a89a89;
  --sc-accent:      #dd7a49;
  --sc-accent-ink:  #14100c;

  --sc-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Outfit", system-ui, sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* the paper surface the page lands on after the world ends: same accent
     hue, a deeper lightness for 4.5:1 on a light ground (taste.md's
     two-stop-accent allowance for a hard light/dark cut). */
  --paper-bg:       #f6f1e7;
  --paper-surface:  #ffffff;
  --paper-ink:      #1c1712;
  --paper-ink-soft: #6c5f4f;
  --paper-line:     #e4dccb;
  --paper-accent:   #b1502a;

  --bar-z: 90;
}

/* ------------------------------------------------------------------ base */
body { overflow-x: clip; }
body:not(.fr-active) .lang-fr { display: none !important; }
body.fr-active .lang-en { display: none !important; }

/* The page's own scrollbar (the vertical track/thumb the browser draws down
   the right edge) needs to read against BOTH the dark world and the white
   paper it hands off to. The engine's default thumb colour is a tint of
   --sc-ink, which is a light colour meant for a dark ground and nearly
   vanishes over the paper section. The accent has enough contrast against
   both. */
@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--sc-accent) color-mix(in oklab, var(--paper-ink) 8%, transparent); scrollbar-width: auto; }
}
/* Firefox reads scrollbar-color above; Chrome, Edge and Safari read this
   instead (Safari does not support scrollbar-color at all), so both are
   needed for the thumb to actually show up everywhere. A visible width and
   a solid fill, not the 6px hairline "thin" reads as invisible on a lot of
   displays. */
html::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-track { background: color-mix(in oklab, var(--paper-ink) 8%, transparent); }
html::-webkit-scrollbar-thumb { background: var(--sc-accent); border-radius: 999px; }
html::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--sc-accent) 82%, black); }

/* ------------------------------------------------------------ fixed bar
   One horizontal bar, full width, the whole time: brand, the jump nav (the
   page's primary navigation, so it does not hide behind a click), and the
   language toggle. Light ground with dark ink on purpose — it sits over a
   dark cinematic world for the first four sections, so it needs its own
   opaque-enough backing to read as "the site's nav", not a caption. */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--bar-z);
  display: flex; align-items: center; gap: var(--sc-5);
  padding: 10px var(--sc-gutter);
  background: color-mix(in oklab, var(--paper-surface) 90%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in oklab, var(--paper-ink) 10%, transparent);
}
.bar__brand {
  display: flex; align-items: center; gap: var(--sc-2);
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base);
  color: var(--paper-ink); text-decoration: none; white-space: nowrap; flex: none;
}
.bar__brand img { height: 24px; width: auto; }
.bar__brand span { color: var(--paper-ink-soft); font-weight: 500; font-size: var(--sc-t-sm); }

/* Always one horizontal, scrollable strip — never a hamburger. Below the
   width where all seven labels fit, the strip scrolls sideways instead of
   wrapping or hiding, and main.js pans it so the current section's label
   scrolls into view on its own as the reader scrolls the page. */
.bar__nav {
  display: flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 1.8rem);
  flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
}
.bar__nav::-webkit-scrollbar { display: none; }
.bar__nav a {
  color: var(--paper-ink); text-decoration: none; white-space: nowrap;
  font-size: var(--sc-t-sm); padding: 6px 2px; flex: none;
  border-bottom: 2px solid transparent;
  transition: color var(--sc-d-fast), border-color var(--sc-d-fast);
}
.bar__nav a:hover { color: var(--paper-accent); }
.bar__nav a[aria-current="true"] { color: var(--paper-accent); font-weight: 700; border-color: var(--paper-accent); }
.bar__nav a:focus-visible { outline: 2px solid var(--paper-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bar__nav { scroll-behavior: auto; } }

.lang-toggle { display: flex; border: 1px solid color-mix(in oklab, var(--paper-ink) 25%, transparent); border-radius: var(--sc-r-pill); overflow: hidden; flex: none; }
.lang-toggle button {
  border: none; background: transparent; color: var(--paper-ink); cursor: pointer;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); font-weight: 600;
  letter-spacing: var(--sc-track-wide); padding: 5px 12px;
  transition: background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.lang-toggle button.active { background: var(--paper-accent); color: #fff; }
.lang-toggle button:focus-visible { outline: 2px solid var(--paper-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- legs
   These are portrait photographs (faces sit in the upper third) inside a
   full-bleed landscape stage. object-fit:cover's default 50% 50% centers the
   crop on the image's vertical middle, which on a wide/short desktop
   viewport lands somewhere around the chin or chest, not the face. Biasing
   toward the top has no effect on a narrow/tall phone viewport, where the
   image's height already fits without vertical cropping. */
#leg-welcome .sc-world__poster     { object-position: 50% 6%; }
#leg-credentials .sc-world__poster { object-position: 50% 8%; }
#leg-philosophy .sc-world__poster  { object-position: 50% 4%; }
#leg-book .sc-world__poster        { object-position: 50% 6%; }

/* The four hero photos read as framed portraits, not a full-bleed cinema
   screen: constrain each poster's width and center it on the canvas colour,
   which shows through as a margin on either side. The compound selector
   (two classes) is deliberate — it needs to out-specificity the engine's own
   ".sc-world__seg > :is(video,img,canvas)" rule, which sets width:100%. */
.sc-world__seg > .sc-world__poster {
  width: min(64rem, 80vw);
  margin-inline: auto;
}

/* ------------------------------------------------------------ world copy
   Contrast over a moving photograph cannot be guaranteed by a single shared
   band scrim: the push-in zoom on each leg slowly reveals more of the frame,
   including whatever bright art or wall sits behind the subject, and the
   verification pass caught exactly that (worst-frame contrast down to
   ~1:1 on three blocks). Every copy composition below gets its own backing
   plate instead, which is measured, not assumed. */
.copy-card {
  background: color-mix(in oklab, var(--sc-canvas) 90%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: var(--sc-r-lg);
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 3.4vw, 2.5rem);
  box-shadow: var(--sc-e2);
}

.world-copy--hero .label {
  display: block; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent);
  margin-bottom: var(--sc-3);
}
.world-copy--hero h1 { margin: 0 0 var(--sc-2); }
.world-copy--hero .credential-line {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  letter-spacing: var(--sc-track-normal); margin: 0 0 var(--sc-4);
}
.world-copy--hero .sc-lede { margin: 0; }

.cred-shell {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); bottom: clamp(3rem, 14vh, 9rem);
  max-width: min(34rem, 74vw);
  display: flex; flex-direction: column; gap: var(--sc-2);
}
/* Each line carries its own opaque-ish backing rather than one shared card
   behind the whole list: a background set on the SAME element the engine
   fades (not an ancestor) is what the verification pass can actually grade,
   and it means a line's card appears exactly when that line does, with
   nothing left over for the legs before or after it. */
.cred-line {
  display: flex; align-items: baseline; gap: var(--sc-3);
  margin: 0; padding: var(--sc-3) clamp(1.1rem, 2.6vw, 1.6rem);
  background: color-mix(in oklab, var(--sc-canvas) 90%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e1);
  font-size: var(--sc-t-base); color: var(--sc-ink); text-wrap: pretty;
  will-change: opacity, transform;
}
.cred-line__tick { flex: none; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--sc-accent); }
.cred-line--final { color: var(--sc-ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .cred-line { transform: none !important; } }

.world-copy--quote blockquote {
  margin: 0; font-family: var(--sc-font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 1.6vw + 1.1rem, 2.4rem); line-height: 1.32; color: var(--sc-ink);
  text-wrap: balance; max-width: 20ch;
}

.world-copy--close h2 { margin: 0 0 var(--sc-4); max-width: 16ch; }
.close-cta { display: flex; gap: var(--sc-3); flex-wrap: wrap; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 13px 22px; border-radius: var(--sc-r-md); font-weight: 600; font-size: var(--sc-t-sm);
  cursor: pointer; border: 1px solid transparent; text-decoration: none;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.btn-primary { background: var(--sc-accent); color: var(--sc-accent-ink); }
.btn-primary:hover { background: color-mix(in oklab, var(--sc-accent) 85%, white); }
.btn-ghost { background: transparent; color: var(--sc-ink); border-color: color-mix(in oklab, var(--sc-ink) 34%, transparent); }
.btn-ghost:hover { border-color: var(--sc-ink); }

/* ============================================================== paper ==
   The world ends; the page lands here. Opaque, own stacking context, higher
   z-index than the fixed world (1) and its copy layer (20), so it visibly
   covers the world once the reader scrolls past the flight. Deliberately
   inverted: light ground, ink re-stated per taste.md (color is inherited as
   a computed value, so it must be restated, not just the token). */
.paper {
  position: relative; z-index: 40; isolation: isolate;
  background: var(--paper-bg); color: var(--paper-ink);
  box-shadow: 0 -60px 90px -40px rgba(20, 16, 12, 0.5);
}
.paper a { color: var(--paper-accent); }
.paper h1, .paper h2, .paper h3 { color: var(--paper-ink); }
.paper .sc-body, .paper p { color: var(--paper-ink-soft); }
.paper .sc-label { color: var(--paper-accent); }
.paper .sc-rule { background: var(--paper-line); }
.paper--alt { background: var(--paper-surface); }

/* The same "cover upward" seam the paper itself uses against the fixed
   world (a rounded top edge, a shadow cast onto whatever is above),
   repeated at every section boundary inside the paper so Expertise and
   Contact arrive the same way Training Path does, not by plain scroll-past. */
#expertise, #contact {
  position: relative;
  border-radius: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) 0 0;
  box-shadow: 0 -36px 54px -34px rgba(20, 16, 12, 0.32);
}
.paper ::selection { background: var(--paper-accent); color: #fff; }
.paper :focus-visible { outline-color: var(--paper-accent); }

.paper__head { max-width: 62ch; margin-bottom: var(--sc-7); }
.paper__head .sc-label { display: block; margin-bottom: var(--sc-3); }
.paper__head h2 { margin: 0 0 var(--sc-3); }

/* ---- training path ------------------------------------------------- */
.path-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.path-photo { border-radius: var(--sc-r-lg); overflow: hidden; box-shadow: var(--sc-e3); position: relative; }
.path-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.path-note {
  position: absolute; left: -1.5rem; bottom: -1.5rem; width: 46%;
  border-radius: var(--sc-r-md); overflow: hidden; box-shadow: var(--sc-e2);
  border: 4px solid var(--paper-bg);
}
.path-note img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5/4; }

.milestones { list-style: none; margin: var(--sc-6) 0 0; padding: 0; position: relative; }
.milestones::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px;
  background: repeating-linear-gradient(to bottom, var(--paper-line) 0 6px, transparent 6px 12px);
}
.milestones li { position: relative; padding: 0 0 var(--sc-6) 2.2rem; }
.milestones li:last-child { padding-bottom: 0; }
.milestones li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper-accent); border: 3px solid var(--paper-bg); box-shadow: 0 0 0 1px var(--paper-accent);
}
.milestones .yr {
  display: block; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); font-weight: 600;
  color: var(--paper-accent); text-transform: uppercase; letter-spacing: var(--sc-track-wide); margin-bottom: 6px;
}
.milestones h3 { margin: 0 0 4px; font-size: var(--sc-t-lg); }
.milestones p { margin: 0; font-size: var(--sc-t-sm); }

/* ---- expertise ------------------------------------------------------- */
.expertise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-4); }
.x-card {
  background: var(--paper-bg); border: 1px solid var(--paper-line); border-radius: var(--sc-r-lg);
  padding: var(--sc-6) var(--sc-5); display: flex; flex-direction: column; gap: var(--sc-3);
  transition: border-color var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out);
}
.x-card:hover { border-color: var(--paper-accent); transform: translateY(-3px); box-shadow: var(--sc-e2); }
.x-icon { width: 40px; height: 40px; color: var(--paper-accent); }
.x-icon svg { width: 100%; height: 100%; display: block; }
.x-card .tag {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); text-transform: uppercase;
  letter-spacing: var(--sc-track-wide); color: var(--paper-accent);
}
.x-card h3 { margin: 0; font-size: var(--sc-t-lg); }
.x-card p { margin: 0; font-size: var(--sc-t-sm); }

.practice-strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); margin-top: var(--sc-8); }
.practice-strip figure { margin: 0; border-radius: var(--sc-r-lg); overflow: hidden; box-shadow: var(--sc-e2); }
.practice-strip img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5/4; }

/* ---- contact / clinics ------------------------------------------------ */
.notice {
  text-align: center; font-size: var(--sc-t-sm); color: var(--paper-ink);
  background: color-mix(in oklab, var(--paper-accent) 12%, var(--paper-bg));
  border: 1px solid color-mix(in oklab, var(--paper-accent) 30%, transparent);
  border-radius: var(--sc-r-md); padding: var(--sc-4) var(--sc-5); margin: 0 0 var(--sc-7);
}
.notice strong { color: var(--paper-ink); }

.info-line { margin: var(--sc-8) 0 0; font-size: var(--sc-t-sm); color: var(--paper-ink-soft); }
.info-line a { color: var(--paper-ink); font-weight: 600; }
.info-line a:hover { color: var(--paper-accent); }

.clinic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-4); }
.clinic-card {
  background: var(--paper-surface); border: 1px solid var(--paper-line); border-radius: var(--sc-r-lg);
  padding: var(--sc-6) var(--sc-5); transition: border-color var(--sc-d-base) var(--sc-ease-out);
}
.clinic-card:hover { border-color: var(--paper-accent); }
.clinic-card .tag { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); text-transform: uppercase; letter-spacing: var(--sc-track-wide); color: var(--paper-accent); }
.clinic-card h3 { margin: var(--sc-2) 0 2px; font-size: var(--sc-t-lg); }
.clinic-card .city { display: block; color: var(--paper-ink-soft); font-size: var(--sc-t-sm); margin-bottom: var(--sc-4); }
.clinic-card .addr { font-size: var(--sc-t-sm); color: var(--paper-ink); margin: 0 0 var(--sc-3); }
.clinic-map {
  border-radius: var(--sc-r-md); overflow: hidden; margin: 0 0 var(--sc-3);
  border: 1px solid var(--paper-line); aspect-ratio: 16 / 10; background: var(--paper-line);
}
.clinic-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.25) contrast(1.02); }
.clinic-card .hours { font-size: var(--sc-t-xs); color: var(--paper-ink-soft); margin: 0 0 var(--sc-3); }
.clinic-card .phone { font-family: var(--sc-font-mono); font-weight: 600; color: var(--paper-ink); font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); display: block; margin-bottom: var(--sc-3); }
.clinic-card .phone a { color: var(--paper-ink); }
.clinic-card .phone a:hover { color: var(--paper-accent); }
.clinic-card .directions { font-size: var(--sc-t-xs); font-weight: 600; }

.info-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-6); margin-top: var(--sc-9); }

/* ---- footer ------------------------------------------------------------ */
.foot { background: #100c09; color: #d8ccbc; padding: var(--sc-8) 0 var(--sc-6); }
.foot a { color: #fff; }
.foot a:hover { color: var(--paper-accent); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sc-5); margin-bottom: var(--sc-6); }
.foot-brand { font-family: var(--sc-font-display); color: #fff; font-size: var(--sc-t-lg); margin: 0 0 6px; }
.foot-tag { color: #a4967f; max-width: 38ch; margin: 0; font-size: var(--sc-t-sm); }
.foot h4 { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); text-transform: uppercase; letter-spacing: var(--sc-track-wide); color: #a4967f; margin: 0 0 var(--sc-3); }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.foot-note { font-size: var(--sc-t-xs); color: #83766380; color: #8a7c68; border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--sc-4); line-height: 1.6; }

/* ============================================================ responsive */
@media (max-width: 900px) {
  .path-grid, .practice-strip { grid-template-columns: 1fr; }
  .expertise-grid, .clinic-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .path-note { width: 52%; left: -0.75rem; bottom: -1rem; }
  .close-cta { flex-direction: column; align-items: stretch; }
  .cred-shell { max-width: min(30rem, 84vw); }

  /* Below 900px the strip is tighter and smaller, not hidden: it still
     scrolls sideways and still pans to the current section on its own. */
  .bar__brand span { display: none; }
  .bar__nav { gap: 1rem; }
  .bar__nav a { font-size: var(--sc-t-xs); }
}
@media (max-width: 620px) {
  .expertise-grid, .clinic-grid { grid-template-columns: 1fr; }
  .world-copy--hero h1 { font-size: var(--sc-t-3xl); }
}