/* XB SCIENCE — brand identity, personal story and full-card navigation */
:root{
  --xb-brand-ice:#dce8eb;
  --xb-brand-gold:#e3c39d;
  --xb-brand-line:rgba(156,193,208,.22);
}

/* The supplied XB Science mark replaces the decorative star glyph. */
.brand{
  display:inline-flex;
  align-items:center;
  gap:0;
  min-height:48px;
}
.brand-symbol{
  display:block;
  flex:0 0 auto;
  width:36px;
  height:39px;
  object-fit:contain;
  margin:0 10px 0 0;
  color:var(--xb-brand-ice);
  animation:none!important;
  filter:drop-shadow(0 0 13px rgba(156,205,219,.12));
}
.brand-wordmark{
  display:block;
  width:142px;
  height:auto;
  max-height:24px;
  object-fit:contain;
  object-position:left center;
  flex:0 0 auto;
}
.brand-side{
  margin-left:15px;
  padding-left:15px;
  color:#8298a5;
  font-size:8px;
  letter-spacing:.17em;
  white-space:nowrap;
}
.footer-brand{
  display:inline-flex;
  align-items:center;
  gap:0;
  min-height:34px;
  font-size:0;
}
.footer-brand .brand-symbol{
  width:28px;
  height:30px;
  margin-right:8px;
}
.footer-brand .brand-wordmark{
  width:126px;
  max-height:21px;
}
.central-emblem .emblem-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.hero-brand-symbol{
  display:block;
  width:91px;
  height:100px;
  object-fit:contain;
  filter:drop-shadow(0 0 22px rgba(150,205,219,.13));
}
.hero-brand-wordmark{
  display:block;
  width:126px;
  height:auto;
  object-fit:contain;
  margin-top:-2px;
}
.central-emblem .emblem-inner small{
  margin-top:4px;
  font-size:7px;
  letter-spacing:.19em;
  color:#b6cbd0;
}

/* Brand meaning: translate the cultural idea, not the Chinese characters. */
.brand-origin{
  position:relative;
  overflow:hidden;
  padding:clamp(72px,8vw,112px) 0;
  border-top:1px solid rgba(143,178,195,.13);
  border-bottom:1px solid rgba(143,178,195,.13);
  background:
    radial-gradient(ellipse at 18% 50%,rgba(39,83,105,.18),transparent 43%),
    linear-gradient(115deg,#0b121c,#0a1018 65%,#0b121a);
}
.brand-origin::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:linear-gradient(rgba(135,178,193,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(135,178,193,.06) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:linear-gradient(90deg,#000,transparent 80%);
}
.brand-origin-layout{
  position:relative;
  display:grid;
  grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);
  align-items:center;
  gap:clamp(42px,8vw,116px);
}
.brand-origin-visual{
  min-height:280px;
  display:grid;
  place-items:center;
  position:relative;
}
.brand-origin-visual::before,
.brand-origin-visual::after{
  content:"";
  position:absolute;
  width:245px;
  height:245px;
  border:1px solid rgba(147,193,208,.18);
  border-radius:50%;
}
.brand-origin-visual::after{
  width:285px;
  height:285px;
  border-style:dashed;
  border-color:rgba(147,193,208,.12);
}
.brand-origin-visual img{
  position:relative;
  z-index:1;
  width:min(250px,78%);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 12px 42px rgba(112,167,186,.1));
}
.brand-origin-copy .small-caps{
  margin-bottom:18px;
}
.brand-origin-copy h2{
  margin:0 0 22px;
  font-size:clamp(42px,5vw,68px);
  line-height:1.04;
  letter-spacing:-.065em;
  font-weight:460;
}
.brand-origin-copy h2 em{
  color:#b6d8df;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}
.brand-origin-copy>p:not(.small-caps){
  max-width:620px;
  margin:0;
  color:#a7b8c1;
  font-size:14px;
  line-height:1.95;
}
.brand-origin-signature{
  display:inline-block;
  margin-top:25px;
  padding-top:13px;
  border-top:1px solid rgba(160,197,209,.25);
  color:#d1b996;
  font-size:9px;
  letter-spacing:.18em;
}

/* Whole project cards are links: the entire surface is an obvious target. */
a.project-card-full{
  display:block;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
a.featured-work.project-card-full{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
a.project-card-full .tiny-cta,
a.project-card-full .project-card-action{
  pointer-events:none;
}
a.project-card-full .tiny-cta,
a.project-card-full .project-card-action{
  transition:color .25s,border-color .25s,transform .25s;
}
a.project-card-full:hover .tiny-cta,
a.project-card-full:hover .project-card-action{
  color:#f0d0a9;
}
a.project-card-full:focus-visible{
  outline:2px solid #e9c79f!important;
  outline-offset:6px!important;
  border-color:rgba(231,198,161,.75)!important;
}
a.project-card-full:active{
  transform:translateY(-1px);
}
.project-card-full .card-content{
  min-width:0;
}
.project-card-full .project-card-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-top:1px solid #8cadba3c;
  color:#d2e4e8;
  font-size:11px;
  letter-spacing:.03em;
  margin-top:21px;
  padding-top:19px;
}
.project-card-full .project-card-action span{
  font-size:19px;
}
.project-card-full .tiny-cta{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-width:230px;
}
.project-card-full .tiny-cta span{
  font-size:19px;
}

/* Story rhythm: AI is the next practical opportunity, not an unrelated hobby. */
.origin-body p{
  max-width:66ch;
}
.origin-body p:nth-child(3){
  color:#d2dfe2;
}
.origin-body p:nth-child(4){
  padding-left:17px;
  border-left:1px solid rgba(220,195,157,.45);
  color:#b7c7ce;
}
.milestone strong{
  color:#e4ecee;
}
.milestone p{
  max-width:29ch;
}

@media(max-width:1050px){
  .brand-side{display:none}
  .brand-origin-layout{gap:45px}
}
@media(max-width:900px){
  .brand-origin-layout{grid-template-columns:1fr;gap:28px}
  .brand-origin-visual{min-height:230px}
  .brand-origin-visual::before{width:205px;height:205px}
  .brand-origin-visual::after{width:240px;height:240px}
  .brand-origin-visual img{width:205px}
  .brand-origin-copy{text-align:center}
  .brand-origin-copy>p:not(.small-caps){margin-inline:auto}
}
@media(max-width:650px){
  .brand-symbol{width:31px;height:34px;margin-right:8px}
  .brand-wordmark{width:116px;max-height:21px}
  .footer-brand .brand-symbol{width:25px;height:27px}
  .footer-brand .brand-wordmark{width:98px}
  .hero-brand-symbol{width:78px;height:86px}
  .hero-brand-wordmark{width:108px}
  .brand-origin{padding-block:65px}
  .brand-origin-copy h2{font-size:43px}
  .brand-origin-copy>p:not(.small-caps){font-size:13px}
  a.featured-work.project-card-full{grid-template-columns:1fr}
  a.project-card-full .project-card-action{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  .brand-symbol,.hero-brand-symbol{animation:none!important}
}
.future-manifesto{
  max-width:760px;
  margin:30px 0 0;
  padding:18px 0 0 19px;
  border-left:1px solid rgba(227,195,157,.55);
  color:#d9c4a8;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(19px,2.2vw,27px);
  line-height:1.55;
  font-style:italic;
}

.notes-final-state{flex-wrap:wrap;line-height:1.65}