.detail-header { padding: 22px 0; border-bottom: 1px solid var(--border); background: var(--bg-primary); }
.detail-header .container { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.detail-brand { font-size: 1.2rem; font-weight: 850; letter-spacing: -.04em; }
.detail-brand span { color: var(--accent); }
.detail-header nav { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: .86rem; color: #c4cbd7; }
.detail-hero { padding: 68px 0 56px; background: radial-gradient(ellipse at 85% 20%,#ff6b3517,transparent 60%); }
.detail-breadcrumb { font-size: .8rem; color: #a5afc0; margin-bottom: 30px; }
.detail-breadcrumb a { text-decoration: underline; text-underline-offset: 4px; }
.detail-hero h1 { font-size: clamp(2rem,4.5vw,3.5rem); line-height: 1.25; max-width: 950px; letter-spacing: -.045em; margin: 18px 0 22px; }
.detail-hero .lead { font-size: clamp(1rem,1.6vw,1.2rem); line-height: 1.9; color: #b7c1d0; max-width: 850px; margin-bottom: 28px; }
.detail-content { padding: 56px 0; }
.detail-columns { display: grid; grid-template-columns: minmax(0,2fr) minmax(240px,1fr); gap: 48px; align-items: start; }
.detail-article { min-width: 0; }
.detail-article section { margin-bottom: 40px; }
.detail-article h2 { font-size: 1.55rem; line-height: 1.5; margin-bottom: 16px; letter-spacing: -.03em; }
.detail-article p, .detail-article li { color: #b2bdce; font-size: 1rem; line-height: 1.95; }
.detail-article p + p { margin-top: 14px; }
.detail-article ul { padding-left: 22px; list-style: disc; }
.detail-article li + li { margin-top: 8px; }
.detail-aside { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.detail-aside h2 { font-size: 1.15rem; margin-bottom: 16px; }
.detail-aside p { font-size: .9rem; color: #b2bdce; line-height: 1.9; }
.detail-aside .btn-primary { display: flex; margin-top: 22px; padding: 14px 18px; font-size: .95rem; }
.detail-related { padding: 55px 0 70px; border-top: 1px solid var(--border); }
.detail-related h2 { margin-bottom: 24px; font-size: 1.7rem; }
.detail-projects { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.detail-project { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); min-width: 0; }
.detail-project img { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: contain; object-position: center; background: var(--bg-secondary); }
.detail-project-copy { padding: 22px; }
.detail-project small { color: #ff986d; font-size: .75rem; }
.detail-project h2, .detail-project h3 { font-size: 1.1rem; margin: 8px 0 12px; line-height: 1.5; }
.detail-project p { font-size: .88rem; color: #aeb9ca; line-height: 1.8; }
.detail-project a { color: #ff986d; display: inline-block; margin-top: 16px; font-size: .87rem; }
.detail-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.detail-links a { padding: 12px 18px; border: 1px solid var(--border); border-radius: 10px; color: #d1d8e4; font-size: .9rem; }
.detail-footer { padding: 40px 0; border-top: 1px solid var(--border); color: #aeb9ca; font-size: .88rem; line-height: 1.9; }
.detail-footer strong { color: white; }
.detail-footer a { text-decoration: underline; text-underline-offset: 3px; }
@media(max-width: 768px) {
  .detail-header .container { align-items: flex-start; flex-direction: column; gap: 12px; }
  .detail-header nav { gap: 12px 20px; }
  .detail-hero, .detail-content { padding-block: 40px; text-align: left; }
  .detail-columns { grid-template-columns: 1fr; gap: 16px; }
  .detail-article h2 { font-size: 1.3rem; }
  .detail-article p, .detail-article li { font-size: .94rem; }
  .detail-related { text-align: left; padding-block: 40px; }
  .detail-projects { grid-template-columns: 1fr; }
  .detail-hero .btn-primary { white-space: normal; }
  .detail-footer { text-align: left; }
}