/* Nayuki: compact content, readable navigation, and independent mobile composition. */
:root { --nayuki-surface:#fff; --nayuki-ink:#24364c; --nayuki-muted:#596c82; }
[data-theme="dark"] { --nayuki-surface:#202735; --nayuki-ink:#e5edf7; --nayuki-muted:#a9b8ca; }
.header, .header.scrolled { background:rgba(245,249,255,.92); border-bottom:1px solid rgba(69,107,165,.14); backdrop-filter:blur(18px); }
[data-theme="dark"] .header, [data-theme="dark"] .header.scrolled { background:rgba(19,28,44,.94); }
.header .nav-btn, .header .search-box { color:var(--nayuki-ink); }
.nav-left a[aria-current="page"] { color:var(--color-accent); background:rgba(81,135,224,.12); border-radius:10px; }
.nayuki-brand { display:none; }
.nayuki-account-link { display:none; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline:3px solid var(--color-accent); outline-offset:4px; }
.hero { height: min(780px,85svh); min-height:580px; max-height:none; }
.hero-profile { transform:none; max-width:800px; gap:32px; margin-bottom:0; }
.hero-info { padding:28px 32px; background:rgba(248,251,255,.84); border-radius:24px; }
[data-theme="dark"] .hero-info { background:rgba(18,31,52,.88); }
.hero-name { font-size:clamp(42px,5vw,64px); }
[data-theme="dark"] .hero-name { background:linear-gradient(120deg,#94c5ff,#c7b6ff)!important; background-clip:text!important; -webkit-background-clip:text!important; }
.hero-tagline, [data-theme="light"] .hero-tagline { color:var(--nayuki-ink); }
.hero-bio, [data-theme="light"] .hero-bio { color:var(--nayuki-muted); text-decoration:none; text-shadow:none; font-style:normal; font-size:15px; }
.hero-avatar { width:172px; height:172px; }
.hero-avatar::before { animation:none; }
.hero-background::after { background:linear-gradient(180deg,rgba(15,28,52,.3),rgba(15,28,52,.36)); }
[data-theme="light"] .hero-background::after { background:linear-gradient(180deg,rgba(243,248,255,.03),rgba(243,248,255,.24)); }
.hero-scroll { display:none; }
.hero-info::before { content:"UTAUTAI.ORG / NAYUKI"; font:600 10px/1.5 system-ui,sans-serif; letter-spacing:.18em; color:var(--nayuki-muted); }
.hero-social { gap:12px; margin-top:14px; }
.hero-social .social-link { width:44px; height:44px; background:rgba(88,135,218,.09); color:var(--nayuki-ink); border-color:rgba(100,140,210,.2); }
.compass-zone [data-aos], .feed-zone [data-aos] { opacity:1!important; transform:none!important; animation:none!important; }
.compass-zone { padding:28px 24px 24px; background:var(--nayuki-surface); border-radius:0; }
.compass-title { font-size:18px; margin-bottom:4px; }
.compass-subtitle { font-size:13px; color:var(--nayuki-muted); margin-bottom:18px; }
.compass-grid { max-width:none; gap:10px; }
.compass-item { flex:1; max-width:150px; padding:12px; border:1px solid rgba(90,127,182,.18); background:rgba(78,132,219,.045); color:var(--nayuki-ink); }
.feed-zone { padding:32px 24px 48px; border-radius:0 0 24px 24px; background:var(--nayuki-surface); }
.feed-layout { gap:28px; align-items:start; }
.block-head { margin-bottom:16px; }
.block-label { font-size:19px; }
.block-more, .block-subtitle, .stat-item { color:var(--nayuki-muted); }
.block-more { min-height:44px; display:inline-flex; align-items:center; }
.article-wrapper, .stream-wrapper { height:auto; min-height:0; background:rgba(88,135,218,.035); border-color:rgba(90,127,182,.2); border-radius:18px; }
.article-feed, .stream-feed { height:auto; max-height:360px; }
.article-watermark, .stream-watermark { display:none; }
.article-feed { padding:0; }
.article-row:only-child { padding:0; border:0; }
.article-row:only-child .article-link { display:grid; grid-template-columns:1fr auto; gap:14px; }
.article-row:only-child .article-index { display:none; }
.article-row:only-child .article-cover { display:block; grid-column:1/-1; width:100%; height:160px; border:0; border-radius:12px; }
.article-row:only-child .article-cover img { object-fit:cover; }
.article-name { font-size:18px; font-weight:600; color:var(--nayuki-ink); }
.article-desc { font-size:13px; color:var(--nayuki-muted); line-height:1.8; white-space:normal; }
.article-views { display:none; }
.stream-feed { padding:20px 18px 20px 34px; }
.stream-row { padding-top:10px; padding-bottom:10px; }
.stream-verb, .stream-time { color:var(--nayuki-muted); }
.stream-object { color:var(--nayuki-ink); }
.life-zone { margin-top:32px; }
.life-swiper .swiper-slide { width:calc((100% - 32px)/3)!important; height:180px; }
.life-card { border-radius:16px; }
.life-title { font-size:16px; }
.life-desc { font-size:12px; }
.life-overlay { padding:16px; background:linear-gradient(transparent 20%,rgba(7,18,37,.78)); }
.life-date { top:12px; right:12px; font-size:11px; padding:4px 7px; }
@media (max-width: 1023px) and (min-width:769px) { .hero-profile { max-width:700px; } .hero { min-height:540px; } }
@media (max-width:768px) {
  .header { height:64px; }
  .header-inner { padding:0 16px; }
  .header-left, .header-right { gap:8px; }
  .header-left, .logo, .logo-avatar { flex-shrink:0; }
  .header .search-box { min-width:0!important; flex:0 0 44px; }
  .logo { gap:9px; }
  .logo-avatar { width:32px; height:32px; }
  .nayuki-brand { display:block; font:600 17px/1.2 system-ui,sans-serif; letter-spacing:.02em; color:var(--nayuki-ink); }
  .header .theme-toggle, .header .menu-toggle, .header .search-box { display:flex!important; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:12px; background:rgba(85,135,218,.07); color:var(--nayuki-ink); }
  .header .menu-toggle svg, .header .theme-toggle svg, .header .search-box-icon { width:20px; height:20px; }
  .header .search-box-text, .header .search-box-kbd, .header .nav-right { display:none; }
  .header .nav-left { display:none; position:absolute; top:72px; left:12px; right:12px; padding:12px; background:var(--nayuki-surface); border:1px solid rgba(90,127,182,.2); border-radius:18px; box-shadow:0 16px 42px rgba(10,30,60,.2); }
  .header .nav-left.active { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .header .nav-left .nav-btn-with-icon { display:flex; justify-content:flex-start; gap:12px; width:100%; height:48px; padding:0 14px; font-size:15px; }
  .header .nav-left .nayuki-account-link { display:flex; border-top:1px solid rgba(90,127,182,.13); }
  .header .nav-btn-text-label { display:inline; }
  .header .nav-left svg, .header .nav-left i { width:18px; height:18px; font-size:18px; }
  .hero { height:auto; min-height:620px; max-height:none; padding:170px 18px 38px; justify-content:flex-end; }
  .hero-background-img { object-position:39% center; }
  .hero-profile { flex-direction:column; gap:0; width:100%; margin:0; }
  .hero-avatar-wrapper { z-index:2; margin-bottom:-32px; }
  .hero-avatar { width:86px; height:86px; margin:0; }
  .hero-avatar img { border-width:3px; box-shadow:0 6px 22px rgba(20,40,80,.22); }
  .hero-info { width:100%; max-width:420px; padding:49px 20px 22px; border-radius:24px; gap:7px; align-items:center; }
  .hero-info::before { font-size:9px; }
  .hero-name { font-size:38px; line-height:1.2; }
  .hero-tagline { font-size:16px; }
  .hero-bio { font-size:14px; line-height:1.85; margin-top:2px; }
  .hero-social { margin-top:8px; }
  .compass-zone { padding:24px 16px 12px; }
  .compass-zone .container, .feed-zone .container { padding:0; }
  .compass-subtitle { font-size:12px; }
  .compass-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .compass-item { max-width:none; min-height:48px; font-size:13px; gap:7px; padding:9px 5px; }
  .feed-zone { padding:22px 16px 32px; }
  .feed-layout { gap:24px; }
  .block-label { font-size:18px; }
  .article-wrapper { padding:12px; }
  .article-row:only-child .article-cover { height:158px; }
  .article-row:only-child .article-link { gap:12px; }
  .article-detail { grid-column:1/-1; padding:0 2px 4px; }
  .article-name { font-size:18px; white-space:normal; }
  .stream-row { font-size:13px; }
  .stream-time { font-size:11px; }
  .life-zone { margin-top:24px; }
  .life-zone .block-subtitle { display:none; }
  .life-swiper .swiper-slide { width:240px!important; height:175px; }
  .life-title { font-size:16px; }
  .life-desc { font-size:12px; }
  .life-date { font-size:10px; }
}
@media (prefers-reduced-motion: reduce) { .hero * { animation:none!important; } }