/* Full material pages. The catalogue and home page keep their own styles. */
.article-page { --article-ink:#24282b; --article-muted:#76736c; --article-line:#e5e0d7; --article-accent:#c56a29; color:var(--article-ink); min-width:0; }
.article-page *, .article-lightbox * { box-sizing:border-box; }
.article-page [hidden], .article-lightbox [hidden] { display:none!important; }
.article-page :is(a,button,summary,input):focus-visible, .article-lightbox :is(button,a):focus-visible { outline:3px solid #d87c35; outline-offset:4px; }
.article-page :is(section,nav,[id]) { scroll-margin-top:24px; }
.article-page .article-header { padding:7px 2px 0; }
.article-page .article-back { display:inline-flex; align-items:center; gap:8px; color:#827569; font-size:12px; font-weight:500; text-decoration:none; margin-bottom:25px; }
.article-page .article-back:hover { color:#b45b1b; }
.article-page .article-kicker { color:#ac6a3a; text-transform:uppercase; letter-spacing:1.7px; font-size:9px; font-weight:700; line-height:1.6; margin:0 0 11px; }
.article-page .article-header h1 { font-size:clamp(27px,2.65vw,38px)!important; line-height:1.16!important; letter-spacing:-1px; font-weight:750; color:#202529; margin:0 0 20px!important; max-width:830px; overflow-wrap:anywhere; }
.article-badges { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:21px; }
.article-badges:empty { display:none; }
.article-badges>span { background:#f5f3ee; border:1px solid #e8e3d9; border-radius:6px; padding:5px 9px; color:#7c7062; font-size:10px; line-height:1.5; }
.article-page .material-full-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:15px; padding:15px 0 21px; margin:0; border:0; border-top:1px solid #eee9e0; }
.article-page .material-stats { gap:18px; font-size:11px; color:#8e8479; }
.article-page .material-stats .modern-icon { width:15px; height:15px; }
.article-page .material-tools { gap:8px; }
.article-page .material-tools button { min-height:36px; font-size:11px; padding:8px 11px; border-radius:7px; }
.article-page .article-edit { display:inline-block; font-size:11px; margin-bottom:12px; }
.article-page .article-nav { display:flex; flex-wrap:wrap; gap:5px; padding:8px; margin:0 0 26px; background:#f4f2ec; border:1px solid #e5dfd5; border-radius:10px; }
.article-page .article-nav>a { padding:10px 13px; color:#6c665e; font-size:11px; font-weight:600; line-height:1.4; text-decoration:none; border:1px solid transparent; border-radius:6px; }
.article-page .article-nav>a:hover, .article-page .article-nav>a:focus-visible { background:white; color:#a75921; border-color:#e6d5c5; }
.article-page .article-nav>a[href="#article-download"] { color:#ad581b; background:#fff4e7; border-color:#f2dcc5; }
.article-page .article-panel { margin:0 0 24px; padding:25px; border:1px solid var(--article-line); border-radius:13px; background:#fff; min-width:0; overflow-wrap:anywhere; }
.article-page .article-section-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; margin:0 0 21px; }
.article-page .article-section-heading h2 { margin:0!important; font-size:22px!important; font-weight:700; line-height:1.25; color:#272b2d; letter-spacing:-.45px; }
.article-page .article-section-heading .article-kicker { margin-bottom:7px; font-size:8px; }
.article-page .article-section-heading>.modern-icon { width:24px; height:24px; color:#bf8b63; }
.article-page .article-gallery { padding:19px; background:#f9f8f5; }
.article-gallery .article-section-heading { margin:3px 3px 17px; }
.article-gallery-counter { flex-shrink:0; font-size:11px; color:#6b6962; font-variant-numeric:tabular-nums; background:white; border:1px solid #e6e1d8; border-radius:7px; padding:6px 10px; min-width:48px; text-align:center; }
.article-gallery-counter:empty { display:none; }
.article-gallery-stage { position:relative; background:#171b1d; border-radius:9px; overflow:hidden; }
.article-gallery-stage>a { display:block; position:relative; cursor:zoom-in; aspect-ratio:16/10; background:#171b1d!important; }
.article-gallery-stage #full-photo { display:block; position:static; width:100%!important; max-width:100%!important; height:100%!important; object-fit:contain; margin:0!important; border:0; border-radius:0; }
.article-gallery-zoom { position:absolute; right:13px; bottom:13px; display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid #ffffff30; border-radius:7px; background:#161b22c9; color:#fff; font-size:10px; pointer-events:none; backdrop-filter:blur(6px); }
.article-gallery-zoom .modern-icon { width:14px; height:14px; }
.article-gallery-stage>button { position:absolute; top:50%; z-index:2; transform:translateY(-50%); display:grid; place-items:center; width:39px; height:48px; padding:0; border:1px solid #ffffff30; border-radius:8px; color:white; background:#151b22cc; cursor:pointer; font-size:21px; backdrop-filter:blur(6px); }
.article-gallery-stage>button:hover { background:#bf6c32; }
.article-gallery-prev { left:12px; }
.article-gallery-next { right:12px; }
.article-gallery-thumbs { display:flex; align-items:center; gap:8px; margin-top:12px; padding:3px 2px 9px; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; scrollbar-color:#c8ac90 #e9e5dd; }
.article-gallery-thumbs>a { display:block; position:relative; flex:0 0 87px; width:87px; height:58px; border:2px solid transparent; border-radius:6px; overflow:hidden; background:#e5e1da; opacity:.72; }
.article-gallery-thumbs>a:hover { opacity:1; }
.article-gallery-thumbs>a.is-active { border-color:#d47c3d; opacity:1; box-shadow:0 0 0 2px #d47c3d20; }
.article-gallery-thumbs img { display:block; width:100%!important; height:100%!important; object-fit:cover; }
.article-page .article-gallery-hint { font-size:10px; line-height:1.6; color:#888078; margin:9px 2px 0; }
.article-page .article-gallery-status { font-size:11px; color:#986231; margin:6px 2px 0; line-height:1.6; }
.article-gallery-status:empty { display:none; }
.article-page .article-download { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:25px; padding:26px; background:radial-gradient(ellipse at top left,#3d3930,transparent 70%),#23292b; color:white; border:1px solid #353b3d; border-radius:13px; margin:0 0 24px; }
.article-download h2 { color:#f6f4ed; font-size:25px!important; margin:0 0 10px; letter-spacing:-.5px; }
.article-download .article-kicker { color:#d7a378; }
.article-download p:not(.article-kicker) { margin:0; font-size:11px; color:#a8b0ae; line-height:1.7; }
.article-download-actions { display:grid; gap:11px; }
.article-page a.article-download-primary { display:flex; align-items:center; justify-content:center; gap:13px; min-height:62px; padding:14px 18px; border:1px solid #f6a05c; border-radius:9px; background:#f59a53!important; color:#2a2926!important; text-decoration:none; line-height:1.45; font-size:14px; font-weight:700; }
.article-page a.article-download-primary:hover { background:#ffb06e!important; }
.article-download-primary .modern-icon:first-child { width:22px; height:22px; }
.article-download-primary .modern-icon:last-child { width:16px; height:16px; margin-left:auto; }
.article-download-primary span { flex:1; }
.article-download-primary small { display:block; font-size:10px; font-weight:400; color:#664a34; margin-top:2px; }
.article-page a.article-download-mirror { display:flex; align-items:center; justify-content:center; gap:8px; min-height:34px; color:#b4c0bd; font-size:10px; text-decoration:none; }
.article-download-mirror .modern-icon { width:13px; height:13px; }
.article-page a.article-download-mirror:hover { color:#ffb177; }
.article-page section.article-description { border-top:3px solid #d79a65; }
.article-page .article-cover img { display:block; max-width:100%; height:auto; border-radius:8px; margin:auto; }
.article-page .article-video iframe { display:block; width:100%; height:auto; aspect-ratio:16/9; border:0; border-radius:8px; }
.article-page :is(.article-note,.article-installation) { font-size:13px; line-height:1.8; color:#79736a; }
.article-page :is(.article-note,.article-installation) a { color:#a35d28; }
.article-prose, .article-page [data-article-body] { color:#66665e; font-size:14px; line-height:1.95; text-align:left; overflow-wrap:anywhere; }
.article-prose p, .article-page [data-article-body]>p { margin:0 0 18px; }
.article-page [data-article-body]>p:first-child { color:#454b4b; font-size:15px; line-height:1.9; }
.article-page [data-article-body]>:last-child { margin-bottom:0; }
.article-page [data-article-body] :is(h2,h3,h4) { color:#303633; margin:25px 0 13px; line-height:1.4; }
.article-page [data-article-body] strong { color:#414941; font-weight:650; }
.article-page [data-article-body] a, .article-answer a { color:#a85b21; text-underline-offset:3px; }
.article-page [data-article-body] :is(img,video,iframe) { max-width:100%; border-radius:8px; }
.article-page [data-article-body] img { height:auto; }
.article-page [data-article-body] :is(ul,ol) { padding-left:22px; margin:15px 0; }
.article-page [data-article-body] li { margin:6px 0; }
.article-page [data-article-body] blockquote { margin:20px 0; padding:18px 21px; border-left:3px solid #d79a65; background:#f8f5ee; border-radius:0 8px 8px 0; }
.article-page [data-article-body] table { display:block; overflow-x:auto; max-width:100%; }
.article-specs { display:grid; grid-template-columns:minmax(0,1fr); gap:0; margin:0; }
.article-specs>div { display:grid; grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr); align-items:center; gap:20px; padding:14px 2px; border-bottom:1px solid #ede9e0; font-size:12px; line-height:1.65; }
.article-specs>div:last-child { border-bottom:0; padding-bottom:0; }
.article-specs>div:first-child { padding-top:0; }
.article-specs dt { display:flex; align-items:center; gap:12px; color:#84796b; font-weight:400; }
.article-spec-icon { display:block; flex:0 0 18px; width:18px; height:18px; color:#b58153; fill:none; }
.article-specs dd a { color:#9e5824; text-decoration:none; }
.article-specs dd a:hover { color:#6f3e1b; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:420px) { .article-specs>div { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:12px; font-size:11px; } .article-specs dt { gap:8px; } }
.article-specs dd { color:#454943; font-weight:600; margin:0; }
.article-page .article-accordion { background:#fbfaf7; border:1px solid #e7e1d7; border-radius:9px; margin:0 0 10px; overflow:hidden; }
.article-page .article-accordion:last-child { margin-bottom:0; }
.article-page .article-accordion>summary { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 20px; list-style:none; cursor:pointer; color:#4c4b44; font-size:13px; font-weight:650; line-height:1.5; }
.article-page .article-accordion>summary::-webkit-details-marker { display:none; }
.article-page .article-accordion>summary:after { content:'+'; display:grid; place-items:center; flex-shrink:0; width:23px; height:23px; border:1px solid #decebb; border-radius:5px; color:#a26936; background:white; font-size:17px; font-weight:400; }
.article-page .article-accordion[open]>summary { color:#9c5728; background:#faf2e7; border-bottom:1px solid #eadac8; }
.article-page .article-accordion[open]>summary:after { content:'−'; }
.article-page .article-answer { padding:18px 20px 21px; color:#7d756b; font-size:12px; line-height:1.9; background:#fff; }
.article-answer p:last-child { margin-bottom:0; }
.article-answer ul { margin:12px 0 20px; padding-left:18px; }
.article-answer li { padding:5px 0; line-height:1.8; }
.article-answer .square .name { display:inline-block; min-width:150px; margin-right:14px; color:#4e5249; }
.article-page .article-answer .cs-maps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin:0!important; }
.article-page .article-answer .cs-maps__item { width:auto!important; margin:0!important; }
.article-page .article-answer .cs-maps__item img { display:block; width:100%; height:auto; border-radius:5px; }
.article-page .article-answer .cs-maps__name { font-size:10px; display:block; line-height:1.5; margin-top:5px; }
.article-page .article-answer .cs-maps__name:after { position:static; display:inline; background:none; color:inherit; font-size:10px; padding:0; border:0; border-radius:0; }
.article-page .article-answer .cs-maps__name:empty:after { content:attr(data-map); }
.article-page .article-help { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 24px; padding:20px 22px; background:#f3f0e8; border:1px solid #e5ddcf; border-radius:11px; }
.article-help>span { flex-basis:100%; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:#9a8269; margin-bottom:2px; }
.article-page .article-help>a { display:inline-flex; align-items:center; gap:7px; color:#766049; font-size:11px; text-decoration:none; padding:7px 9px; border:1px solid #dfd3c4; border-radius:6px; background:#ffffff70; }
.article-help .modern-icon { width:13px; height:13px; }
.article-page .article-share { background:#faf9f6; }
.article-share-actions { display:flex; flex-wrap:wrap; gap:9px; }
.article-page .article-share-actions>a, .article-page .article-share-actions>button { display:inline-flex; justify-content:center; align-items:center; gap:9px; min-height:42px; padding:11px 14px; border:1px solid #dfdcd3; border-radius:8px; background:#fff; color:#595d5c; font-size:11px; line-height:1.5; text-decoration:none; cursor:pointer; }
.article-page .article-share-actions :is(a,button):hover { color:#aa5b21; border-color:#d39d73; background:#fff8f0; }
.article-share-actions svg { width:17px; height:17px; flex-shrink:0; }
.article-page .article-share-actions [data-share-vk] { color:#49799e; }
.article-page .article-share-actions [data-share-telegram] { color:#3c879c; }
.article-share [data-share-status] { margin:10px 0 0; font-size:11px; line-height:1.6; color:#836541; }
.article-share [data-share-status]:empty { display:none; }
.article-share [data-share-url] { width:100%; margin-top:12px; padding:11px; font-size:12px; color:#51564f; border:1px solid #d9c7b4; border-radius:6px; background:#fff; }
.article-page .article-related .related-news { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }
.article-page .article-related .related-news>a { display:flex; align-items:center; padding:13px; border:1px solid #e6e0d6; border-radius:7px; font-size:12px; color:#565a52; background:#faf9f6; text-decoration:none; }
.article-page .article-comments { margin-bottom:0; background:#faf9f6; }
.article-comments-count { font-size:12px; color:#95816b; background:#eee9df; border-radius:6px; padding:5px 9px; }
.article-comments form { max-width:100%; }
.article-comments :is(input,textarea) { max-width:100%; border-color:#ddd5c8; border-radius:7px; }
.article-comments textarea { min-height:130px; }
.article-comments .content-block { border-radius:8px!important; padding:16px!important; background:#fff!important; }
.article-author-info:empty { display:none; }
.article-author-info>div { max-width:100%; }
.article-author-info :is(.youtuber,.youtube-info) { border:1px solid #e5dfd5; border-radius:12px; padding:18px; margin:0 0 24px!important; }
.article-author-info :is(table,img,iframe) { max-width:100%; }
.article-lightbox { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:72px 76px 54px; border:0; border-radius:0; background:#101519f5; color:white; z-index:2147483000; }
.article-lightbox:not([open]) { display:none; }
.article-lightbox[open] { display:grid; grid-template-columns:1fr; align-items:center; justify-items:center; }
.article-lightbox::backdrop { background:#0c1016e8; backdrop-filter:blur(8px); }
.article-lightbox.is-fallback { width:100%; height:100vh; }
.article-lightbox__image { display:block; max-width:100%; width:auto; height:auto; max-height:calc(100dvh - 126px); object-fit:contain; border-radius:4px; }
.article-lightbox__toolbar { position:absolute; top:18px; left:26px; right:26px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.article-lightbox__counter { font-size:13px; color:#bdc3c4; font-variant-numeric:tabular-nums; }
.article-lightbox button { display:grid; place-items:center; background:#ffffff0d; border:1px solid #ffffff30; border-radius:8px; color:#f4f3ed; font-family:inherit; cursor:pointer; }
.article-lightbox button:hover { background:#ae6d3b; border-color:#e0a575; }
.article-lightbox__close { min-height:40px; padding:10px 17px; font-size:12px; }
.article-lightbox__prev, .article-lightbox__next { position:absolute; top:50%; transform:translateY(-50%); width:46px; height:54px; font-size:23px; }
.article-lightbox__prev { left:16px; }
.article-lightbox__next { right:16px; }
.article-lightbox__status { position:absolute; bottom:14px; left:22px; right:22px; text-align:center; margin:0; color:#bdc5c5; font-size:12px; line-height:1.5; }
@media(min-width:1500px) { .article-page .article-header h1 { font-size:40px!important; } }
@media(max-width:1150px) { .article-specs { grid-template-columns:1fr; } .article-page .article-download { gap:20px; padding:23px; } .article-page .article-nav>a { padding:9px 10px; font-size:10px; } }
@media(max-width:700px) { .article-page .article-panel { padding:20px; margin-bottom:19px; } .article-page .article-gallery { padding:12px; } .article-page .article-section-heading h2 { font-size:21px!important; } .article-page .article-download { grid-template-columns:1fr; padding:23px; gap:20px; margin-bottom:19px; } .article-page .article-header h1 { font-size:31px!important; } .article-page .material-full-toolbar { gap:12px; } .article-page .article-nav { gap:4px; padding:6px; } .article-page .article-nav>a { padding:9px; } .article-gallery-thumbs>a { flex-basis:76px; width:76px; height:51px; } .article-page .article-answer .cs-maps { grid-template-columns:repeat(3,minmax(0,1fr)); } .article-prose, .article-page [data-article-body] { font-size:13px; } .article-page [data-article-body]>p:first-child { font-size:14px; } .article-page .article-accordion>summary { padding:16px; font-size:12px; } .article-page .article-answer { padding:16px; } .article-page .article-help { padding:17px; } .article-page .article-related .related-news { grid-template-columns:1fr; } .article-lightbox { padding:64px 12px 70px; } .article-lightbox__image { max-height:calc(100dvh - 144px); } .article-lightbox__prev, .article-lightbox__next { top:auto; bottom:16px; transform:none; width:44px; height:42px; z-index:2; } .article-lightbox__toolbar { left:16px; right:16px; top:12px; } .article-lightbox__status { bottom:25px; left:70px; right:70px; font-size:10px; } }
@media(max-width:420px) { .article-page .article-panel { padding:16px; border-radius:10px; } .article-page .article-gallery { padding:9px; } .article-page .article-header h1 { font-size:27px!important; letter-spacing:-.6px; } .article-page .article-section-heading h2 { font-size:20px!important; } .article-page .article-nav>a { font-size:10px; padding:8px; } .article-gallery-stage>button { width:30px; height:40px; } .article-gallery-prev { left:6px; } .article-gallery-next { right:6px; } .article-gallery-zoom { font-size:9px; padding:6px 7px; right:8px; bottom:8px; } .article-page .article-answer .cs-maps { grid-template-columns:repeat(2,minmax(0,1fr)); } .article-page .article-share-actions { display:grid; grid-template-columns:1fr 1fr; } .article-share-actions [data-share-copy] { grid-column:1/-1; } .article-page .article-download { padding:19px; } .article-page .article-gallery-hint { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { .article-page *, .article-lightbox * { scroll-behavior:auto!important; transition:none!important; } }