/* ═══════════════════════════════════════════════════════════════════════════
   room-you.css — YOU, recomposed 2026-09-12 against her approved reference.

   Her fault with the old room: everything at one weight, a chart competing with
   the reading, and seven labels to inspect before anything could be understood.
   The answer is not smaller type. It is fewer things with more presence.

   Two editorial rows with air between them.
     Row 1   the field, quiet and alive, and beside it who you are.
     Row 2   what Areté sees, read as one continuation, and beside it the seven
             as evidence rather than as a table.
   Governed by DESIGN-CONSTITUTION.md.
   ═══════════════════════════════════════════════════════════════════════════ */

#view-signature{ padding:var(--room-pad,24px) 28px 72px; }
#view-signature .yo{ width:100%; max-width:var(--room-max,1180px); margin:0 auto; display:block; }

/* ── ROW 1 ─────────────────────────────────────────────────────────────────── */
/* HER 09-14 PLACEMENT: one half each. Her signature on the left, the one bend
   on the right, a single hairline between them. Nothing else in the room. */
#view-signature .yo-top{ display:grid;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
  column-gap:clamp(32px,5vw,80px); align-items:start;
  min-height:46dvh; padding-top:clamp(24px,5dvh,56px); }
#view-signature .yo-axis{ align-self:stretch; background:linear-gradient(to bottom,
  transparent, var(--hair) 10%, var(--hair) 80%, transparent); }
#view-signature .yo-obj{ min-width:0; }
#view-signature .yo-words{ min-width:0; max-width:46ch; }

/* the field: one anchor, alive, never loud */
#view-signature #yo-field{ width:100%; max-width:560px; }
#view-signature #yo-field{ aspect-ratio:560/420; }   /* space reserved before paint: no jump (CLS) */
#view-signature .yo-field{ display:block; width:100%; height:auto; overflow:visible; }
/* MOTION (UI/UX Pro): transform only, no layout touched, one animation per shard.
   Each travels its own orbit, slower the further out it rides, so nothing ever synchronises.
   The one that bends most also breathes, very slightly, because it is the one that matters.
   The field settles in once on arrival and then is simply alive. */
#view-signature .yo-orb{
  will-change:offset-distance; opacity:var(--o,.5);
  animation:yo-orbit var(--p,150s) linear infinite; }
#view-signature .yo-orb.is-lead{
  animation:yo-orbit var(--p,150s) linear infinite, yo-breathe 7s ease-in-out infinite alternate; }
@keyframes yo-orbit{ from{ offset-distance:var(--s,0%) } to{ offset-distance:calc(var(--s,0%) + 100%) } }
@keyframes yo-breathe{ from{ opacity:calc(var(--o,.95) * .74) } to{ opacity:var(--o,.95) } }
#view-signature .yo-field{ animation:yo-settle 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes yo-settle{ from{ opacity:0; transform:scale(.965) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  #view-signature .yo-orb, #view-signature .yo-orb.is-lead, #view-signature .yo-field{ animation:none; }
  #view-signature .yo-field{ opacity:1; transform:none; }
}

/* ── WHO YOU ARE: the website's type law, and nothing boxed ────────────────── */
#view-signature #sig-arch{
  font-family:var(--f-disp); font-weight:500; font-size:clamp(32px,3vw,44px); line-height:1.04;
  letter-spacing:-.025em; color:rgb(var(--ink)); margin:0; text-shadow:none; text-wrap:balance; }
#view-signature #sig-lead{
  font:400 clamp(17px,1.35vw,19px)/1.55 var(--f-body); color:rgb(var(--ink2)); max-width:44ch; margin:14px 0 0;
  text-wrap:pretty; }
#view-signature #yo-roles{ margin-top:clamp(26px,4dvh,40px); }
#view-signature .yo-role{ display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  min-height:44px; padding:11px 0; border-top:1px solid var(--hair); }
#view-signature .yo-role__l{ font:400 15px/1.4 var(--f-body); color:rgb(var(--ink3)); white-space:nowrap; }
#view-signature .yo-role__v{ font:400 15px/1.4 var(--f-body); color:rgb(var(--ink)); text-align:right; text-wrap:balance; }
#view-signature #sig-conf{ display:block; margin-top:16px; font:400 13px/1.4 var(--f-body); color:rgb(var(--ink3)); }
/* present 'two': the most likely reading heads, the close second sits under it, quieter */
#view-signature .yo-likely{ font:400 13.5px/1.4 var(--f-body); color:rgb(var(--ink3)); margin:0 0 10px; }
#view-signature .yo-second{ margin-top:clamp(22px,3.4dvh,30px); max-width:44ch; }
#view-signature .yo-second__l{ font:400 13.5px/1.4 var(--f-body); color:rgb(var(--ink3)); margin:0; }
#view-signature .yo-second__v{ font:400 17px/1.5 var(--f-body); color:rgb(var(--ink2)); margin:6px 0 0; text-wrap:pretty; }
#view-signature .yo-second__n{ font:400 13px/1.4 var(--f-body); color:rgb(var(--ink3)); margin:10px 0 0; }

/* ── THE DIVIDE: one hairline across the room, and air on both sides ───────── */
#view-signature .yo-rule{ border:0; height:1px; background:var(--hair); margin:56px 0 44px; }

/* ── ROW 2 ─────────────────────────────────────────────────────────────────── */
#view-signature .yo-btm{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  column-gap:64px; align-items:start; margin-top:clamp(40px,7dvh,72px); }
#view-signature .yo-bends{ min-width:0; }
#view-signature .yo-label{ font:400 13.5px/1.4 var(--f-body); color:rgb(var(--ink3)); margin:0; }
#view-signature .yo-h{
  font-family:var(--f-disp); font-weight:500; font-size:clamp(26px,2.2vw,34px); line-height:1.06;
  letter-spacing:-.022em; color:rgb(var(--ink)); margin:10px 0 0; text-wrap:balance; }
#view-signature .yo-where{ font:400 15px/1.4 var(--f-body); color:rgb(var(--ink3)); margin:8px 0 0; }
#view-signature .yo-read{ font:400 17px/1.6 var(--f-body); color:rgb(var(--ink2)); max-width:44ch; margin:20px 0 0;
  text-wrap:pretty; }
#view-signature .yo-counter{ margin:clamp(22px,4dvh,34px) 0 0; max-width:42ch; text-wrap:balance; }
#view-signature .yo-counter em{
  font-family:var(--f-em); font-style:italic; font-weight:400; font-size:21px; line-height:1.4; color:#CFF3FF;
  text-wrap:balance; }
html[data-theme="light"] #view-signature .yo-counter em{ color:#0B1E33; }
#view-signature .yo-acts{ margin:24px 0 0; }
#view-signature .yo-deeper{ padding:0; min-height:44px; font:500 15px/1.4 var(--f-body); }
#view-signature .yo-deeper:focus-visible{ outline:2px solid rgb(var(--ink)); outline-offset:3px; border-radius:2px; }
#view-signature .yo-stamp{ font:400 13px/1.6 var(--f-body); color:rgb(var(--ink3));
  margin:clamp(20px,3dvh,30px) 0 0; max-width:42ch; }

/* the evidence: named and graded, quiet, never a table competing with the reading */
#view-signature .yo-evidence .yo-label{ margin-bottom:6px; }
#view-signature .yo-dom{ display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  min-height:44px; padding:11px 0; border-top:1px solid var(--hair); }
#view-signature .yo-dom__n{ font:400 15px/1.4 var(--f-body); color:rgb(var(--ink3)); }
#view-signature .yo-dom__w{ font:400 14px/1.4 var(--f-body); color:rgb(var(--ink3)); white-space:nowrap; }
#view-signature .yo-dom.is-top .yo-dom__n, #view-signature .yo-dom.is-top .yo-dom__w{ color:rgb(var(--ink)); }

/* ── WHAT LEFT THE ROOM ────────────────────────────────────────────────────── */
#view-signature .yo-cont{ display:none; }      /* the eight functions, at her word */
#view-signature .yo-retired{ display:none; }
#view-signature .yo-empty{ padding:8px 0 0; }
#view-signature .yo-empty__t{ font:400 17px/1.55 var(--f-body); color:rgb(var(--ink2)); max-width:46ch; margin:0 0 18px; }

/* ── PHONE: who you are, then the field, then what Areté sees ──────────────── */
@media (max-width:1023px){
  #view-signature{ padding:16px 20px 56px; }
  #view-signature .yo-top{ display:flex; flex-direction:column; gap:34px; min-height:0; padding-top:8px; }
  #view-signature .yo-axis{ display:none; }
  #view-signature .yo-words{ max-width:none; }
  #view-signature .yo-obj{ margin-top:26px; }
  #view-signature #yo-field{ max-width:none; }
  #view-signature .yo-btm{ display:flex; flex-direction:column; gap:32px; }
  #view-signature .yo-read, #view-signature .yo-counter, #view-signature .yo-stamp{ max-width:none; }
  /* the values are sentences now (2026-09-26): label over line, both left, so nothing wraps into a column */
  #view-signature .yo-role{ flex-direction:column; align-items:flex-start; gap:2px; }
  #view-signature .yo-role__v{ text-align:left; }
}

/* ═══ YOU ON THE INTERCEPT SURFACE (founder 2026-09-16: "You, colour-wise, does
   not fit the Intercept guidelines"). The room takes the Intercept ground, and
   her signature (row 1, left) sits on the Intercept's own glass: the same
   gradient, hairline, blur, shadow and corner glow as .int-card, values copied
   from css/arete-system.css, nothing invented. The hairline axis stands down;
   the glass edge is the division now. ═══ */
body:has(#view-signature:not(.hidden)) #content-wrap{
  background:radial-gradient(70% 55% at 50% 0%,rgba(14,58,107,.92) 0%,rgba(0,31,63,.94) 40%,rgba(3,16,31,.96) 100%); }
html[data-theme="light"] body:has(#view-signature:not(.hidden)) #content-wrap{
  background:radial-gradient(70% 55% at 50% 0%,rgba(226,236,246,.94),rgba(243,246,250,.96) 60%); }
#view-signature .yo-top{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(32px,5vw,72px); }
#view-signature .yo-axis{ display:none; }
#view-signature .yo-words{ position:relative; isolation:isolate; max-width:none; box-sizing:border-box;
  padding:clamp(28px,3.4vw,44px) clamp(26px,3vw,40px) clamp(26px,3vw,36px); border-radius:24px;
  background:linear-gradient(150deg,rgba(0,191,255,.08),rgba(10,122,205,.06) 55%,rgba(255,255,255,.012));
  border:1px solid rgba(160,225,255,.16);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 70px -40px rgba(18,64,184,.95); }
#view-signature .yo-words::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 50% at 20% 0%,rgba(47,123,255,.22),transparent 70%),radial-gradient(50% 50% at 90% 100%,rgba(122,92,255,.18),transparent 70%); }
#view-signature .yo-words > *{ max-width:46ch; }
html[data-theme="light"] #view-signature .yo-words{
  background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(255,255,255,.55)); border-color:rgba(15,40,70,.14);
  box-shadow:inset 0 1px 0 #fff,0 30px 70px -40px rgba(18,64,184,.35); }
html[data-theme="light"] #view-signature .yo-words::before{
  background:radial-gradient(60% 50% at 20% 0%,rgba(47,123,255,.14),transparent 70%),radial-gradient(50% 50% at 90% 100%,rgba(122,92,255,.10),transparent 70%); }
/* the one italic line takes its colour from the token, not a literal */
#view-signature .yo-counter em{ text-wrap:balance; color:var(--ice-hi); }
@media (max-width:900px){ #view-signature .yo-top{ grid-template-columns:1fr; row-gap:28px; } }