/* Link-tree skin for Sean and Stephen only, 2026-10-05.
   Matches their Concept C apply pages, smaller and quieter: the link tree is the lobby
   between an Instagram bio and the apply page.

   api/page.js links this file (and linktree-skin.js) ONLY on the sean and stephen routes,
   so the other four brands are served the exact same HTML, app.js and brands.js as before.
   Every rule below is also scoped to html[data-brand=sean|stephen] as a second lock.

   Tokens are copied from the apply pages:
     Sean    /Users/main/Bridge/Wiki/Clients/PCL/Brands/SeanFoote/apply-concepts-2026-10-02/concept-c/index.html
     Stephen /Users/main/Bridge/Wiki/Clients/PCL/Brands/StephenWelch/apply-concepts-2026-10-02/concept-c/index.html
   Backgrounds: blurred web copies of the Higgsfield board scenes,
     /Users/main/Bridge/Wiki/Clients/PCL/Brands/Crownmark/apply-assets-2026-10-05/{sean,stephen}/*-hero-{mobile,desktop}.webp
   Motion is opacity/transform only and switches off under prefers-reduced-motion. */

html[data-brand="sean"],html[data-brand="stephen"]{
  --gold:#c98f20; --gold-lt:#e0b45c; --gold-dk:#9c6c12; --ink:#131211; --ink-0:#0b0a09;
  --paper:#f6f2ea; --foil:#fff3d6;
  --sk-ground:#0b0a09;
  --sk-fg:#f6f2ea;
  --sk-mut:#bfb3a0;
  --sk-acc:#e0b45c;
  --sk-line:rgba(224,180,92,.22);
  --sk-panel:rgba(19,18,17,.62);
  --sk-panel-hi:rgba(224,180,92,.09);
  --sk-glow:rgba(201,143,32,.5);
  --sk-disp:'Oswald','Arial Narrow',sans-serif;
  --sk-body:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sk-bg-m:url(/assets/lt-sean-bg-m.webp);
  --sk-bg-d:url(/assets/lt-sean-bg-d.webp);
  --sk-shade:linear-gradient(180deg,rgba(11,10,9,.86) 0%,rgba(11,10,9,.74) 34%,rgba(11,10,9,.5) 62%,rgba(11,10,9,.7) 100%);
}
/* 2026-10-05 (Sean + Stephen): Stephen's link tree uses the Crownmark black and gold, so he shares
   Sean's token block above. Only his own type pairing stays his. The old blue block is in
   Links/_pre-sean-feedback-2026-10-05/deployed-source-stage-6/skin/linktree-skin.css. */
html[data-brand="stephen"]{
  --sk-disp:'Archivo','Arial Narrow',sans-serif;
  --sk-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ---------- ground: the board scene, dimmed, breathing very slowly ---------- */
html[data-brand="sean"] body,html[data-brand="stephen"] body{
  background:var(--sk-ground);color:var(--sk-fg);font-family:var(--sk-body);
}
html[data-brand="sean"] body:before,html[data-brand="stephen"] body:before{
  content:"";position:fixed;inset:-4%;z-index:-2;pointer-events:none;
  background:var(--sk-ground) var(--sk-bg-m) 50% 100%/cover no-repeat;
  transform-origin:50% 72%;
}
html[data-brand="sean"] body:after,html[data-brand="stephen"] body:after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--sk-shade);
}
@media (min-width:700px) and (orientation:landscape){
  html[data-brand="sean"] body:before,html[data-brand="stephen"] body:before{background-image:var(--sk-bg-d);background-position:72% 60%}
}

/* ---------- header: photo, king crest, name ---------- */
html[data-brand="sean"] .wrap,html[data-brand="stephen"] .wrap{max-width:440px;padding:44px 20px 40px}
@media (min-width:700px){html[data-brand="sean"] .wrap,html[data-brand="stephen"] .wrap{padding-top:72px}}
html[data-brand="sean"] .head,html[data-brand="stephen"] .head{margin-bottom:30px}

html[data-brand="sean"] .mark--portrait,html[data-brand="stephen"] .mark--portrait{
  width:112px;height:112px;margin:0 auto;border:0;
}
html[data-brand="sean"] .mark--portrait,html[data-brand="stephen"] .mark--portrait{box-shadow:0 0 0 2px var(--ink),0 0 0 3.5px var(--gold),0 0 0 8px rgba(224,180,92,.12),0 18px 40px -14px rgba(0,0,0,.8)}

.sk-crest{display:flex;align-items:center;justify-content:center;gap:12px;position:relative;z-index:1;margin:-19px auto 0}
.sk-crest .sk-rule{height:1px;width:46px;background:linear-gradient(90deg,transparent,var(--sk-acc));opacity:.75;margin-top:6px}
.sk-crest .sk-rule.r{background:linear-gradient(90deg,var(--sk-acc),transparent)}
.sk-king{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%}
.sk-king svg{display:block;height:17px;width:auto}
html[data-brand="sean"] .sk-king,html[data-brand="stephen"] .sk-king{
  background:radial-gradient(circle at 35% 30%,#2a2620,var(--ink));color:var(--gold-lt);
  box-shadow:0 0 0 1.5px var(--gold),0 0 0 4px rgba(224,180,92,.18),0 10px 26px -10px rgba(0,0,0,.8);
}

html[data-brand="sean"] .name,html[data-brand="stephen"] .name{
  margin-top:16px;font-family:var(--sk-disp);text-transform:uppercase;color:var(--sk-fg);line-height:1;
}
html[data-brand="sean"] .name{font-weight:700;font-size:44px;letter-spacing:.035em}
html[data-brand="stephen"] .name{font-weight:850;font-stretch:78%;font-size:40px;letter-spacing:.01em;word-spacing:.06em}
@media (min-width:430px){html[data-brand="stephen"] .name{font-size:46px}}
.name em{font-style:normal;background-clip:text;-webkit-background-clip:text;color:transparent}
html[data-brand="sean"] .name em,html[data-brand="stephen"] .name em{background-image:linear-gradient(180deg,var(--foil) 0%,var(--gold-lt) 42%,var(--gold) 100%)}

html[data-brand="sean"] .tagline,html[data-brand="stephen"] .tagline{
  margin-top:12px;text-transform:uppercase;font-size:10.5px;line-height:1.6;text-wrap:balance;
}
html[data-brand="sean"] .tagline{font-family:var(--sk-body);font-weight:900;letter-spacing:.24em;color:var(--gold-lt)}
html[data-brand="stephen"] .tagline{font-family:var(--sk-body);font-weight:600;letter-spacing:.22em;color:var(--gold-lt)}

/* ---------- the one loud button ---------- */
html[data-brand="sean"] .stack,html[data-brand="stephen"] .stack{gap:0}
html[data-brand="sean"] .btn,html[data-brand="stephen"] .btn{font-family:var(--sk-body)}

html[data-brand="sean"] .btn--primary,html[data-brand="stephen"] .btn--primary{
  position:relative;gap:10px;min-height:58px;padding:19px 20px;margin-bottom:22px;border:0;border-radius:6px;
  font-size:15px;line-height:1;letter-spacing:.16em;text-transform:uppercase;
  transition:transform .18s ease,box-shadow .25s ease,filter .18s ease,background-color .18s ease;
}
html[data-brand="sean"] .btn--primary{
  background:linear-gradient(180deg,var(--gold-lt) 0%,var(--gold) 100%);color:var(--ink);font-weight:900;
  box-shadow:0 6px 24px rgba(201,143,32,.5),0 0 24px rgba(201,143,32,.1),inset 0 1px 0 rgba(255,243,214,.7);
}
html[data-brand="stephen"] .btn--primary{
  background:linear-gradient(180deg,var(--gold-lt) 0%,var(--gold) 100%);color:var(--ink);font-weight:800;letter-spacing:.14em;
  box-shadow:0 6px 24px rgba(201,143,32,.5),0 0 24px rgba(201,143,32,.1),inset 0 1px 0 rgba(255,243,214,.7);
}
html[data-brand="sean"] .btn--primary:after,html[data-brand="stephen"] .btn--primary:after{
  content:"";flex:none;width:15px;height:15px;background:currentColor;transition:transform .18s ease;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
html[data-brand="sean"] .btn--primary:hover,html[data-brand="sean"] .btn--primary:active,
html[data-brand="stephen"] .btn--primary:hover,html[data-brand="stephen"] .btn--primary:active{
  opacity:1;transform:translateY(-1px);filter:brightness(1.05);
  box-shadow:0 10px 30px rgba(201,143,32,.6),0 0 44px rgba(224,180,92,.22),inset 0 1px 0 rgba(255,243,214,.7);
}
html[data-brand="sean"] .btn--primary:hover:after,html[data-brand="stephen"] .btn--primary:hover:after{transform:translateX(3px)}

/* ---------- everything else: one quiet glass panel of thin rows ---------- */
html[data-brand="sean"] .btn--secondary,html[data-brand="stephen"] .btn--secondary{
  justify-content:space-between;gap:14px;min-height:54px;padding:14px 18px;border-radius:0;
  background:var(--sk-panel);color:var(--sk-fg);text-align:left;
  font-size:15.5px;font-weight:400;letter-spacing:.01em;
  border:1px solid var(--sk-line);border-top-width:0;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background-color .2s ease,color .2s ease,box-shadow .25s ease;
}
html[data-brand="stephen"] .btn--secondary{font-weight:500;font-size:15px}
html[data-brand="sean"] .btn--primary + .btn--secondary,html[data-brand="stephen"] .btn--primary + .btn--secondary,
html[data-brand="sean"] .stack > .btn--secondary:first-child,html[data-brand="stephen"] .stack > .btn--secondary:first-child{
  border-top-width:1px;border-radius:12px 12px 0 0;
}
/* the apply card's top bar, carried onto the panel */
html[data-brand="sean"] .btn--primary + .btn--secondary:before,html[data-brand="stephen"] .btn--primary + .btn--secondary:before{
  content:"";position:absolute;left:22px;right:22px;top:-1px;height:2px;border-radius:0 0 2px 2px;opacity:.85;
}
html[data-brand="sean"] .btn--primary + .btn--secondary:before,html[data-brand="stephen"] .btn--primary + .btn--secondary:before{background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt),var(--gold))}
html[data-brand="sean"] .btn--secondary,html[data-brand="stephen"] .btn--secondary{position:relative}
html[data-brand="sean"] .stack > .btn--secondary:last-child,html[data-brand="stephen"] .stack > .btn--secondary:last-child{border-radius:0 0 12px 12px}
html[data-brand="sean"] .btn--primary + .btn--secondary:last-child,html[data-brand="stephen"] .btn--primary + .btn--secondary:last-child{border-radius:12px}
html[data-brand="sean"] .btn--secondary:after,html[data-brand="stephen"] .btn--secondary:after{
  content:"";flex:none;width:7px;height:7px;margin-right:3px;border-top:1.5px solid var(--sk-acc);border-right:1.5px solid var(--sk-acc);
  transform:rotate(45deg);opacity:.7;transition:transform .2s ease,opacity .2s ease;
}
html[data-brand="sean"] .btn--secondary:hover,html[data-brand="stephen"] .btn--secondary:hover,
html[data-brand="sean"] .btn--secondary:active,html[data-brand="stephen"] .btn--secondary:active{
  opacity:1;border-color:var(--sk-line);color:var(--sk-acc);
  background:radial-gradient(120% 140% at 0% 50%,var(--sk-panel-hi),transparent 70%),var(--sk-panel);
  box-shadow:inset 2px 0 0 var(--sk-acc);
}
html[data-brand="sean"] .btn--secondary:hover:after,html[data-brand="stephen"] .btn--secondary:hover:after{transform:translateX(3px) rotate(45deg);opacity:1}

/* ---------- socials: a quiet icon row ---------- */
html[data-brand="sean"] .socials,html[data-brand="stephen"] .socials{margin-top:30px;gap:4px}
html[data-brand="sean"] .socials a,html[data-brand="stephen"] .socials a{
  width:46px;height:46px;color:var(--sk-fg);opacity:.62;transition:opacity .2s ease,color .2s ease,filter .25s ease;
}
html[data-brand="sean"] .socials svg,html[data-brand="stephen"] .socials svg{width:19px;height:19px}
html[data-brand="sean"] .socials a:hover,html[data-brand="stephen"] .socials a:hover,
html[data-brand="sean"] .socials a:active,html[data-brand="stephen"] .socials a:active{
  opacity:1;color:var(--sk-acc);filter:drop-shadow(0 0 8px var(--sk-glow));
}

html[data-brand="sean"] .foot,html[data-brand="stephen"] .foot{
  margin-top:26px;font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--sk-mut);opacity:.6;
}
html[data-brand="sean"] a:focus-visible,html[data-brand="stephen"] a:focus-visible{outline:2px solid var(--sk-acc);outline-offset:3px}

/* ---------- motion: stagger in, breathe, nothing else ---------- */
@media (prefers-reduced-motion:no-preference){
  html[data-brand="sean"] body:before,html[data-brand="stephen"] body:before{animation:skBreathe 22s ease-in-out infinite alternate}
  html[data-brand="sean"] .head > *,html[data-brand="stephen"] .head > *,
  html[data-brand="sean"] .stack > *,html[data-brand="stephen"] .stack > *,
  html[data-brand="sean"] .socials,html[data-brand="stephen"] .socials{animation:skUp .7s cubic-bezier(.2,.7,.2,1) backwards}
  html[data-brand="sean"] .head > :nth-child(2),html[data-brand="stephen"] .head > :nth-child(2){animation-delay:.06s}
  html[data-brand="sean"] .head > :nth-child(3),html[data-brand="stephen"] .head > :nth-child(3){animation-delay:.12s}
  html[data-brand="sean"] .head > :nth-child(4),html[data-brand="stephen"] .head > :nth-child(4){animation-delay:.18s}
  .stack > :nth-child(1){animation-delay:.08s}
  .stack > :nth-child(2){animation-delay:.14s}
  .stack > :nth-child(3){animation-delay:.19s}
  .stack > :nth-child(4){animation-delay:.24s}
  .stack > :nth-child(5){animation-delay:.29s}
  .stack > :nth-child(6){animation-delay:.34s}
  .stack > :nth-child(7){animation-delay:.39s}
  .stack > :nth-child(n+8){animation-delay:.44s}
  html[data-brand="sean"] .socials,html[data-brand="stephen"] .socials{animation-delay:.42s}
}
@keyframes skUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes skBreathe{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.06) translate3d(-1.2%,-1%,0)}}
@media (prefers-reduced-motion:reduce){
  html[data-brand="sean"] *,html[data-brand="stephen"] *{animation:none !important}
}

/* ---------- mobile pass, 2026-10-05 (w4-10): the Instagram in-app browser is the real use case ----------
   1. safe-area insets: api/page.js now serves these routes with viewport-fit=cover, so the content is
      padded clear of the notch, the rounded corners and the home indicator
   2. tagline up from 10.5px to 14px (nothing under 14px except the footer)
   3. social icons 46px -> 48px tap targets */
html[data-brand="sean"] .wrap,html[data-brand="stephen"] .wrap{
  padding-top:max(44px,calc(env(safe-area-inset-top) + 20px));
  padding-left:max(20px,calc(env(safe-area-inset-left) + 12px));
  padding-right:max(20px,calc(env(safe-area-inset-right) + 12px));
  padding-bottom:max(40px,calc(env(safe-area-inset-bottom) + 24px));
}
@media (min-width:700px){html[data-brand="sean"] .wrap,html[data-brand="stephen"] .wrap{padding-top:max(72px,calc(env(safe-area-inset-top) + 20px))}}
html[data-brand="sean"] .tagline,html[data-brand="stephen"] .tagline{font-size:14px;letter-spacing:.16em;line-height:1.5}
html[data-brand="sean"] .socials a,html[data-brand="stephen"] .socials a{width:48px;height:48px}

/* ---------- second title line, 2026-10-05 (Sean): "Co-founder, Legacy Suite" ----------
   linktree-skin.js renders BRANDS[brand].tagline2 as <p class="tagline tagline2"> right under #tagline,
   so it picks up every .tagline rule above; this only tightens the gap between the two lines. */
html[data-brand="sean"] .tagline + .tagline2,html[data-brand="stephen"] .tagline + .tagline2{margin-top:4px}