:root { --ar-bg:#0f1010; --ar-surface:#1b1c1a; --ar-line:#493d2c; --ar-muted:#a6a095; --ar-text:#eae4d8; --ar-gold:#cca34d; --ar-dark-gold:#967439; }
body.articles-reference-page { margin:0; color:var(--ar-text); background:#0f1010 url('./black-gold-marble.webp') center top/cover fixed; font-family:Manrope,Arial,sans-serif; }
.articles-reference-page *, .articles-reference-page *::before, .articles-reference-page *::after { box-sizing:border-box; }
.articles-reference-page .page-shell { width:100%; max-width:none; margin:0; padding:0; }
.articles-reference-page main { display:block; }
.articles-reference-page .articles-hero, .articles-reference-page .articles-catalog { animation:none; }
.articles-reference-page .articles-empty { margin:24px 0; padding:24px; border:1px solid #493d2c; border-radius:11px; text-align:center; color:var(--ar-muted); background:#141514; }
.articles-reference-page .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (min-width:1201px) {
  .articles-reference-page { --au:min(.05980861244vw,1px); }
  body.articles-reference-page .page-shell:has(> .topbar) { padding-top:0!important; }
  body.articles-reference-page .page-shell>.topbar { position:relative; inset:auto; display:block; width:calc(1382 * var(--au)); height:calc(80 * var(--au)); min-height:0; margin:0 auto; padding:0!important; border:1px solid #493d2ca8; border-radius:calc(18 * var(--au)); background:#0d1010f2; box-shadow:inset 0 1px 2px #ffffff06,0 12px 35px #0008; transform:none; }
  .articles-reference-page .topbar::after { content:none; }
  .articles-reference-page .topbar .brand { position:absolute; left:calc(43 * var(--au)); top:calc(16 * var(--au)); display:flex; gap:0!important; width:calc(245 * var(--au)); height:calc(48 * var(--au)); font:700 calc(31 * var(--au))/calc(44 * var(--au)) 'Times New Roman',Times,serif; }
  .articles-reference-page .brand::before { display:none; }
  .articles-reference-page .topbar .brand__logo { width:calc(62 * var(--au))!important; height:calc(64 * var(--au))!important; flex:0 0 auto!important; margin:calc(-9 * var(--au)) calc(2 * var(--au)) 0 calc(-8 * var(--au)); object-fit:contain; }
  .articles-reference-page .topbar .brand__name { color:var(--ar-text)!important; letter-spacing:0!important; }
  .articles-reference-page .topbar .brand .brand__name { transform:translateX(calc(-5 * var(--au))); }
  .articles-reference-page .topbar .brand__name span { margin-left:0!important; color:var(--ar-gold)!important; }
  .articles-reference-page .topbar .nav { position:absolute; left:calc(422 * var(--au)); top:calc(20 * var(--au)); display:flex; flex-wrap:nowrap; gap:calc(47 * var(--au)); margin:0!important; font:500 calc(15 * var(--au))/calc(40 * var(--au)) Manrope,Arial,sans-serif; white-space:nowrap; }
  .articles-reference-page .topbar .nav a { min-height:0; padding:0; color:var(--ar-text); }
  .articles-reference-page .topbar .nav a.is-active { position:relative; color:var(--ar-gold); }
  .articles-reference-page .topbar .nav a.is-active::after { content:''; position:absolute; left:50%; bottom:calc(-3 * var(--au)); width:calc(26 * var(--au)); height:2px; transform:translateX(-50%); background:var(--ar-gold); }
  .articles-reference-page .topbar>.button { position:absolute; left:calc(1170 * var(--au)); top:calc(19 * var(--au)); display:flex; align-items:center; justify-content:center; gap:calc(17 * var(--au)); width:calc(180 * var(--au)); height:calc(42 * var(--au)); min-width:0; min-height:0; padding:0; border-radius:calc(6 * var(--au)); font-size:calc(14 * var(--au)); font-weight:600; }
  .articles-reference-page .topbar>.button span { font-size:calc(21 * var(--au)); font-weight:400; }

  .articles-reference-page .articles-hero { position:relative; display:block; overflow:hidden; width:calc(1382 * var(--au)); height:calc(331 * var(--au)); min-height:0; margin:calc(12 * var(--au)) auto 0; padding:0; border:1px solid #493d2ca8; border-radius:calc(16 * var(--au)); background:linear-gradient(90deg,#1b1c1af5 0 52%,#121413ed 78%),url('./black-gold-marble.webp') center/cover; box-shadow:inset 0 1px 2px #ffffff05; }
  .articles-reference-page .articles-hero::before { content:''; position:absolute; left:calc(-115 * var(--au)); top:calc(25 * var(--au)); width:calc(155 * var(--au)); height:calc(285 * var(--au)); border:1px solid #cca34d5c; border-radius:50%; }
  .articles-reference-page .hero__copy { position:absolute; left:calc(64 * var(--au)); top:calc(35 * var(--au)); width:calc(640 * var(--au)); padding:0; z-index:2; }
  .articles-reference-page .hero__copy h1 { margin:0; color:var(--ar-text); font:500 calc(68 * var(--au))/calc(70 * var(--au)) 'Cormorant Garamond',Georgia,serif; letter-spacing:0; }
  .articles-reference-page .hero__copy .lead { margin:calc(23 * var(--au)) 0 0; color:#d1ccc2; font-size:calc(16 * var(--au)); line-height:calc(25 * var(--au)); }
  .articles-reference-page .articles-count { display:flex; align-items:center; gap:calc(14 * var(--au)); margin-top:0; color:var(--ar-gold); font-size:calc(13 * var(--au)); transform:translateY(calc(-16 * var(--au))); }
  .articles-reference-page .articles-count>span { display:grid; place-items:center; width:calc(37 * var(--au)); height:calc(37 * var(--au)); border:1px solid #cca34d70; border-radius:50%; font-size:calc(20 * var(--au)); }
  .articles-reference-page .articles-count strong { font-weight:500; }
  .articles-reference-page .articles-column { position:absolute; left:calc(680 * var(--au)); bottom:0; width:calc(195 * var(--au)); height:calc(280 * var(--au)); background:url('./hero-marble-statesman.webp') right top/calc(1120 * var(--au)) auto no-repeat; filter:sepia(.3) brightness(.55); opacity:.82; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 100%); mask-composite:intersect; }
  .articles-reference-page .articles-column::before { content:''; position:absolute; left:calc(-100 * var(--au)); top:calc(30 * var(--au)); width:calc(160 * var(--au)); height:calc(250 * var(--au)); background:radial-gradient(ellipse,#cca34d12,transparent 68%); border-radius:50%; }
  .articles-reference-page .articles-useful { position:absolute; left:calc(861 * var(--au)); top:calc(16 * var(--au)); width:calc(485 * var(--au)); height:calc(299 * var(--au)); margin:0; padding:calc(19 * var(--au)) calc(24 * var(--au)); border:1px solid #493d2ca8; border-radius:calc(16 * var(--au)); background:#1b1c1a; box-shadow:inset 0 1px 2px #ffffff05; z-index:3; }
  .articles-reference-page .articles-useful h2 { margin:0 0 calc(6 * var(--au)); color:var(--ar-gold); font:600 calc(23 * var(--au))/calc(28 * var(--au)) 'Cormorant Garamond',Georgia,serif; }
  .articles-reference-page .articles-useful ul { margin:0; padding:0; list-style:none; }
  .articles-reference-page .articles-useful li { position:relative; min-height:calc(61 * var(--au)); padding:calc(12 * var(--au)) 0 calc(10 * var(--au)) calc(40 * var(--au)); border-bottom:1px solid #493d2c9c; color:#d0ccc4; font-size:calc(13 * var(--au)); line-height:calc(19 * var(--au)); }
  .articles-reference-page .articles-useful li:last-child { border-bottom:0; }
  .articles-reference-page .articles-useful li>span { position:absolute; left:0; top:calc(14 * var(--au)); color:var(--ar-gold); font-size:calc(25 * var(--au)); line-height:1; }

  .articles-reference-page .articles-catalog { width:calc(1318 * var(--au)); margin-left:calc((100vw - (1318 * var(--au))) / 2 - (2 * var(--au))); margin-right:auto; padding:calc(17 * var(--au)) 0 calc(60 * var(--au)); }
  .articles-reference-page .articles-toolbar { display:grid; grid-template-columns:calc(790 * var(--au)) calc(510 * var(--au)); gap:calc(18 * var(--au)); height:calc(39 * var(--au)); margin:0 0 calc(15 * var(--au)); }
  .articles-reference-page .articles-filters { display:flex; align-items:center; gap:calc(11 * var(--au)); overflow:hidden; }
  .articles-reference-page .articles-filters button { flex:0 0 auto; height:calc(35 * var(--au)); min-height:0; padding:0 calc(21 * var(--au)); border:1px solid #493d2ca8; border-radius:calc(5 * var(--au)); color:#d3cec5; background:#151716e8; font:400 calc(12 * var(--au))/1 Manrope,Arial,sans-serif; }
  .articles-reference-page .articles-filters button.is-active { border-color:#cca34daa; color:#17130b; background:linear-gradient(135deg,#e1bb5d,#b88927); box-shadow:inset 0 1px 0 #fff5; }
  .articles-reference-page .articles-search { position:relative; display:block; height:calc(39 * var(--au)); }
  .articles-reference-page .articles-search input { width:100%; height:100%; padding:0 calc(48 * var(--au)) 0 calc(23 * var(--au)); border:1px solid #493d2ca8; border-radius:calc(6 * var(--au)); outline:0; color:var(--ar-text); background:#171918ed; font-size:calc(13 * var(--au)); }
  .articles-reference-page .articles-search input:focus { border-color:var(--ar-gold); box-shadow:0 0 0 3px #cca34d1c; }
  .articles-reference-page .articles-search>span:last-child { position:absolute; right:calc(14 * var(--au)); top:50%; transform:translateY(-50%); color:var(--ar-gold); font-size:calc(23 * var(--au)); }
  .articles-reference-page .article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(15 * var(--au)) calc(18 * var(--au)); }
  .articles-reference-page .article-card { display:block; overflow:hidden; min-height:0; height:calc(245 * var(--au)); margin:0; padding:0; border:1px solid #493d2ca8; border-radius:calc(11 * var(--au)); background:#1b1c1a; box-shadow:inset 0 1px 2px #ffffff05; animation:none; transform:none; }
  .articles-reference-page .article-card:hover { transform:none; border-color:#cca34d99; box-shadow:inset 0 1px 2px #ffffff05; }
  .articles-reference-page .article-card:nth-child(2) { background:#1b1c1a!important; border-color:#493d2ca8!important; }
  .articles-reference-page .article-card:nth-child(2) h3 { color:var(--ar-text)!important; }
  .articles-reference-page .article-card:nth-child(2) p { color:#c3beb5!important; }
  .articles-reference-page .article-card:nth-child(2) .article-meta { color:var(--ar-gold)!important; }
  .articles-reference-page .article-card__visual { position:relative; display:block; height:calc(105 * var(--au)); margin:0; overflow:hidden; border:0; border-bottom:1px solid #493d2c; border-radius:0; background-color:#0f1010!important; background-size:cover!important; }
  .articles-reference-page .article-card__visual::before { content:''; position:absolute; inset:0; border:0; background:linear-gradient(90deg,#07080855,transparent 60%); }
  .articles-reference-page .article-card__visual::after { content:none; }
  .articles-reference-page .article-card__visual>span { position:absolute; left:calc(23 * var(--au)); top:calc(16 * var(--au)); z-index:2; display:grid; place-items:center; width:calc(40 * var(--au)); height:calc(36 * var(--au)); border:1px solid #cca34d82; border-radius:calc(5 * var(--au)); color:var(--ar-gold)!important; background:#171714a8; font:500 calc(24 * var(--au))/1 'Cormorant Garamond',Georgia,serif; text-shadow:none; }
  .articles-reference-page .article-card__visual--career { background-image:url('./article-cover-statue.webp')!important; background-position:70% 30%!important; }
  .articles-reference-page .article-card__visual--reply { background-image:linear-gradient(#15120b63,#15120b63),url('./article-cover-marble.webp')!important; background-position:right 65%!important; filter:sepia(.45) brightness(.48); }
  .articles-reference-page .article-card__visual--start { background-image:url('./article-cover-statue.webp')!important; background-position:92% 25%!important; transform:scaleX(-1); }
  .articles-reference-page .article-card__visual--start>span { transform:scaleX(-1); left:auto; right:calc(23 * var(--au)); }
  .articles-reference-page .article-card__visual--architecture,.articles-reference-page .article-card__visual--arch { background-image:linear-gradient(#17130a77,#17130a77),url('./article-cover-marble.webp')!important; background-position:right 72%!important; filter:sepia(.55) brightness(.5); }
  .articles-reference-page .article-card__visual--laurel { background-image:linear-gradient(90deg,#0c0d0d 20%,transparent),url('./hero-marble-statesman.webp')!important; background-position:56% 32%!important; }
  .articles-reference-page .article-card__body { height:calc(140 * var(--au)); padding:calc(9 * var(--au)) calc(23 * var(--au)); }
  .articles-reference-page .article-meta { display:flex; justify-content:space-between; gap:8px; height:calc(16 * var(--au)); color:var(--ar-gold); font-size:calc(11 * var(--au)); line-height:calc(14 * var(--au)); }
  .articles-reference-page .article-meta time { color:#c7c2b9; }
  .articles-reference-page .article-card h3 { margin:calc(2 * var(--au)) 0 calc(4 * var(--au)); color:var(--ar-text)!important; font:600 calc(18 * var(--au))/calc(18 * var(--au)) 'Cormorant Garamond',Georgia,serif; text-wrap:nowrap; }
  .articles-reference-page .article-card h3::first-letter { color:inherit; }
  .articles-reference-page .article-card h3 a { color:inherit; }
  .articles-reference-page .article-card p { margin:0; color:#c3beb5!important; font-size:calc(12 * var(--au)); line-height:calc(16 * var(--au)); }
  .articles-reference-page .article-card__body>a { display:flex; justify-content:space-between; align-items:center; margin-top:calc(5 * var(--au)); color:var(--ar-gold); font-size:calc(12 * var(--au)); }
  .articles-reference-page .article-card__body>a span { font-size:calc(20 * var(--au)); line-height:1; }
}

@media (max-width:1200px) {
  .articles-reference-page .page-shell { width:100%; padding:0 24px; }
  body.articles-reference-page .page-shell:has(> .topbar) { padding-top:0!important; }
  body.articles-reference-page .page-shell>.topbar { position:relative; inset:auto; margin:0; transform:none; }
  .articles-reference-page .articles-hero { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:12px; padding:42px; border-radius:16px; background:linear-gradient(90deg,#121413f3,#0c0e0de8),url('./black-gold-marble.webp') center/cover; }
  .articles-reference-page .articles-column { display:none; }
  .articles-reference-page .hero__copy h1 { margin:0; font:500 clamp(48px,7vw,68px)/.96 'Cormorant Garamond',Georgia,serif; }
  .articles-reference-page .hero__copy .lead { margin-top:22px; }
  .articles-reference-page .hero__copy br { display:none; }
  .articles-reference-page .articles-count { display:flex; align-items:center; gap:12px; margin-top:12px; color:var(--ar-gold); }
  .articles-reference-page .articles-useful { padding:24px; border-radius:14px; }
  .articles-reference-page .articles-useful h2 { margin:0 0 12px; color:var(--ar-gold); }
  .articles-reference-page .articles-useful ul { margin:0; padding:0; list-style:none; }
  .articles-reference-page .articles-useful li { padding:10px 0; border-bottom:1px solid #493d2c; font-size:13px; }
  .articles-reference-page .articles-useful li>span { margin-right:10px; color:var(--ar-gold); }
  .articles-reference-page .articles-catalog { padding:18px 0 56px; }
  .articles-reference-page .articles-toolbar { display:grid; grid-template-columns:1fr; gap:12px; }
  .articles-reference-page .articles-filters { display:flex; gap:10px; overflow-x:auto; padding-bottom:2px; }
  .articles-reference-page .articles-filters button { flex:0 0 auto; min-height:44px; padding:0 18px; }
  .articles-reference-page .articles-search { position:relative; }
  .articles-reference-page .articles-search input { width:100%; min-height:48px; padding:0 48px 0 16px; }
  .articles-reference-page .articles-search>span:last-child { position:absolute; right:16px; top:12px; color:var(--ar-gold); }
  .articles-reference-page .article-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
  .articles-reference-page .article-card { overflow:hidden; min-height:0; padding:0; border-radius:12px; }
  .articles-reference-page .article-card__visual { position:relative; display:block; height:160px; margin:0; background-size:cover!important; }
  .articles-reference-page .article-card__visual>span { position:absolute; left:20px; top:18px; padding:6px 10px; border:1px solid #cca34d82; color:var(--ar-gold); background:#171714a8; }
  .articles-reference-page .article-card__body { padding:16px 20px 20px; }
  .articles-reference-page .article-meta { display:flex; justify-content:space-between; color:var(--ar-gold); font-size:12px; }
  .articles-reference-page .article-card h3 { margin:8px 0; color:var(--ar-text)!important; font-size:24px; line-height:1; }
  .articles-reference-page .article-card p { color:#c3beb5!important; font-size:13px; }
  .articles-reference-page .article-card__body>a { display:flex; justify-content:space-between; margin-top:12px; color:var(--ar-gold); }
}
@media (max-width:768px) {
  .articles-reference-page .page-shell { padding:0 14px; }
  .articles-reference-page .articles-hero { grid-template-columns:1fr; padding:30px 24px; }
  .articles-reference-page .hero__copy h1 { font-size:52px; }
  .articles-reference-page .articles-useful { margin:0; }
  .articles-reference-page .article-grid { grid-template-columns:1fr; }
}
@media (max-width:420px) {
  .articles-reference-page .page-shell { padding:0 10px; }
  .articles-reference-page .articles-hero { padding:28px 16px; }
  .articles-reference-page .hero__copy h1 { font-size:44px; }
  .articles-reference-page .hero__copy .lead { font-size:14px; }
  .articles-reference-page .articles-useful { padding:18px; }
  .articles-reference-page .article-card__visual { height:145px; }
  .articles-reference-page .article-card h3 { font-size:22px; }
}
@media (prefers-reduced-motion:reduce) { .articles-reference-page * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
