@charset "utf-8";
/* ==========================================================================
   Shadi Guirguis — SG_styles_v1.css
   Static HTML5 build. No preprocessor, no framework, no build step.
   Uses native CSS nesting, cascade layers, custom properties, container
   queries, light-dark(), color-mix() and view transitions.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* ---------- RESET ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img, picture, svg, video {
    display: block;
    max-inline-size: 100%;
    height: auto;
  }

  input, button, textarea, select { font: inherit; color: inherit; }

  p, h1, h2, h3, h4 { overflow-wrap: break-word; text-wrap: pretty; }
  h1, h2, h3 { text-wrap: balance; }

  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

  :target { scroll-margin-block-start: 6rem; }
}

/* ---------- DESIGN TOKENS ---------- */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* Palette — deep slate + copper accent. Professional, not corporate-blue. */
    --ink-900: #0b1220;
    --ink-800: #131c2e;
    --ink-700: #1e2a42;
    --ink-500: #43536f;
    --ink-300: #8494ad;
    --ink-100: #dde3ec;
    --ink-050: #f4f6f9;
    --paper:   #ffffff;

    --accent-600: #9a5b2c;
    --accent-500: #b96f34;
    --accent-400: #d08a51;
    --accent-100: #f6ebe1;

    /* Semantic — adapt to system theme */
    --c-bg:        light-dark(var(--paper), var(--ink-900));
    --c-bg-subtle: light-dark(var(--ink-050), var(--ink-800));
    --c-bg-invert: light-dark(var(--ink-900), #060a12);
    --c-text:      light-dark(var(--ink-800), var(--ink-100));
    --c-text-mute: light-dark(var(--ink-500), var(--ink-300));
    --c-text-inv:  light-dark(var(--ink-050), var(--ink-100));
    --c-line:      light-dark(var(--ink-100), var(--ink-700));
    --c-accent:    light-dark(var(--accent-600), var(--accent-400));
    --c-accent-bg: light-dark(var(--accent-100), color-mix(in oklab, var(--accent-600) 22%, transparent));

    /* Type — system stacks only. Zero webfont requests, zero CLS. */
    --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-head: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Fluid type scale — 320px to 1280px viewport */
    --step--1: clamp(0.83rem, 0.80rem + 0.16vw, 0.92rem);
    --step-0:  clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem);
    --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.44rem);
    --step-2:  clamp(1.44rem, 1.30rem + 0.70vw, 1.94rem);
    --step-3:  clamp(1.73rem, 1.49rem + 1.18vw, 2.62rem);
    --step-4:  clamp(2.07rem, 1.70rem + 1.87vw, 3.53rem);

    /* Space */
    --sp-2xs: 0.375rem;
    --sp-xs:  0.625rem;
    --sp-s:   1rem;
    --sp-m:   1.5rem;
    --sp-l:   2.5rem;
    --sp-xl:  4rem;
    --sp-2xl: clamp(4rem, 3rem + 5vw, 7rem);

    --measure: 68ch;
    --wrap: 1140px;
    --wrap-narrow: 760px;

    --radius: 10px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 2px light-dark(rgb(11 18 32 / 6%), rgb(0 0 0 / 40%));
    --shadow-md: 0 4px 16px light-dark(rgb(11 18 32 / 8%), rgb(0 0 0 / 45%));
    --shadow-lg: 0 18px 48px light-dark(rgb(11 18 32 / 12%), rgb(0 0 0 / 55%));

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ---------- BASE ---------- */
@layer base {
  html { scroll-behavior: smooth; }

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

  body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    display: flex;
    flex-direction: column;
    min-block-size: 100dvh;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
  }

  h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-1); }

  p, li { max-inline-size: var(--measure); }

  a {
    color: var(--c-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color 0.18s var(--ease);

    &:hover { color: light-dark(var(--accent-500), var(--accent-400)); }
  }

  :focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: 3px;
  }

  strong { font-weight: 650; color: light-dark(var(--ink-900), #fff); }

  ::selection {
    background: var(--c-accent);
    color: light-dark(#fff, var(--ink-900));
  }

  /* View transitions between pages (progressive — ignored where unsupported) */
  @view-transition { navigation: auto; }
}

/* ---------- LAYOUT ---------- */
@layer layout {
  .wrap {
    inline-size: min(100% - 2.5rem, var(--wrap));
    margin-inline: auto;
  }

  .wrap-narrow { --wrap: var(--wrap-narrow); }

  .section {
    padding-block: var(--sp-2xl);

    &.is-subtle { background: var(--c-bg-subtle); }

    &.is-invert {
      background: var(--c-bg-invert);
      color: var(--c-text-inv);

      & h2, & h3 { color: #fff; }
      & p, & li { color: var(--ink-300); }
    }
  }

  .stack > * + * { margin-block-start: var(--sp-s); }
  .stack-l > * + * { margin-block-start: var(--sp-l); }

  .grid {
    display: grid;
    gap: var(--sp-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }

  main { flex: 1; }
}

/* ---------- COMPONENTS ---------- */
@layer components {

  /* Skip link */
  .skip {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--sp-s);
    z-index: 100;
    background: var(--c-accent);
    /* Dark mode lightens the accent, so the label flips to ink for contrast.
       White on accent-400 is only 2.82:1; ink-900 on accent-400 is 6.63:1. */
    color: light-dark(#fff, var(--ink-900));
    padding: var(--sp-xs) var(--sp-s);
    border-radius: 0 0 var(--radius) var(--radius);
    text-decoration: none;

    &:focus { inset-block-start: 0; color: light-dark(#fff, var(--ink-900)); }
  }

  /* Header */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--c-bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-block-end: 1px solid var(--c-line);

    & .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-m);
      min-block-size: 4.25rem;
    }
  }

  .brand {
    font-family: var(--font-head);
    font-size: var(--step-1);
    font-weight: 600;
    color: var(--c-text);
    text-decoration: none;
    letter-spacing: -0.02em;
    line-height: 1.1;

    & span {
      display: block;
      font-family: var(--font-body);
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--c-text-mute);
      margin-block-start: 2px;
    }
  }

  .nav {
    display: flex;
    align-items: center;
    gap: var(--sp-m);

    & ul {
      display: flex;
      gap: var(--sp-m);
      list-style: none;
      padding: 0;
      margin: 0;
    }

    & li { max-inline-size: none; }

    & a {
      color: var(--c-text);
      text-decoration: none;
      font-size: var(--step--1);
      font-weight: 500;
      letter-spacing: 0.01em;
      padding-block: 0.4rem;
      border-block-end: 2px solid transparent;

      &:hover { border-block-end-color: var(--c-accent); }

      &[aria-current="page"] {
        color: var(--c-accent);
        border-block-end-color: var(--c-accent);
      }
    }
  }

  .nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    padding: 0.45rem 0.6rem;
    cursor: pointer;
    line-height: 0;

    & svg { inline-size: 1.4rem; block-size: 1.4rem; stroke: currentColor; }
  }

  @media (max-width: 44rem) {
    .nav-toggle { display: block; }

    .nav {
      position: fixed;
      inset: 4.25rem 0 auto 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: var(--c-bg);
      border-block-end: 1px solid var(--c-line);
      box-shadow: var(--shadow-lg);
      padding: var(--sp-s) 1.25rem var(--sp-m);
      transform: translateY(-140%);
      transition: transform 0.32s var(--ease);

      &[data-open="true"] { transform: translateY(0); }

      & ul { flex-direction: column; gap: 0; }

      & a {
        display: block;
        padding-block: 0.85rem;
        border-block-end: 1px solid var(--c-line);
      }

      & .btn { margin-block-start: var(--sp-s); text-align: center; }
    }
  }

  /* Buttons */
  .btn {
    --btn-bg: var(--c-accent);
    /* WCAG: white on the dark-mode accent (accent-400) is 2.82:1 and fails.
       Ink on that same accent is 6.63:1, so the label flips with the scheme. */
    --btn-fg: light-dark(#fff, var(--ink-900));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.72rem 1.35rem;
    border: 1px solid var(--btn-bg);
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
                background-color 0.18s var(--ease);

    &:hover {
      color: var(--btn-fg);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    &:active { transform: translateY(0); }

    &.btn-ghost {
      --btn-bg: transparent;
      --btn-fg: var(--c-text);
      border-color: var(--c-line);

      &:hover { border-color: var(--c-accent); color: var(--c-accent); }
    }

    &.btn-invert {
      --btn-bg: #fff;
      --btn-fg: var(--ink-900);
    }
  }

  /* Eyebrow label */
  .eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-block-end: var(--sp-xs);
  }

  /* Hero */
  .hero {
    padding-block: clamp(3rem, 2rem + 6vw, 6rem) var(--sp-2xl);
    background:
      radial-gradient(60rem 34rem at 82% -10%,
        var(--c-accent-bg), transparent 62%);

    & .hero-inner {
      display: grid;
      gap: clamp(var(--sp-l), 4vw, var(--sp-xl));
      grid-template-columns: 1fr;
      align-items: center;
    }

    @media (min-width: 56rem) {
      & .hero-inner { grid-template-columns: 1.35fr 1fr; }
    }

    & .lede {
      font-size: var(--step-1);
      color: var(--c-text-mute);
      line-height: 1.55;
      max-inline-size: 46ch;
    }
  }

  .hero-portrait {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    /* Matches the source image's native 3:2 ratio, so `cover` performs no crop
       and the 768px source renders at ~1.8x density in its 26rem slot. */
    aspect-ratio: 3 / 2;
    max-inline-size: 26rem;
    margin-inline: auto;
    inline-size: 100%;

    & img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      object-position: center center;
    }
  }

  .cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-s);
    margin-block-start: var(--sp-m);
  }

  /* Stat strip */
  .stats {
    display: grid;
    gap: var(--sp-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    padding-block: var(--sp-l);
    border-block: 1px solid var(--c-line);
    margin-block-start: var(--sp-xl);
  }

  .stat {
    /* Declarations must precede nested rules — some engines shift trailing
       declarations after a nested block, which silently drops them. */
    display: flex;
    flex-direction: column;

    & dt {
      font-size: var(--step--1);
      color: var(--c-text-mute);
      letter-spacing: 0.02em;
      order: 2;
    }

    & dd {
      font-family: var(--font-head);
      font-size: var(--step-3);
      font-weight: 600;
      margin: 0 0 0.15rem;
      color: var(--c-text);
      letter-spacing: -0.02em;
      order: 1;
    }
  }

  /* Cards */
  .card {
    container-type: inline-size;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-m);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s var(--ease), transform 0.2s var(--ease),
                box-shadow 0.2s var(--ease);

    &:hover {
      border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-line));
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
    }

    & h3 { margin-block-end: var(--sp-2xs); }

    & p { color: var(--c-text-mute); font-size: var(--step--1); }

    & .card-num {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--c-accent);
      letter-spacing: 0.1em;
      display: block;
      margin-block-end: var(--sp-xs);
    }
  }

  .is-invert .card {
    background: color-mix(in srgb, #fff 5%, transparent);
    border-color: color-mix(in srgb, #fff 14%, transparent);

    & p { color: var(--ink-300); }
  }

  /* Section heading block */
  .sec-head {
    max-inline-size: var(--wrap-narrow);
    margin-block-end: var(--sp-l);

    & p {
      color: var(--c-text-mute);
      font-size: var(--step-1);
      margin-block-start: var(--sp-xs);
      line-height: 1.5;
    }
  }

  /* Answer block — the AI-citable summary at the top of each page */
  .answer {
    border-inline-start: 3px solid var(--c-accent);
    background: var(--c-bg-subtle);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: var(--sp-m) var(--sp-m) var(--sp-m) var(--sp-l);
    margin-block: var(--sp-l);

    & p:first-of-type { font-size: var(--step-1); line-height: 1.5; }
    & p + p { margin-block-start: var(--sp-s); color: var(--c-text-mute); }
  }

  /* Definition / FAQ list */
  .faq {
    border-block-start: 1px solid var(--c-line);

    & details {
      border-block-end: 1px solid var(--c-line);

      &[open] summary { color: var(--c-accent); }
      &[open] summary::after { transform: rotate(45deg); }
    }

    & summary {
      cursor: pointer;
      list-style: none;
      padding-block: var(--sp-m);
      padding-inline-end: 2.5rem;
      font-family: var(--font-head);
      font-size: var(--step-1);
      font-weight: 600;
      position: relative;

      &::-webkit-details-marker { display: none; }

      &::after {
        content: "+";
        position: absolute;
        inset-inline-end: 0;
        inset-block-start: 50%;
        translate: 0 -50%;
        font-family: var(--font-body);
        font-size: 1.5rem;
        font-weight: 300;
        color: var(--c-accent);
        transition: transform 0.24s var(--ease);
      }
    }

    & .faq-body {
      padding-block-end: var(--sp-m);
      color: var(--c-text-mute);

      & > * + * { margin-block-start: var(--sp-s); }
    }
  }

  /* Timeline (About) */
  .timeline {
    list-style: none;
    padding: 0;
    border-inline-start: 2px solid var(--c-line);
    margin-inline-start: 0.4rem;

    & > li {
      position: relative;
      padding-inline-start: var(--sp-m);
      padding-block-end: var(--sp-l);
      max-inline-size: var(--measure);

      &::before {
        content: "";
        position: absolute;
        inset-inline-start: -0.44rem;
        inset-block-start: 0.5rem;
        inline-size: 0.75rem;
        block-size: 0.75rem;
        border-radius: 50%;
        background: var(--c-accent);
        box-shadow: 0 0 0 4px var(--c-bg);
      }

      &:last-child { padding-block-end: 0; }
    }

    & h3 { margin-block-end: var(--sp-2xs); }
    & p { color: var(--c-text-mute); }

    & .tl-meta {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--c-accent);
      display: block;
      margin-block-end: 0.2rem;
    }
  }

  /* Article list (Insights) */
  .post-list { list-style: none; padding: 0; }

  .post-item {
    max-inline-size: none;
    padding-block: var(--sp-m);
    border-block-end: 1px solid var(--c-line);

    &:first-child { border-block-start: 1px solid var(--c-line); }

    & h3 { margin-block-end: var(--sp-2xs); }

    & h3 a { color: var(--c-text); text-decoration: none;
      &:hover { color: var(--c-accent); } }

    & .post-meta {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--c-text-mute);
      margin-block-end: 0.3rem;
    }

    & p { color: var(--c-text-mute); font-size: var(--step--1); }
  }

  /* Prose (article bodies) */
  .prose {
    & > * + * { margin-block-start: var(--sp-s); }
    & h2 { margin-block-start: var(--sp-l); font-size: var(--step-2); }
    & h3 { margin-block-start: var(--sp-m); }
    & ul, & ol { padding-inline-start: 1.35rem; }
    & li + li { margin-block-start: 0.4rem; }

    & blockquote {
      border-inline-start: 3px solid var(--c-accent);
      padding-inline-start: var(--sp-m);
      font-family: var(--font-head);
      font-size: var(--step-1);
      color: var(--c-text);
    }
  }

  /* Contact panel */
  .contact-grid {
    display: grid;
    gap: var(--sp-xl);
    grid-template-columns: 1fr;

    @media (min-width: 52rem) {
      grid-template-columns: 1.1fr 0.9fr;
    }
  }

  .contact-list {
    list-style: none;
    padding: 0;

    & li { max-inline-size: none; }
    & li + li { margin-block-start: var(--sp-m); }

    & dt, & .cl-label {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--c-text-mute);
      margin-block-end: 0.2rem;
    }

    & .cl-value { font-size: var(--step-1); font-family: var(--font-head); }
  }

  /* Cal.com inline embed container.
     Cal's stock snippet uses height:100%, which collapses to zero inside a
     static-height parent. A min-height plus a viewport-relative clamp keeps
     the month view usable on phones without a scrollbar-in-a-scrollbar. */
  .cal-inline {
    inline-size: 100%;
    min-block-size: clamp(34rem, 78vh, 46rem);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    box-shadow: var(--shadow-sm);

    /* Reserve the space before Cal paints, so the embed doesn't shift layout */
    &:empty::after {
      content: "Loading the scheduler…";
      display: grid;
      place-items: center;
      block-size: clamp(34rem, 78vh, 46rem);
      color: var(--c-text-mute);
      font-size: var(--step--1);
    }
  }

  /* CTA band */
  .cta-band {
    background: var(--c-bg-invert);
    color: var(--c-text-inv);
    padding-block: var(--sp-2xl);
    text-align: center;

    & h2 { color: #fff; }
    & p { color: var(--ink-300); margin-inline: auto; }
    & .cta-row { justify-content: center; }
  }

  /* Footer */
  .site-footer {
    background: var(--c-bg-subtle);
    border-block-start: 1px solid var(--c-line);
    padding-block: var(--sp-xl) var(--sp-m);
    font-size: var(--step--1);

    & .foot-grid {
      display: grid;
      gap: var(--sp-l);
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
      padding-block-end: var(--sp-l);
    }

    & h4 {
      font-family: var(--font-body);
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--c-text-mute);
      margin-block-end: var(--sp-xs);
    }

    & ul { list-style: none; padding: 0; }
    & li { max-inline-size: none; }
    & li + li { margin-block-start: 0.4rem; }

    & a { color: var(--c-text); text-decoration: none;
      &:hover { color: var(--c-accent); text-decoration: underline; } }

    & .foot-bar {
      border-block-start: 1px solid var(--c-line);
      padding-block-start: var(--sp-m);
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-s);
      justify-content: space-between;
      color: var(--c-text-mute);
    }
  }

  /* Scroll-reveal */
  .reveal {
    animation: reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }

  @keyframes reveal-in {
    from { opacity: 0; transform: translateY(1.25rem); }
    to   { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal { animation: none; opacity: 1; transform: none; }
  }
}

/* ---------- UTILITIES ---------- */
@layer utilities {
  .visually-hidden:not(:focus):not(:active) {
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  .text-center { text-align: center; }
  .mt-l { margin-block-start: var(--sp-l); }
  .mt-m { margin-block-start: var(--sp-m); }
  .mb-0 { margin-block-end: 0; }
  .measure-wide { max-inline-size: 78ch; }
}

/* ---------- PRINT ---------- */
@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle, .skip { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .section { padding-block: 1rem; }
}