/* ════════════════════════════════════════════════════════════════
   uni — the university, by Luyml
   Identity: the calm of a flag carrier crossed with a real institution.
   A tool, not a pitch — it opens straight to the schools.
   Palette is a livery: pearl field · soft-black ink · one deep red.
   Each school flies its own colours; Ginko's is the ginkgo at dusk.
   ════════════════════════════════════════════════════════════════ */

/* tokens (colour · type · radius · motion) live in tokens.css — the SSOT.
   This sheet is uni's platform skin only; it adds no new tokens. */

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html,body{ min-height:100%; }
body{
  font-family:var(--font); color:var(--ink);
  background:var(--pearl);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"cv05" 1,"ss01" 1;
  position:relative; overflow-x:hidden;
}
/* the living light — a slow dusk wash across the field (breathe) */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(115% 75% at 50% -12%, var(--pearl-hi), rgba(248,246,241,0) 58%),
    linear-gradient(180deg, var(--pearl) 0%, var(--pearl) 52%, var(--pearl-lo) 100%);
  animation:field-breathe 14s var(--ease) infinite alternate;
}
@keyframes field-breathe{ from{ opacity:.92; transform:scale(1); } to{ opacity:1; transform:scale(1.015); } }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 44px; }

/* ───────── marks ───────── */
.umark .stroke{ fill:none; stroke:currentColor; stroke-width:12.5; stroke-linecap:butt; stroke-linejoin:round; }

/* ───────── header (hushed, persistent) ───────── */
header{ position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(242,240,234,.86), rgba(242,240,234,.5));
  border-bottom:1px solid transparent; transition:border-color .3s; }
.bar{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand{ display:flex; align-items:baseline; gap:10px; color:var(--ink); }
.brand .icon{ width:24px; height:24px; transform:translateY(4px); }
.brand .word{ font-size:22px; font-weight:600; letter-spacing:-.03em; }
.brand .group{ font-size:12px; font-weight:500; color:var(--ink-3); }
nav{ display:flex; align-items:center; gap:26px; }
nav a{ color:var(--ink-2); text-decoration:none; font-size:14.5px; font-weight:500; transition:color .2s; }
nav a:hover{ color:var(--ink); }
.btn{ display:inline-flex; align-items:center; text-decoration:none;
  font:600 14.5px/1 var(--font); letter-spacing:-.005em; color:#fff; background:var(--red);
  border:none; border-radius:var(--r-sm); padding:11px 20px; cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 6px 18px var(--red-tint);
  transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.btn:hover{ background:var(--red-dk); transform:translateY(-1px); box-shadow:0 10px 26px var(--red-tint); }
.btn:active{ transform:translateY(0); }

/* ───────── masthead — establishes place, sells nothing ───────── */
.masthead{ padding:104px 0 18px; }
.kicker{ font-size:13.5px; font-weight:500; color:var(--ink-3); letter-spacing:.01em; margin-bottom:22px; }
.masthead h1{ font-size:clamp(56px,9vw,120px); line-height:.92; font-weight:700; letter-spacing:-.045em; color:var(--ink); }
.lede{ margin-top:26px; font-size:clamp(16px,1.9vw,19px); line-height:1.5; color:var(--ink-2); max-width:520px; }

/* ───────── schools ───────── */
.schools{ padding:54px 0 120px; }

/* GINKO — the one open destination, in its own livery */
.gko{
  position:relative; overflow:hidden; border-radius:22px; padding:40px 44px;
  background:radial-gradient(125% 120% at 16% 6%, var(--gko-bg2), var(--gko-bg) 60%);
  color:var(--gko-ink);
  box-shadow:0 16px 44px rgba(40,37,31,.12); border:1px solid var(--gko-line);
  display:grid; grid-template-columns:1.35fr .9fr; gap:40px; align-items:center;
}
/* the dusk glow — slow breathing light */
.gko::before{
  content:""; position:absolute; right:-8%; top:-30%; width:60%; height:160%;
  background:radial-gradient(closest-side, rgba(244,205,114,.20), rgba(227,171,66,0) 70%);
  pointer-events:none; animation:dusk-breathe 9s var(--ease) infinite alternate;
}
@keyframes dusk-breathe{ from{ opacity:.55; transform:scale(1); } to{ opacity:1; transform:scale(1.08); } }
.gko .leaf-bg{ position:absolute; right:-30px; top:-26px; width:230px; height:230px; opacity:.14; pointer-events:none; }

.gko-id{ position:relative; }
.gko-top{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.gko-top .leaf-s{ width:30px; height:30px; }
.gko .name{ font-size:27px; font-weight:600; letter-spacing:-.01em; color:var(--gko-gold2); }
.gko .role{ font-size:12.5px; color:var(--gko-ink2); margin-left:2px; align-self:flex-end; padding-bottom:4px; }
.gko .soul{ font-size:20px; line-height:1.4; color:var(--gko-ink); max-width:360px; font-weight:400; margin-bottom:30px; }
.gko-enter{ display:inline-flex; align-items:center; gap:9px; font:600 14.5px/1 var(--font);
  color:var(--gko-bg); background:var(--gko-gold); border:none; border-radius:var(--r-md); padding:13px 22px;
  cursor:pointer; text-decoration:none; transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  box-shadow:0 8px 24px rgba(227,171,66,.22); }
.gko-enter:hover{ background:var(--gko-gold2); transform:translateY(-2px); box-shadow:0 12px 30px rgba(227,171,66,.30); }
.gko-enter .arr{ transition:transform .2s var(--ease); }
.gko-enter:hover .arr{ transform:translateX(3px); }

/* languages served — elegant, not a split-flap */
.gko-langs{ position:relative; border-left:1px solid var(--gko-line); padding-left:34px; }
.gko-langs .hd{ font-size:13px; color:var(--gko-ink2); margin-bottom:18px; }
.lang{ display:flex; align-items:baseline; gap:12px; padding:11px 0; border-bottom:1px solid var(--gko-line); }
.lang:last-child{ border-bottom:none; }
.lang .nat{ font-size:18px; color:var(--gko-gold2); min-width:84px; }
.lang .en{ font-size:15px; color:var(--gko-ink); }
.lang .tag{ margin-left:auto; align-self:center; font:600 12px/1 var(--font); color:var(--gko-bg);
  background:var(--gko-gold); border-radius:5px; padding:3px 8px; letter-spacing:.01em; }
.lang.soon .nat, .lang.soon .en{ color:var(--gko-ink2); }

/* THE PEOPLE LAYER — a shared uni surface on the home (institutional, one crimson action) */
.peoplelayer{ position:relative; overflow:hidden; border-radius:22px; padding:38px 44px; margin-top:16px;
  border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(231,227,217,.22)); }
.pl-top{ display:flex; align-items:baseline; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.pl-k{ font-size:24px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.pl-role{ font-size:12.5px; color:var(--ink-3); }
.pl-soul{ font-size:19px; line-height:1.5; font-weight:400; color:var(--ink-2); max-width:52ch; margin-bottom:28px; }
.pl-links{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.pl-links a{ display:inline-flex; align-items:center; gap:9px; font:600 14.5px/1 var(--font); text-decoration:none;
  color:#fff; background:var(--red); border-radius:var(--r-md); padding:14px 24px;
  box-shadow:0 8px 24px var(--red-tint); transition:background .18s var(--ease), transform .18s var(--ease); }
.pl-links a:hover{ background:var(--red-dk); transform:translateY(-1px); }
.pl-links a .arr{ transition:transform .2s var(--ease); }
.pl-links a:hover .arr{ transform:translateX(3px); }
.pl-links a.alt{ background:none; color:var(--ink-2); border:1px solid var(--line); box-shadow:none; }
.pl-links a.alt:hover{ color:var(--ink); border-color:var(--ink-3); background:none; }
.d4b{ animation-delay:.47s }
@media (max-width:720px){ .peoplelayer{ padding:30px 26px; } .pl-links a{ width:100%; justify-content:center; } }

/* the network — schools to come, calm and liveryless until their time */
.coming-hd{ margin:60px 0 22px; display:flex; align-items:baseline; gap:14px; }
.coming-hd h2{ font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink-2); }
.coming-hd span{ font-size:13px; color:var(--ink-3); }
.coming-hd .ln{ flex:1; height:1px; background:var(--line); }
.coming{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.school{ position:relative; border:1px solid var(--line); border-radius:16px; padding:22px 22px 20px;
  background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(231,227,217,.22));
  min-height:148px; display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.school:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(26,24,21,.08); border-color:var(--line); }
.school .k{ font-size:12.5px; color:var(--ink-3); }
.school .nm{ font-size:19px; font-weight:600; color:var(--ink-2); letter-spacing:-.02em; margin-top:3px; }
.school .soon{ font-size:12.5px; color:var(--ink-3); }
.school .um{ position:absolute; right:18px; top:18px; width:24px; height:24px; color:var(--ink-3); opacity:.4; }

/* ───────── footer ───────── */
footer{ border-top:1px solid var(--line-2); }
.foot{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; gap:16px; flex-wrap:wrap; }
.foot span{ font-size:13px; color:var(--ink-3); }
.foot .tier b{ color:var(--ink-2); font-weight:600; }
.foot .tier .amt{ font-variant-numeric:tabular-nums; }

/* ───────── arrival (breathe on load) ───────── */
.arrive{ opacity:0; transform:translateY(18px); animation:arrive .9s var(--ease) forwards; }
@keyframes arrive{ to{ opacity:1; transform:translateY(0); } }
.d1{ animation-delay:.05s } .d2{ animation-delay:.16s } .d3{ animation-delay:.28s }
.d4{ animation-delay:.42s } .d5{ animation-delay:.52s } .d6{ animation-delay:.6s } .d7{ animation-delay:.68s }

/* ───────── phone — one finger, room to breathe ───────── */
@media (max-width:720px){
  .wrap{ padding:0 22px; }
  nav .lnk{ display:none; }
  .masthead{ padding:64px 0 8px; }
  .gko{ grid-template-columns:1fr; gap:28px; padding:30px 26px; }
  .gko-langs{ border-left:none; border-top:1px solid var(--gko-line); padding-left:0; padding-top:26px; }
  .coming{ grid-template-columns:1fr 1fr; }
  /* one finger: the card's primary action goes full-width + thumb-reachable */
  .gko-enter{ width:100%; justify-content:center; padding:15px; }
}
@media (max-width:460px){ .coming{ grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════════════════════
   INSIDE uni — the signed-in member home ("the lounge")
   A tool, not a pitch: you land in your school and your journey.
   ════════════════════════════════════════════════════════════════ */

/* signed-in header: a member chip instead of a sign-in button */
.member{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.member .who{ font-size:14px; font-weight:600; color:var(--ink); }
.member .av{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--red); color:#fff; font-size:13px; font-weight:600; }

/* a quiet, time-aware greeting — a tool's hello, not a billboard */
.greet{ padding:56px 0 4px; }
.greet .k{ font-size:13px; font-weight:500; color:var(--ink-3); margin-bottom:12px; }
.greet h1{ font-size:clamp(28px,3.2vw,40px); line-height:1.04; font-weight:700; letter-spacing:-.03em; color:var(--ink); }

.inside{ padding:26px 0 40px; }
.sec-label{ font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--ink-2); margin:0 0 16px; }

/* YOUR school — Ginko, in its own dusk livery, signed-in variant */
.mine{
  position:relative; overflow:hidden; border-radius:22px; padding:40px 44px;
  background:radial-gradient(125% 120% at 16% 6%, var(--gko-bg2), var(--gko-bg) 60%);
  color:var(--gko-ink); box-shadow:0 16px 44px rgba(40,37,31,.12); border:1px solid var(--gko-line);
}
.mine::before{ content:""; position:absolute; right:-6%; top:-40%; width:55%; height:170%;
  background:radial-gradient(closest-side, rgba(244,205,114,.18), rgba(227,171,66,0) 70%);
  pointer-events:none; animation:dusk-breathe 9s var(--ease) infinite alternate; }
.mine-top{ position:relative; display:flex; align-items:center; gap:12px; margin-bottom:34px; }
.mine-top .leaf-s{ width:28px; height:28px; }
.mine-top .name{ font-size:24px; font-weight:600; color:var(--gko-gold2); letter-spacing:-.01em; }
.mine-top .role{ font-size:12.5px; color:var(--gko-ink2); align-self:flex-end; padding-bottom:4px; }
.mine-top .rank{ margin-left:auto; font-size:13px; color:var(--gko-bg); background:var(--gko-gold);
  border-radius:7px; padding:5px 12px; font-weight:600; letter-spacing:-.01em; }

/* THE GUILD PATH — a winding route you travel (not a stepper):
   a dotted trail climbing from where you stand toward mastery */
.guild{ position:relative; margin:6px 0 30px; }
.guild .cap{ font-size:13px; color:var(--gko-ink2); margin-bottom:6px; }
.guild-rail{ position:relative; }
.guild-svg{ width:100%; height:auto; display:block; overflow:visible; }
.gp-phone, .labels-phone{ display:none; }   /* phone variant of the road, swapped in below */
.guild-far{ fill:var(--gko-bg); stroke:rgba(244,205,114,.30); stroke-width:1.5; }  /* master — small & far */
.guild-mid{ fill:var(--gko-bg); stroke:rgba(244,205,114,.6); stroke-width:2; }     /* journeyman */
.guild-here{ fill:var(--gko-gold2); stroke:var(--gko-gold2); }                     /* you, foreground */
.guild-glow{ fill:var(--gko-gold2); opacity:.2; transform-box:fill-box; transform-origin:center;
  animation:dusk-breathe 4.5s var(--ease) infinite alternate; }
/* labels sit beside their waypoints along the receding road */
.gl{ position:absolute; display:flex; flex-direction:column; gap:2px; }
.gl .nm{ font-size:14px; font-weight:600; color:var(--gko-ink2); white-space:nowrap; }
.gl.now .nm{ color:var(--gko-ink); }
.gl.far .nm{ font-size:12.5px; color:rgba(184,176,154,.92); }   /* far off = smaller, fainter */
.gl .hint{ font-size:12px; color:var(--gko-gold2); }

/* today's task — task-based, not drilling */
.task{ position:relative; border-top:1px solid var(--gko-line); padding-top:26px; display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.task .body{ flex:1; min-width:240px; }
.task .lab{ font-size:13px; color:var(--gko-ink2); margin-bottom:8px; }
.task .txt{ font-size:21px; font-weight:500; line-height:1.38; color:var(--gko-ink); max-width:440px; }
.mine .continue{ display:inline-flex; align-items:center; gap:9px; font:600 15px/1 var(--font);
  color:var(--gko-bg); background:var(--gko-gold); border:none; border-radius:var(--r-md); padding:15px 26px;
  text-decoration:none; cursor:pointer; box-shadow:0 10px 28px rgba(227,171,66,.24);
  transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.mine .continue:hover{ background:var(--gko-gold2); transform:translateY(-2px); box-shadow:0 14px 34px rgba(227,171,66,.32); }
.mine .continue .arr{ transition:transform .2s var(--ease); }
.mine .continue:hover .arr{ transform:translateX(3px); }

/* your guild record — a UNI-level surface, fed by every school (internalized from Ginko) */
.standing{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:14px; padding:18px 22px; margin-top:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(231,227,217,.2)); }
.standing .st-label{ font-size:14px; font-weight:600; color:var(--ink); }
.standing .st-val{ font-size:13.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.standing .st-val b{ color:var(--ink-2); font-weight:600; }

/* account strip — fact, not a sell */
.acct{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:14px; padding:18px 22px; margin-top:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(231,227,217,.2)); }
.acct .l{ font-size:14px; color:var(--ink-2); } .acct .l b{ color:var(--ink); }
.acct a{ font-size:13.5px; color:var(--ink-3); text-decoration:none; }
.acct a:hover{ color:var(--ink); }

@media (max-width:720px){
  .greet{ padding:64px 0 10px; }
  .mine{ padding:30px 24px; }
  .mine-top{ flex-wrap:wrap; gap:10px; }
  .mine-top .rank{ margin-left:0; }
  .task{ gap:18px; }
  /* swap to the taller, steeper road so the journey reads at 390px */
  .gp-desk, .labels-desk{ display:none; }
  .gp-phone, .labels-phone{ display:block; }
  /* one finger: the primary action goes full-width at the bottom of the card */
  .mine .continue{ width:100%; justify-content:center; padding:17px; }
}

/* ───────── stillness for those who ask for it ───────── */
@media (prefers-reduced-motion:reduce){
  *,*::before{ animation:none !important; transition:none !important; }
  .arrive{ opacity:1; transform:none; }
}