/* Layout layer — visuals come from the Nocturne tokens. No cards, no chips:
     structure is drawn with the system's fading rules and an asymmetric grid. */
  .page { max-width: 860px; margin: 0 auto; padding: 0 var(--space-6) calc(var(--space-8) * 2); }
  @media (min-width: 1240px) { main { padding-bottom: 30vh; } }

  .nav { padding-inline: 0; }

  .hero { padding: calc(var(--space-8) * 2.5) 0 var(--space-8); }
  .hero-grid { display: block; max-width: 640px; }
  .portrait {
    width: 220px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    filter: saturate(0.9); margin-top: var(--space-4);
  }
  @media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; }
    .portrait { width: 132px; margin-top: 0; }
  }
  .hero h1 { font-size: 52px; margin-bottom: var(--space-3); }
  .hero h1 .accent-mark { color: var(--color-accent); }
  .hero .lede { font-size: 17px; max-width: 56ch; }

  .spec { margin: calc(var(--space-8) * 1.5) 0 0; max-width: 680px; }
  .spec-row {
    display: grid; grid-template-columns: 150px 1fr; gap: var(--space-4);
    padding: var(--space-3) 0; align-items: baseline;
    background: linear-gradient(to right,
      transparent, var(--color-divider) 48px,
      var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
  }
  .spec-label {
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-accent);
  }
  .spec-value { font-size: 14px; color: var(--color-neutral-300); }
  .spec-value i { font-style: normal; color: var(--color-neutral-500); padding: 0 6px; }

  .numbers {
    display: flex; flex-wrap: wrap; gap: var(--space-6) calc(var(--space-8) * 1.5);
    margin: calc(var(--space-8) * 1.5) 0 0; padding: var(--space-6) 0;
    background: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent) no-repeat top / 100% 1px,
                linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
  }
  .num b { display: block; font-size: 26px; font-weight: var(--font-heading-weight); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .num span { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-neutral-500); }

  .stack-line { font-size: 12.5px; color: var(--color-neutral-500); margin-top: var(--space-3); }
  .stack-line b { color: var(--color-neutral-500); font-weight: 500; }

  section, .hero, .role h3, .idx h3, .case h3, .story h3 { scroll-margin-top: 96px; }
  section { margin-top: calc(var(--space-8) * 2.2); padding-top: calc(var(--space-8) * 1.1);
    background: linear-gradient(to right, transparent, var(--color-divider) 48px,
      var(--color-divider) calc(100% - 48px), transparent) no-repeat top / 100% 1px; }
  .section-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
  .section-head::before {
    content: ""; width: 28px; height: 2px; background: var(--color-accent); flex: none;
  }
  .section-head h2 {
    margin: 0; color: var(--color-neutral-200); font-size: 15px; font-weight: 600;
    letter-spacing: 0.11em; text-transform: uppercase;
  }
  .section-note { color: var(--color-neutral-500); font-size: 14px; max-width: 58ch; margin-bottom: var(--space-4); }

  .role {
    display: grid; grid-template-columns: 150px 1fr; gap: var(--space-4);
    padding: var(--space-6) 0;
  }
  .role + .role {
    background: linear-gradient(to right,
      transparent, var(--color-divider) 48px,
      var(--color-divider) calc(100% - 48px), transparent) no-repeat top / 100% 1px;
  }
  .role-when { font-size: 13px; color: var(--color-neutral-500); font-variant-numeric: tabular-nums; line-height: 1.9; }
  .role h3 { margin-bottom: 2px; font-size: 18px; }
  .role .where { font-size: 13px; color: var(--color-neutral-500); margin-bottom: var(--space-2); }
  .role p.blurb { font-size: 14px; color: var(--color-neutral-400); margin: 0 0 var(--space-2); max-width: 60ch; }
  .role ul { margin: var(--space-2) 0 0; padding-left: 1.05em; }
  .role li { margin-bottom: var(--space-2); font-size: 14px; color: var(--color-neutral-300); max-width: 62ch; }
  .role li::marker { color: var(--color-accent-700); }

  .idx { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-4); padding: var(--space-6) 0; }
  .idx + .idx {
    background: linear-gradient(to right,
      transparent, var(--color-divider) 48px,
      var(--color-divider) calc(100% - 48px), transparent) no-repeat top / 100% 1px;
  }
  .idx-when { font-size: 13px; color: var(--color-neutral-500); font-variant-numeric: tabular-nums; line-height: 1.9; }
  .idx h3 { font-size: 18px; margin-bottom: 2px; }
  .idx .kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
  .idx .kicker a { color: inherit; text-decoration: none; }
  .idx .kicker a:hover { text-decoration: underline; }
  .idx p { font-size: 14px; color: var(--color-neutral-300); max-width: 60ch; margin: var(--space-2) 0 0; }
  .idx .meta { font-size: 12px; color: var(--color-neutral-500); margin-top: var(--space-2); }

  .story { max-width: 620px; }
  .story p { font-size: 15px; }

  .contact-line { max-width: 560px; }
  footer { margin-top: calc(var(--space-8) * 2.5); font-size: 12px; }

  @media (max-width: 660px) {
    .hero h1 { font-size: 38px; }
    .spec-row, .role, .idx { grid-template-columns: 1fr; gap: var(--space-1); }
  }
  .skip { position:absolute; left:-9999px; }
  .skip:focus { left:var(--space-6); top:var(--space-4); background:var(--color-surface);
    color:var(--color-text); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); z-index:10; }
  /* case study + flow diagram */
  .case { max-width: 700px; }
  .case p { font-size: 15px; }
  .case h3.lede-label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-accent); margin: 0 0 var(--space-2);
  }
  .flowwrap { overflow-x: auto; margin: var(--space-6) 0 var(--space-4); padding-bottom: var(--space-2); }
  .flow { width: 100%; min-width: 620px; height: auto; display: block; }
  .flow .box { fill: var(--color-surface); stroke: var(--color-divider); stroke-width: 1; }
  .flow .box-end { fill: var(--color-accent-900); stroke: var(--color-accent-700); stroke-width: 1; }
  .flow .step { fill: var(--color-accent); font: 600 11.5px "Inter", system-ui, sans-serif; letter-spacing: 0.09em; }
  .flow .label { fill: var(--color-neutral-200); font: 500 14px "Inter", system-ui, sans-serif; }
  .flow .sub { fill: var(--color-neutral-400); font: 400 12px "Inter", system-ui, sans-serif; }
  .flow .arrow { stroke: var(--color-accent-700); stroke-width: 1.5; fill: none; }
  .flow .rule { stroke: var(--color-divider); stroke-width: 1; }
  .flow .outcome { fill: var(--color-neutral-400); font: 400 13px "Inter", system-ui, sans-serif; }
  .flow .outcome b { fill: var(--color-accent); font-weight: 600; }
  .flowcap { font-size: 12.5px; color: var(--color-neutral-500); max-width: 700px; }
  .tier { fill: var(--color-surface); stroke: var(--color-divider); stroke-width: 1; }
  .tier-priv { fill: var(--color-accent-900); stroke: var(--color-accent-700); stroke-width: 1; }
  .tier-name { fill: var(--color-neutral-100); font: 600 14px "Inter", system-ui, sans-serif; }
  .tier-sub { fill: var(--color-neutral-400); font: 400 12px "Inter", system-ui, sans-serif; }
  .tier-who { fill: var(--color-neutral-400); font: 400 12px "Inter", system-ui, sans-serif; }
  .rolechip { fill: none; stroke: var(--color-accent-700); stroke-width: 1; }
  .roletxt { fill: var(--color-accent-300); font: 500 11px "Inter", system-ui, sans-serif; }
  .tl-line { stroke: var(--color-divider); stroke-width: 1.5; }
  .tl-dot { fill: var(--color-accent); }
  .tl-dot-end { fill: var(--color-no, #c98a8a); }
  .tl-label { fill: var(--color-neutral-200); font: 500 12.5px "Inter", system-ui, sans-serif; }
  .tl-sub { fill: var(--color-neutral-400); font: 400 11.5px "Inter", system-ui, sans-serif; }
  /* sticky nav */
  .nav { flex-wrap: wrap; row-gap: var(--space-2); }
  @media (max-width: 560px) { .nav { gap: var(--space-3); } }
  .nav { position: static; z-index: 20; background: color-mix(in srgb, var(--color-bg) 92%, transparent);
         backdrop-filter: blur(8px); padding-block: var(--space-3);
         background-image: linear-gradient(to right, transparent, var(--color-divider) 48px,
           var(--color-divider) calc(100% - 48px), transparent);
         background-repeat: no-repeat; background-position: bottom; background-size: 100% 1px; }

  /* collapsible role detail */
  .role details { margin-top: var(--space-2); }
  .role summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; letter-spacing: 0.03em; color: var(--color-accent);
    padding: 3px 0; user-select: none; }
  .role summary::-webkit-details-marker { display: none; }
  .role summary::before { content: ""; width: 0; height: 0;
    border-left: 5px solid var(--color-accent); border-top: 4px solid transparent;
    border-bottom: 4px solid transparent; transition: transform .15s ease; }
  .role details[open] > summary::before { transform: rotate(90deg); }
  .role summary:hover { color: var(--color-accent-300); }
  .role summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 3px; }

  /* scrollspy rail: two-level page outline */
  .rail { position: fixed; top: 50%; transform: translateY(-50%); left: calc(50% - 604px);
    width: 150px; max-height: 82vh; overflow-y: auto; display: none;
    flex-direction: column; z-index: 15; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail ul { list-style: none; margin: 0; padding: 0; }
  .rail a { display: flex; align-items: flex-start; gap: 10px; text-decoration: none;
    line-height: 1.35; transition: color .18s ease; }
  .rail a.lvl1 { font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
    color: var(--color-neutral-500); padding: 4px 0; }
  .rail a.lvl1::before { content: ""; width: 14px; flex: none; height: 2px; background: currentColor;
    margin-top: 7px; transition: width .18s ease; }
  .rail a.lvl2 { font-size: 11.5px; color: var(--color-neutral-500); padding: 3px 0 3px 24px; }
  .rail a.lvl2::before { margin-top: 7px; }
  .rail a.lvl2::before { content: ""; width: 6px; flex: none; height: 1px; background: currentColor; }
  .rail a:hover { color: var(--color-neutral-200); }
  .rail a.on { color: var(--color-accent); }
  .rail a.lvl1.on::before { width: 26px; }
  .rail a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 3px; }
  /* subsections only appear for the section you are actually in */
  .rail .subs { max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .28s ease, opacity .2s ease; }
  .rail li.active > .subs { max-height: 340px; opacity: 1; }
  @media (max-width: 1239px) { .nav { position: sticky; top: 0; } }
  @media (min-width: 1240px) { .rail { display: flex; } }
  /* rail actions */
  .rail .actions { margin-top: var(--space-4); padding-top: var(--space-3);
    background: linear-gradient(to right, var(--color-divider), transparent) no-repeat top / 100% 1px; }
  .rail .actions a { font-size: 12px; color: var(--color-accent); padding: 3px 0; }
  .rail .actions a::before { content: ""; width: 14px; flex: none; height: 2px;
    background: currentColor; margin-top: 7px; }
@media (prefers-reduced-motion: reduce) { .rail a, .rail a::before { transition: none; } }

  .case-entry { padding-top: var(--space-6); }
  .case-entry + .case-entry { margin-top: calc(var(--space-8) * 1.4); padding-top: calc(var(--space-8) * 0.9);
    background: linear-gradient(to right, transparent, var(--color-divider) 48px,
      var(--color-divider) calc(100% - 48px), transparent) no-repeat top / 100% 1px; }
  .case-entry > h3 { font-size: 21px; margin-bottom: var(--space-4); color: var(--color-neutral-100); }
  .case h4.lede-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-accent); margin: 0 0 var(--space-2); }
  .rail a.lvl3 { font-size: 11px; color: var(--color-neutral-500); padding: 2px 0 2px 38px; }
  .rail a.lvl3::before { content: ""; width: 4px; flex: none; height: 1px; background: currentColor; margin-top: 7px; }

  /* ---- documentation library ---- */
  .doclist { max-width: 700px; }
  .doc { padding-top: var(--space-5); }
  .doc + .doc { margin-top: var(--space-5);
    background: linear-gradient(to right, transparent, var(--color-divider) 0,
      var(--color-divider) calc(100% - 64px), transparent) no-repeat top / 100% 1px; }
  .doc h3 { font-size: 17px; margin: 0 0 var(--space-2); color: var(--color-neutral-100); }
  .doc h3 a { color: inherit; text-decoration: none;
    background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat 0 100% / 0 1px;
    transition: background-size .18s ease, color .18s ease; }
  .doc h3 a:hover { color: var(--color-accent-300); background-size: 100% 1px; }
  .doc p { margin: 0 0 var(--space-2); color: var(--color-neutral-400); max-width: 62ch; }
  .doc-meta { font-size: 12.5px; color: var(--color-neutral-500) !important; }
  .doc-meta a { color: var(--color-accent); }

  /* plain feature lists on the uses page */
  ul.plain { list-style: none; padding: 0; margin: var(--space-3) 0 0; max-width: 66ch; }
  ul.plain li { position: relative; padding-left: 20px; margin-bottom: var(--space-3);
    color: var(--color-neutral-300); line-height: 1.62; }
  ul.plain li::before { content: ""; position: absolute; left: 0; top: 11px;
    width: 10px; height: 2px; background: var(--color-accent); }
  ul.plain li b { color: var(--color-neutral-100); font-weight: 600; }

  @media print { .doc h3 a { background: none; } }

  /* ---- print ----
     Someone will print a case study or save it to PDF before an interview.
     Drop the furniture, go to ink on paper, and spell out link targets since a
     printed page cannot be clicked. */
  @media print {
    :root {
      --color-bg: #fff; --color-surface: #fff; --color-text: #111;
      --color-neutral-100: #000; --color-neutral-200: #1a1a1a; --color-neutral-300: #333;
      --color-neutral-400: #444; --color-neutral-500: #555; --color-neutral-600: #555;
      --color-accent: #3b3466; --color-accent-300: #3b3466; --color-accent-400: #3b3466;
      --color-divider: #c8c8c8;
    }
    body { background: #fff; color: #111; }
    .rail, .nav, .skip, .actions, .hero .cta, details > summary { display: none !important; }
    /* collapsed detail is still content: print it */
    details > *:not(summary) { display: block !important; }
    details[open], details { display: block !important; }
    main, .page { max-width: 100%; margin: 0; padding: 0; }
    a { color: #111; text-decoration: underline; }
    /* external and cross-page links get their destination spelled out */
    main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; word-break: break-all; }
    main a[href^="/"]::after { content: " (ishaqkhan.com" attr(href) ")"; font-size: 9pt; color: #555; }
    main a[href^="#"]::after { content: ""; }
    h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
    section, .case, .case-entry, figure, .flowwrap { break-inside: avoid; page-break-inside: avoid; }
    .flow { max-width: 100%; height: auto; }
    p { orphans: 3; widows: 3; }
    @page { margin: 16mm 14mm; }
  }