*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:#606060;
  font-family:Arial,Helvetica,sans-serif;
  background:#fbfbf8;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
img{display:block;max-width:100%}
:root{
  --paper:#fbfbf8;
  --paper2:#f7f7f3;
  --ink:#606060;
  --muted:#747474;
  --red:#e29186;
  --grid:rgba(124,196,210,.52);
  --line:rgba(96,96,96,.16);
  --dark:#666666;
  --card:rgba(255,255,255,.82);
}
.notebook{
  min-height:100vh;
  width:100%;
  position:relative;
  overflow:hidden;
  background-color:var(--paper);
  background-image:
    linear-gradient(to right,var(--grid) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid) 1px,transparent 1px);
  background-size:32px 32px,32px 32px;
}
.notebook::before{
  content:"";
  position:absolute;
  top:0;right:0;bottom:0;
  width:92px;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(124,196,210,.55) 1px, transparent 1px);
  background-size:100% 32px;
  opacity:.95;
  z-index:45;
}
.notebook::after{
  content:"";
  position:absolute;
  z-index:50;
  right:92px;top:0;bottom:0;width:1px;pointer-events:none;
  background:rgba(226,116,98,.78);
  box-shadow:1px 0 rgba(255,255,255,.55);
}
.shell{
  width:min(1880px,100%);
  margin:0 auto;
  padding-left:66px;
  padding-right:138px;
}
.hand{font-family:"Segoe Print","Comic Sans MS",Arial,Helvetica,sans-serif}
.script{font-family:"Segoe Script","Brush Script MT",Arial,Helvetica,sans-serif}
.topbar{
  min-height:88px;
  display:flex;
  align-items:center;
  gap:28px;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:6;
}
.brand{display:flex;align-items:center;gap:14px;min-width:235px}
.brand-lockup{display:none}
.brand-logo{
  display:block;
  width:58px;
  height:68px;
  object-fit:contain;
}
.logo2{display:none}
.brand-name{
  display:block;
  font-family:"Segoe Print","Comic Sans MS",Arial,Helvetica,sans-serif;
  font-size:22px;
  color:#606060;
  text-shadow:.25px 0 rgba(0,0,0,.16), -.2px 0 rgba(255,255,255,.40);
}
.nav{display:flex;gap:25px;align-items:center;flex-wrap:wrap}
.nav a{
  font-family:"Segoe Print","Comic Sans MS",Arial,Helvetica,sans-serif;
  font-size:15px;
  border-bottom:1px solid rgba(96,96,96,.45)
}
.search{
  margin-left:auto;
  width:285px;
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:5px;
  border-bottom:1px solid rgba(96,96,96,.28)
}
.search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-family:"Segoe Print","Comic Sans MS",Arial,Helvetica,sans-serif;
  color:var(--ink)
}
.glass{width:19px;height:19px;border:2px solid var(--ink);border-radius:50%;position:relative}
.glass::after{content:"";position:absolute;width:8px;height:2px;background:var(--ink);right:-6px;bottom:-4px;transform:rotate(45deg)}
.section{padding:76px 0;border-bottom:1px solid var(--line);position:relative}
.kicker{
  font-family:"Segoe Print","Comic Sans MS",Arial,Helvetica,sans-serif;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:#737373
}
.title{
  font-family:"Segoe Print","Comic Sans MS",Arial,Helvetica,sans-serif;
  font-weight:500;
  letter-spacing:-.04em;
  line-height:.98
}
.copy{
  font-family:"Segoe Print","Comic Sans MS",Arial,Helvetica,sans-serif;
  color:#666666;
  line-height:1.55
}
.btn{
  display:inline-block;
  background:#ececec;
  color:#5f5f5f;
  padding:14px 24px;
  border-radius:3px;
  font-family:"Segoe Print","Comic Sans MS",Arial,Helvetica,sans-serif;
  box-shadow:1px 1px 0 rgba(0,0,0,.07)
}
.btn-light{
  display:inline-block;
  border:1px solid rgba(96,96,96,.36);
  padding:12px 20px;
  font-family:"Segoe Print","Comic Sans MS",Arial,Helvetica,sans-serif;
  background:rgba(255,255,255,.16)
}
.paper-card{
  background:var(--card);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 14px rgba(0,0,0,.045)
}
.photo-frame{
  background:#f1f1ed;
  border:10px solid rgba(255,255,255,.94);
  box-shadow:0 10px 18px rgba(55,45,33,.08);
  overflow:hidden
}
.photo-frame img{
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.60) sepia(.08) contrast(.96)
}
.meta{font-size:12px;color:#737373}
.footer{
  padding:30px 0 42px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#747474;
  font-size:13px
}
.chip{
  display:inline-block;
  padding:7px 10px;
  border:1px solid rgba(0,0,0,.28);
  font-family:"Segoe Print","Comic Sans MS",Arial,Helvetica,sans-serif;
  font-size:13px
}
@media(max-width:1050px){
  .shell{padding-left:42px;padding-right:116px}
  .topbar{flex-wrap:wrap;padding:16px 0}
  .search{margin-left:0}
}
@media(max-width:720px){
  .notebook::before{width:62px}
  .notebook::after{right:62px}
  .shell{padding-left:24px;padding-right:82px}
  .nav{display:none}
  .search{width:100%}
}


/* ===== READABILITY PASS v2 =====
   Increased small/body text without inflating the large display headings. */
body{
  font-size:18px;
}
.nav a{
  font-size:17px;
}
.search input{
  font-size:17px;
}
.kicker{
  font-size:14px;
  line-height:1.45;
}
.copy{
  font-size:18px;
  line-height:1.62;
}
.btn,
.btn-light{
  font-size:17px;
  line-height:1.35;
}
.meta{
  font-size:15px;
  line-height:1.45;
}
.chip{
  font-size:15px;
}
.footer{
  font-size:15px;
  line-height:1.45;
}
.small{
  font-size:15px !important;
  line-height:1.45;
}


/* ===== v7: pencil graphite ===== */
body{color:#606060;background:#fbfbf8}
.title,
.hand,
.brand-name,
.nav a,
.kicker{
  color:#5d5d5d;
  text-shadow:.22px 0 rgba(0,0,0,.14), -.16px 0 rgba(255,255,255,.42);
}
.copy{color:#666666}
.meta,.footer{color:#747474}

.nav a{
  border-bottom-color:rgba(96,96,96,.42);
}
.search{
  border-bottom-color:rgba(96,96,96,.28);
}
.search input{
  color:#696969;
}
.glass{
  border-color:#686868;
}
.glass::after{
  background:#686868;
}

/* No black slabs. Buttons look like a light pencil UI element. */
.btn{
  background:#ececec!important;
  color:#5f5f5f!important;
  border:1px solid #bdbdbd;
  box-shadow:1px 1px 0 rgba(0,0,0,.06);
}
.btn-light{
  background:rgba(250,250,250,.90);
  color:#656565;
  border-color:#c4c4c4;
}
.paper-card{
  background:rgba(255,255,255,.84);
  border-color:rgba(96,96,96,.13);
  box-shadow:0 5px 12px rgba(96,96,96,.035);
}
.filter.active{
  background:#e7e7e7!important;
  color:#5d5d5d!important;
  border-color:#bdbdbd!important;
}


/* ===== v8: corrected hierarchy ===== */

/* Exact black emblem. It is an image and is NOT recolored by CSS. */
.brand-logo{
  width:58px;
  height:68px;
  object-fit:contain;
  background:transparent !important;
}

/* Main structural names are darker, close to black but not harsh. */
.brand-name,
.nav a,
.title{
  color:#3f3f3f !important;
}

/* Secondary headings remain graphite. */
.hand{
  color:#505050 !important;
}

/* Ordinary reading text stays pencil-like. */
.copy,
.article-section p{
  color:#666666 !important;
}

/* Small supporting text is lighter. */
.kicker,
.meta,
.footer{
  color:#777777 !important;
}

/* Buttons stay nearly white-gray. Never black. */
.btn{
  background:#eeeeee !important;
  color:#565656 !important;
  border:1px solid #c6c6c6 !important;
  box-shadow:1px 1px 0 rgba(0,0,0,.05) !important;
}
.btn-light{
  background:#f8f8f8 !important;
  color:#5f5f5f !important;
  border:1px solid #cccccc !important;
}

/* Menu and search lines: graphite, not black. */
.nav a{
  border-bottom-color:rgba(63,63,63,.45) !important;
}
.search{
  border-bottom-color:rgba(90,90,90,.28) !important;
}
.search input{
  color:#626262 !important;
}
.glass{
  border-color:#555 !important;
}
.glass::after{
  background:#555 !important;
}


/* ===== v9: stronger hierarchy, same pencil body text ===== */

/* Brand: symbol only, larger. */
.brand{
  min-width:96px !important;
  gap:0 !important;
}
.brand-logo{
  width:78px !important;   /* ~1.35x previous 58px */
  height:90px !important;
  object-fit:contain;
  background:transparent !important;
}
.brand-name{
  display:none !important;
}

/* Main navigation: larger and close to black. */
.nav{
  gap:34px !important;
}
.nav a{
  font-size:21px !important;
  color:#242424 !important;
  font-weight:600 !important;
  border-bottom-color:rgba(36,36,36,.52) !important;
  padding:8px 2px 7px !important;
}

/* All important headings are black / near-black. */
.title,
.hand,
h1,
h2,
h3,
h4,
.item h3,
.lesson h3,
.panel h2,
.article-section h2{
  color:#222222 !important;
}

/* Body stays pencil-gray. */
.copy,
.article-section p,
.item .copy,
.lesson .copy{
  color:#666666 !important;
}

/* Supporting text remains lighter. */
.kicker,
.meta,
.footer,
.small{
  color:#777777 !important;
}

/* Make clickable controls more visible by size, not by black fill. */
.btn,
.btn-light,
.filter,
.choice{
  font-size:19px !important;
  padding:15px 24px !important;
}
.btn{
  background:#eeeeee !important;
  color:#4f4f4f !important;
  border:1px solid #bdbdbd !important;
}
.btn-light{
  background:#f8f8f8 !important;
  color:#555555 !important;
  border:1px solid #c7c7c7 !important;
}

/* Search remains subordinate to navigation. */
.search input{
  font-size:17px !important;
}


/* ===== v10: only requested micro-adjustments ===== */
.brand-logo{
  width:90px !important;   /* 78px -> 90px, ~15% larger */
  height:104px !important;
}
.brand{
  min-width:108px !important;
}

/* v15: headings are black, not gray */
.title,
.hand,
h1,h2,h3,h4,
.panel h2,
.article-section h2,
.paper-card h2,
.paper-card h3 {
  color:#111111 !important;
}

.btn-disabled{opacity:.62;cursor:not-allowed;text-decoration:none;pointer-events:none}


/* ===== v21: public navigation/link states ===== */
.status-badge{display:inline-block;padding:5px 9px;border:1px solid rgba(0,0,0,.28);border-radius:999px;font:600 13px/1.2 "Segoe Print","Comic Sans MS",Arial,Helvetica,sans-serif;color:#666;background:rgba(255,255,255,.58)}
.status-planned{border-style:dashed;color:#777;background:rgba(255,255,255,.34)}
.topic-bridge{margin:24px 0 34px;padding:20px 22px;border:1px solid rgba(0,0,0,.22);background:rgba(255,255,255,.56);display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.topic-bridge p{margin:0;max-width:760px;font-family:"Segoe Print","Comic Sans MS",Arial,Helvetica,sans-serif;line-height:1.5;color:#555}
.project-crosslinks{margin:34px 0 10px;padding-top:18px;border-top:1px solid rgba(0,0,0,.16);display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-family:"Segoe Print","Comic Sans MS",Arial,Helvetica,sans-serif;font-size:14px;color:#777}
.project-crosslinks a{color:#333;text-decoration:underline;text-underline-offset:3px}
.project-crosslinks .future-note{font-size:12px;color:#8b8378}
.lang-switch{display:flex;gap:7px;flex-wrap:wrap;margin:20px 0 0}
.lang-switch a{display:inline-block;padding:6px 9px;border:1px solid rgba(0,0,0,.24);background:rgba(255,255,255,.52);font:600 13px/1.2 Arial,sans-serif;color:#333;text-decoration:none}
.lang-switch a[aria-current="page"]{background:#222;color:#fff;border-color:#222}
.planned-card{border-style:dashed!important;background:rgba(255,255,255,.42)!important}
.planned-card .copy{color:#777!important}

/* v4 — project-specific social/support block */
.project-contact{margin:58px 0 24px;padding:30px;border:2px solid #707070;background:rgba(255,255,255,.76)}
.project-contact h2{font-size:40px;margin:8px 0 10px;color:#444}
.project-contact p{max-width:820px;margin:0 0 20px}
.project-contact-links{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center}
.project-contact-links a{font:700 13px Arial,sans-serif;text-decoration:underline;text-underline-offset:3px}
.project-contact-links .support-link{background:#333;color:#fff;padding:10px 13px;text-decoration:none;border:1px solid #333}


/* v5: contextual project links; visible on browse/catalog pages, not inside serious reading flows */
.topbar .nav{margin-left:auto}
.project-utility-strip{margin:42px 0 18px;padding:22px 24px;border:1px solid rgba(0,0,0,.16);background:rgba(255,255,255,.72);display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap}
.project-utility-copy{max-width:620px}.project-utility-copy b{display:block;font-family:"Segoe Print","Comic Sans MS",Arial,Helvetica,sans-serif;font-size:22px;color:#555;margin-bottom:5px}.project-utility-copy span{font:15px/1.5 Georgia,serif;color:#626262}.project-utility-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.network-chip,.support-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(0,0,0,.35);padding:9px 11px;background:rgba(255,255,255,.74);font-family:"Segoe Print","Comic Sans MS",Arial,Helvetica,sans-serif;font-size:14px}.network-chip .mono-icon{width:22px;height:22px;border:1px solid currentColor;display:inline-grid;place-items:center;border-radius:50%;font:900 11px Arial,sans-serif}.support-chip{background:#666;color:#fff;border-color:#666;font-weight:700}
@media(max-width:760px){.project-utility-strip{align-items:flex-start;flex-direction:column}.topbar .nav{margin-left:0}}

/* v10 visibility of project social strip */
.project-utility-strip{background:rgba(255,255,255,.78);border:2px solid rgba(40,40,40,.28)!important;padding:24px 26px!important;box-shadow:0 8px 22px rgba(0,0,0,.05);margin-top:28px!important;margin-bottom:28px!important}
.project-utility-links .network-chip{background:#fff;border:1.5px solid rgba(0,0,0,.45)}
.short-version-note{margin:18px 0 0;padding:12px 14px;border-left:4px solid #777;background:rgba(255,255,255,.6);font:14px/1.45 Georgia,serif;color:#555;max-width:760px}

/* v11: larger, consistent project header */
.topbar{min-height:123px;padding-top:12px;padding-bottom:12px}
.brand-logo{width:108px!important;height:126px!important}
@media(max-width:1050px){.topbar{min-height:112px}}

/* v13: support and social networks are separate actions */
.project-support-separate{margin:42px 0 22px;padding:36px 38px;background:#5a5a5a;color:#fff;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}.project-support-separate b{display:block;font-family:"Segoe Print","Comic Sans MS",Arial,Helvetica,sans-serif;font-size:30px;margin-bottom:8px}.project-support-separate span{font:17px/1.5 Georgia,serif}.project-support-separate>a{background:#fff;color:#333;text-decoration:none;padding:15px 22px;font-weight:900}@media(max-width:760px){.project-support-separate{grid-template-columns:1fr}.project-support-separate>a{justify-self:start}}

/* v15 */
.topbar{border-bottom:0!important}


/* ===== v19: hover/focus feedback for real buttons ===== */
.btn,
.btn-light,
.project-support-separate>a,
.project-utility-links a,
.network-chip,
.support-chip{
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,
             background-color .16s ease,color .16s ease;
}
.btn:not(.btn-disabled):hover,
.btn-light:not(.btn-disabled):hover{
  transform:translateY(-2px);
  border-color:#D9822B!important;
  background:#fff!important;
  color:#111!important;
  box-shadow:0 0 0 3px #D9822B,0 8px 16px rgba(0,0,0,.08)!important;
}
.btn:not(.btn-disabled):focus-visible,
.btn-light:not(.btn-disabled):focus-visible{
  outline:none;
  border-color:#D9822B!important;
  box-shadow:0 0 0 3px #D9822B!important;
}

.project-support-separate>a:hover,
.project-utility-links a:hover,
.network-chip:hover,
.support-chip:hover{
  transform:translateY(-2px);
  border-color:#D9822B!important;
  box-shadow:0 0 0 3px #D9822B,0 8px 16px rgba(0,0,0,.08)!important;
}


/* ===== v20 interaction pass ===== */
:root{--dvoika-accent:#D9822B;}

.topbar .nav a{
  border-radius:10px;
  padding:8px 10px;
  transition:background-color .16s ease,color .16s ease,transform .16s ease;
}
.topbar .nav a:hover,
.topbar .nav a:focus-visible{
  background:var(--dvoika-accent);
  color:#fff;
  text-decoration:none;
  transform:translateY(-1px);
  outline:none;
}

.btn:not(.btn-disabled):hover,
.btn-light:not(.btn-disabled):hover{
  background:var(--dvoika-accent)!important;
  color:#fff!important;
  border-color:var(--dvoika-accent)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.12)!important;
}
.project-support-separate>a:hover,
.project-utility-links a:hover,
.network-chip:hover,
.support-chip:hover{
  background:var(--dvoika-accent)!important;
  color:#fff!important;
  border-color:var(--dvoika-accent)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.12)!important;
}


/* ===== v21 header correction: accent is typography, not a filled tab ===== */
.topbar .nav a,
.topbar .nav a:hover,
.topbar .nav a:focus-visible{
  background:transparent!important;
  border-radius:0!important;
}
.topbar .nav a:hover,
.topbar .nav a:focus-visible{
  color:var(--dvoika-accent)!important;
  text-decoration:underline!important;
  text-decoration-color:var(--dvoika-accent)!important;
  text-decoration-thickness:2px!important;
  text-underline-offset:6px!important;
  transform:none!important;
  outline:none!important;
  box-shadow:none!important;
}


/* ===== v26: clean menu states and clear clickable feedback ===== */
.topbar .nav a{border-bottom:0!important;text-decoration:none!important}
.topbar .nav a[aria-current="page"]{border-bottom:2px solid #444!important}
.topbar .nav a:hover,.topbar .nav a:focus-visible{border-bottom:0!important;color:var(--dvoika-accent)!important;text-decoration:underline!important;text-decoration-color:var(--dvoika-accent)!important;text-decoration-thickness:2px!important;text-underline-offset:6px!important}
.archive .item{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background-color .16s ease}
.archive .item:hover,.archive .item:focus-visible{transform:translateY(-2px);border-color:var(--dvoika-accent)!important;box-shadow:0 0 0 2px var(--dvoika-accent),0 10px 20px rgba(0,0,0,.07)!important;outline:none;background:rgba(255,255,255,.94)}
.archive .item:hover h3,.archive .item:focus-visible h3{color:var(--dvoika-accent)!important}
.toc a{transition:color .14s ease,text-decoration-color .14s ease}
.toc a:hover,.toc a:focus-visible{color:var(--dvoika-accent)!important;text-decoration:underline;text-decoration-color:var(--dvoika-accent);text-decoration-thickness:2px;text-underline-offset:5px;outline:none}


/* ===== v27 interaction additions ===== */
.filters .filter,.choices .choice,.lesson-grid .lesson,.lang-switch a{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background-color .16s ease,color .16s ease}
.filters .filter:hover,.filters .filter:focus-visible{background:var(--dvoika-accent)!important;color:#fff!important;border-color:var(--dvoika-accent)!important;outline:none;transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.09)}
.choices .choice:hover,.choices .choice:focus-visible{border-color:var(--dvoika-accent)!important;background:rgba(255,255,255,.9)!important;box-shadow:0 0 0 2px var(--dvoika-accent),0 10px 18px rgba(0,0,0,.05)!important;outline:none}
.lesson-grid .lesson:hover,.lesson-grid .lesson:focus-visible{transform:translateY(-2px);border-color:var(--dvoika-accent)!important;box-shadow:0 0 0 2px var(--dvoika-accent),0 10px 20px rgba(0,0,0,.07)!important;outline:none;background:rgba(255,255,255,.94)}
.lesson-grid .lesson:hover h3,.lesson-grid .lesson:focus-visible h3{color:var(--dvoika-accent)!important}
.lang-switch a:hover,.lang-switch a:focus-visible{background:var(--dvoika-accent)!important;color:#fff!important;border-color:var(--dvoika-accent)!important;outline:none;box-shadow:0 8px 18px rgba(0,0,0,.09)}


/* v28 cross-project hover */
.project-crosslinks a{transition:color .14s ease,text-decoration-color .14s ease,background-color .14s ease}
.project-crosslinks a:hover,.project-crosslinks a:focus-visible{color:var(--dvoika-accent)!important;text-decoration-color:var(--dvoika-accent)!important;text-decoration-thickness:2px!important;text-underline-offset:4px!important;outline:none!important}

/* ===== CLEAN v3 SHARED: translated Pedagogy of Light article layout ===== */
.progress{position:fixed;left:0;top:0;height:3px;background:var(--red);width:0;z-index:200}.article-wrap{max-width:980px;margin:0 auto;padding:52px 0 90px}.article-head{padding:26px 0 48px}.article-head h1{font-size:clamp(54px,6vw,104px);margin:0 0 22px;color:#292929!important}.article-section{padding:48px 0;border-top:1px solid var(--line)}.article-section h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,3.4vw,42px);line-height:1.2;margin:0 0 24px;color:#333}.article-section p{font-family:Georgia,"Times New Roman",serif;font-size:21px;line-height:1.72;color:#292623;margin:0 0 22px}.translation-note{font:14px/1.5 Arial,sans-serif;color:#777;margin-top:12px}@media(max-width:650px){.article-section p{font-size:18px}}


/* v2: deterministic non-cursive fallback prevents mixed-glyph Ukrainian rendering on mobile. */