/* ============================================================
   ORGANISMS — assemblies of molecules into sections: the nav
   rail, the hero bar field, the Hello statement, the Work and
   Experience lists, the Contact block. (The case-study dialog
   organism lives in casestudy.css, also @layer organisms.)
   ============================================================ */
@layer organisms {

  /* nav rail (container) */
  .rail { display: flex; flex-direction: column; gap: 10px; min-height: 0; }

  /* hero — bar field + spotlight reveal */
  .home-mark { position: absolute; left: 8px; right: 8px; top: clamp(92px, 15%, 132px); bottom: clamp(92px, 15%, 132px); min-height: 0; }
  /* ===== HERO BAR KNOBS — tweak to dial the feel (desktop) ===== */
  .bar-field { position: absolute; inset: 0; overflow: hidden; --bar-w: 38px; --bar-gap: 34px; }
  .bars { position: absolute; inset: 0; display: flex; justify-content: center; gap: var(--bar-gap); align-items: stretch; }
  .bars > span { flex: 0 0 var(--bar-w); border-radius: clamp(6px, 1.1vw, 16px); }
  .bars-black > span { background: var(--ink); }
  .bars-reveal { pointer-events: none; }
  /* color + angle are generative knobs (set inline on #barField by script.js); fall back to classic yellow / 8deg */
  .bars-reveal > span { background: var(--reveal-color, var(--yellow)); opacity: 0; transform: rotate(var(--reveal-angle, 8deg)) scaleY(1.3); transform-origin: 50% 50%; }

  /* ↻ shuffle — re-rolls the generative hero variant live (bars stay black; only the reveal changes) */
  .reroll { position: absolute; right: 0; bottom: 0; z-index: 5; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-pill); border: 1.5px solid var(--ink-30);
    background: var(--paper); color: var(--ink); cursor: pointer; pointer-events: auto;
    transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out); }
  /* icon renders at the font's 24px (Google's unlayered helper class wins over @layer — site-wide) */
  .reroll:active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  @media (hover: hover) { .reroll:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } }

  /* Hello — statement */
  .statement { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
  .statement .lead { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-d1); line-height: 1.3; letter-spacing: var(--tr-display); max-width: 16ch; }
  .statement .lead .accent { color: var(--red); }
  .statement .rule { height: 0; border-top: 1.5px solid var(--hair); }
  .statement .desc { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
  .statement .desc .k { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label); color: var(--ink-55); }
  .statement .desc p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-80); max-width: 50ch; }

  /* Work list (rows are .wkrow molecules — same card as Experience .xrow) */
  .wrows { display: flex; flex-direction: column; gap: 16px; justify-content: space-between; }

  /* Experience list (cards are .xrow molecules) */
  .exp-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .exp-rows { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 16px; justify-content: space-between; }
  .exp-rows::-webkit-scrollbar { display: none; }
  /* even distribution handles spacing — drop the per-card margin so gaps stay equal */
  #expRows .xrow { margin-bottom: 0; }

  /* Contact */
  .contact-wrap { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding-top: 12px; }
  .contact-big { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-d1); line-height: var(--lh-tight); letter-spacing: var(--tr-display); }
  .contact-big a { color: inherit; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
  .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .contact-col .k { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label); color: var(--ink-55); margin-bottom: 8px; }
  .contact-col .v { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.4; }
  .contact-col .v a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--ink-30); }
  .contact-col .v a:active { border-color: var(--ink); }
  @media (hover: hover) { .contact-col .v a:hover { border-color: var(--ink); } }

  /* ---- reduced motion (organism-level) ---- */
  @media (prefers-reduced-motion: reduce) {
    .bars-reveal > span { opacity: 1 !important; }
  }

  /* ---- phone (organism-level) ---- */
  @media (max-width: 640px) {
    /* rail = fixed bottom progress nav (scroll-driven; active segment auto-expands) */
    .rail { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); flex-direction: row; align-items: stretch; gap: 6px; min-height: 0; height: 56px; z-index: 40; }

    /* hero: allow vertical scroll but capture horizontal drags for the reveal.
       Smaller bottom inset (vs the symmetric base) extends the field down so it's
       centered between the top meta and the fixed bottom nav. */
    .home-mark { touch-action: pan-y; bottom: clamp(34px, 6%, 52px); }
    /* ===== HERO BAR KNOBS — phone (clamp keeps 11 bars fitting 320–430px) ===== */
    .bar-field { --bar-w: clamp(12px, 4.4vw, 18px); --bar-gap: clamp(10px, 3.6vw, 16px); }
    /* bigger thumb target for the shuffle button on phones */
    .reroll { width: 44px; height: 44px; }

    /* phone: rows stack & scroll normally (no desktop spread) */
    .wrows, .exp-rows { justify-content: flex-start; }
    .statement { gap: 16px; }
    .statement .desc { grid-template-columns: 1fr; gap: 10px; }
    .contact-grid { grid-template-columns: 1fr; gap: 14px; }
    .contact-col .v { font-size: var(--fs-body); }
  }
}