:root {
      --bg: #fffdf7;
      --paper: #ffffff;
      --ink: #10100f;
      --muted: #5f6058;
      --line: #11110f;
      --yellow: #f5c842;
      --yellow-soft: #fff3c8;
      --green: #2f6843;
      --green-soft: #e8f2e3;
      --green-dark: #17381f;
      --gray: #f3f2ed;
      --shadow: 5px 5px 0 #10100f;
      --soft-shadow: 3px 3px 0 rgba(16,16,15,.16);
      --mono: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
      --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 15% 6%, rgba(245, 200, 66, .10), transparent 22rem),
        radial-gradient(circle at 88% 22%, rgba(47, 104, 67, .10), transparent 22rem),
        var(--bg);
      font-family: var(--sans);
      line-height: 1.55;
    }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; }

    .skip-link {
      position: absolute; left: -999px; top: 1rem;
      background: var(--yellow); border: 2px solid var(--ink); padding: .5rem .75rem; z-index: 99;
    }
    .skip-link:focus { left: 1rem; }

    .shell {
      max-width: 1180px;
      margin: 28px auto;
      background: var(--paper);
      border: 2px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    .browser-bar {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 1rem;
      align-items: center;
      padding: .7rem 1rem;
      background: #f1f1ee;
      border-bottom: 2px solid var(--line);
      font-family: var(--mono);
      font-size: .76rem;
    }
    .dots { display: flex; gap: .45rem; }
    .dot { width: .72rem; height: .72rem; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.25); }
    .red { background: #ff665f; } .amber { background: #f5c842; } .green-dot { background: #66b36e; }
    .address { justify-self: center; width: min(520px, 100%); text-align: center; color: #777; background: #fff; border: 1.5px solid #d5d5d0; border-radius: 8px; padding: .28rem .9rem; }
    .browser-icons { color: #777; }

    .site-header {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 1rem;
      align-items: center;
      padding: 1rem 1.25rem;
      border-bottom: 2px solid var(--line);
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(10px);
    }
    .brand { display: flex; align-items: center; gap: .8rem; }
    .mini-avatar {
      width: 50px; height: 50px;
      border: 2px solid var(--line);
      box-shadow: 2px 2px 0 var(--line);
      background:
        linear-gradient(45deg, rgba(47,104,67,.18) 25%, transparent 25%, transparent 75%, rgba(47,104,67,.18) 75%),
        linear-gradient(45deg, rgba(47,104,67,.18) 25%, transparent 25%, transparent 75%, rgba(47,104,67,.18) 75%),
        var(--green-soft);
      background-position: 0 0, 6px 6px;
      background-size: 12px 12px;
      display: grid;
      place-items: center;
      font: 900 .95rem var(--mono);
    }
    .brand h1 { margin: 0; font: 900 1.05rem var(--mono); letter-spacing: -.045em; }
    .brand p { margin: .12rem 0 0; font: 700 .72rem var(--mono); color: var(--muted); text-transform: uppercase; }
    .nav { display: flex; justify-content: center; gap: .25rem; flex-wrap: wrap; }
    .nav a, .nav button, .small-link {
      border: 0;
      background: transparent;
      padding: .55rem .7rem;
      font: 850 .78rem var(--mono);
      text-transform: uppercase;
      cursor: pointer;
      position: relative;
    }
    .nav button.active::after, .nav a.active::after {
      content: "";
      position: absolute; left: .72rem; right: .72rem; bottom: .32rem;
      height: 3px; background: var(--yellow);
    }

    .nav-item { position: relative; display: inline-flex; }
    .has-dropdown > button { display: inline-flex; align-items: center; gap: .3rem; }
    .has-dropdown > button::before { content: "▾"; font-size: .62rem; order: 2; opacity: .8; }
    .dropdown-menu {
      position: absolute;
      top: calc(100% + .15rem);
      left: 0;
      min-width: 220px;
      display: none;
      gap: .25rem;
      padding: .35rem;
      background: #fff;
      border: 2px solid var(--line);
      box-shadow: 3px 3px 0 var(--line);
      z-index: 60;
    }
    .nav-item:hover .dropdown-menu,
    .nav-item:focus-within .dropdown-menu { display: grid; }
    .dropdown-menu button {
      width: 100%;
      text-align: left;
      border: 1.5px solid transparent;
      background: var(--paper);
      padding: .55rem .65rem;
      font: 850 .72rem var(--mono);
      text-transform: none;
      cursor: pointer;
    }
    .dropdown-menu button:hover,
    .dropdown-menu button:focus { background: var(--yellow-soft); border-color: var(--line); outline: none; }
    .dropdown-menu button::after { display: none !important; }

    .cv-button {
      justify-self: end;
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      background: var(--yellow);
      border: 2px solid var(--line);
      box-shadow: 2px 2px 0 var(--line);
      padding: .62rem .85rem;
      font: 900 .78rem var(--mono);
      text-transform: uppercase;
    }

    main { padding: 1.35rem; }
    .view { display: none; animation: appear .18s ease-out; }
    .view.active { display: block; }
    @keyframes appear { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

    .hero {
      border: 2px solid var(--line);
      position: relative;
      min-height: 380px;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(47,104,67,.055), transparent 38%, transparent 62%, rgba(245,200,66,.09)),
        var(--paper);
    }
    .hero::before, .hero::after {
      content: ""; position: absolute; top: 1rem; bottom: 1rem; width: 120px; opacity: .22; pointer-events: none;
      background-image: linear-gradient(var(--line) 2px, transparent 2px), linear-gradient(90deg, var(--line) 2px, transparent 2px);
      background-size: 18px 18px;
    }
    .hero::before { left: 1rem; clip-path: polygon(0 82%, 20% 58%, 38% 74%, 62% 36%, 100% 82%, 100% 100%, 0 100%); }
    .hero::after { right: 1rem; clip-path: polygon(0 100%, 0 70%, 10% 70%, 10% 48%, 22% 48%, 22% 64%, 35% 64%, 35% 34%, 48% 34%, 48% 72%, 62% 72%, 62% 45%, 76% 45%, 76% 62%, 90% 62%, 90% 38%, 100% 38%, 100% 100%); }
    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
      padding: 4.5rem 1.6rem 3.8rem;
    }
    .kicker {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      margin-bottom: .9rem;
      color: var(--green);
      font: 900 .8rem var(--mono);
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .hero h2 {
      margin: 0 auto .9rem;
      max-width: 760px;
      font: 950 clamp(2rem, 5.6vw, 4rem)/.98 var(--mono);
      letter-spacing: -.08em;
    }
    .hero p {
      max-width: 680px;
      margin: 0 auto 1.25rem;
      color: #30302b;
      font-size: 1.08rem;
    }
    .button-row { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem; }
    .button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: .4rem;
      min-height: 42px;
      border: 2px solid var(--line);
      box-shadow: 3px 3px 0 var(--line);
      background: var(--yellow);
      padding: .7rem 1rem;
      font: 900 .82rem var(--mono);
      text-transform: uppercase;
      cursor: pointer;
    }
    .button.secondary { background: #fff; }
    .button.green { background: var(--green); color: #fff; }
    .button:hover, .cv-button:hover, .card:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--line); }

    .home-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.9fr) minmax(285px, .85fr);
      gap: 1.1rem;
      margin-top: 1.1rem;
      align-items: start;
    }
    .panel, .card, .callout, .side-panel {
      border: 2px solid var(--line);
      background: var(--paper);
      box-shadow: var(--soft-shadow);
      position: relative;
    }
    .panel { padding: 1.1rem; }
    .panel.compact { padding: .95rem; }
    .section-title-row {
      display: flex;
      align-items: center;
      gap: .75rem;
      margin-bottom: .9rem;
    }
    .section-title-row h2, .page-title h2 {
      margin: 0;
      font: 950 1.15rem var(--mono);
      letter-spacing: -.055em;
      text-transform: uppercase;
    }
    .line { height: 2px; background: var(--green); flex: 1; opacity: .85; }
    .view-more { font: 900 .75rem var(--mono); color: var(--green); text-transform: uppercase; white-space: nowrap; }

    .summary-card {
      display: grid;
      grid-template-columns: 112px 1fr;
      gap: 1rem;
      align-items: start;
    }
    .portrait {
      aspect-ratio: 1;
      border: 2px solid var(--line);
      background: linear-gradient(135deg, var(--green-soft), #fff 58%, var(--yellow-soft));
      display: grid; place-items: center;
      font: 950 2rem var(--mono);
      box-shadow: 3px 3px 0 var(--line);
    }
    .summary-card h3 { margin: 0 0 .4rem; font: 950 1.18rem var(--mono); letter-spacing: -.05em; }
    .summary-card p { margin: .35rem 0; color: #33332d; }

    .quick-facts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .65rem;
      margin-top: .85rem;
    }
    .fact {
      border: 1.5px solid var(--line);
      background: var(--gray);
      padding: .75rem;
      font-family: var(--mono);
    }
    .fact span { display: block; color: var(--muted); font-size: .68rem; text-transform: uppercase; font-weight: 850; }
    .fact strong { display: block; margin-top: .2rem; font-size: .82rem; }

    .focus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
    .card { padding: .9rem; transition: .16s ease; cursor: pointer; }
    .card .num { font: 950 .72rem var(--mono); display: inline-block; border: 1.5px solid var(--line); padding: .12rem .3rem; background: #fff; }
    .icon {
      width: 44px; height: 44px;
      display: grid; place-items: center;
      border: 2px solid var(--line);
      background: var(--green-soft);
      margin: .7rem 0;
      font: 950 .85rem var(--mono);
    }
    .card:nth-child(2) .icon { background: var(--yellow-soft); }
    .card h3 { margin: 0 0 .4rem; font: 950 1rem var(--mono); letter-spacing: -.05em; }
    .card p { margin: 0; color: #3f4039; font-size: .92rem; }

    .spotlight {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: .9rem;
      align-items: center;
      margin-top: 1rem;
      background: var(--green-dark);
      color: #fff;
      border: 2px solid var(--line);
      box-shadow: var(--soft-shadow);
      padding: 1rem;
    }
    .spotlight h3 { margin: 0 0 .35rem; font: 950 1rem var(--mono); letter-spacing: -.05em; }
    .spotlight p { margin: 0; color: rgba(255,255,255,.86); }
    .spotlight .button { background: var(--yellow); color: var(--ink); white-space: nowrap; }

    .side-stack { display: grid; gap: 1rem; }
    .side-panel { padding: .95rem; }
    .side-panel h3 { margin: 0 0 .75rem; font: 950 .95rem var(--mono); letter-spacing: -.05em; text-transform: uppercase; }
    .status-row { display: flex; justify-content: space-between; gap: .8rem; border-bottom: 1px dashed rgba(16,16,15,.35); padding: .55rem 0; font-family: var(--mono); font-size: .8rem; }
    .status-row:first-of-type { padding-top: 0; }
    .status-row span { color: var(--muted); }
    .status-row strong { text-align: right; }
    .personal-teaser {
      background: linear-gradient(180deg, var(--yellow-soft), #fff);
    }
    .personal-teaser p { margin: .35rem 0 .8rem; color: #33332d; }
    .tiny-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
    .tag { display: inline-flex; align-items:center; border: 1.5px solid var(--line); background: var(--gray); padding: .18rem .45rem; font: 850 .68rem var(--mono); text-transform: uppercase; }
    .tag.yellow { background: var(--yellow-soft); }
    .tag.green { background: var(--green-soft); }


    .news-panel {
      background: linear-gradient(180deg, #fff, var(--green-soft));
      overflow: hidden;
    }
    .news-title-row { display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-bottom:.55rem; }
    .news-title-row h3 { margin: 0; }
    .news-badge {
      border: 1.5px solid var(--line);
      background: var(--yellow);
      padding: .12rem .35rem;
      font: 950 .62rem var(--mono);
      text-transform: uppercase;
    }
    .news-window {
      height: 128px;
      overflow: hidden;
      border: 1.5px solid var(--line);
      background: #fff;
      position: relative;
    }
    .news-window::before, .news-window::after {
      content:"";
      position:absolute;
      left:0; right:0;
      height:22px;
      z-index:2;
      pointer-events:none;
    }
    .news-window::before { top:0; background: linear-gradient(#fff, rgba(255,255,255,0)); }
    .news-window::after { bottom:0; background: linear-gradient(rgba(255,255,255,0), #fff); }
    .news-track { animation: newsScroll 18s linear infinite; }
    .news-panel.paused .news-track { animation-play-state: paused; }
    .news-item {
      display:block;
      min-height: 58px;
      padding: .6rem .7rem;
      border-bottom: 1px dashed rgba(16,16,15,.32);
      font-family: var(--mono);
    }
    .news-item time { display:block; color: var(--green); font-weight: 950; font-size:.68rem; text-transform: uppercase; }
    .news-item span { display:block; margin-top:.18rem; font-weight: 800; font-size:.78rem; line-height:1.35; }
    @keyframes newsScroll {
      from { transform: translateY(0); }
      to { transform: translateY(-50%); }
    }
    .news-actions { display:flex; gap:.45rem; margin-top:.7rem; flex-wrap:wrap; }
    .news-actions .button { min-height: 34px; padding: .45rem .6rem; font-size:.68rem; box-shadow: 2px 2px 0 var(--line); }
    .timeline-list { display: grid; gap: .8rem; }
    .timeline-event {
      display:grid;
      grid-template-columns: 92px 1fr;
      gap: .75rem;
      align-items:start;
      border: 2px solid var(--line);
      background:#fff;
      box-shadow: var(--soft-shadow);
      padding:.85rem;
    }
    .timeline-event time {
      border: 2px solid var(--line);
      background: var(--yellow-soft);
      font: 950 .72rem var(--mono);
      text-align:center;
      padding:.35rem;
    }
    .timeline-event h3 { margin:0 0 .25rem; font: 950 .96rem var(--mono); letter-spacing:-.04em; }
    .timeline-event p { margin:0; color:#393a34; }

    .page-title {
      border: 2px solid var(--line);
      padding: 1.2rem;
      margin-bottom: 1.1rem;
      background: linear-gradient(90deg, var(--paper), var(--green-soft));
    }
    .page-title p { margin: .45rem 0 0; max-width: 760px; color: #36362f; }
    .page-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .page-grid.three { grid-template-columns: repeat(3, 1fr); }
    .deep-card {
      border: 2px solid var(--line);
      background: var(--paper);
      box-shadow: var(--soft-shadow);
      padding: 1rem;
    }
    .deep-card h3 { margin: .1rem 0 .45rem; font: 950 1rem var(--mono); letter-spacing: -.05em; }
    .deep-card p { margin: .35rem 0; color: #393a34; }
    .deep-card ul { margin: .6rem 0 0 1.1rem; padding: 0; color: #393a34; }
    .tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 1rem; }
    .tab {
      border: 2px solid var(--line); background: #fff; padding: .5rem .7rem;
      font: 900 .74rem var(--mono); text-transform: uppercase; cursor: pointer;
    }
    .tab.active { background: var(--yellow); }
    .research-card[data-hidden="true"], .blog-card[data-hidden="true"] { display: none; }
    .pub-list { display: grid; gap: .65rem; }
    .pub-item {
      display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: start;
      border: 2px solid var(--line); padding: .75rem; background: #fff;
    }
    .pub-icon { width: 32px; height: 38px; border: 2px solid var(--line); background: var(--gray); display:grid; place-items:center; font-family: var(--mono); font-weight: 950; }
    .pub-item h3 { margin: 0; font: 950 .95rem var(--mono); letter-spacing: -.04em; }
    .pub-item p { margin: .25rem 0 0; color: var(--muted); font-size: .9rem; }
    .pub-year { font: 950 .8rem var(--mono); color: var(--green); }

    .video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
    .video-card { border: 2px solid var(--line); background: var(--paper); padding: .75rem; box-shadow: var(--soft-shadow); cursor: pointer; }
    .video-frame {
      aspect-ratio: 9/16;
      border: 2px solid var(--line);
      background:
        linear-gradient(180deg, rgba(47,104,67,.22), rgba(245,200,66,.16)),
        repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(16,16,15,.06) 10px, rgba(16,16,15,.06) 11px);
      display: grid; place-items: center; text-align: center;
      font: 950 .78rem var(--mono);
      padding: .6rem;
    }
    .video-card h3 { margin: .65rem 0 .25rem; font: 950 .88rem var(--mono); letter-spacing: -.04em; }
    .video-card p { margin: 0; color: var(--muted); font-size: .84rem; }
    .note { border-left: 5px solid var(--yellow); background: var(--yellow-soft); padding: .8rem 1rem; margin: 1rem 0; color: #33332d; }

    .journey {
      border: 2px solid var(--line);
      padding: 1rem;
      background: var(--paper);
      margin-top: 1rem;
    }
    .journey-line { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; position: relative; }
    .node { border: 2px solid var(--line); background: var(--gray); text-align: center; padding: .7rem .4rem; font: 900 .75rem var(--mono); cursor: pointer; }
    .node.active { background: var(--yellow); }
    .journey-detail { margin: .9rem 0 0; color: #333; }

    footer {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 1rem;
      align-items: center;
      border-top: 2px solid var(--line);
      padding: 1rem 1.25rem;
      font: 800 .75rem var(--mono);
      color: var(--muted);
    }
    .footer-center { text-align: center; color: var(--green); }
    .footer-right { text-align: right; }

    .modal {
      position: fixed; inset: 0; background: rgba(0,0,0,.62); display: none; place-items: center; z-index: 100; padding: 1rem;
    }
    .modal.open { display: grid; }
    .modal-box { width: min(780px, 100%); background: #fff; border: 2px solid var(--line); box-shadow: var(--shadow); padding: 1rem; }
    .modal-top { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-bottom: 2px solid var(--line); padding-bottom: .75rem; margin-bottom: 1rem; }
    .modal-top h3 { margin: 0; font: 950 1rem var(--mono); }
    .close { border: 2px solid var(--line); background: var(--yellow); font: 950 .8rem var(--mono); cursor: pointer; padding: .35rem .55rem; }
    .embed-shell { min-height: 320px; border: 2px dashed var(--line); display:grid; place-items:center; background: var(--gray); text-align:center; padding: 1rem; }
    .embed-shell iframe, .embed-shell video { width: 100%; min-height: 360px; border: 0; }

    @media (max-width: 920px) {
      .site-header { grid-template-columns: 1fr; align-items: start; }
      .nav { justify-content: flex-start; }
      .dropdown-menu { position: static; width: 100%; box-shadow: 2px 2px 0 var(--line); }
      .nav-item { flex-direction: column; align-items: stretch; }
      .cv-button { justify-self: start; }
      .home-grid { grid-template-columns: 1fr; }
      .focus-grid, .page-grid.three { grid-template-columns: 1fr; }
      .page-grid, .video-grid { grid-template-columns: repeat(2, 1fr); }
      .quick-facts { grid-template-columns: 1fr; }
      .summary-card { grid-template-columns: 1fr; }
      footer { grid-template-columns: 1fr; text-align: center; }
      .footer-right { text-align: center; }
    }
    @media (max-width: 620px) {
      body { background: #fff; }
      .shell { margin: 0; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
      .browser-icons { display: none; }
      .browser-bar { grid-template-columns: auto 1fr; }
      main { padding: .85rem; }
      .hero-content { padding: 3rem 1rem; }
      .page-grid, .video-grid, .journey-line, .timeline-event { grid-template-columns: 1fr; }
      .spotlight { grid-template-columns: 1fr; }
    }
  

/* Consistency layer for multi-page build. Visual language intentionally follows khang_dang_news_dropdown_prototype.html. */
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.nav a[aria-current="page"]::after { content:""; position:absolute; left:.72rem; right:.72rem; bottom:.32rem; height:3px; background:var(--yellow); }
.has-dropdown > a { display:inline-flex; align-items:center; gap:.3rem; }
.has-dropdown > a::before { content:"▾"; font-size:.62rem; order:2; opacity:.8; }
.dropdown-menu a { display:block; width:100%; text-align:left; border:1.5px solid transparent; background:var(--paper); padding:.55rem .65rem; font:850 .72rem var(--mono); text-transform:none; }
.dropdown-menu a:hover,.dropdown-menu a:focus { background:var(--yellow-soft); border-color:var(--line); outline:none; }
.dropdown-menu a::after { display:none!important; }
.nav a:focus-visible, .button:focus-visible, .tab:focus-visible, .cv-button:focus-visible, .video-card:focus-visible, .small-link:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.article-page { max-width:900px; margin:0 auto; }
.article-body { border:2px solid var(--line); background:var(--paper); box-shadow:var(--soft-shadow); padding:1.2rem; }
.article-body p { max-width:72ch; }
.article-meta { display:flex; flex-wrap:wrap; gap:.45rem; margin:.8rem 0 1rem; }
.breadcrumb { margin:.4rem 0 1rem; font:850 .75rem var(--mono); text-transform:uppercase; color:var(--green); }
.photo-slot { border:2px solid var(--line); box-shadow:var(--soft-shadow); margin:1rem 0; background:var(--green-soft); }
.photo-slot img { display:block; width:100%; height:auto; }
.pub-actions { display:flex; gap:.45rem; flex-wrap:wrap; margin-top:.65rem; }
.pub-actions .button { min-height:34px; padding:.45rem .6rem; font-size:.68rem; box-shadow:2px 2px 0 var(--line); }
.pub-item[data-hidden="true"], .filterable-card[data-hidden="true"] { display:none; }
.filter-note { color:var(--muted); font-size:.92rem; margin:.5rem 0 1rem; }
.side-panel.compact-list-panel { margin-top:1rem; }
.no-underline { text-decoration:none; }
.deep-card a.stretched { text-decoration:none; }
.deep-card a.stretched:hover h3, .deep-card a.stretched:focus h3 { color:var(--green); text-decoration:underline; text-underline-offset:.18em; }
.profile-link-list { display:grid; gap:.45rem; margin-top:.6rem; }
.profile-link-list a { border:1.5px solid var(--line); background:#fff; padding:.45rem .6rem; font:850 .72rem var(--mono); text-transform:uppercase; }
.profile-link-list a:hover, .profile-link-list a:focus { background:var(--yellow-soft); }
.media-open { margin-top:.7rem; }
details.deep-card summary { cursor:pointer; font:950 1rem var(--mono); }
details.deep-card summary:hover { color:var(--green); }
.source-list li { margin:.55rem 0; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important;} .news-track{transform:none!important;} }

.brand .brand-title { margin:0; font:900 1.05rem var(--mono); letter-spacing:-.045em; }
.hero h1 { margin:0 auto .9rem; max-width:760px; font:950 clamp(2rem,5.6vw,4rem)/.98 var(--mono); letter-spacing:-.08em; }
.page-title h1 { margin:0; font:950 1.15rem var(--mono); letter-spacing:-.055em; text-transform:uppercase; }

.cv-button.active-cv { background: var(--green); color:#fff; }


/* Browser-frame refinement */
body { padding: 12px; }
.shell { border-width: 3px; border-radius: 22px; box-shadow: 7px 7px 0 rgba(16,16,15,.96); }
.browser-bar { background: #ecebe7; padding: .78rem 1.1rem; }
.browser-bar .address { border-radius: 10px; min-height: 34px; display:flex; align-items:center; justify-content:center; }
.browser-bar .browser-icons { letter-spacing: .12em; }
.site-header { padding: 1rem 1.25rem .95rem; }

/* Article thumbnails */
.thumb-frame { border: 2px solid var(--line); background: #fff; box-shadow: var(--soft-shadow); overflow: hidden; }
.thumb-frame img { display:block; width:100%; height:auto; }
.blog-card .thumb-frame { margin-bottom: .85rem; }
.blog-card .thumb-frame img { aspect-ratio: 16/9; object-fit: cover; }
.article-hero-thumb { margin: 1rem 0 1.15rem; }
.article-hero-thumb figcaption { padding: .55rem .75rem; font-size: .88rem; color: var(--muted); border-top: 1.5px solid var(--line); background: #fff; }

/* Scroll gallery */
.gallery-shell { border: 2px solid var(--line); background: linear-gradient(180deg, #fff, var(--green-soft)); padding: .9rem; overflow: hidden; }
.gallery-marquee { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .9rem; align-items:start; height: 78vh; min-height: 780px; max-height: 1120px; overflow: hidden; }
.marquee-column { position: relative; overflow: hidden; min-height: 100%; }
.marquee-track { display:grid; gap: .9rem; will-change: transform; }
.marquee-column:nth-child(odd) .marquee-track { animation: galleryUp 26s linear infinite; }
.marquee-column:nth-child(even) .marquee-track { animation: galleryDown 26s linear infinite; }
.gallery-marquee:hover .marquee-track, .gallery-marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes galleryUp { from { transform: translateY(0); } to { transform: translateY(calc(-50% - .45rem)); } }
@keyframes galleryDown { from { transform: translateY(calc(-50% - .45rem)); } to { transform: translateY(0); } }
.gallery-shell .video-card { padding: .6rem; }
.gallery-shell .video-frame { background: linear-gradient(180deg, rgba(47,104,67,.20), rgba(245,200,66,.14)), repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(16,16,15,.06) 10px, rgba(16,16,15,.06) 11px); }
.gallery-shell .video-card h3 { font-size: .8rem; }
.gallery-shell .video-card p { font-size: .78rem; }
.gallery-caption { margin: .8rem 0 0; color: #3b3d36; font-size: .94rem; }

@media (max-width: 1100px) { .gallery-marquee { grid-template-columns: repeat(2, minmax(0,1fr)); height: auto; max-height: none; min-height: 620px; } }
@media (max-width: 620px) {
  body { padding: 0; }
  .shell { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .gallery-marquee { grid-template-columns: 1fr; min-height: auto; height: auto; }
  .marquee-column, .gallery-shell { overflow: visible; }
  .marquee-column .marquee-track { animation: none !important; }
}


/* No fake browser-window frame: keep the retro academic design without browser chrome. */
body { padding: 0; }
.shell {
  max-width: 1180px;
  margin: 24px auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}
.browser-bar { display: none !important; }
.site-header {
  border: 2px solid var(--line);
  box-shadow: var(--soft-shadow);
  background: rgba(255,255,255,.98);
  margin-bottom: 1.1rem;
}
main { padding: 0; }
footer {
  border: 2px solid var(--line);
  background: var(--paper);
  box-shadow: var(--soft-shadow);
  margin-top: 1.1rem;
}
@media (max-width: 620px) {
  .shell { margin: 0; padding: .75rem; }
  .site-header { margin-bottom: .85rem; }
}


/* Final refinement: solid retro palette, breathing room, no fake browser frame. */
:root {
  --bg: #fffdf7;
  --paper: #ffffff;
  --ink: #10100f;
  --muted: #494a44;
  --yellow: #f5c842;
  --yellow-soft: #fff3c8;
  --green: #2f6843;
  --green-soft: #e8f2e3;
  --green-dark: #17381f;
  --gray: #f3f2ed;
  --shadow: 4px 4px 0 #10100f;
  --soft-shadow: 4px 4px 0 rgba(16,16,15,.18);
}
html, body { overflow-x: hidden; }
body {
  padding: 0 !important;
  background: var(--bg) !important;
  color: var(--ink);
}
.shell {
  max-width: 1180px;
  margin: 24px auto !important;
  padding: 0 .75rem;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}
.browser-bar { display: none !important; }
.site-header {
  background: var(--paper) !important;
  border: 2px solid var(--line);
  box-shadow: var(--soft-shadow);
  margin-bottom: 1.15rem;
  backdrop-filter: none !important;
}
main { padding: 0 !important; }
.hero, .page-title, .personal-teaser, .news-panel, .gallery-shell, .video-frame,
.portrait, .mini-avatar, .spotlight, .photo-slot {
  background-image: none !important;
}
.hero { background: var(--paper) !important; min-height: 340px; }
.hero::before, .hero::after { opacity: .16; }
.page-title { background: var(--paper) !important; }
.personal-teaser { background: var(--yellow-soft) !important; }
.mini-avatar { background: var(--green-soft) !important; }
.portrait { background: var(--green-soft) !important; }
.panel, .card, .deep-card, .side-panel, .pub-item, .timeline-event, .gallery-shell {
  background: var(--paper) !important;
}
.card, .deep-card, .panel, .side-panel, .pub-item, .timeline-event {
  padding: 1.25rem !important;
}
.panel.compact { padding: 1.25rem !important; }
.focus-grid, .page-grid, .pub-list, .side-stack { gap: 1.25rem !important; }
.home-grid { align-items: stretch !important; gap: 1.25rem !important; }
.side-stack {
  display: flex !important;
  flex-direction: column;
  align-self: stretch;
  height: 100%;
}
.side-stack > .news-panel { flex: 1 1 420px; min-height: 420px; }
.news-panel {
  display: flex;
  flex-direction: column;
  border-width: 3px !important;
  box-shadow: 6px 6px 0 var(--line) !important;
  background: var(--yellow-soft) !important;
  position: relative;
  overflow: hidden;
}
.news-panel::before {
  content: "";
  position: absolute;
  inset: .55rem;
  border: 2px dashed rgba(16,16,15,.45);
  pointer-events: none;
}
.news-title-row {
  position: relative;
  z-index: 1;
  background: var(--yellow);
  border: 2px solid var(--line);
  padding: .55rem .65rem;
  margin-bottom: .9rem !important;
}
.news-title-row h3::before { content: "✦ "; }
.news-badge { background: var(--green-dark) !important; color: #fff; }
.news-window {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 260px;
  height: auto !important;
  border: 2px solid var(--line) !important;
  background: var(--paper) !important;
}
.news-window::before, .news-window::after { display: none !important; }
.news-item { padding: .85rem .9rem !important; min-height: 74px !important; }
.news-actions { position: relative; z-index: 1; margin-top: 1rem !important; }
.status-row { gap: 1rem; }
.tiny-tags, .article-meta, .pub-actions, .tabs { gap: .7rem !important; }
.tag {
  padding: .28rem .58rem !important;
  line-height: 1.25;
  margin: .1rem .12rem .1rem 0;
  max-width: 100%;
  white-space: normal;
}
.card p, .deep-card p, .pub-item p, .timeline-event p, .summary-card p, .hero p, .page-title p {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
.card h3, .deep-card h3, .pub-item h3, .timeline-event h3, .hero h1, .page-title h1, .section-title-row h2 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  line-height: 1.18;
}
.pub-item { grid-template-columns: auto minmax(0, 1fr) auto !important; }
.pub-year { white-space: nowrap; }
.spotlight { background: var(--green-dark) !important; }
.button, .cv-button { background: var(--yellow) !important; }
.button.secondary { background: var(--paper) !important; }
.button.green { background: var(--green-dark) !important; color: #fff; }
.line { background: var(--green) !important; }
footer {
  border: 2px solid var(--line) !important;
  background: var(--paper) !important;
  box-shadow: var(--soft-shadow);
  margin-top: 1.25rem;
}
.media-card { background: var(--green-soft) !important; }
.media-card .button { margin-top: .8rem; width: 100%; }

/* Gallery: local muted previews, no exposed source links. */
.gallery-shell {
  background: var(--paper) !important;
  padding: 1.1rem !important;
}
.video-preview {
  width: 100%;
  aspect-ratio: 9 / 16;
  display: block;
  object-fit: cover;
  border: 2px solid var(--line);
  background: var(--gray);
}
.video-card { cursor: pointer; }
.video-card:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.gallery-shell .video-card h3 { font-size: .88rem !important; line-height: 1.2; }
.video-modal-player {
  width: min(420px, 100%);
  max-height: 72vh;
  display: block;
  margin: .75rem auto 0;
  border: 2px solid var(--line);
  background: #000;
}
.modal-box { max-height: 92vh; overflow: auto; }

@media (max-width: 1100px) {
  .home-grid { grid-template-columns: 1fr !important; }
  .side-stack > .news-panel { flex-basis: auto; min-height: 320px; }
}
@media (max-width: 920px) {
  .site-header { grid-template-columns: 1fr !important; }
  .focus-grid, .page-grid.three, .page-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 620px) {
  .shell { margin: 0 !important; padding: .75rem !important; }
  .card, .deep-card, .panel, .side-panel, .pub-item, .timeline-event { padding: 1rem !important; }
  .gallery-marquee { grid-template-columns: 1fr !important; min-height: auto !important; height: auto !important; }
  .marquee-column, .gallery-shell { overflow: visible !important; }
  .marquee-column .marquee-track { animation: none !important; }
}


/* Refinement: sticky header, clearer tag/title spacing, and blog dates. */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}
.deep-card .tag,
.card .tag,
.article-meta .tag {
  margin-bottom: .55rem !important;
}
.deep-card .tag + h3,
.card .tag + h3,
.article-meta + h1 {
  margin-top: .85rem !important;
}
.blog-card .tag + .blog-date,
.blog-card .blog-date + h3 {
  margin-top: .72rem !important;
}
.blog-date {
  margin: .65rem 0 .75rem !important;
  color: var(--green);
  font: 850 .78rem var(--mono);
  text-transform: uppercase;
  letter-spacing: .01em;
}
.article-meta {
  margin-top: 1rem !important;
  margin-bottom: 1.15rem !important;
}
.article-date {
  margin: .85rem 0 0 !important;
  color: var(--green);
  font: 850 .82rem var(--mono);
  text-transform: uppercase;
}
.nav { row-gap: .4rem; }
.dropdown-menu { z-index: 1200 !important; }


/* True fixed header correction: stays visible for the whole page, not just within the wrapper. */
:root { --fixed-header-height: 104px; }
html { scroll-padding-top: calc(var(--fixed-header-height) + 18px); }
.shell { padding-top: calc(var(--fixed-header-height) + 1rem) !important; }
.site-header {
  position: fixed !important;
  top: .75rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(calc(100% - 1.5rem), 1180px) !important;
  margin: 0 !important;
  z-index: 5000 !important;
}
.dropdown-menu { z-index: 5100 !important; }
@media (max-width: 920px) {
  :root { --fixed-header-height: 168px; }
}
@media (max-width: 620px) {
  :root { --fixed-header-height: 232px; }
  .site-header { top: .5rem !important; width: calc(100% - 1rem) !important; }
  .shell { padding-top: calc(var(--fixed-header-height) + .75rem) !important; }
}