/* ============================================================
   MOLECULES — small reusable groups of atoms: nav tab, panel
   eyebrow, display word, section head, work row, experience
   card, ticker, scroll hint, drag cue. Each component's phone
   (@media) overrides are co-located so source order keeps them
   winning over the base (the @layer keeps tiers in order).
   ============================================================ */
@layer molecules {


  /* nav tab (accordion card) */
  .nav-card {
    position: relative; flex: 0 0 auto; flex-grow: 0; flex-basis: 68px; min-height: 68px;
    border: none; border-radius: 18px; background: transparent; cursor: pointer;
    text-align: left; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between;
    color: var(--ink); overflow: hidden;
    outline: none; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none;
    transition: flex-grow var(--dur-accordion) var(--ease-accordion), background var(--dur-state) ease, color var(--dur-state) ease;
  }
  .nav-card.hello   { background: var(--red);    color: var(--on-red); }
  .nav-card.work    { background: var(--blue);   color: var(--on-blue); }
  .nav-card.contact { background: var(--yellow); color: var(--on-yellow); }
  .nav-card.experience { background: var(--ink); color: var(--paper); }
  /* hover: minimal invert — a colored tab melts into the page bg, text goes ink (desktop; brand excluded) */
  @media (hover: hover) { .nav-card:not(.brand):hover { background: var(--paper); color: var(--ink); } }
  .nav-card .ix { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label); opacity: .72; }
  .nav-card .lb { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1; transition: font-size var(--dur-accordion) var(--ease-accordion); }
  .nav-card:active, .nav-card:focus { transform: none; outline: none; border: none; box-shadow: none; }
  .nav-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .rail.is-home .nav-card:not(.brand) { flex-grow: 1; }
  .nav-card.active { flex-grow: 6; }
  .nav-card.active .lb { font-size: 34px; }
  .nav-card.brand { flex-grow: 0 !important; flex-basis: 68px; background: var(--white); justify-content: center; align-items: center; padding: 8px; }
  /* animated brand mark — JuNu bars stretch up/down, middle bar accented (replaces the static symbol) */
  .nav-card.brand .brand-anim { display: flex; align-items: center; justify-content: center; gap: 5px; height: 48px; }
  .nav-card.brand .brand-anim i { width: 6px; height: 100%; background: var(--ink); border-radius: 4px; animation: brandStretch 2.4s ease-in-out 2 forwards; }
  .nav-card.brand .brand-anim i:nth-child(1) { animation-delay: 0s; }
  .nav-card.brand .brand-anim i:nth-child(2) { animation-delay: .12s; }
  .nav-card.brand .brand-anim i:nth-child(3) { animation-delay: .24s; }
  .nav-card.brand .brand-anim i:nth-child(4) { animation-delay: .36s; }
  .nav-card.brand .brand-anim i:nth-child(5) { animation-delay: .48s; }
  .nav-card.brand .brand-anim i.hot { background: var(--purple); }
  @keyframes brandStretch { 0%, 100% { height: 100%; border-radius: 4px; } 50% { height: 22%; border-radius: 999px; } }
  .nav-card.brand .ix { color: var(--ink-55); }
  .nav-card.brand .brand-home { display: none; }
  /* section chips live in a .track; on desktop it's transparent so chips act as direct rail children */
  .track { display: contents; }

  /* panel eyebrow (index + label row) */
  .panel-top { display: flex; justify-content: space-between; align-items: flex-start; font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: var(--tr-label); }
  .panel-top .big-idx { font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 0.8; letter-spacing: var(--tr-display); }
  .panel-top .r { text-align: right; }

  /* giant section word */
  .hero-type { flex: 1; display: flex; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tr-display); }
  .hero-type.exp { font-size: clamp(48px, 9vw, 132px); }
  .hero-foot { display: flex; justify-content: space-between; align-items: flex-end; font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: var(--tr-label); opacity: .9; }

  /* section head (title + count) */
  .exp-head { display: flex; justify-content: space-between; align-items: baseline; margin: var(--s-1) 0 var(--s-7); }
  .exp-head .h { font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: var(--tr-tight); }
  .exp-head .c { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-55); text-transform: uppercase; letter-spacing: var(--tr-label); }

  /* ── Row cards — ONE flat "dark bar" component for Work + Experience (v8). Layout:
        title (left) · discipline/role (center) · client/dates (right). NO hover.
        RULE: each section's cards take that section's navbar accent as their background —
        Work = blue, Experience = ink (black). Work opens the case study; Experience is display-only. ── */
  .wkrow, .xrow { display: flex; align-items: center; gap: 24px; flex: 1; border-radius: 16px; padding: 0 30px; min-height: 56px; overflow: hidden; }
  .wkrow { background: var(--blue); cursor: pointer; }   /* Work → blue, opens the case study */
  .xrow  { background: var(--ink); }                      /* Experience → black, display-only  */
  .wkrow .t, .xrow .t { flex: 1.4; min-width: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.06; color: var(--paper); }
  .wkrow .disc, .xrow .disc { flex: 1; min-width: 0; text-align: center; font-size: 14px; color: var(--row-fg); }
  .wkrow .client, .xrow .client { flex: 0 0 auto; min-width: 130px; text-align: right; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: var(--paper); }
  .wkrow .tbd, .xrow .tbd { font-family: var(--font-mono); font-size: 10px; color: var(--paper); border: 1px dashed var(--row-line); border-radius: 5px; padding: 1px 6px; margin-left: 8px; white-space: nowrap; vertical-align: middle; }

  /* (ticker removed — v6 no-ticker) */

  /* (scroll hint removed — redundant secondary element) */

  /* drag-to-reveal cue — hidden on desktop (hover reveals); shown only on phone */
  .cue { display: none; }
  @keyframes cue-ripple { 0%{ transform:scale(.45); opacity:.85; } 80%{ opacity:0; } 100%{ transform:scale(2.7); opacity:0; } }
  @keyframes cue-drift  { 0%,100%{ margin-left:-70px; } 50%{ margin-left:70px; } }

  /* ---- reduced motion (molecule-level) ---- */
  @media (prefers-reduced-motion: reduce) {
    .nav-card, .nav-card .lb { transition: none !important; }
    .nav-card.brand .brand-anim i { animation: none; height: 100%; border-radius: 2px; }
    .cue { display: none !important; }
  }

  /* ---- phone (molecule-level) ---- */
  @media (max-width: 640px) {

    /* ===== Mobile Nav 4D — equal chips + scrub carousel (no strokes, no shadow) ===== */
    .rail { --chipw: 116px; }
    /* section chips ride a horizontal scrub-track — flat, no fade/shadow/lines */
    .track { flex: 1 1 auto; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-radius: 12px; }
    .track::-webkit-scrollbar { display: none; }
    /* each chip = equal-width accent pill; number + label, ONE text size, no shadow */
    .nav-card { flex-direction: row; align-items: center; justify-content: center; gap: 5px; min-height: 0; height: 56px; padding: 0 8px; border-radius: 12px; overflow: hidden; box-shadow: none; }
    .track .nav-card { flex: 0 0 var(--chipw); }
    .nav-card .ix { display: inline; font-size: 11px; font-weight: 600; letter-spacing: .06em; opacity: .72; }
    .nav-card .lb { display: inline; font-size: 11px; font-weight: 600; white-space: nowrap; }
    /* override the desktop accordion's active-label growth (34px) — chips keep ONE size on phone */
    .nav-card.active .ix, .nav-card.active .lb { font-size: 11px; }
    .nav-card.brand { flex: 0 0 44px; padding: 0; justify-content: center; }
    .nav-card.brand .brand-anim { height: 30px; gap: 3px; }
    .nav-card.brand .brand-anim i { width: 4px; }
    .nav-card.brand .brand-home { display: none; }

    .panel-top .big-idx { font-size: 32px; }
    .hero-type { font-size: clamp(64px, 19vw, 120px); }

    /* drag-to-reveal cue (phone): pulsing dot that drifts, fades on first touch */
    .cue { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; transition: opacity .45s ease; }
    .home-mark.cue-off .cue { opacity: 0; }
    .cue-drift { position: absolute; top: 54%; left: 50%; animation: cue-drift 3.6s cubic-bezier(.45,0,.55,1) infinite; }
    .cue-dot { position: relative; width: 40px; height: 40px; transform: translate(-50%,-50%); }
    .cue-dot .core { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); box-shadow: 0 3px 12px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.25) inset; }
    .cue-dot .ring { position: absolute; inset: 0; border: 2px solid var(--paper); border-radius: 50%; opacity: 0; animation: cue-ripple 2s cubic-bezier(.2,.6,.3,1) infinite; }
    .cue-dot .ring.b { animation-delay: .66s; }
    .cue-dot .ring.c { animation-delay: 1.33s; }
    .cue-label { position: absolute; left: 50%; top: calc(54% + 46px); transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-80); white-space: nowrap; background: rgba(241,236,227,.94); padding: 6px 12px; border-radius: 999px; box-shadow: 0 3px 12px rgba(0,0,0,.16); }

    /* row cards (Work + Experience): tighter; discipline hidden on phones */
    .wkrow, .xrow { gap: 12px; padding: 14px 18px; min-height: 0; }
    .wkrow .t, .xrow .t { font-size: 17px; }
    .wkrow .disc, .xrow .disc { display: none; }
    .wkrow .client, .xrow .client { min-width: 0; font-size: 15px; }
  }
}