* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #ffffff; color: #23272d; font-family: "SV Noto Sans", "Noto Sans", system-ui, sans-serif; }
a { color: #1f5fbf; }
button { font: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* header */
.site-header { border-bottom: 1px solid #eceff3; background: #fff; }
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: "SV Noto Serif", serif; font-weight: 700; font-size: 19px; color: #14171b; text-decoration: none; white-space: nowrap; }
.logo-mark { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3c98b, #b9783b 70%); }
.nav { display: flex; gap: 22px; }
.nav a { color: #4a5361; text-decoration: none; font-size: 15px; }
.nav a:hover { color: #14171b; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; color: #5b6573; }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d5dbe2; background: #fff; color: #23272d; border-radius: 8px; padding: 7px 13px; cursor: pointer; text-decoration: none; font-size: 14px; white-space: nowrap; }
.btn:hover { border-color: #9aa5b3; }
.btn .ic { width: 14px; height: 14px; }
.btn-primary { background: #14171b; border-color: #14171b; color: #fff; }
.btn-primary:hover { background: #2b3038; }

/* test banner */
.test-banner { background: #fff8e6; border-bottom: 1px solid #f1dfae; font-size: 14px; line-height: 1.5; color: #5c4a1c; }
.test-banner .wrap { display: flex; gap: 16px; align-items: center; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.test-banner strong { color: #3f3212; }
.test-banner .status { margin-left: auto; font-weight: 600; }
.status.ok { color: #1c7a43; } .status.bad { color: #b42318; }

/* article */
.article { max-width: 768px; margin: 0 auto; padding: 48px 24px 24px; }
.kicker { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: #8a5a2b; font-weight: 600; margin: 0 0 14px; }
.article h1 { font-family: "SV Noto Serif", serif; font-size: 44px; line-height: 1.15; margin: 0 0 18px; color: #14171b; letter-spacing: -0.01em; }
.article h2 { font-family: "SV Noto Serif", serif; font-weight: 700; font-size: 30px; line-height: 1.25; margin: 1.7em 0 0.6em; color: #14171b; scroll-margin-top: 20px; }
.lead { font-size: 21px; line-height: 1.6; color: #3d4450; margin: 0 0 28px; }
.byline { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #6b7480; margin-bottom: 36px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #d9c3a5; display: grid; place-items: center; color: #5a3d1c; font-weight: 700; font-size: 13px; }

figure { margin: 34px 0; }
figure.wide { --w: min(1072px, calc(100vw - 64px)); width: var(--w); margin-left: calc(50% - var(--w) / 2); margin-right: 0; }
figcaption { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin-top: 10px; font-size: 14px; color: #6b7480; line-height: 1.5; }
.cap-actions { display: inline-flex; gap: 8px; align-items: center; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.tag-protected { color: #1c5c3a; background: #e3f4ea; }
.tag-open { color: #7a4a12; background: #fbeedd; }
.tag svg { width: 11px; height: 11px; }
.linkbtn { background: none; border: 0; padding: 0; color: #1f5fbf; cursor: pointer; font-size: 14px; text-decoration: underline; text-underline-offset: .15em; }
.plain-img { display: block; width: 100%; height: auto; }

.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gallery figure { margin: 0; }
.inline-block-note { margin: 10px 0 1.4em; font-size: 13px; line-height: 1.6; color: #8a929d; }
.inline-block-note .tag { margin-right: 8px; vertical-align: 1px; }

/* protected-zone outline toggle (outline is drawn outside the frame, never over it) */
body.show-zones .sv-block { outline: 2px dashed #e5484d; outline-offset: 4px; }

/* normal interactive widgets */
.faq details { border-bottom: 1px solid #e6e9ee; padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 18px; color: #14171b; }
.faq details p { margin: 10px 0 0; }
.reactions { display: flex; gap: 10px; align-items: center; margin: 36px 0; flex-wrap: wrap; }
.like.liked { background: #fff1f1; border-color: #f2b8b8; color: #b42318; }
.comments h2 { margin-top: 1.2em; }
.comment-form { display: grid; gap: 10px; margin: 12px 0 22px; }
.comment-form input, .comment-form textarea, .contact-form input, .contact-form textarea { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid #d5dbe2; border-radius: 8px; width: 100%; background: #fff; color: #23272d; }
.comment-form textarea { min-height: 84px; resize: vertical; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list li { border-top: 1px solid #eceff3; padding: 14px 0; font-size: 16px; line-height: 1.6; }
.comment-list .who { font-weight: 600; color: #14171b; margin-right: 8px; }
.comment-list .when { color: #8a929d; font-size: 13px; }
.contact { background: #f6f3ee; padding: 44px 0; margin-top: 40px; }
.contact .inner { max-width: 768px; margin: 0 auto; padding: 0 24px; }
.contact h2 { margin-top: 0; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contact-form textarea { grid-column: 1 / -1; min-height: 90px; }
.contact-form .btn { justify-self: start; }
.form-ok { color: #1c7a43; font-weight: 600; }
.site-footer { padding: 28px 0 60px; font-size: 14px; color: #6b7480; }
.to-top { position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #d5dbe2; background: #fff; cursor: pointer; font-size: 18px; box-shadow: 0 4px 14px rgba(0,0,0,.08); display: none; }
.to-top.show { display: block; }

/* reading mode (page full screen) */
body.reading .test-banner, body.reading .nav { display: none; }
body.reading .article { padding-top: 32px; }

/* ---- windows & animations demo */
:root { --slow: 1; --d: calc(.28s * var(--slow)); }
:root.slow { --slow: 5; }
.article h3.sub { font-family: "SV Noto Serif", serif; font-size: 23px; margin: 1.6em 0 .5em; color: #14171b; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 14px; }
.demo-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 16px 18px; border: 1px solid #e1e5ea; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.demo-card:hover { border-color: #9aa5b3; box-shadow: 0 6px 18px rgba(20, 23, 27, .07); }
.demo-card:focus-visible { outline: 2px solid #1f5fbf; outline-offset: 2px; }
.demo-tag { font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; }
.demo-tag.ok { color: #1c5c3a; background: #e3f4ea; }
.demo-tag.guard { color: #7a4a12; background: #fbeedd; }
.demo-tag.bad { color: #9b1c13; background: #fde8e6; }
.demo-title { font-size: 17px; font-weight: 600; color: #14171b; }
.demo-text { font-size: 14px; line-height: 1.5; color: #5b6573; }
.demo-controls { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 14px; color: #3d4450; margin: 6px 0 14px; }
.demo-check { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.demo-check input { width: 16px; height: 16px; margin: 0; }
.demo-hint { color: #8a929d; }
.guard-journal { border: 1px solid #e6e9ee; border-radius: 10px; background: #fafbfc; padding: 12px 16px; font-size: 13.5px; line-height: 1.55; color: #3d4450; }
.gj-title { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b7480; margin-bottom: 4px; }
.gj-list { list-style: none; margin: 0; padding: 0; }
.gj-list li { padding: 3px 0; border-top: 1px dashed #e6e9ee; }
.gj-list li:first-child { border-top: 0; }
.gj-list .gj-empty { color: #8a929d; }
.gj-time { color: #8a929d; font-variant-numeric: tabular-nums; margin-right: 8px; }
.gj-on { color: #9a5b12; font-weight: 600; }
.gj-off { color: #1c7a43; font-weight: 600; }
.gj-bad { color: #b42318; font-weight: 600; }

/* windows: closed = visibility hidden, so blocks inside are laid out and preloaded.
   The window and its contents never get filter / backdrop-filter / rounded clipping:
   the blur is on the backdrop BELOW the window, which does not affect the overlay. */
.demo-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(17, 20, 24, .45); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--d) ease, visibility 0s linear var(--d); }
.demo-backdrop.open { opacity: 1; visibility: visible; transition: opacity var(--d) ease, visibility 0s; }
.demo-modal { position: fixed; z-index: 61; left: 50%; top: 50%; width: min(600px, calc(100vw - 32px)); background: #fff; border-radius: 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, .28); visibility: hidden;
  transition: transform var(--d) cubic-bezier(.2, .8, .2, 1), opacity var(--d) ease, visibility 0s linear var(--d); }
.demo-modal.open { visibility: visible; transition: transform var(--d) cubic-bezier(.2, .8, .2, 1), opacity var(--d) ease, visibility 0s; }
.anim-slide { transform: translate(-50%, calc(-50% + 48px)) scale(.92); }
.anim-slide.open { transform: translate(-50%, -50%); }
.anim-fade { opacity: 0; transform: translate(-50%, -50%) scale(.97); }
.anim-fade.open { opacity: 1; transform: translate(-50%, -50%); }
.dm-scroll { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.dm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 6px; }
.dm-head h3 { margin: 0; font-family: "SV Noto Serif", serif; font-size: 21px; color: #14171b; }
.dm-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1f3f6; color: #3d4450; font-size: 22px; line-height: 1; cursor: pointer; }
.dm-close:hover { background: #e4e8ed; }
.dm-body { padding: 10px 20px 4px; }
.dm-foot { display: flex; gap: 10px; align-items: baseline; padding: 10px 20px 16px; font-size: 13px; line-height: 1.5; color: #6b7480; }
.dm-foot .tag { flex: none; }
.dm-log.on { color: #9a5b12; }
.dm-log.off { color: #1c7a43; }
.dm-log.warn { color: #b42318; }
.dm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.dm-tabs button { border: 1px solid #d5dbe2; background: #fff; color: #23272d; border-radius: 999px; padding: 6px 14px; font-size: 14px; cursor: pointer; }
.dm-tabs button[aria-selected="true"] { background: #14171b; border-color: #14171b; color: #fff; }

@media (max-width: 760px) {
  .nav { display: none; }
  .site-header .wrap { gap: 12px; }
  .article { padding-top: 30px; padding-left: 20px; padding-right: 20px; }
  .article h1 { font-size: 32px; }
  .article h2 { font-size: 25px; }
  .lead { font-size: 19px; }
  figure.wide { --w: calc(100vw - 40px); }
  .gallery { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }
  .header-actions .who, #reading .label { display: none; }
  .header-actions { gap: 8px; }
  .logo { font-size: 17px; }
  .test-banner .status { margin-left: 0; }
  .demo-grid { grid-template-columns: 1fr; }
  .dm-head, .dm-body, .dm-foot { padding-left: 16px; padding-right: 16px; }
}