/* =========================================================
   Dr. Abdeen Shaker — design system.
   Implements BRAND_IDENTITY.md v2.0, cut from the business card and the master
   logo: midnight navy, the gold archwire, Playfair Display + Montserrat +
   Tajawal. Gold is type only on dark — on light it fails at 2.55:1.
   ========================================================= */
:root{
  /* colour — BRAND_IDENTITY.md §1, measured from the master logo and the card.
     --navy is the logo's own fill; --navy-deep is the card's ground. */
  --navy:#0A203F; --navy-deep:#10182B; --blue:#2A4A73;
  --blue-soft:#9FB0C9; --blue-pale:#C3CEDF;
  --white:#FFFFFF; --tint:#FAF8F3;
  --ink:#1C2433; --muted:#616B7D; --line:#E6E2D8;
  /* gold — the archwire. 6.39:1 on navy and 6.95:1 on the card ground, so it
     may be type there; 2.55:1 on white, so on light it is a hairline only. */
  --gold:#C79C3C; --gold-light:#F1D899; --gold-tint:#F6EEDC;
  /* WhatsApp brand green — the floating action button only, nowhere else */
  --whatsapp:#25D366;
  /* the archwire, in two layers: the brackets keep their drawn proportions at
     the inline-start while the wire itself is a gradient that spans any width */
  --brackets:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 12'%3E%3Crect x='6' y='1.6' width='9' height='9' rx='1.6' fill='none' stroke='%23C79C3C' stroke-width='1.7'/%3E%3Crect x='22' y='1.6' width='9' height='9' rx='1.6' fill='none' stroke='%23C79C3C' stroke-width='1.7'/%3E%3C/svg%3E");
  --brackets-hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 12'%3E%3Crect x='6' y='1.6' width='9' height='9' rx='1.6' fill='none' stroke='%23F1D899' stroke-width='1.7'/%3E%3Crect x='22' y='1.6' width='9' height='9' rx='1.6' fill='none' stroke='%23F1D899' stroke-width='1.7'/%3E%3C/svg%3E");

  /* form — §5: 4px small controls, 8px cards and panels, 999px pills only */
  --r-sm:4px; --r:8px; --r-lg:8px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(27,79,114,.06);
  --shadow:0 2px 12px rgba(27,79,114,.10);
  --shadow-lg:0 8px 28px rgba(27,79,114,.16);
  --container:1140px; --gutter:clamp(16px,4vw,24px); --section-y:clamp(56px,8vw,96px);
  /* one step above h1; the home hero's name is the only thing that may use it */
  --fs-display:clamp(2.4rem,1.7rem + 2.9vw,3.5rem);
  --fs-small:.875rem; --fs-micro:13px;

  /* type — §2. One superfamily across both scripts. */
  --font:"Montserrat",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-head:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-ar:"Tajawal","Montserrat","Segoe UI",Tahoma,sans-serif;
}

/* ---- reset / base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--white);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Arabic renders optically smaller than Latin at the same size, so it goes up ~10%,
   with looser leading for the deeper descenders. */
:lang(ar) body,[dir="rtl"] body{font-family:var(--font-ar);font-size:18.7px;line-height:1.8}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--navy);line-height:1.15;
  letter-spacing:-.02em;margin:0 0 .5em;font-weight:700}
/* The card divides its two faces of type: the Didone carries the name, the
   geometric sans carries everything that is read rather than announced. */
h3,h4{font-family:var(--font);font-weight:600;letter-spacing:-.005em;line-height:1.3}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,:lang(ar) h4,[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{
  font-family:var(--font-ar);letter-spacing:0;font-weight:700}
/* Letter-spacing breaks the cursive joins and makes Arabic look defective, so it is
   cancelled wholesale rather than per component -- one guard, no future regressions. */
html[lang="ar"] *{letter-spacing:normal !important}
/* Scale is BRAND_IDENTITY §2's own numbers -- 44 / 32 / 24 -- on a perfect fourth.
   The page previously ran h1 to 58px and h2 to 41px, which pushed every level into the
   same band and left nothing to dominate. --fs-display is the one step above h1 and is
   spent once per site, on the doctor's name in the home hero. */
h1{font-size:clamp(1.95rem,1.5rem + 1.8vw,2.75rem);line-height:1.12;letter-spacing:-.022em}
h2{font-size:clamp(1.5rem,1.25rem + 1.1vw,2rem);line-height:1.2;letter-spacing:-.014em}
h3{font-size:1.5rem;font-weight:600;letter-spacing:0;line-height:1.3}
h4{font-size:1.0625rem;font-weight:600;letter-spacing:0;line-height:1.35}
p{margin:0 0 1rem}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--navy-deep)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-sm)}
/* Blazor's FocusOnNavigate focuses the page <h1>; don't show a ring on non-interactive targets */
[tabindex="-1"]:focus,h1:focus,h2:focus{outline:none}

/* ---- layout helpers ---- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
/* Reading measure for a single case or publication: full-bleed clinical photos at container
   width are wider than the eye can compare across. */
.container--narrow{max-width:56rem}
.section--tint{background:var(--tint)}
/* The card sets its standfirsts in sentence case -- there is no tracked-caps
   gesture anywhere on it, so the site does not invent one. */
.eyebrow{display:inline-block;font-size:.92rem;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--navy);margin-bottom:.6rem}
:lang(ar) .eyebrow,[dir="rtl"] .eyebrow{letter-spacing:0}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink);max-width:46rem}
/* The archwire -- a gold wire with two brackets threaded on it, taken from the
   rule under the name on both faces of the card. It is the signature device and
   it means something: the wire is the instrument. Brackets sit at the
   inline-start, so the whole mark mirrors in Arabic exactly as the card does. */
.rule::after,
.hero h1::after,
.section-head h2::after,
.about-block h2::after{content:"";display:block;width:180px;max-width:100%;height:12px;
  margin-top:.9rem;
  background:var(--brackets) 0 50%/44px 12px no-repeat,
             linear-gradient(var(--gold),var(--gold)) 0 50%/100% 1.3px no-repeat}
/* the name is the one display-scale heading, so its wire runs the full measure */
.hero--split .hero__name::after{width:min(340px,90%)}
[dir="rtl"] .rule::after,
[dir="rtl"] .hero h1::after,
[dir="rtl"] .section-head h2::after,
[dir="rtl"] .about-block h2::after{transform:scaleX(-1)}
/* Heroes other than the home split hero centre their type, so the rule centres with it. */
.hero:not(.hero--split) h1::after,
.center .rule::after{margin-inline:auto}

.center{text-align:center}
.center .lead{margin-inline:auto}
.stack-sm>*+*{margin-top:.6rem}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--font);
  font-weight:600;font-size:15px;letter-spacing:.02em;border:0;border-radius:var(--r-sm);cursor:pointer;
  padding:14px 28px;transition:background-color .16s ease,color .16s ease,box-shadow .16s ease;
  /* wrap + cap to the container so a long label never spills past a rounded edge on mobile */
  text-decoration:none;text-align:center;max-width:100%}
:lang(ar) .btn,[dir="rtl"] .btn{font-family:var(--font-ar)}
.btn svg{width:18px;height:18px;flex:none}
/* Navy on gold measures 6.39:1, which is what lets the primary CTA actually be
   gold -- the card's own gold contact discs, at button scale. */
.btn--primary{background:var(--gold);color:var(--navy)}
.btn--primary:hover{background:var(--gold-light);color:var(--navy)}
.btn--ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn--ghost:hover{background:var(--tint);color:var(--navy-deep)}
/* WhatsApp CTAs take the same gold as any other primary button. The green stays
   on the floating action button alone, where it reads as a platform affordance. */
.btn--wa{background:var(--gold);color:var(--navy)}
.btn--wa:hover{background:var(--gold-light);color:var(--navy)}
.btn--onDark{background:var(--gold);color:var(--navy)}
.btn--onDark:hover{background:var(--gold-light);color:var(--navy)}
/* the outline button has to reverse on the two dark grounds */
.hero--split .btn--ghost,.cta-dark .btn--ghost{color:var(--white);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.hero--split .btn--ghost:hover,.cta-dark .btn--ghost:hover{
  background:rgba(255,255,255,.08);color:var(--white)}
.btn--lg{padding:16px 32px;font-size:16px}
/* tighten oversized buttons on phones so wide labels stay on one comfortable line */
@media (max-width:560px){
  .btn{padding:13px 20px}
  .btn--lg{padding:14px 24px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.btn,.card,.wa-float{transition:none}}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.site-header__bar{display:flex;align-items:center;gap:1.5rem;min-height:72px}
/* flex:none — the brand never shrinks. It used to carry min-width:0 and an ellipsis, which
   made the doctor's name the first thing sacrificed when the bar got tight. The nav absorbs
   the pressure instead, and below 900px it leaves the bar entirely for the drawer. */
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-head);font-weight:700;
  font-size:1.15rem;color:var(--navy);letter-spacing:-.02em;white-space:nowrap;flex:none}
:lang(ar) .brand,[dir="rtl"] .brand{font-family:var(--font-ar)}
/* The master artwork, not a redraw. The monogram is wider than it is tall, so it
   is sized by height and left to find its own width. */
.brand__mark{display:grid;place-items:center;flex:none}
.brand__mark img{height:34px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:.35rem;margin-inline-start:auto}
.nav a{color:var(--navy);font-weight:500;font-size:.97rem;padding:.5rem .8rem;border-radius:8px}
.nav a:hover{background:var(--tint);color:var(--navy)}
.nav__cta{display:none}
.header-actions{display:flex;align-items:center;gap:.7rem}

/* Seven nav items plus the language switch and Book button run out of bar before
   the 900px drawer breakpoint. Tighten the nav here rather than let .brand's
   ellipsis truncate the doctor's name -- 1360, so it actually covers a 1280 laptop. */
@media (max-width:1360px){
  .site-header__bar{gap:.85rem}
  .nav{gap:.1rem}
  .nav a{padding:.5rem .55rem;font-size:.93rem}
}

/* language switch — one compact link to the other language (see LangSwitch.razor) */
.lang-switch{display:inline-flex;align-items:center;gap:.4rem;height:38px;padding:0 .85rem;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--white);
  color:var(--navy);font-size:.9rem;font-weight:600;line-height:1;white-space:nowrap;flex:none;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease}
.lang-switch:hover{background:var(--tint);border-color:var(--navy);color:var(--navy)}
.lang-switch svg{width:16px;height:16px;flex:none;color:var(--muted)}
.lang-switch:hover svg{color:var(--navy)}
.lang-switch span[lang="ar"],.lang-switch[lang="ar"] span{font-family:var(--font-ar)}
@media (prefers-reduced-motion:reduce){.lang-switch{transition:none}}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.nav-toggle{display:none;width:44px;height:44px;flex:none;border:1px solid var(--line);
  background:var(--white);border-radius:var(--r-sm);cursor:pointer;align-items:center;justify-content:center;
  color:var(--navy)}
.nav-toggle svg{width:22px;height:22px}

@media (max-width:900px){
  /* backdrop-filter would make the header the containing block for its fixed drawer,
     anchoring the drawer to the 64px header instead of the viewport. */
  :root{--header-h:64px}
  .site-header{background:var(--white);backdrop-filter:none}
  .site-header__bar{gap:.5rem;min-height:var(--header-h)}

  .brand{font-size:1rem}
  /* the mark is sized by height only -- a fixed square would squash it */
  .brand__mark img{height:28px}

  /* the drawer leaves the flow, so the actions take over pushing to the inline end */
  .header-actions{margin-inline-start:auto}
  .nav-toggle{display:inline-flex;position:relative;z-index:2}

  /* opens below the bar, so brand and language switch stay visible and tappable */
  .nav{position:fixed;inset-block:var(--header-h) 0;inset-inline-end:0;width:min(84vw,320px);z-index:1;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;margin:0;
    padding:.75rem 1.2rem 1.5rem;background:var(--white);box-shadow:var(--shadow-lg);
    overflow-y:auto;overscroll-behavior:contain;
    /* hidden, not just translated: an off-screen visible panel widens the document */
    visibility:hidden;transform:translateX(100%);
    transition:transform .25s ease,visibility 0s linear .25s}
  [dir="rtl"] .nav{transform:translateX(-100%)}
  .nav a{padding:.95rem .5rem;font-size:1.05rem;border-bottom:1px solid var(--line);border-radius:0}
  /* .nav a wins on specificity over .btn--wa, so restate the button's colours here */
  .nav a.nav__cta{display:inline-flex;justify-content:center;margin-top:1.4rem;border-bottom:0;
    border-radius:var(--r-sm);background:var(--navy);color:var(--white);font-size:15px}
  .nav a.nav__cta:hover{background:var(--navy-deep);color:var(--white)}

  body.nav-open{overflow:hidden}
  body.nav-open .nav{visibility:visible;transform:translateX(0);transition:transform .25s ease}
  body.nav-open::after{content:"";position:fixed;inset:var(--header-h) 0 0;background:rgba(21,63,91,.5);z-index:40}
  /* the float would otherwise sit on top of the open drawer */
  body.nav-open .wa-float{opacity:0;pointer-events:none}
}

/* the booking CTA duplicates the WhatsApp float once the bar gets tight */
@media (max-width:560px){.header-actions .btn{display:none}}

@media (prefers-reduced-motion:reduce){.nav{transition:none}}

/* ---- hero ---- */
/* The card has two faces and so does the site: the home hero reproduces the navy
   front, every inner hero is the light back. Flat fills only -- the card has no
   gradients and no shadows. */
.hero{background:var(--tint);position:relative;overflow:hidden}
.hero--split{background:var(--navy-deep);color:var(--blue-pale)}
.hero--split h1,.hero--split .hero__name{color:var(--white)}
.hero--split .lead{color:var(--blue-pale)}
.hero--split .eyebrow{color:var(--gold)}
.hero--split h1::after{background-image:var(--brackets-hi),
  linear-gradient(var(--gold-light),var(--gold-light))}
.hero--split .chip{background:transparent;color:var(--white);
  border-color:rgba(199,156,60,.45)}
.hero--split .hero__portrait{background:var(--navy-deep);
  border-color:rgba(199,156,60,.35)}
.hero__inner{padding-block:clamp(3.5rem,8vw,6.5rem);text-align:center}
.hero h1{margin-bottom:.6rem}
.hero .lead{margin-inline:auto;margin-bottom:2rem}
/* Heroes with no CTA under the lead were doubling the lead's bottom margin onto the
   band's own padding, leaving a tall empty slab of tint. */
.hero .lead:last-child{margin-bottom:0}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* ---- credential chips (gold dot = credential) ---- */
.chips{display:flex;flex-wrap:wrap;gap:.55rem .7rem;justify-content:center;margin-bottom:1.6rem;
  list-style:none;padding:0}
.chips--start{justify-content:start}
.chip{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--navy);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);padding:.42rem .95rem}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}

/* ---- grids / cards ---- */
.grid{display:grid;gap:1.4rem}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.grid--3{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid--3,.grid--2{grid-template-columns:1fr}}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem 1.5rem;transition:border-color .18s ease}
/* §5 asks for hairlines over shadows, so hover moves the keyline, not the card. A 3px
   lift plus a shadow on every card in the page was doing the opposite. */
.card:hover{border-color:var(--navy)}
/* The 46x2 rule is the identity's signature (§5) and stays under page and section
   headings. It used to repeat inside every card too, which put it on screen six times
   at once and turned a signature into wallpaper. */
.card h3{margin-bottom:.55rem;font-size:1.25rem}
.card p{color:var(--ink);margin:0}
.card__icon{width:44px;height:44px;border-radius:var(--r);background:var(--tint);color:var(--navy);
  display:grid;place-items:center;margin-bottom:1rem}
.card__icon svg{width:24px;height:24px}
.card--link{display:flex;flex-direction:column}
.card--link .more{margin-top:1rem;font-weight:600;color:var(--blue)}

/* ---- section heading ---- */
/* Every section head used to be centred, so the page had no vertical edge to travel down
   and the two moments that should read as emphatic -- the hero and the navy band -- looked
   like everything else. Heads are start-aligned; centring is now opt-in. It also gives the
   Arabic build a strong right edge instead of an accidentally symmetrical column. */
.section-head{max-width:46rem;margin-bottom:2.4rem}
.section-head p{color:var(--ink);margin-bottom:0}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center h2::after{margin-inline:auto}

/* ---- dark CTA ---- */
/* A full-width navy band for the booking section, flat solid with no gradient.
   This is the one place the rule runs in gold-light, once per page. */
.cta-dark{background:var(--navy);color:var(--blue-pale);border-radius:var(--r-lg);
  text-align:center;padding:clamp(2.5rem,6vw,4.5rem) var(--gutter)}
.cta-dark h2{color:var(--white);margin-bottom:0}
.cta-dark h2::after{content:"";display:block;width:180px;max-width:100%;height:12px;
  background:var(--brackets-hi) 0 50%/44px 12px no-repeat,
             linear-gradient(var(--gold-light),var(--gold-light)) 0 50%/100% 1.3px no-repeat;
  margin:.9rem auto 1.4rem}
[dir="rtl"] .cta-dark h2::after{transform:scaleX(-1)}
.cta-dark p{color:var(--blue-pale);max-width:40rem;margin-inline:auto;margin-bottom:1.8rem}

/* ---- consent note ---- */
.consent{font-size:.9rem;color:var(--muted);border-inline-start:3px solid var(--gold);
  padding-inline-start:.9rem;margin:0}
/* own line inside a centered section, but the note itself stays start-aligned */
.consent-wrap{width:max-content;max-width:100%;margin:1.6rem auto 0;text-align:start}

/* ---- WhatsApp float ---- */
.wa-float{position:fixed;bottom:1.4rem;inset-inline-end:1.4rem;z-index:60;width:56px;height:56px;
  border-radius:50%;background:var(--whatsapp);display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(27,79,114,.28);transition:transform .16s ease,opacity .2s ease}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:30px;height:30px;fill:var(--white)}

/* ---- footer ---- */
/* no margin-top: the preceding .section already ends with a full --section-y of padding */
/* Muted grey never goes on navy -- it fails at 1.6:1. Secondary text is blue-pale (4.8:1). */
.site-footer{background:var(--navy-deep);color:var(--blue-pale);padding-block:3rem 2rem}
.site-footer a{color:var(--blue-pale)}
.site-footer a:hover{color:var(--white)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
@media (max-width:720px){.footer-grid{grid-template-columns:1fr}}
/* The reversed lockup already carries the name, so the footer drops the text brand. */
.footer-lockup{height:96px;width:auto;margin:0 0 1rem;display:block}
[dir="rtl"] .footer-lockup{margin-inline:0 auto}
.footer-col h2{color:var(--white);font-size:.95rem;letter-spacing:0;margin-bottom:.9rem}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:.5rem}
.footer-col h2.footer-col__label{color:var(--blue-pale);font-size:13px;font-weight:600;letter-spacing:0;
  text-transform:none;margin:1.5rem 0 .7rem}
:lang(ar) .footer-col h2.footer-col__label,[dir="rtl"] .footer-col h2.footer-col__label{letter-spacing:0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2.2rem;padding-top:1.3rem;
  font-size:.85rem;color:var(--blue-pale)}

/* ---- social profiles ---- */
/* icon row — light by default, inverted inside the dark footer */
.social-icons{display:flex;gap:.6rem;margin-top:.4rem}
.social-icons a{width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--tint);border:1px solid transparent;color:var(--navy);
  transition:background-color .16s ease,color .16s ease,border-color .16s ease}
.social-icons a:hover{background:var(--navy);border-color:var(--navy);color:var(--white)}
.social-icons svg{width:18px;height:18px;fill:currentColor}
.site-footer .social-icons a{background:rgba(255,255,255,.08);border-color:transparent;color:var(--blue-pale)}
.site-footer .social-icons a:hover{background:var(--white);color:var(--navy)}

/* labelled list — one row per network with its handle (Contact page) */
.social-list{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media (max-width:780px){.social-list{grid-template-columns:1fr}}
.social-list a{display:flex;align-items:center;gap:.8rem;height:100%;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);padding:1rem;color:var(--navy);
  box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.social-list a:hover{transform:translateY(-3px);box-shadow:var(--shadow);
  border-color:color-mix(in srgb,var(--navy) 35%,var(--line))}
.social-list__icon{width:36px;height:36px;flex:none;border-radius:var(--r);display:grid;place-items:center;
  background:var(--tint);color:var(--navy)}
.social-list__icon svg{width:20px;height:20px;fill:currentColor}
.social-list__text{display:flex;flex-direction:column;min-width:0;line-height:1.4}
.social-list__name{font-weight:600}
.social-list__handle{font-size:.84rem;color:var(--muted);overflow-wrap:anywhere}
.social-list__go{margin-inline-start:auto;color:var(--muted);display:grid;place-items:center}
.social-list__go svg{width:18px;height:18px}
[dir="rtl"] .social-list__go svg{transform:scaleX(-1)}
/* feature cards — the Home "Follow & verify" section */
.social-cards{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
@media (max-width:860px){.social-cards{grid-template-columns:1fr}}
.social-card{display:flex;flex-direction:column;align-items:flex-start;height:100%;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.7rem 1.6rem;box-shadow:var(--shadow-sm);color:var(--navy);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.social-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--navy);
  border-color:color-mix(in srgb,var(--navy) 35%,var(--line))}
.social-card__icon{width:48px;height:48px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--tint);color:var(--navy);margin-bottom:1.1rem;
  transition:background-color .18s ease,color .18s ease}
.social-card:hover .social-card__icon{background:var(--navy);color:var(--white)}
.social-card__icon svg{width:24px;height:24px;fill:currentColor}
.social-card__name{font-family:var(--font-head);font-weight:600;font-size:1.15rem;letter-spacing:0;color:var(--navy)}
.social-card__desc{color:var(--ink);margin-top:.2rem}
.social-card__handle{margin-top:auto;padding-top:.85rem;font-size:.88rem;color:var(--muted);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.social-card__go{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.2rem;
  font-weight:600;font-size:.92rem;color:var(--blue)}
.social-card__go svg{width:16px;height:16px}
[dir="rtl"] .social-card__go svg{transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){
  .social-list a,.social-icons a,.social-card,.social-card__icon{transition:none}
}

/* ---- breadcrumbs ---- */
.breadcrumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1rem;
  font-size:.85rem;color:var(--muted)}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--blue)}

/* ---- About: sticky aside + CV ---- */
.about-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}
.about-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:1.2rem}
.portrait{aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--tint)}
.portrait img{width:100%;height:100%;object-fit:cover}
.about-aside__actions{display:flex;flex-direction:column;gap:.7rem}
.about-aside__actions .btn{justify-content:center}
.about-aside__social{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem 1.2rem}
.about-aside__social .social-icons{display:grid;grid-template-columns:repeat(auto-fit,minmax(54px,1fr));
  gap:.7rem;margin-top:0}
.about-aside__social .social-icons a{width:auto;min-width:0;height:68px;border-radius:var(--r);
  background:var(--tint);border:1px solid var(--line);
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.about-aside__social .social-icons a:hover{background:var(--navy);
  border-color:var(--navy);color:var(--white);transform:translateY(-2px);box-shadow:var(--shadow)}
.about-aside__social .social-icons a:focus-visible{transform:translateY(-2px)}
.about-aside__social .social-icons svg{width:30px;height:30px}
@media (prefers-reduced-motion:reduce){
  .about-aside__social .social-icons a,.about-aside__social .social-icons a:hover{transition:none;transform:none}
}
/* Clinic address card — same shell as the social card above it, so the aside reads as one
   stack of panels rather than a panel and a loose paragraph. */
.about-aside__where{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem 1.2rem}
.about-aside__where p{margin:0;font-size:.95rem;line-height:1.55}
.about-aside__where p+p{margin-top:.55rem}
.about-aside__label{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--blue);margin:0 0 .8rem}
:lang(ar) .about-aside__label,[dir="rtl"] .about-aside__label{letter-spacing:0}
/* mobile: social + contact actions come first, full-width and centered */
@media (max-width:900px){
  .about-aside{position:static;gap:.9rem}
  .about-aside .portrait{max-width:260px;margin-inline:auto}
  .about-aside__social,.about-aside__where{padding:1rem 1.1rem}
  .about-aside__where{text-align:center}
  .about-aside__label{margin:0 0 .75rem;text-align:center}
  .about-aside__social .social-icons{grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:.6rem}
  .about-aside__social .social-icons a{height:64px}
  .about-aside__actions{flex-direction:row;flex-wrap:wrap}
  .about-aside__actions .btn{flex:1 1 13rem}
}
@media (max-width:480px){
  .about-aside__social .social-icons a{height:60px;border-radius:14px}
  .about-aside__social .social-icons svg{width:28px;height:28px}
}
.about-main h1{margin-bottom:1.1rem}
.about-block{margin-top:2.8rem}
.about-block h2{font-size:clamp(1.3rem,2.4vw,1.75rem);margin-bottom:1.3rem}
.prose{max-width:68ch}
.prose p{margin-bottom:1.1rem}

/* ---- CV timeline ---- */
.timeline{list-style:none;margin:0;padding:0;padding-inline-start:1.75rem;position:relative}
.timeline::before{content:"";position:absolute;inset-block:.5rem 0;inset-inline-start:5px;
  width:1.5px;background:var(--gold)}
.timeline__item{position:relative;padding-bottom:1.7rem}
.timeline__item:last-child{padding-bottom:0}
.timeline__item::before{content:"";position:absolute;inset-inline-start:-1.75rem;top:.45rem;
  width:12px;height:12px;border-radius:var(--r-sm);background:var(--white);border:2px solid var(--gold)}
.timeline__when{display:block;font-size:.8rem;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--muted)}
:lang(ar) .timeline__when,[dir="rtl"] .timeline__when{letter-spacing:0;text-transform:none}
.timeline__role{font-size:1.05rem;margin:.2rem 0 .15rem}
.timeline__where{margin:0;color:var(--muted)}

/* ---- license card (gold bar = credential) ---- */
/* Credential panel: gold keyline and gold-tint fill, text in ink and navy.
   Reserved for licence and registration, never for testimonials. */
.license-card{background:var(--gold-tint);border:1px solid var(--line);border-inline-start:4px solid var(--gold);
  border-radius:var(--r);padding:1.1rem 1.3rem}
.license-card__org{font-size:1rem;margin:0 0 .25rem}
.license-card__detail{margin:0;color:var(--muted);font-size:.93rem}

/* ---- contact cards ---- */
.contact-card__list{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.7rem}
.contact-card__label{display:block;font-size:.76rem;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--muted)}
:lang(ar) .contact-card__label,[dir="rtl"] .contact-card__label{letter-spacing:0;text-transform:none}
.contact-card__actions{margin:1.1rem 0 0}

/* ---- checklist (treatment pages, used later) ---- */
.checklist{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 2rem;max-width:60rem;
  /* section heads are start-aligned now, so the list shares their spine */
  margin-inline:0}
@media (max-width:600px){.checklist{grid-template-columns:1fr}}
.checklist li{position:relative;padding-inline-start:2rem;color:var(--navy);font-weight:500}
.checklist li::before{content:"";position:absolute;inset-inline-start:0;top:.15em;width:20px;height:20px;
  border-radius:50%;background:var(--navy)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---- upcoming event (Home) ---- */
/* Poster beside the details; navy and blue only -- an event is not a credential,
   so no gold anywhere in here. */
.event{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);align-items:center;
  gap:clamp(1.3rem,4vw,2.6rem);background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(1.1rem,3vw,1.8rem);box-shadow:var(--shadow-sm)}
@media (max-width:860px){.event{grid-template-columns:1fr}}
.event__poster{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.event__poster img{width:100%;height:auto}
.event__body{min-width:0}
.event__who{color:var(--muted);font-size:.95rem;margin-bottom:1.1rem}
.event__intro{color:var(--ink);margin-bottom:.4rem}
.event__title{position:relative;padding-top:.9rem;margin-bottom:.7rem}
.event__title::before{content:"";position:absolute;top:0;inset-inline-start:0;width:46px;height:2px;
  background:var(--blue)}
.event__meta{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.8rem 2.4rem}
.event__label{display:block;font-size:.76rem;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--muted)}
:lang(ar) .event__label,[dir="rtl"] .event__label{letter-spacing:0;text-transform:none}
.event__value{font-weight:600;color:var(--navy)}
.event__close{margin:1.3rem 0 0;font-weight:600;color:var(--navy)}

/* ---- Blazor error UI ---- */
/* The template markup ships in MainLayout but the stylesheet never styled it, so
   "An unhandled error has occurred." rendered as plain body text at the foot of every
   page. Blazor sets display:block inline when it actually fires. */
#blazor-error-ui{display:none;position:fixed;inset-inline:0;bottom:0;z-index:1000;
  background:var(--navy);color:var(--white);padding:.9rem var(--gutter);
  font-size:var(--fs-small);box-shadow:var(--shadow-lg)}
#blazor-error-ui a{color:var(--white);text-decoration:underline}
#blazor-error-ui .dismiss{cursor:pointer;margin-inline-start:.6rem}

/* ---- home hero: portrait beside the name ---- */
/* The hero was a 500px slab of flat tint with centred type. For a solo practitioner the
   most characteristic thing on the page is the practitioner, so it leads. */
.hero--split .hero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;text-align:start;
  padding-block:clamp(3rem,6vw,5.5rem)}
@media (max-width:900px){
  .hero--split .hero__inner{grid-template-columns:1fr;gap:2.2rem}
  .hero__portrait{order:-1;max-width:17rem}
}
.hero__name{font-size:var(--fs-display);line-height:1.04;letter-spacing:-.028em;margin-bottom:1.2rem}
.hero--split .lead{margin-bottom:1.6rem}
.hero--split .hero__cta{justify-content:start}
.hero__portrait{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--white)}
.hero__portrait img{width:100%;height:auto;display:block}


/* ---- treatments as an index, not a card grid ---- */
/* Five treatments in a three-column grid leaves a permanent orphan hole, and five
   identical cards rank nothing. Rows read like a table of contents and use the full
   measure, so each entry can carry a real sentence. */
.tlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tlist__row{border-bottom:1px solid var(--line)}
.tlist__link{display:grid;grid-template-columns:auto minmax(0,20rem) minmax(0,1fr) auto;
  align-items:center;gap:.35rem 1.5rem;padding:1.35rem .5rem;color:var(--navy);
  transition:background-color .16s ease}
.tlist__link:hover{background:var(--tint);color:var(--navy)}
.tlist__icon{width:40px;height:40px;flex:none;border-radius:var(--r);display:grid;place-items:center;
  background:var(--tint);color:var(--navy);transition:background-color .16s ease,color .16s ease}
.tlist__link:hover .tlist__icon{background:var(--navy);color:var(--white)}
.tlist__icon svg{width:22px;height:22px}
.tlist__title{font-family:var(--font-head);font-size:1.1875rem;font-weight:600;line-height:1.3}
:lang(ar) .tlist__title,[dir="rtl"] .tlist__title{font-family:var(--font-ar)}
.tlist__blurb{color:var(--ink);font-size:var(--fs-small);line-height:1.55;margin:0}
.tlist__go{color:var(--blue);display:grid;place-items:center;flex:none}
.tlist__go svg{width:20px;height:20px}
[dir="rtl"] .tlist__go svg{transform:scaleX(-1)}
@media (max-width:860px){
  .tlist__link{grid-template-columns:auto minmax(0,1fr) auto;padding:1.2rem .35rem;align-items:start}
  .tlist__icon{grid-column:1;grid-row:1}
  .tlist__title{grid-column:2;grid-row:1}
  .tlist__go{grid-column:3;grid-row:1}
  .tlist__blurb{grid-column:2/-1;grid-row:2}
}
@media (prefers-reduced-motion:reduce){.tlist__link,.tlist__icon{transition:none}}

/* ---- credential record ---- */
/* Replaces a grid of eight gold-tinted panels. BRAND_IDENTITY §1: gold reads as authority
   only while it is scarce -- "if it appears twice in the same viewport, one of them is
   wrong". One gold keyline now marks the whole credentials region (§5 use 2), and the rows
   inside are separated by hairlines. */
.record{border-inline-start:3px solid var(--gold);padding-inline-start:clamp(1rem,2vw,1.4rem)}
.record__group+.record__group{margin-top:1.9rem}
.record__label{font-size:var(--fs-micro);font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--muted);margin:0 0 .5rem}
:lang(ar) .record__label,[dir="rtl"] .record__label{letter-spacing:0;text-transform:none;
  font-size:var(--fs-small)}
.record__list{list-style:none;margin:0;padding:0}
.record__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:.15rem 1.5rem;
  padding-block:.75rem;border-bottom:1px solid var(--line)}
.record__row:last-child{border-bottom:0}
.record__org{font-weight:600;color:var(--navy)}
.record__detail{color:var(--muted);font-size:var(--fs-small)}
@media (max-width:600px){.record__row{grid-template-columns:1fr;gap:.1rem}}

/* Languages are not qualifications, so they take the chip without the gold credential dot. */
.chips--plain .chip::before{display:none}
.chips--plain .chip{color:var(--ink);font-weight:500}
.tlist__note{margin:1.4rem 0 0;color:var(--muted);font-size:var(--fs-small)}

/* ---- Before/after slider -------------------------------------------------- */
/* --pos is the visible width of the "after" image. The clip is mirrored under RTL so the
   handle and the reveal travel together; site.js flips the pointer maths to match. */
.ba{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);
  margin:0;background:var(--tint);touch-action:none;user-select:none;cursor:ew-resize}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* The divider sits at --pos and the "after" image occupies the far side of it, so the pills match
   what is actually under them: before on the inline-start side, after on the inline-end side. */
.ba__img--after{clip-path:inset(0 0 0 var(--pos))}
[dir="rtl"] .ba__img--after{clip-path:inset(0 var(--pos) 0 0)}

.ba__pill{position:absolute;top:.7rem;z-index:2;font-size:.78rem;font-weight:600;
  padding:.25rem .6rem;border-radius:999px;background:rgba(21,63,91,.82);color:var(--white);
  backdrop-filter:blur(4px);pointer-events:none}
.ba__pill--before{inset-inline-start:.7rem}
.ba__pill--after{inset-inline-end:.7rem}

.ba__handle{position:absolute;top:0;bottom:0;z-index:3;width:44px;
  inset-inline-start:var(--pos);translate:-50% 0;
  display:grid;place-items:center;cursor:ew-resize;background:transparent;border:0}
[dir="rtl"] .ba__handle{translate:50% 0}
/* The visible seam. A pseudo-element keeps the hit area 44px wide without a fat line. */
.ba__handle::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--white);
  box-shadow:0 0 0 1px rgba(21,63,91,.25)}
.ba__grip{position:relative;width:34px;height:34px;border-radius:50%;background:var(--white);
  color:var(--navy);display:grid;place-items:center;box-shadow:0 2px 10px rgba(21,63,91,.28)}
.ba__grip svg{width:17px;height:17px}
.ba__handle:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.ba.is-dragging{cursor:grabbing}
.ba--portrait{max-width:24rem;margin-inline:auto}

@media (prefers-reduced-motion:reduce){
  .ba,.ba__img,.ba__handle,.ba__grip{transition:none!important}
}

/* ---- Case figures --------------------------------------------------------- */
.case-media>*+*{margin-top:1.2rem}
.case-figs{display:grid;gap:1.2rem}
.case-fig{margin:0}
.case-fig img{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line)}
.case-fig figcaption{font-size:.9rem;color:var(--muted);margin-top:.55rem;line-height:1.55}
.case-fig__stage{display:inline-block;font-size:.78rem;font-weight:600;color:var(--navy);
  background:var(--tint);border-radius:999px;padding:.2rem .6rem;margin-bottom:.4rem}
@media (min-width:760px){ .case-figs--multi{grid-template-columns:1fr 1fr} }

/* ---- Case cards ----------------------------------------------------------- */
.case-grid{display:grid;gap:1.4rem;grid-template-columns:repeat(3,1fr);list-style:none;padding:0;margin:0}
@media (max-width:900px){ .case-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .case-grid{grid-template-columns:1fr} }
.case-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;height:100%}
.case-card:hover{border-color:var(--navy)}
.case-card__media{aspect-ratio:16/10;background:var(--tint);overflow:hidden}
.case-card__media img{width:100%;height:100%;object-fit:cover;display:block}
/* No consent-cleared image yet: the DESIGN-SYSTEM §7 placeholder block, never stock photography. */
.case-card__ph{width:100%;height:100%;display:grid;place-items:center;color:var(--line)}
.case-card__ph svg{width:44px;height:44px}
.case-card__body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.case-card__tag{font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--blue)}
.case-card__title{font-family:var(--font-head);font-size:1.02rem;line-height:1.35;color:var(--navy);margin:0}

/* ---- Filter pills --------------------------------------------------------- */
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.pill{display:inline-flex;align-items:center;font-size:.9rem;font-weight:500;color:var(--navy);
  padding:.44rem .9rem;border-radius:999px;border:1px solid var(--line);background:var(--white)}
.pill:hover{background:var(--tint);color:var(--navy)}
.pill.is-active{background:var(--navy);color:var(--white);border-color:var(--navy)}
.pill.is-active:hover{background:var(--navy-deep);color:var(--white)}

/* ---- Facts grid ----------------------------------------------------------- */
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin:1.8rem 0}
@media (min-width:640px){ .facts{grid-template-columns:repeat(2,1fr)} }
.facts__item{background:var(--white);padding:.9rem 1.1rem}
.facts__item dt{font-size:.78rem;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--muted);margin-bottom:.25rem}
.facts__item dd{margin:0;color:var(--ink);line-height:1.5}

/* ---- Research ------------------------------------------------------------- */
.pub-list{display:grid;gap:1.2rem;list-style:none;padding:0;margin:0}
.pub-card{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.3rem 1.4rem}
.pub-card:hover{border-color:var(--navy)}
.pub-card__kind{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:0;
  text-transform:none;color:var(--muted);margin-bottom:.5rem}
/* Gold marks credentials only. A granted patent is one; the posters are not, and this page has
   no consent note competing for the accent. */
.pub-card__kind--patent{color:var(--gold)}
.pub-card__kinds{display:flex;align-items:center;gap:.55rem;margin-bottom:.5rem}
.pub-card__kinds .pub-card__kind{margin-bottom:0}
.pub-card__title{font-family:var(--font-head);font-size:1.12rem;line-height:1.35;color:var(--navy);margin:0 0 .5rem}
.pub-card__meta{font-size:.9rem;color:var(--muted);margin:0;line-height:1.6}
/* Journal quartile. Deliberately navy-on-tint, not gold: gold is the credential accent and the
   patent already spends it on this page (BRAND_IDENTITY §5). */
.pub-card__rank{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;
  letter-spacing:0;color:var(--navy);background:var(--tint);border:1px solid var(--blue-pale);
  border-radius:var(--r-pill);padding:1px .55rem;line-height:1.7;white-space:nowrap}

.pub-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}

.pub-section{margin-top:2rem}
.pub-section h2{font-size:1.2rem;margin-bottom:.5rem}
.pub-section p{margin:0 0 .8rem;max-width:46rem}
.pub-note{font-size:.9rem;color:var(--muted);border-inline-start:3px solid var(--line);
  padding-inline-start:.9rem;margin:1.4rem 0}
.pub-figs{display:grid;gap:1.6rem;margin-top:2.4rem}
.pub-fig{margin:0}
.pub-fig img{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line);
  background:var(--white)}
.pub-fig figcaption{font-size:.9rem;color:var(--muted);margin-top:.55rem;line-height:1.55}

/* ---- home "just published" band ---- */
/* The newest paper, announced under the hero. A bordered card rather than a tinted section:
   the SIDC event directly below it is already a full section, and two stacked bands of flat
   tint made the top of the page read as one undifferentiated slab. */
.newpub{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  border-inline-start:3px solid var(--navy);padding:clamp(1.3rem,3vw,1.9rem)}
.newpub__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .9rem;margin-bottom:.6rem}
.newpub__head .eyebrow{margin:0}
.newpub__venue{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  font-size:var(--fs-small);font-weight:600;color:var(--navy);margin:0}
.newpub__rank{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;
  letter-spacing:0;color:var(--navy);background:var(--tint);border:1px solid var(--blue-pale);
  border-radius:var(--r-pill);padding:1px .55rem;line-height:1.7;white-space:nowrap}
.newpub__title{font-size:clamp(1.2rem,1rem + .8vw,1.5rem);line-height:1.3;margin:0 0 .5rem}
.newpub__title a{color:var(--navy)}
.newpub__title a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.newpub__meta{font-size:.9rem;color:var(--muted);margin:0 0 1rem;line-height:1.6}
.newpub__note{font-size:.85rem;color:var(--muted);margin:0 0 .6rem}
/* Plain bold, not the tracked-caps eyebrow: this band already spends its one eyebrow on
   "Just published", and BRAND_IDENTITY §2 keeps that gesture for section labels only. */
.newpub__leadhead{font-weight:700;color:var(--navy);margin:0 0 .2rem}
.newpub__lead{margin:0;max-width:46rem;color:var(--ink)}
.newpub__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
/* The external-link arrow points out of its frame, so it flips with the reading direction.
   The download arrow points down and must not — hence the class rather than a blanket rule. */
[dir="rtl"] .icon-out{transform:scaleX(-1)}

/* ---- home "in the field" band ---- */
/* One photograph, one sentence, one destination. This replaced a full section (heading, rule,
   paragraph, five chips and a button) that restated what /conferences already says in full —
   and it is a single link, so the whole band is one target rather than five inert chips plus
   a small button. */
.section--slim{padding-block:clamp(2.5rem,5vw,4rem)}
.field-band{display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr);align-items:center;
  gap:clamp(1.2rem,3vw,2.4rem);background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;color:var(--ink);
  transition:border-color .18s ease}
.field-band:hover{border-color:var(--navy);color:var(--ink)}
@media (max-width:760px){.field-band{grid-template-columns:1fr}}
.field-band__shot{display:block;aspect-ratio:4/3;background:var(--tint);overflow:hidden}
.field-band__shot img{width:100%;height:100%;object-fit:cover;object-position:40% 45%;display:block}
@media (max-width:760px){.field-band__shot{aspect-ratio:16/9}}
.field-band__body{display:block;padding:clamp(1.2rem,2.5vw,1.8rem) clamp(1.2rem,2.5vw,2rem)
  clamp(1.2rem,2.5vw,1.8rem) 0}
@media (max-width:760px){.field-band__body{padding:0 1.2rem 1.4rem}}
[dir="rtl"] .field-band__body{padding-inline:0 clamp(1.2rem,2.5vw,2rem)}
@media (max-width:760px){[dir="rtl"] .field-band__body{padding-inline:1.2rem}}
.field-band__head{display:block;font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem);line-height:1.25;letter-spacing:-.014em;
  margin-bottom:.6rem}
:lang(ar) .field-band__head,[dir="rtl"] .field-band__head{font-family:var(--font-ar);letter-spacing:0}
.field-band__text{display:block;color:var(--ink);font-size:var(--fs-small);line-height:1.6}
.field-band__go{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;
  font-weight:600;font-size:.95rem;color:var(--blue)}
.field-band__go svg{width:18px;height:18px;flex:none}
[dir="rtl"] .field-band__go svg{transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){.field-band{transition:none}}

/* ---- invited lectures (/conferences) ---- */
/* Speaker cards, not photographs: the poster keeps its own proportions and is never cropped,
   because the printed title, venue and date are the evidence. Rows rather than a tile grid,
   so three posters of three different shapes can sit together without letterboxing. */
.lect-list{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
.lect{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);align-items:center;
  gap:clamp(1.2rem,3vw,2.2rem);background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(1rem,2.4vw,1.5rem)}
@media (max-width:720px){.lect{grid-template-columns:1fr;align-items:start}}
/* Sized by height, not width: these three posters are two portraits and a landscape, and
   matching their widths made the landscape one read at half the scale of the others. The
   border sits on the image rather than a wrapper box, so nothing is letterboxed. */
.lect__poster{margin:0;display:flex;align-items:center;justify-content:center}
.lect__poster img{max-height:16rem;width:auto;max-width:100%;display:block;
  border:1px solid var(--line);border-radius:var(--r-sm)}
@media (max-width:720px){.lect__poster{justify-content:start}.lect__poster img{max-height:13rem}}
.lect__body{min-width:0}
/* Not gold: a speaking invitation is not a credential (BRAND_IDENTITY §5). */
.lect__kind{display:block;font-size:var(--fs-micro);font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--blue);margin-bottom:.45rem}
:lang(ar) .lect__kind,[dir="rtl"] .lect__kind{letter-spacing:0;text-transform:none;
  font-size:var(--fs-small)}
.lect__title{font-size:1.2rem;font-weight:600;line-height:1.35;color:var(--navy);margin:0 0 1rem}
.lect__meta{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.lect__label{display:block;font-size:var(--fs-micro);font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--muted)}
:lang(ar) .lect__label,[dir="rtl"] .lect__label{letter-spacing:0;text-transform:none;
  font-size:var(--fs-small)}
.lect__value{color:var(--ink);font-size:var(--fs-small);line-height:1.5}

/* ---- conferences (/conferences) ---- */
/* Photographs of a doctor standing at venues are a photo album until each one says what it
   is; the kind tag is what makes the grid a record. Cards are uniform 4:5 so six mixed
   phone/landscape sources read as one set, and so the eye compares captions, not crops. */
.conf-grid{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem 1.4rem;
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.conf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.conf-grid{grid-template-columns:1fr}}
.conf-card{margin:0}
.conf-card__fig{margin:0;height:100%;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
/* flex:none — the shot must keep its ratio; the body absorbs the row's spare height,
   otherwise a card with a three-line caption silently crops its photograph more than
   its neighbour and the grid stops reading as one set. */
.conf-card__shot{background:var(--tint);flex:none}
/* The ratio is set on the image, not the wrapper. These six photographs have six different
   intrinsic ratios (two landscape, four portrait), and in a flex column the wrapper's
   flex-basis:auto resolves from the image's intrinsic height -- so a wrapper aspect-ratio
   was silently losing and every tile came out a different height. */
.conf-card__shot img{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;display:block}
.conf-card__body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
/* Not gold: a conference is not a credential (BRAND_IDENTITY §5). */
.conf-card__kind{font-size:var(--fs-micro);font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--blue)}
:lang(ar) .conf-card__kind,[dir="rtl"] .conf-card__kind{letter-spacing:0;text-transform:none;
  font-size:var(--fs-small)}
.conf-card__title{font-size:1.05rem;font-weight:600;line-height:1.35;color:var(--navy);margin:0}
.conf-card__meta{margin:.15rem 0 0;color:var(--ink);font-size:var(--fs-small);line-height:1.5}
.conf-card__when{margin:0;color:var(--muted);font-size:var(--fs-small)}

/* The home-page summary reuses .chips--plain: place names are not credentials, so they
   take the chip without the gold dot. */