/* ============================================================================
   Platform — "Lagoon" direction, PP (partner portal)
   ----------------------------------------------------------------------------
   Second attempt at the client's brief, and the one that reads it literally.

   Tide took Harbor and recoloured it. That is a different thing from what was
   asked, because what separates Bloom from Harbor is not the palette — it is
   the material:

       Bloom     air (spacing scale 35% wider), 36px corners with one clipped,
                 16px body, a serif that is allowed to be big, three blurred
                 fields drifting behind the paper, headlines that resolve word
                 by word, a path that draws itself.
       Harbor    tight scale, 22px corners, 15px body, monospace on every
                 label, twelve columns, a full profile, the assistant in the
                 top bar.

   Lagoon takes the MATERIAL from Bloom and the ARRANGEMENT from Harbor. So:
   Bloom's air, Bloom's soft geometry, Bloom's type, Bloom's effects — laid out
   on Harbor's twelve-column grid, with Harbor's density of information and its
   assistant in the bar.

   COLOUR: Petrol as the secondary set, exactly as asked. The sign-in is Petrol
   untouched (`body.deep`), and inside, the paper keeps Bloom's lightness with
   its hue moved onto Petrol's side of the wheel — warm ivory beside cold teal
   reads as two brands stapled at the login. Gold is gone: Bloom's warm light
   is replaced by Petrol's own water for anything live, and amber survives only
   where something waits on the client.
   ============================================================================ */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/fraunces-500.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/fraunces-600.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/fraunces-italic-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700.woff2") format("woff2"); }

:root {
  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Bloom's paper, cooled onto Petrol's hue. Lightness untouched. */
  --paper:   oklch(0.976 0.008 202);
  --paper-2: oklch(0.955 0.011 202);
  --card:    oklch(1 0 0);
  --card-2:  oklch(0.982 0.006 202);

  --ink:    oklch(0.258 0.038 220);
  --muted:  oklch(0.446 0.030 218);
  --faint:  oklch(0.548 0.026 216);
  --line:   oklch(0.902 0.013 206);
  --line-2: oklch(0.846 0.019 205);

  /* Petrol as the secondary set. --accent-lit is Petrol's own accent value. */
  --accent:      oklch(0.470 0.098 208);
  --accent-deep: oklch(0.356 0.086 210);
  --accent-lit:  oklch(0.760 0.108 199);
  --accent-soft: oklch(0.946 0.030 203);
  --accent-line: oklch(0.854 0.052 203);
  --on-accent:   oklch(0.99 0.004 205);

  --deep:   oklch(0.245 0.048 218);
  --deep-2: oklch(0.315 0.068 210);
  --glow-1: oklch(0.925 0.055 196);
  --glow-2: oklch(0.795 0.095 200);

  --amber:      oklch(0.760 0.115 62);
  --amber-ink:  oklch(0.492 0.110 58);
  --amber-soft: oklch(0.945 0.042 62);

  --ok:      oklch(0.470 0.090 158);
  --ok-soft: oklch(0.930 0.036 158);
  --no:      oklch(0.520 0.150 28);
  --no-soft: oklch(0.955 0.032 28);

  /* Bloom's air, one notch in — this page carries a whole profile, so 96px of
     section spacing would turn reading into scrolling. */
  --s1: 8px; --s2: 14px; --s3: 20px; --s4: 28px; --s5: 40px; --s6: 60px; --s7: 84px;

  /* Bloom's geometry: large radii, and one corner clipped so a card reads as
     drawn rather than as a browser default. */
  --r-sm:   14px;
  --r:      24px;
  --r-lg:   32px;
  --r-leaf: 32px 32px 32px 8px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px oklch(0.258 0.038 220 / .05), 0 6px 20px oklch(0.258 0.038 220 / .06);
  --shadow-2: 0 2px 6px oklch(0.258 0.038 220 / .06), 0 22px 48px oklch(0.258 0.038 220 / .12);
  --ease:      cubic-bezier(.2, .7, .2, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.42, .64, 1);
}

/* The lights off: Petrol's own values, for the sign-in. */
body.deep {
  --paper:   oklch(0.185 0.030 220);
  --paper-2: oklch(0.212 0.034 219);
  --card:    oklch(0.243 0.038 217);
  --card-2:  oklch(0.285 0.042 215);
  --ink:     oklch(0.970 0.008 210);
  --muted:   oklch(0.790 0.018 210);
  --faint:   oklch(0.685 0.022 210);
  --line:    oklch(0.345 0.035 214);
  --line-2:  oklch(0.415 0.040 212);
  --accent:      oklch(0.760 0.108 199);
  --accent-deep: oklch(0.845 0.098 197);
  --accent-soft: oklch(0.760 0.108 199 / .13);
  --accent-line: oklch(0.760 0.108 199 / .32);
  --on-accent:   oklch(0.160 0.030 220);
  --shadow-1: 0 1px 2px oklch(0 0 0 / .30), 0 4px 14px oklch(0 0 0 / .22);
  --shadow-2: 0 18px 48px oklch(0 0 0 / .40), 0 2px 8px oklch(0 0 0 / .30);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.62;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent-soft); color: var(--ink); }

/* ---- Bloom's drifting fields, in Petrol's colours ------------------------ */
.blooms { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blooms span { position: absolute; border-radius: 50%; filter: blur(84px); opacity: .5; will-change: transform; }
.blooms .b1 { width: 46vw; height: 46vw; top: -16vw; right: -10vw; background: oklch(0.760 0.108 199 / .34); animation: drift 30s ease-in-out infinite; }
.blooms .b2 { width: 38vw; height: 38vw; bottom: -14vw; left: -12vw; background: oklch(0.545 0.105 205 / .18); animation: drift 38s ease-in-out infinite reverse; }
.blooms .b3 { width: 24vw; height: 24vw; top: 48%; right: 26%; background: oklch(0.925 0.055 196 / .40); animation: drift 34s ease-in-out -12s infinite; }
body > *:not(.blooms) { position: relative; z-index: 1; }

/* ---- Top bar (Harbor's arrangement, Bloom's softness) -------------------- */
.top { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: var(--s4);
       padding: var(--s2) clamp(18px, 3.4vw, 40px);
       background: color-mix(in oklab, var(--paper) 84%, transparent);
       backdrop-filter: blur(16px) saturate(1.15); border-bottom: 1px solid var(--line);
       transition: padding .3s var(--ease), box-shadow .3s var(--ease); }
.top.tight { padding-top: 8px; padding-bottom: 8px; box-shadow: 0 6px 22px oklch(0.258 0.038 220 / .08); }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 650; letter-spacing: -.012em; flex: none; }
.brand .sub { display: block; font-size: 11px; font-weight: 500; color: var(--faint); letter-spacing: .04em; }
.mark { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: var(--r-leaf);
        font-weight: 800; font-size: 14px; color: var(--on-accent);
        background: linear-gradient(145deg, var(--glow-2), var(--accent));
        box-shadow: 0 4px 14px oklch(0.470 0.098 208 / .28); }
.nav { display: flex; gap: 2px; flex: 1; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px;
         text-decoration: none; color: var(--muted); font-size: 14.5px; font-weight: 500;
         border-radius: var(--r-pill); transition: color .18s var(--ease), background .18s var(--ease); }
.nav a:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 5%, transparent); }
.nav a.on { color: var(--accent); background: var(--accent-soft); font-weight: 650; }
body.deep .nav a.on { color: var(--accent-deep); }
.nav a .n { margin-left: 8px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center;
            border-radius: var(--r-pill); font-size: 11px; font-weight: 700; color: var(--card); background: var(--amber-ink); }
.top .right { display: flex; align-items: center; gap: var(--s2); flex: none; }
.who { text-align: right; line-height: 1.25; }
.who .n { font-size: 13.5px; font-weight: 600; }
.who .o { font-size: 11.5px; color: var(--faint); }
.me { width: 38px; height: 38px; flex: none; display: grid; place-items: center; cursor: pointer;
      border-radius: var(--r-leaf); font-size: 12.5px; font-weight: 700; color: var(--on-accent);
      background: linear-gradient(145deg, var(--glow-2), var(--deep-2)); }
@media (max-width: 860px) { .nav, .who { display: none; } }

/* ---- Frame --------------------------------------------------------------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: var(--s6) clamp(18px, 3.4vw, 40px) var(--s7); }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--s2);
           font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
body.deep .eyebrow { color: var(--accent-deep); }
.eyebrow .leaf { width: 9px; height: 9px; flex: none; border-radius: 0 9px 0 9px; background: var(--accent-lit); }
.eyebrow.live .leaf { animation: breathe 2.6s var(--ease) infinite; }

h1.display { font-family: var(--font-serif); font-weight: 600;
             font-size: clamp(36px, 5.2vw, 62px); line-height: 1.02; letter-spacing: -.03em; margin: 0 0 var(--s3); }
h1.display em { font-style: italic; color: var(--accent); }
body.deep h1.display em { color: var(--accent-deep); }
h2.big { font-family: var(--font-serif); font-weight: 600; font-size: clamp(24px, 2.6vw, 30px);
         letter-spacing: -.024em; line-height: 1.15; margin: 0 0 var(--s2); }
.lede { font-size: 17px; line-height: 1.72; color: var(--muted); max-width: 58ch; margin: 0; }

/* Bloom's section rule: no monospace. Letterspaced caps and a hairline. */
.h-sec { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--s3);
         font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.h-sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.h-sec .n { color: var(--accent); }
.h-sec.warm .n { color: var(--amber-ink); }

/* ---- Harbor's grid ------------------------------------------------------- */
.g12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s3); align-items: start; }
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}
.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}
@media (max-width: 1100px) { .c3,.c4{grid-column:span 6} .c5,.c7,.c8{grid-column:span 12} }
@media (max-width: 700px) { .g12 > * { grid-column: span 12 !important; } }

.card { position: relative; background: var(--card); border: 1px solid var(--line);
        border-radius: var(--r-lg); box-shadow: var(--shadow-1);
        transition: transform .3s var(--ease-expo), box-shadow .3s var(--ease), border-color .22s var(--ease); }
body:not(.deep) .card { border-color: oklch(1 0 0 / .72); }
.card.pad { padding: var(--s4); }
.card.leaf { border-radius: var(--r-leaf); }
.card.quiet { background: var(--card-2); box-shadow: none; border-color: var(--line); }
.card.lift:hover { transform: translateY(-3px) scale(1.004); box-shadow: var(--shadow-2); border-color: var(--accent-line); }
.card.deep-panel { background: linear-gradient(165deg, var(--deep-2), var(--deep)); border-color: transparent;
                   color: oklch(0.97 0.008 210); }
.card.deep-panel .h-sec { color: oklch(0.97 0.008 210 / .5); }
.card.deep-panel .h-sec::after { background: oklch(1 0 0 / .14); }

/* ---- Buttons (Bloom's pills) --------------------------------------------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
       min-height: 48px; padding: 12px 26px; cursor: pointer; font-size: 15px; font-weight: 600; letter-spacing: -.005em;
       border: 1px solid transparent; border-radius: var(--r-pill);
       transition: transform .18s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease); }
.btn-primary { color: var(--on-accent); background: var(--accent); box-shadow: 0 8px 22px oklch(0.470 0.098 208 / .26); }
.btn-primary:hover { background: var(--accent-deep); box-shadow: 0 14px 30px oklch(0.470 0.098 208 / .34); }
.btn-warm { color: var(--card); background: var(--amber-ink); box-shadow: 0 8px 22px oklch(0.492 0.110 58 / .26); }
.btn-warm:hover { box-shadow: 0 14px 32px oklch(0.492 0.110 58 / .38); }
.btn-ghost { color: var(--ink); background: transparent; border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--accent); background: var(--accent-soft); }
.btn-quiet { color: var(--muted); background: transparent; }
.btn-quiet:hover { color: var(--no); background: var(--no-soft); }
.btn-sm { min-height: 42px; padding: 9px 18px; font-size: 14px; }
.btn-xs { min-height: 36px; padding: 7px 14px; font-size: 13px; }
@media (pointer: coarse) { .btn-sm, .btn-xs { min-height: 44px; } }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor;
          opacity: .26; transform: scale(0); animation: ripple .62s var(--ease-expo) forwards; }
.link { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--accent-line); }
.link:hover { border-bottom-color: var(--accent); }

.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 8px 17px; cursor: pointer;
        font-size: 14px; font-weight: 500; color: var(--muted);
        background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill);
        transition: color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); }
.chip:hover { color: var(--ink); border-color: var(--line-2); transform: translateY(-1px); }
.chip.on { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 600; }
@media (pointer: coarse) { .chip { min-height: 44px; } }

.badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; font-size: 12.5px; font-weight: 600;
         white-space: nowrap; border-radius: var(--r-pill); border: 1px solid var(--line-2);
         color: var(--muted); background: var(--paper-2); }
.badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.badge.you  { color: var(--amber-ink); background: var(--amber-soft); border-color: oklch(0.760 0.115 62 / .45); }
.badge.live { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.badge.ok   { color: var(--ok); background: var(--ok-soft); border-color: oklch(0.470 0.090 158 / .35); }
body.deep .badge { background: oklch(1 0 0 / .06); }
.code { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .03em; color: var(--faint); }

/* ---- Bloom's facts (no monospace label) ---------------------------------- */
.facts { display: grid; grid-template-columns: auto 1fr; gap: 12px var(--s4); margin: 0; font-size: 14.5px; }
.facts dt { color: var(--faint); }
.facts dd { margin: 0; text-align: right; font-weight: 550; }
.facts dd.warn { color: var(--amber-ink); }

/* ---- Bloom's path — a search drawn as a line ----------------------------- */
.path { position: relative; margin: 0; padding: 0; list-style: none; }
.path::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px;
                background: var(--line-2); border-radius: 2px; }
.path::after { content: ""; position: absolute; left: 11px; top: 10px; width: 2px; border-radius: 2px;
               height: 0; background: linear-gradient(180deg, var(--accent), var(--accent-lit));
               transition: height 1.5s var(--ease-expo); }
.path.in::after { height: var(--reached, 0%); }
.path li { position: relative; padding: 0 0 var(--s4) 44px; }
.path li:last-child { padding-bottom: 0; }
.path li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
                   background: var(--card); border: 2px solid var(--line-2);
                   transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.path.in li.past::before { background: var(--accent); border-color: var(--accent); }
.path.in li.now::before  { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 6px oklch(0.760 0.115 62 / .22); }
.path .t { font-size: 15.5px; font-weight: 600; }
.path .m { font-size: 13.5px; color: var(--faint); margin-top: 2px; }
.path li.now .t { color: var(--amber-ink); }

/* ---- Skills: Bloom's softness on Harbor's data --------------------------- */
.skills { display: grid; gap: 11px; }
.skill { display: grid; grid-template-columns: 1fr 90px auto; align-items: center; gap: 14px; font-size: 14.5px; }
.skill .nm { font-weight: 550; }
.skill .bar { height: 8px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--ink) 9%, transparent); overflow: hidden; }
.skill .bar i { display: block; height: 100%; width: var(--lv, 50%); border-radius: var(--r-pill); background: var(--line-2);
                transition: width 1.1s var(--ease-expo); }
.js .skill .bar i { width: 0; }
.js .in .skill .bar i, .js .skills.in .skill .bar i { width: var(--lv, 50%); }
.skill.req .nm { color: var(--accent); font-weight: 650; }
.skill.req .bar i { background: linear-gradient(90deg, var(--accent-deep), var(--accent-lit)); }
.skill .yr { font-size: 13px; color: var(--faint); white-space: nowrap; }

/* ---- Career ------------------------------------------------------------- */
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { position: relative; padding: 0 0 var(--s4) var(--s5); }
.tl li:last-child { padding-bottom: 0; }
.tl li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 14px; height: 14px; border-radius: 50%;
                 background: var(--card); border: 2px solid var(--line-2); }
.tl li.hi::before { background: var(--accent); border-color: var(--accent); }
.tl li::after { content: ""; position: absolute; left: 10px; top: 22px; bottom: 4px; width: 2px; background: var(--line); border-radius: 2px; }
.tl li:last-child::after { display: none; }
.tl .role { font-size: 16px; font-weight: 650; letter-spacing: -.014em; }
.tl .co { font-size: 14.5px; color: var(--muted); }
.tl .when { font-size: 13px; color: var(--faint); margin-top: 3px; }
.tl .did { font-size: 14.5px; color: var(--muted); margin-top: 8px; line-height: 1.68; }
.tl .stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tl .stack span { font-size: 12.5px; color: var(--accent); background: var(--accent-soft);
                  border: 1px solid var(--accent-line); border-radius: var(--r-sm); padding: 3px 10px; }

/* ---- Rows --------------------------------------------------------------- */
.rows { display: flex; flex-direction: column; gap: var(--s2); }
.rowcard { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: center;
           gap: var(--s3); padding: var(--s3) var(--s4); text-decoration: none; color: inherit;
           background: var(--card); border: 1px solid oklch(1 0 0 / .72); border-radius: var(--r-lg);
           box-shadow: var(--shadow-1);
           transition: transform .3s var(--ease-expo), box-shadow .3s var(--ease), border-color .22s var(--ease); }
.rowcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent);
                   transform: scaleY(0); transition: transform .3s var(--ease-expo); }
.rowcard.yours::before { background: var(--amber); }
.rowcard:hover { transform: translateY(-2px); border-color: var(--accent-line); box-shadow: var(--shadow-2); }
.rowcard:hover::before, .rowcard:focus-visible::before { transform: scaleY(1); }
.rowcard h3 { font-size: 18px; font-weight: 650; letter-spacing: -.018em; margin: 0 0 5px; }
.rowcard .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13.5px; color: var(--muted); }
.rowcard .meta .sep { color: var(--line-2); }
.rowcard .aside { display: flex; align-items: center; gap: var(--s3); justify-self: end; }
.rowcard .note { font-size: 13.5px; color: var(--muted); max-width: 30ch; text-align: right; }
.rowcard .note b { color: var(--ink); font-weight: 600; }
.rowcard .shift { transition: transform .38s var(--ease-back); }
.rowcard:hover .shift { transform: translateX(6px); }
@media (max-width: 860px) { .rowcard { grid-template-columns: 1fr; } .rowcard .aside { justify-self: start; flex-wrap: wrap; } .rowcard .note { text-align: left; max-width: none; } }

/* Compact stage indicator for rows — Bloom's dots, not Harbor's dashes. */
.stage-dots { display: flex; align-items: center; gap: 11px; }
.stage-dots .dots { display: flex; gap: 5px; }
.stage-dots .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.js .stage-dots .dots i { transform: scale(.6); opacity: 0;
                      transition: transform .4s var(--ease-back), opacity .4s var(--ease), background .4s var(--ease); }
.in .stage-dots .dots i, .stage-dots.in .dots i { transform: scale(1); opacity: 1; }
.in .stage-dots .dots i.done, .stage-dots.in .dots i.done { background: var(--accent); }
.in .stage-dots .dots i.here, .stage-dots.in .dots i.here { background: var(--amber); box-shadow: 0 0 0 4px oklch(0.760 0.115 62 / .20); }
.stage-dots .dots i:nth-child(1){transition-delay:.05s}.stage-dots .dots i:nth-child(2){transition-delay:.10s}
.stage-dots .dots i:nth-child(3){transition-delay:.15s}.stage-dots .dots i:nth-child(4){transition-delay:.20s}
.stage-dots .dots i:nth-child(5){transition-delay:.25s}.stage-dots .dots i:nth-child(6){transition-delay:.30s}
.stage-dots .lbl { font-size: 13px; color: var(--muted); white-space: nowrap; }

.stat .n { font-family: var(--font-serif); font-size: clamp(34px, 4.2vw, 50px); font-weight: 600;
           line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.stat .n.warm { color: var(--amber-ink); }
.stat .n.acc { color: var(--accent); }
.stat .k { font-size: 13.5px; color: var(--muted); margin-top: 9px; }

.quote { margin: 0 0 var(--s3); padding-left: var(--s3); border-left: 3px solid var(--accent-line);
         font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.quote:last-child { margin-bottom: 0; }
.quote .by { display: block; margin-top: 7px; font-size: 13px; color: var(--faint); }

.slots { display: grid; gap: 8px; }
.slot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
        padding: 13px 17px; border-radius: var(--r-sm); cursor: pointer; text-align: left;
        background: var(--card-2); border: 1px solid var(--line);
        transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease); }
.slot:hover { border-color: var(--accent); background: var(--card); transform: translateX(4px); }
.slot .d { font-size: 14.5px; font-weight: 600; }
.slot .h { font-size: 13px; color: var(--faint); }

.doc { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.doc:last-child { border-bottom: 0; padding-bottom: 0; }
.doc .ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm);
           color: var(--accent); background: var(--accent-soft); }
.doc .t { flex: 1; min-width: 0; }
.doc .t b { display: block; font-size: 14px; font-weight: 600; }
.doc .t span { font-size: 12.5px; color: var(--faint); }

/* ---- Fields -------------------------------------------------------------- */
.field { margin-bottom: var(--s3); }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.field input { width: 100%; min-height: 50px; padding: 13px 17px; font-size: 15.5px; color: var(--ink);
               background: var(--card); border: 1.5px solid var(--line-2); border-radius: var(--r-sm); outline: none;
               transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
body.deep .field input { background: oklch(0 0 0 / .22); border-width: 1px; }
.field input::placeholder { color: var(--faint); }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hint { font-size: 13px; color: var(--faint); margin: -6px 0 var(--s3); }

/* Senza JS, o con il JS rotto, la pagina deve restare leggibile: le regole che
   nascondono qualcosa sono valide solo sotto `.js`, che uno script in testa
   aggiunge all'html. È la difesa che mancava — una direzione intera è nata
   vuota perché una funzione chiamata non esisteva, e il CSS aveva già
   azzerato l'opacità di tutto.
   ---- Bloom's effects ----------------------------------------------------- */
.words .w { display: inline-block; overflow: hidden; vertical-align: top; }
.js .words .w > span { display: inline-block; transform: translateY(102%) rotate(3deg); opacity: 0; filter: blur(6px);
                   transition: transform .9s var(--ease-expo), opacity .7s var(--ease), filter .7s var(--ease); }
.words.in .w > span { transform: none; opacity: 1; filter: blur(0); }

.spot { position: relative; overflow: hidden; }
.spot::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
               background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), oklch(0.760 0.108 199 / .16), transparent 68%);
               opacity: 0; transition: opacity .45s var(--ease); }
.spot:hover::after { opacity: 1; }

.thread-bar { position: fixed; inset: 0 0 auto; height: 3px; z-index: 90; transform-origin: 0 50%;
              transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--accent), var(--accent-lit), var(--amber)); }

@keyframes drift   { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-3%, 3%, 0) scale(1.07); } }
@keyframes rise    { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes pop     { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes ripple  { to { transform: scale(2.6); opacity: 0; } }
@keyframes breathe { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
@keyframes typing  { 0%,60%,100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes hereGlow{ 0%,100% { box-shadow: 0 0 0 0 oklch(0.760 0.115 62 / .40); } 55% { box-shadow: 0 0 0 6px transparent; } }

.rise { animation: rise .8s var(--ease-expo) both; }
.d1{animation-delay:.06s}.d2{animation-delay:.14s}.d3{animation-delay:.22s}
.d4{animation-delay:.30s}.d5{animation-delay:.38s}.d6{animation-delay:.46s}
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s var(--ease), transform .75s var(--ease-expo); }
.js .reveal.in { opacity: 1; transform: none; }
.js .stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease-expo); }
.js .stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1){transition-delay:.00s}.stagger.in > *:nth-child(2){transition-delay:.06s}
.stagger.in > *:nth-child(3){transition-delay:.12s}.stagger.in > *:nth-child(4){transition-delay:.18s}
.stagger.in > *:nth-child(5){transition-delay:.24s}.stagger.in > *:nth-child(6){transition-delay:.30s}

/* ---- Switcher ------------------------------------------------------------ */
.style-switch { position: fixed; bottom: 18px; right: 18px; z-index: 80; display: flex; align-items: center; gap: 4px;
                padding: 5px 5px 5px 13px; background: var(--card); border: 1px solid var(--line-2);
                border-radius: var(--r-pill); font-size: 11.5px; color: var(--faint); box-shadow: var(--shadow-2); }
.style-switch a { min-width: 32px; text-align: center; padding: 6px 10px; border-radius: var(--r-pill);
                  text-decoration: none; color: var(--muted); font-weight: 600;
                  transition: background .18s var(--ease), color .18s var(--ease); }
.style-switch a:hover { background: var(--card-2); color: var(--ink); }
.style-switch a.on { background: var(--accent); color: var(--on-accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .001ms !important; }
  .reveal, .stagger > * { opacity: 1; transform: none; }
  .words .w > span { transform: none; opacity: 1; filter: none; }
  .blooms { display: none; }
  .path::after { height: var(--reached, 0%); }
  .skill .bar i { width: var(--lv, 50%); }
  .stage-dots .dots i { transform: scale(1); opacity: 1; }
}

/* ============================================================================
   THE ASSISTANT, AS A CHARACTER
   ----------------------------------------------------------------------------
   A cream blob with a tuft, a heavy dark outline and very large eyes. It lives
   in the top bar and it is the only ornament in the whole direction.

   ONE DRAWING, EIGHT FACES. Every expression is a group inside the same SVG;
   `data-mood` on the button shows one and hides the rest. No sprite sheet, no
   second request, and the body never redraws — only the face changes, which is
   what makes it read as the same creature in a different state.

   THE MOODS ARE STATES, NOT DECORATION. Each one is tied to something true:

     idle       nothing is pending
     surprised  something is genuinely waiting on the client  (+ the hop)
     thinking   an answer is being composed
     happy      the answer just landed
     wink       you are hovering it
     sleepy     you have read everything; it dozes off
     cool       zero open questions on the whole page
     love       you confirmed an interview

   NO COUNTER. A number stuck on its head dirties the drawing and duplicates
   what the amber badges in the page already say. The creature signals with
   posture: it is surprised and it hops, or it is not.

   THE EYES FOLLOW THE POINTER, and that is the only joke it is allowed.
   ============================================================================ */

.buddy-wrap { position: relative; flex: none; }

.buddy-btn {
  position: relative; display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0; cursor: pointer;
  background: transparent; border: 0; border-radius: 14px;
  transition: background .2s var(--ease);
  --skin:  oklch(0.985 0.010 92);
  --line-b:oklch(0.255 0.045 250);
  --mouth: oklch(0.700 0.150 42);
  --blush: oklch(0.800 0.090 22);
  --heart: oklch(0.660 0.190 25);
}
.buddy-btn:hover { background: oklch(1 0 0 / .55); }

/* Sulla porta d'ingresso la creatura non è un comando: non c'è ancora niente
   da aprire. Fa da ritratto accanto al nome di chi ti segue — stessa faccia,
   stessi occhi che seguono il puntatore, nessun clic promesso. */
.buddy-btn.as-figure { width: 58px; height: 58px; cursor: default; background: transparent; }
.buddy-btn.as-figure:hover { background: transparent; }
.buddy-btn.as-figure .buddy { width: 52px; height: 52px; }

.buddy { display: block; width: 40px; height: 40px; overflow: visible;
         transition: transform .22s var(--ease-back); }
.buddy-btn:active .buddy { transform: scale(.93); }

.buddy .skin   { fill: var(--skin); stroke: var(--line-b); stroke-width: 3.4; stroke-linejoin: round; }
.buddy .seam   { fill: none; stroke: var(--line-b); stroke-width: 1.5; opacity: .55; }
.buddy .ink    { fill: var(--line-b); }
.buddy .stroke { fill: none; stroke: var(--line-b); stroke-width: 4.2; stroke-linecap: round; }
.buddy .mouth  { fill: var(--mouth); stroke: var(--line-b); stroke-width: 2.6; stroke-linejoin: round; }
.buddy .blush  { fill: var(--blush); opacity: .75; }
.buddy .heart  { fill: var(--heart); }
.buddy .shine  { fill: oklch(1 0 0); opacity: .9; }

/* ---- Mood switching ------------------------------------------------------ */
.buddy .mood { display: none; }
.buddy-btn[data-mood="idle"]      .m-idle,
.buddy-btn[data-mood="happy"]     .m-happy,
.buddy-btn[data-mood="wink"]      .m-wink,
.buddy-btn[data-mood="surprised"] .m-surprised,
.buddy-btn[data-mood="thinking"]  .m-thinking,
.buddy-btn[data-mood="sleepy"]    .m-sleepy,
.buddy-btn[data-mood="cool"]      .m-cool,
.buddy-btn[data-mood="love"]      .m-love { display: block; }
.buddy-btn:not([data-mood]) .m-idle { display: block; }

/* Hovering swaps the face to a wink unless the creature is busy saying
   something more important — a mood set by the page always wins. */
.buddy-btn:hover:not([data-mood="thinking"]):not([data-mood="surprised"]):not([data-mood="love"]) .mood { display: none; }
.buddy-btn:hover:not([data-mood="thinking"]):not([data-mood="surprised"]):not([data-mood="love"]) .m-wink { display: block; }

/* ---- Life ---------------------------------------------------------------- */
.buddy-float { display: block; animation: float 3.6s var(--ease) infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-2.5px) rotate(-2.5deg); } }

/* Blink: two frames out of a long loop. The eyelid is the body colour dropped
   over the eyes, so it works for every mood that has round eyes. */
.buddy .lids { animation: blink 6.8s infinite; }
@keyframes blink { 0%, 93.5%, 100% { transform: scaleY(0); } 95.5% { transform: scaleY(1); } }
.buddy .lids rect { fill: var(--skin); }
.buddy .lids { transform-box: fill-box; transform-origin: 50% 0%; }

/* Something is waiting: three hops, then a long silence. It does not escalate
   and it never repeats once the panel has been opened. */
.buddy-btn.pending .buddy-float { animation: nudge 4.6s var(--ease) infinite; }
@keyframes nudge {
  0%, 60%, 100% { transform: translateY(0) rotate(0deg); }
  64% { transform: translateY(-8px) rotate(-8deg) scale(1.04); }
  70% { transform: translateY(0) rotate(0deg) scale(.98); }
  75% { transform: translateY(-5px) rotate(6deg); }
  81% { transform: translateY(0) rotate(0deg); }
  85% { transform: translateY(-2px) rotate(-2deg); }
}

/* The little marks that ride beside the head: sparkle, question mark. */
.buddy .mark { animation: markPop 2.4s var(--ease) infinite; transform-origin: 76px 20px; }
@keyframes markPop { 0%, 100% { transform: scale(1) translateY(0); opacity: 1; } 50% { transform: scale(1.15) translateY(-2px); opacity: .75; } }

.buddy-btn[aria-expanded="true"] { background: var(--accent-soft); }
.buddy-btn[aria-expanded="true"] .buddy-float { animation: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .buddy-float, .buddy .lids, .buddy .mark, .buddy-btn.pending .buddy-float { animation: none !important; }
  .buddy .lids { transform: scaleY(0); }
}

/* ============================================================================
   Platform — "Harbor" direction, PP (partner portal)
   ----------------------------------------------------------------------------
   Halfway between Loom and Petrol, on purpose and in both senses.

   COLOUR: Loom's room was warm stone; Petrol's was deep teal. Harbor keeps
   Loom's structure — a light room with paper laid on it — and swaps the
   temperature to Petrol's family: cold slate at 90% lightness, petrol ink,
   and Petrol's aqua kept as the live signal. One warm note survives (amber),
   and it is spent on exactly one thing: what is waiting on the client. So the
   page reads as the same product as the dark internal instrument, seen in
   daylight, rather than as a different brand.

   DENSITY: Loom was airy and its candidate page carried a conversation and
   little else. Harbor is full. The spacing scale is tighter, the grid is 12
   columns, and the candidate screen shows everything we actually hold on a
   person — skills against the brief, the full career, education, languages,
   certifications, references we called, interview notes, documents, the stage
   of the search and the slots on offer.

   THE ASSISTANT STAYS. Marta is no longer a voice the page is written in —
   at this density that would fight the data — she is a panel that travels
   with you and answers about the person on screen. That is also the shape
   this needs to be if the panel is later wired to a real model: a bounded
   assistant with a visible scope, not a tone of voice sprayed over the UI.

   Behaviour in assets/harbor.js. No build step, no CDN.
   ============================================================================ */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/fraunces-500.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/fraunces-600.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/fraunces-italic-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700.woff2") format("woff2"); }

:root {
  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* The room: cold slate, light. Paper sits above it, as in Loom. */
  --room:   oklch(0.902 0.014 218);
  --room-2: oklch(0.874 0.016 216);
  --card:   oklch(0.962 0.008 216);
  --card-2: oklch(0.936 0.010 214);

  --ink:    oklch(0.265 0.042 222);
  --muted:  oklch(0.432 0.032 222);
  --faint:  oklch(0.498 0.026 220);
  --line:   oklch(0.836 0.016 216);
  --line-2: oklch(0.770 0.022 214);

  /* Petrol, from the internal instrument. Clears 6:1 on card as text. */
  --accent:      oklch(0.475 0.098 210);
  --accent-deep: oklch(0.372 0.085 212);
  --accent-soft: oklch(0.906 0.030 208);
  --accent-line: oklch(0.820 0.048 208);

  /* Aqua: the live signal, same role it had on the dark canvas. Fills only. */
  --aqua:      oklch(0.700 0.110 200);
  --aqua-ink:  oklch(0.470 0.098 202);
  --aqua-soft: oklch(0.910 0.040 200);

  /* Amber: the one warm note, and only ever "your move". */
  --amber:      oklch(0.755 0.115 62);
  --amber-ink:  oklch(0.492 0.110 58);
  --amber-soft: oklch(0.920 0.045 62);

  --ok:      oklch(0.470 0.090 160);
  --ok-soft: oklch(0.912 0.036 160);
  --no:      oklch(0.510 0.140 28);
  --no-soft: oklch(0.925 0.038 28);

  /* Tighter than Loom — this direction has to carry a full profile. */
  --s1: 6px; --s2: 10px; --s3: 16px; --s4: 22px; --s5: 32px; --s6: 48px; --s7: 68px;

  --r-sm:   10px;
  --r:      16px;
  --r-lg:   22px;
  --r-pill: 999px;
  --r-said: 16px 16px 16px 5px;
  --r-mine: 16px 16px 5px 16px;

  --shadow-1: 0 1px 2px oklch(0.265 0.042 222 / .06), 0 3px 12px oklch(0.265 0.042 222 / .06);
  --shadow-2: 0 2px 6px oklch(0.265 0.042 222 / .08), 0 16px 36px oklch(0.265 0.042 222 / .14);
  --ease:      cubic-bezier(.2, .7, .2, 1);
  --ease-back: cubic-bezier(.34, 1.42, .64, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background-image:
    linear-gradient(oklch(0.265 0.042 222 / .026) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.265 0.042 222 / .026) 1px, transparent 1px);
  background-size: 30px 30px;
}
a { color: inherit; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 5px; }
::selection { background: var(--aqua-soft); color: var(--ink); }

/* ---- Top bar ------------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--s4);
  padding: 10px clamp(16px, 3vw, 34px);
  background: oklch(0.902 0.014 218 / .88); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: padding .28s var(--ease), box-shadow .28s var(--ease);
}
.top.tight { padding-top: 6px; padding-bottom: 6px; box-shadow: 0 5px 18px oklch(0.265 0.042 222 / .10); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; letter-spacing: -.012em; flex: none; }
.brand .sub { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 400;
              color: var(--faint); letter-spacing: .06em; text-transform: uppercase; }
.mark {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px;
  font-weight: 800; font-size: 13px; color: var(--card);
  background: linear-gradient(145deg, var(--accent-lit), var(--accent-deep));
  box-shadow: 0 3px 12px oklch(0.475 0.098 210 / .32);
}
.nav { display: flex; gap: 2px; flex: 1; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px;
  text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 500;
  border-radius: var(--r-pill); transition: color .18s var(--ease), background .18s var(--ease);
}
.nav a:hover { color: var(--ink); background: oklch(1 0 0 / .5); }
.nav a.on { color: var(--accent-deep); background: var(--card); font-weight: 650; box-shadow: var(--shadow-1); }
.nav a .n {
  margin-left: 7px; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-grid; place-items: center; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 700; color: var(--card); background: var(--amber-ink);
}
.top .right { display: flex; align-items: center; gap: var(--s2); flex: none; }
.who { text-align: right; line-height: 1.22; }
.who .n { font-size: 13px; font-weight: 600; }
.who .o { font-family: var(--font-mono); font-size: 10px; color: var(--faint); letter-spacing: .04em; }
.me { width: 36px; height: 36px; flex: none; display: grid; place-items: center; cursor: pointer;
      border-radius: 12px; font-size: 12px; font-weight: 700; color: var(--card);
      background: linear-gradient(145deg, var(--amber), var(--amber-ink)); }
@media (max-width: 900px) { .nav, .who { display: none; } }

/* ---- Frame --------------------------------------------------------------- */
.wrap { max-width: 1320px; margin: 0 auto; padding: var(--s5) clamp(16px, 3vw, 34px) var(--s7); }
.wrap.mid { max-width: 1080px; }

.tag { display: inline-flex; align-items: center; gap: 6px;
       font-family: var(--font-mono); font-size: 10px; font-weight: 500;
       letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-lit); flex: none; }
.tag.live .dot { animation: breathe 2.4s var(--ease) infinite; }

h1.display { font-family: var(--font-serif); font-weight: 600;
             font-size: clamp(30px, 4.2vw, 48px); line-height: 1.06; letter-spacing: -.028em; margin: 0 0 var(--s3); }
h1.display em { font-style: italic; color: var(--accent-deep); }
.lede { font-size: 16px; line-height: 1.68; color: var(--muted); max-width: 60ch; margin: 0; }

.h-sec { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s3);
         font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
         letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.h-sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.h-sec .n { color: var(--accent-deep); font-weight: 700; }
.h-sec.warm .n { color: var(--amber-ink); }

/* ---- Grid ---------------------------------------------------------------- */
.g12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s3); align-items: start; }
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}
.c7{grid-column:span 7}.c8{grid-column:span 8}.c9{grid-column:span 9}.c12{grid-column:span 12}
@media (max-width: 1100px) { .c3,.c4{grid-column:span 6} .c5,.c7,.c8,.c9{grid-column:span 12} }
@media (max-width: 700px)  { .g12 > * { grid-column: span 12 !important; } }

.card { background: var(--card); border: 1px solid oklch(1 0 0 / .65); border-radius: var(--r-lg);
        box-shadow: var(--shadow-1); transition: box-shadow .28s var(--ease), transform .28s var(--ease); }
.card.pad { padding: var(--s4); }
.card.tight { padding: var(--s3); }
.card.quiet { background: var(--card-2); box-shadow: none; border-color: var(--line); }
.card.lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.card.ink { background: linear-gradient(165deg, oklch(0.300 0.048 220), oklch(0.245 0.040 222));
            border-color: transparent; color: oklch(0.96 0.01 216); }
.card.ink .h-sec { color: oklch(0.96 0.01 216 / .5); }
.card.ink .h-sec::after { background: oklch(1 0 0 / .14); }

/* ---- Buttons, chips, badges ---------------------------------------------- */
.btn { position: relative; overflow: hidden;
       display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       min-height: 44px; padding: 10px 20px; cursor: pointer;
       font-size: 14.5px; font-weight: 600; border: 1px solid transparent; border-radius: var(--r-pill);
       transition: transform .16s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.btn:active { transform: scale(.975); }
.btn-primary { color: var(--card); background: var(--accent); box-shadow: 0 5px 16px oklch(0.475 0.098 210 / .28); }
.btn-primary:hover { background: var(--accent-deep); box-shadow: 0 9px 24px oklch(0.475 0.098 210 / .36); }
.btn-warm { color: var(--card); background: var(--amber-ink); box-shadow: 0 5px 16px oklch(0.492 0.110 58 / .28); }
.btn-warm:hover { box-shadow: 0 9px 24px oklch(0.492 0.110 58 / .38); }
.btn-soft { color: var(--ink); background: var(--card); border-color: var(--line-2); box-shadow: var(--shadow-1); }
.btn-soft:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn-plain { color: var(--muted); background: transparent; }
.btn-plain:hover { color: var(--no); background: var(--no-soft); }
.btn-sm { min-height: 38px; padding: 8px 15px; font-size: 13.5px; }
.btn-xs { min-height: 32px; padding: 6px 12px; font-size: 12.5px; border-radius: var(--r-pill); }
@media (pointer: coarse) { .btn-sm, .btn-xs { min-height: 44px; } }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor;
          opacity: .22; transform: scale(0); animation: ripple .6s var(--ease) forwards; }

.link { color: var(--accent-deep); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--accent-line); }
.link:hover { border-bottom-color: var(--accent-deep); }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
         font-size: 12px; font-weight: 600; white-space: nowrap; border-radius: var(--r-pill);
         border: 1px solid var(--line-2); color: var(--muted); background: var(--card); }
.badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge.you  { color: var(--amber-ink); background: var(--amber-soft); border-color: oklch(0.755 0.115 62 / .45); }
.badge.live { color: var(--aqua-ink);  background: var(--aqua-soft);  border-color: oklch(0.700 0.110 200 / .42); }
.badge.ok   { color: var(--ok); background: var(--ok-soft); border-color: oklch(0.470 0.090 160 / .35); }
.badge.on-ink { color: oklch(0.96 0.01 216); background: oklch(1 0 0 / .12); border-color: oklch(1 0 0 / .2); }

.chip { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 14px; cursor: pointer;
        font-size: 13.5px; font-weight: 500; color: var(--muted);
        background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill);
        transition: color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); }
.chip:hover { color: var(--ink); border-color: var(--line-2); transform: translateY(-1px); }
.chip.on { color: var(--card); background: var(--accent); border-color: var(--accent); font-weight: 600; }
@media (pointer: coarse) { .chip { min-height: 44px; } }

.code { font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; color: var(--faint); }

/* ---- Dense data atoms ----------------------------------------------------
   The point of this direction is fitting a whole person on one screen, so the
   small pieces are engineered to sit close together without turning into soup:
   every one of them pairs a mono label with a plain-language value. */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px var(--s3); margin: 0; font-size: 14px; }
.kv dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
         color: var(--faint); align-self: center; white-space: nowrap; }
.kv dd { margin: 0; text-align: right; font-weight: 550; }
.kv dd.warn { color: var(--amber-ink); }

/* Skills carry a strength bar, and the ones named in the brief are lit. This
   is the one place a measurement is allowed on the client's side of the table
   — it is about a tool, not about a person's worth. */
.skills { display: grid; gap: 8px; }
.skill { display: grid; grid-template-columns: 1fr 78px auto; align-items: center; gap: 11px; font-size: 13.5px; }
.skill .nm { font-weight: 550; }
.skill .bar { height: 5px; border-radius: 3px; background: oklch(0.265 0.042 222 / .12); overflow: hidden; }
.skill .bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--line-2);
                transition: width 1s var(--ease); }
.in .skill .bar i, .skills.in .skill .bar i { width: var(--lv, 50%); }
.skill.req .nm { color: var(--accent-deep); font-weight: 650; }
.skill.req .bar i { background: linear-gradient(90deg, var(--accent), var(--accent-lit)); }
.skill .yr { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); white-space: nowrap; }

/* Career, education, references — one list shape, three uses. */
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { position: relative; padding: 0 0 var(--s3) var(--s4); }
.tl li:last-child { padding-bottom: 0; }
.tl li::before { content: ""; position: absolute; left: 3px; top: 5px; width: 9px; height: 9px;
                 border-radius: 50%; background: var(--card); border: 2px solid var(--line-2); }
.tl li.hi::before { background: var(--accent); border-color: var(--accent); }
.tl li::after { content: ""; position: absolute; left: 7px; top: 17px; bottom: 2px; width: 1px; background: var(--line); }
.tl li:last-child::after { display: none; }
.tl .role { font-size: 14.5px; font-weight: 650; }
.tl .co { font-size: 13.5px; color: var(--muted); }
.tl .when { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); letter-spacing: .04em; margin-top: 2px; }
.tl .did { font-size: 13.5px; color: var(--muted); margin-top: 5px; line-height: 1.6; }
.tl .stack { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tl .stack span { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-deep);
                  background: var(--accent-soft); border: 1px solid var(--accent-line);
                  border-radius: 5px; padding: 2px 7px; }

.rows { display: flex; flex-direction: column; gap: var(--s2); }
.rowcard { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto;
           align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
           text-decoration: none; color: inherit; background: var(--card);
           border: 1px solid oklch(1 0 0 / .65); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
           transition: transform .26s var(--ease), box-shadow .26s var(--ease); }
.rowcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
                   background: var(--accent); transform: scaleY(0); transition: transform .26s var(--ease-back); }
.rowcard.yours::before { background: var(--amber); }
.rowcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.rowcard:hover::before, .rowcard:focus-visible::before { transform: scaleY(1); }
.rowcard h3 { font-size: 16.5px; font-weight: 650; letter-spacing: -.016em; margin: 0 0 4px; }
.rowcard .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.rowcard .meta .sep { color: var(--line-2); }
.rowcard .aside { display: flex; align-items: center; gap: var(--s3); justify-self: end; }
.rowcard .note { font-size: 13px; color: var(--muted); max-width: 28ch; text-align: right; }
.rowcard .note b { color: var(--ink); font-weight: 600; }
.rowcard .shift { transition: transform .34s var(--ease-back); }
.rowcard:hover .shift { transform: translateX(5px); }
@media (max-width: 860px) { .rowcard { grid-template-columns: 1fr; } .rowcard .aside { justify-self: start; flex-wrap: wrap; } .rowcard .note { text-align: left; max-width: none; } }

.steps { display: flex; align-items: center; gap: 4px; }
.steps i { width: 18px; height: 5px; border-radius: 3px; background: var(--line-2);
           transform: scaleX(.3); transform-origin: 0 50%; opacity: .5;
           transition: transform .45s var(--ease-back), opacity .35s var(--ease), background .35s var(--ease); }
.in .steps i, .steps.in i { transform: scaleX(1); opacity: 1; }
.in .steps i.done, .steps.in i.done { background: var(--accent); }
.in .steps i.here, .steps.in i.here { background: var(--accent-lit); animation: hereGlow 2.6s var(--ease) infinite; }
.steps i:nth-child(1){transition-delay:.04s}.steps i:nth-child(2){transition-delay:.09s}
.steps i:nth-child(3){transition-delay:.14s}.steps i:nth-child(4){transition-delay:.19s}
.steps i:nth-child(5){transition-delay:.24s}.steps i:nth-child(6){transition-delay:.29s}

.stat .n { font-family: var(--font-serif); font-size: clamp(30px, 3.6vw, 42px); font-weight: 600;
           line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.stat .n.warm { color: var(--amber-ink); }
.stat .n.live { color: var(--aqua-ink); }
.stat .k { font-size: 13px; color: var(--muted); margin-top: 7px; }

.quote { margin: 0 0 var(--s3); padding-left: var(--s3); border-left: 3px solid var(--accent-line);
         font-size: 14px; line-height: 1.65; color: var(--muted); }
.quote:last-child { margin-bottom: 0; }
.quote .by { display: block; margin-top: 5px; font-family: var(--font-mono); font-size: 10px;
             letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

/* Interview slots on offer — a decision the client can make in one press. */
.slots { display: grid; gap: 7px; }
.slot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
        padding: 10px 14px; border-radius: var(--r-sm); cursor: pointer; text-align: left;
        background: var(--card-2); border: 1px solid var(--line);
        transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease); }
.slot:hover { border-color: var(--accent); background: var(--card); transform: translateX(3px); }
.slot .d { font-size: 13.5px; font-weight: 600; }
.slot .h { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }

.doc { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.doc:last-child { border-bottom: 0; padding-bottom: 0; }
.doc .ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px;
           color: var(--accent-deep); background: var(--accent-soft); }
.doc .t { flex: 1; min-width: 0; }
.doc .t b { display: block; font-size: 13.5px; font-weight: 600; }
.doc .t span { font-family: var(--font-mono); font-size: 10px; color: var(--faint); letter-spacing: .04em; }

/* ---- The assistant panel -------------------------------------------------
   Marta as a bounded surface rather than a tone of voice: a header that names
   who is answering, a scrollable thread, canned questions, and a composer.
   The scope line under the header is not decoration — if this is later wired
   to a model, the client has to be able to see what it can and cannot see. */
.assist { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.assist-head { display: flex; align-items: center; gap: 11px; padding: var(--s3) var(--s3) var(--s2);
               border-bottom: 1px solid var(--line); }
.assist-head .face { width: 38px; height: 38px; flex: none; display: grid; place-items: center;
                     border-radius: 12px; font-size: 12px; font-weight: 700; color: var(--card);
                     background: linear-gradient(145deg, var(--accent-lit), var(--accent-deep)); }
.assist-head .who-t { flex: 1; min-width: 0; }
.assist-head .who-t b { display: block; font-size: 14px; font-weight: 650; }
.assist-head .who-t span { font-size: 11.5px; color: var(--faint); }
.assist-scope { padding: 9px var(--s3); font-size: 11.5px; color: var(--muted);
                background: var(--aqua-soft); border-bottom: 1px solid var(--line); }
.assist-thread { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3);
                 max-height: 380px; overflow-y: auto; }
.assist-thread .said { display: flex; gap: 9px; align-items: flex-start; }
.assist-thread .said .f { width: 26px; height: 26px; flex: none; display: grid; place-items: center;
                          border-radius: 9px; font-size: 9.5px; font-weight: 700; color: var(--card);
                          background: linear-gradient(145deg, var(--accent-lit), var(--accent-deep)); }
.assist-thread .bubble { padding: 10px 13px; border-radius: var(--r-said); background: var(--card-2);
                         font-size: 13.5px; line-height: 1.6; }
.assist-thread .bubble b { font-weight: 650; }
.assist-thread .mine { display: flex; justify-content: flex-end; }
.assist-thread .mine .bubble { background: var(--accent-soft); border: 1px solid var(--accent-line);
                               border-radius: var(--r-mine); color: var(--accent-deep); font-weight: 500; }
.typing { display: inline-flex; align-items: center; gap: 4px; padding: 11px 14px;
          background: var(--card-2); border-radius: var(--r-said); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); opacity: .4;
            animation: typing 1.25s var(--ease) infinite; }
.typing i:nth-child(2){animation-delay:.16s} .typing i:nth-child(3){animation-delay:.32s}
.said[data-typing] > .bubble { display: none; }
.said[data-typing].spoken > .bubble { display: block; animation: pop .45s var(--ease-back) both; }
.said[data-typing].spoken > .typing { display: none; }

.assist-asks { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--s3) var(--s3); }
.ask-chip { font-size: 12.5px; padding: 7px 12px; min-height: 36px; cursor: pointer;
            color: var(--accent-deep); background: var(--card); border: 1px solid var(--accent-line);
            border-radius: var(--r-pill); transition: background .18s var(--ease), transform .18s var(--ease); }
.ask-chip:hover { background: var(--accent-soft); transform: translateY(-1px); }
@media (pointer: coarse) { .ask-chip { min-height: 44px; } }
.assist-composer { display: flex; gap: 8px; padding: var(--s3); border-top: 1px solid var(--line); background: var(--card-2); }
.assist-composer input { flex: 1; min-width: 0; min-height: 42px; padding: 10px 14px; font-size: 14px;
                         color: var(--ink); background: var(--card); border: 1px solid var(--line-2);
                         border-radius: var(--r-pill); outline: none;
                         transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.assist-composer input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.assist-composer button { width: 42px; height: 42px; flex: none; display: grid; place-items: center;
                          border: 0; border-radius: 50%; cursor: pointer; color: var(--card); background: var(--accent); }
.sticky { position: sticky; top: 74px; }

/* ---- Fields -------------------------------------------------------------- */
.field { margin-bottom: var(--s3); }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.field input { width: 100%; min-height: 48px; padding: 12px 15px; font-size: 15px; color: var(--ink);
               background: var(--card-2); border: 1.5px solid var(--line-2); border-radius: var(--r-sm); outline: none;
               transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.field input::placeholder { color: var(--faint); }
.field input:focus { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 4px var(--accent-soft); }
.hint { font-size: 12.5px; color: var(--faint); margin: -4px 0 var(--s3); }

/* ---- Motion -------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .26s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .4s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(10px); } }
.top { view-transition-name: topbar; }

@keyframes rise    { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop     { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes typing  { 0%,60%,100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes breathe { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@keyframes ripple  { to { transform: scale(2.8); opacity: 0; } }
@keyframes hereGlow{ 0%,100% { box-shadow: 0 0 0 0 oklch(0.700 0.110 200 / .45); } 55% { box-shadow: 0 0 0 5px transparent; } }

.rise { animation: rise .65s var(--ease) both; }
.d1{animation-delay:.05s}.d2{animation-delay:.12s}.d3{animation-delay:.19s}.d4{animation-delay:.26s}
.d5{animation-delay:.33s}.d6{animation-delay:.40s}

.wipe { clip-path: inset(0 100% 0 0); transition: clip-path .95s var(--ease); }
.wipe.in { clip-path: inset(0 0 0 0); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .42s var(--ease), transform .46s var(--ease-back); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1){transition-delay:.00s}.stagger.in > *:nth-child(2){transition-delay:.07s}
.stagger.in > *:nth-child(3){transition-delay:.14s}.stagger.in > *:nth-child(4){transition-delay:.21s}
.stagger.in > *:nth-child(5){transition-delay:.28s}.stagger.in > *:nth-child(6){transition-delay:.35s}

.glow { position: relative; overflow: hidden; }
.glow::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
               background: radial-gradient(280px circle at var(--mx,50%) var(--my,50%), oklch(0.700 0.110 200 / .14), transparent 66%);
               opacity: 0; transition: opacity .4s var(--ease); }
.glow:hover::after { opacity: 1; }

.thread-bar { position: fixed; inset: 0 0 auto; height: 3px; z-index: 90; transform-origin: 0 50%;
              transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--accent), var(--accent-lit), var(--amber)); }

/* ---- Switcher ------------------------------------------------------------ */
.style-switch { position: fixed; bottom: 16px; right: 16px; z-index: 80;
                display: flex; align-items: center; gap: 4px; padding: 5px 5px 5px 12px;
                background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-pill);
                font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
                color: var(--faint); box-shadow: var(--shadow-2); }
.style-switch a { min-width: 30px; text-align: center; padding: 6px 10px; border-radius: var(--r-pill);
                  text-decoration: none; color: var(--muted); font-family: var(--font-sans);
                  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
                  transition: background .18s var(--ease), color .18s var(--ease); }
.style-switch a:hover { background: var(--card-2); color: var(--ink); }
.style-switch a.on { background: var(--accent); color: var(--card); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .001ms !important; }
  .reveal, .stagger > * { opacity: 1; transform: none; }
  .wipe { clip-path: none !important; }
  .steps i { transform: scaleX(1); opacity: 1; }
  .skill .bar i { width: var(--lv, 50%); }
  .typing { display: none !important; }
  .said[data-typing] > .bubble { display: block !important; }
  .thread-bar { display: none; }
}

/* ---- The bubble, grown -----------------------------------------------------
   Same corner, same tail: the panel scales out of the mascot rather than
   appearing beside it, which is what makes the two read as one object. */
.assist-drop {
  position: absolute; top: calc(100% + 12px); right: -4px; z-index: 70;
  width: min(408px, calc(100vw - 28px));
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  transform-origin: calc(100% - 20px) -12px;
  overflow: hidden;
}
.assist-drop[hidden] { display: none; }
.assist-drop::before {
  content: ""; position: absolute; top: -7px; right: 16px; width: 14px; height: 14px;
  background: var(--card); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg); border-radius: 3px 0 0 0;
}
.assist-drop.opening { animation: dropIn .42s var(--ease-back) both; }
.assist-drop.closing { animation: dropOut .18s var(--ease) both; }
@keyframes dropIn  { from { opacity: 0; transform: translateY(-10px) scale(.82); } to { opacity: 1; transform: none; } }
@keyframes dropOut { to { opacity: 0; transform: translateY(-8px) scale(.9); } }

@media (max-width: 560px) {
  .assist-drop { position: fixed; top: 62px; right: 12px; left: 12px; width: auto;
                 transform-origin: calc(100% - 30px) -12px; }
}

@media (prefers-reduced-motion: reduce) {
  .buddy-float, .buddy .eyes, .buddy-btn.pending .buddy-float, .buddy-btn.pending .buddy-badge { animation: none !important; }
  .assist-drop.opening, .assist-drop.closing { animation: none !important; }
  .buddy .pupil { transition: none; }
}

/* ---- The one CTA that opens work ----------------------------------------
   A client has an account for one reason: to ask for a person. So the action
   that opens a position is not buried in a page — it rides in the bar, on
   every screen after the sign-in, and it is the only filled button up there.

   On a phone the label goes and the plus stays: the target keeps its 44px,
   and a lone plus in a portal bar is unambiguous once the page below it is
   a list of positions. */
.cta-new { flex: none; text-decoration: none; padding-left: 16px; padding-right: 18px; }
.cta-new svg { flex: none; }
@media (max-width: 720px) {
  .cta-new { padding: 0; width: 44px; min-height: 44px; border-radius: 50%; gap: 0; }
  .cta-new span, .cta-new { font-size: 0; }
  .cta-new svg { width: 18px; height: 18px; }
}

/* The big version, for the page that lists what is running. */
.cta-block { display: grid; gap: var(--s3); place-items: center; text-align: center; padding: var(--s5) var(--s4); }
.cta-block h2 { margin: 0; }
.cta-block p { margin: 0 auto; max-width: 38ch; }

/* ---- The form that opens work -------------------------------------------
   Fields grouped into islands with a heading, never one flat column: a client
   filling this in is describing a person to a stranger, and a flat column
   gives them no idea how much is left. Each island answers one question.

   The bar at the foot is anchored, so the primary action never scrolls out of
   reach on a long form. */
.island { padding: var(--s4); }
.island + .island { margin-top: var(--s3); }
.island .isl-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: var(--s4); }
.island .isl-head .no { width: 28px; height: 28px; flex: none; display: grid; place-items: center;
                        border-radius: 50%; font-size: 13px; font-weight: 700;
                        color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.island .isl-head h2 { font-family: var(--font-serif); font-weight: 600; font-size: 21px;
                       letter-spacing: -.02em; margin: 0; }
.island .isl-head p { margin: 3px 0 0; font-size: 14px; color: var(--faint); }
.f-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3) var(--s4); }
.f-row.one { grid-template-columns: 1fr; }
@media (max-width: 640px) { .f-row { grid-template-columns: 1fr; } }
.field textarea { width: 100%; min-height: 104px; padding: 13px 17px; font-size: 15.5px; color: var(--ink);
                  background: var(--card); border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
                  outline: none; resize: vertical; line-height: 1.6;
                  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field select { width: 100%; min-height: 50px; padding: 13px 15px; font-size: 15.5px; color: var(--ink);
                background: var(--card); border: 1.5px solid var(--line-2); border-radius: var(--r-sm); outline: none; }
.field select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.pickset { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 8px 16px; cursor: pointer;
        font-size: 14.5px; color: var(--muted); background: var(--card); border: 1.5px solid var(--line-2);
        border-radius: var(--r-pill); transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); }
.pick:hover { color: var(--ink); border-color: var(--accent-line); }
.pick.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.pick.add { border-style: dashed; color: var(--faint); }
@media (pointer: coarse) { .pick { min-height: 44px; } }

.save-bar { position: sticky; bottom: 0; z-index: 40; display: flex; align-items: center; gap: var(--s3);
            justify-content: space-between; flex-wrap: wrap; margin-top: var(--s3);
            padding: var(--s3) var(--s4); border-radius: var(--r-lg);
            background: color-mix(in oklab, var(--card) 92%, transparent); backdrop-filter: blur(14px);
            border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.save-bar .left { font-size: 14px; color: var(--muted); }
.save-bar .acts { display: flex; gap: 10px; flex-wrap: wrap; }

/* What happens after the form is sent, said in three lines. It is the answer
   to the question every client has before pressing a button that summons work. */
.next { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.next li { position: relative; padding: 0 0 var(--s3) 38px; counter-increment: n; font-size: 14.5px; color: var(--muted); }
.next li:last-child { padding-bottom: 0; }
.next li::before { content: counter(n); position: absolute; left: 0; top: -1px; width: 24px; height: 24px;
                   display: grid; place-items: center; border-radius: 50%; font-size: 12.5px; font-weight: 700;
                   color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.next li b { display: block; color: var(--ink); font-weight: 650; font-size: 15px; margin-bottom: 2px; }