:root{
  --bg:#f4f7f1;
  --paper:#fffefb;
  --paper-soft:#faf7ed;
  --ink:#172018;
  --muted:#667269;
  --line:#d9e3d5;
  --line-warm:#e6dcc7;
  --green:#4f8b4e;
  --green-dark:#326c3a;
  --green-soft:#eaf3e6;
  --beige:#eee2c8;
  --beige-dark:#806b48;
  --amber:#a66e20;
  --test:#bd8a3d;
  --shadow:0 18px 54px rgba(50,74,52,.08);
  --shadow-soft:0 8px 24px rgba(50,74,52,.065);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 18% -8%,rgba(255,255,255,.98),transparent 34rem),
    linear-gradient(180deg,#f8faf6 0,#f3f6ef 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.5;
}
a{color:inherit}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}

.sitebar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:74px;
  padding:11px clamp(16px,4vw,58px);
  border-bottom:1px solid rgba(70,103,73,.12);
  background:rgba(248,250,246,.94);
  backdrop-filter:blur(16px);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none}
.brand img{width:42px;height:42px;flex:0 0 auto}
.brand strong{display:block;font-size:21px;line-height:1;letter-spacing:.055em}
.brand small{display:block;margin-top:5px;color:var(--muted);font-size:11px;font-weight:650}
.site-nav{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:12px;font-weight:900}
.site-nav a{text-decoration:none}
.site-nav a:hover{text-decoration:underline}
.lang{padding:0;border:0;background:none;color:var(--muted);font-weight:900;cursor:pointer}
.lang.active{color:var(--green-dark)}

main{width:min(1320px,calc(100% - 32px));margin:0 auto;padding:30px 0 64px}

.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:36px;
  min-height:300px;
  padding:clamp(30px,5vw,64px);
  border:1px solid var(--line-warm);
  border-radius:25px;
  background:
    linear-gradient(90deg,rgba(255,254,251,.98) 0 48%,rgba(250,246,235,.82) 72%,rgba(246,240,224,.93) 100%);
  box-shadow:var(--shadow);
}
.hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 0 0 50%;
  opacity:.38;
  background:
    linear-gradient(90deg,transparent,rgba(255,255,255,.48)),
    repeating-linear-gradient(90deg,transparent 0 83px,rgba(126,103,64,.17) 83px 85px),
    repeating-linear-gradient(0deg,transparent 0 61px,rgba(126,103,64,.15) 61px 63px);
  mask-image:linear-gradient(90deg,transparent,#000 38%);
}
.hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:6%;
  top:28px;
  width:210px;
  height:138px;
  opacity:.18;
  background:
    linear-gradient(var(--beige-dark),var(--beige-dark)) 15px 23px/56px 2px no-repeat,
    linear-gradient(var(--beige-dark),var(--beige-dark)) 99px 23px/56px 2px no-repeat,
    linear-gradient(var(--beige-dark),var(--beige-dark)) 15px 84px/56px 2px no-repeat,
    linear-gradient(var(--beige-dark),var(--beige-dark)) 99px 84px/56px 2px no-repeat,
    repeating-linear-gradient(90deg,transparent 0 77px,var(--beige-dark) 77px 79px),
    repeating-linear-gradient(0deg,transparent 0 59px,var(--beige-dark) 59px 61px);
  border:2px solid var(--beige-dark);
  border-radius:6px;
}
.hero-copy{max-width:720px}
.eyebrow{margin:0;color:var(--green-dark);font-size:10px;font-weight:950;letter-spacing:.15em;text-transform:uppercase}
.hero h1{margin:10px 0 5px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(46px,7vw,78px);line-height:.98;letter-spacing:-.035em}
.lead{margin:0;color:#6e604b;font-size:clamp(18px,2.2vw,25px);font-weight:650}
.hero-text{max-width:700px;margin:22px 0 0;color:#3e493f;font-size:15px;line-height:1.7}
.stats{position:relative;display:grid;grid-template-columns:repeat(3,118px);gap:12px;margin:0}
.stats div{display:grid;place-items:center;min-height:118px;padding:14px;border:1px solid #e3dac9;border-radius:17px;background:rgba(255,255,255,.88);box-shadow:var(--shadow-soft);text-align:center}
.stats dt{color:var(--green-dark);font:700 38px/1 Georgia,serif}
.stats dd{margin:9px 0 0;color:#70695d;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}

.principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 24px}
.principles article{display:flex;align-items:flex-start;gap:13px;min-height:126px;padding:18px;border:1px solid var(--line);border-radius:17px;background:rgba(255,254,251,.92);box-shadow:var(--shadow-soft)}
.principles article>span{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--green-soft);color:var(--green-dark);font-size:18px;font-weight:900}
.principles h2{margin:0 0 5px;font-size:15px;line-height:1.25}
.principles p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}

.catalog{margin-top:8px}
.catalog-toolbar{
  position:sticky;
  top:88px;
  z-index:30;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,420px);
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,254,251,.94);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(15px);
}
.view-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.view-tab{display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:8px 10px;border:1px solid transparent;border-radius:11px;background:transparent;color:#3d493f;cursor:pointer}
.view-tab span{color:var(--green-dark);font-size:14px;font-weight:900}
.view-tab b{font-size:11px}
.view-tab:hover{background:#f3f7f0}
.view-tab.active{border-color:#bed2ba;background:var(--green-soft);color:var(--green-dark)}
.search-box{position:relative;display:flex;align-items:center;min-width:0}
.search-box>span{position:absolute;left:14px;color:#728075;font-size:20px;pointer-events:none}
.search-box input{width:100%;height:46px;padding:0 42px 0 39px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);outline:none;font-size:12px}
.search-box input:focus{border-color:#9dbb98;box-shadow:0 0 0 3px rgba(79,139,78,.11)}
.search-box button{position:absolute;right:7px;width:32px;height:32px;border:0;border-radius:9px;background:#eef3eb;color:#667269;font-size:20px;cursor:pointer}

.catalog-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:34px 4px 16px}
.catalog-heading h2{margin:6px 0 4px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(30px,4vw,43px);line-height:1.05}
.catalog-heading p:not(.eyebrow){max-width:700px;margin:0;color:var(--muted);font-size:13px}
.test-chip{flex:0 0 auto;padding:7px 11px;border:1px solid #d7b777;border-radius:999px;background:#fff5dd;color:#80571b;font-size:10px;font-weight:900;letter-spacing:.055em;text-transform:uppercase}
.catalog-content{min-height:430px}

.cabinet{
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:18px;
  padding:18px;
  border:1px solid #e0d6c2;
  border-radius:22px;
  background:linear-gradient(135deg,#f8f1e2,#f1e5cd);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.38),var(--shadow);
}
.drawer-list{display:grid;align-content:start;gap:8px}
.drawer-button{position:relative;display:grid;grid-template-columns:43px minmax(0,1fr) auto;align-items:center;gap:11px;min-height:72px;padding:10px 12px;border:1px solid #d7cab0;border-radius:12px;background:linear-gradient(#fffef9,#f9f3e7);color:var(--ink);text-align:left;box-shadow:0 5px 12px rgba(103,82,48,.06);cursor:pointer}
.drawer-button::after{content:"";position:absolute;left:50%;bottom:7px;width:38px;height:5px;transform:translateX(-50%);border:1px solid #ac956c;border-radius:2px;background:#e0c994;opacity:.68}
.drawer-button:hover{border-color:#b9aa8d;transform:translateY(-1px)}
.drawer-button.active{border-color:#8faf87;background:#f1f7ed;box-shadow:0 0 0 2px rgba(79,139,78,.12)}
.drawer-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:10px;background:#eef4e9;color:var(--green-dark);font-size:19px;font-weight:900}
.drawer-copy{min-width:0;padding-bottom:8px}
.drawer-copy strong{display:block;font-size:13px}
.drawer-copy small{display:block;margin-top:3px;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer-count{align-self:start;display:grid;place-items:center;min-width:28px;height:24px;padding:0 7px;border:1px solid #d2c5aa;border-radius:999px;background:#fff;color:#74684f;font-size:10px;font-weight:900}

.drawer-stage{position:relative;min-width:0;padding:22px;border:1px solid #e1d4bb;border-radius:17px;background:rgba(255,254,250,.9);box-shadow:inset 0 8px 22px rgba(112,88,48,.035)}
.drawer-stage::before{content:"";position:absolute;top:-1px;left:9%;width:34%;height:29px;border:1px solid #d9c9ab;border-bottom:0;border-radius:12px 12px 0 0;background:#eee0c4;transform:translateY(-58%)}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:4px 0 17px}
.drawer-title{display:flex;align-items:flex-start;gap:12px}
.drawer-letter{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border:1px solid #cdbd9b;border-radius:9px 9px 4px 4px;background:#f1e4ca;color:#6f5b38;font:700 21px/1 Georgia,serif}
.drawer-title h3{margin:0;font-family:Georgia,serif;font-size:28px;line-height:1.1}
.drawer-title p{margin:4px 0 0;color:var(--muted);font-size:11px}
.sort-controls{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.sort-button{min-height:34px;padding:0 11px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#4d594f;font-size:10px;font-weight:900;cursor:pointer}
.sort-button.active{border-color:#a9c5a4;background:var(--green-soft);color:var(--green-dark)}

.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.project-card{display:flex;flex-direction:column;min-height:315px;padding:17px;border:1px solid #ded8ca;border-radius:14px;background:#fffefb;box-shadow:var(--shadow-soft)}
.project-card::before{content:"";height:5px;margin:-17px -17px 14px;border-radius:13px 13px 0 0;background:linear-gradient(90deg,#d7e6d1,#6d9d66,#d7e6d1)}
.project-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.project-letter{display:grid;place-items:center;min-width:34px;height:31px;padding:0 9px;border:1px solid #d8c8aa;border-radius:8px;background:#f4ead5;color:#6b5836;font:700 16px/1 Georgia,serif}
.project-badges{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.badge{padding:4px 7px;border-radius:999px;font-size:8px;font-weight:950;letter-spacing:.045em;text-transform:uppercase}
.badge.featured{background:#e9f4e6;color:#36713d}
.badge.pending{background:#f1f1ed;color:#6f746f}
.badge.verified{background:#e2f2e3;color:#2f7139}
.project-card h3{margin:10px 0 3px;font-family:Georgia,serif;font-size:24px;line-height:1.12}
.project-replaces{margin:0 0 10px;color:#8a5e20;font-size:11px;font-weight:850}
.project-description{margin:0 0 13px;color:#4e5a50;font-size:12px}
.project-facts{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.fact{padding:5px 8px;border:1px solid #e0ddcf;border-radius:8px;background:#faf8f1;color:#657067;font-size:9px}
.project-card details{margin:0 0 12px;border-top:1px dashed #d8d2c2;border-bottom:1px dashed #d8d2c2}
.project-card summary{padding:9px 0;color:#4a654d;font-size:10px;font-weight:900;cursor:pointer}
.project-note{margin:0;padding:0 0 10px;color:#5d675f;font-size:10px;line-height:1.55}
.project-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:auto}
.project-actions a{display:flex;align-items:center;justify-content:center;min-height:39px;padding:8px;border:1px solid #cad7c6;border-radius:10px;background:#f7faf5;color:#365d3b;text-decoration:none;text-align:center;font-size:10px;font-weight:900}
.project-actions a:hover{background:#edf5e9}
.project-actions a.primary{border-color:var(--green-dark);background:var(--green);color:#fff}
.project-actions a.secondary{grid-column:1/-1}
.mirror-note{margin:9px 0 0;color:#7d847e;font-size:9px;text-align:center}

.alphabet-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:17px;padding:11px;border:1px solid var(--line);border-radius:14px;background:rgba(255,254,251,.9)}
.alphabet-bar button{min-width:34px;height:34px;padding:0 8px;border:1px solid #d6dfd2;border-radius:8px;background:#fff;color:#425546;font-weight:900;cursor:pointer}
.alphabet-bar button:disabled{opacity:.3;cursor:default}
.letter-group{margin-bottom:24px}
.letter-heading{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.letter-heading span{display:grid;place-items:center;width:43px;height:43px;border:1px solid #d4c5a6;border-radius:9px;background:#f1e5ce;color:#6b5735;font:700 22px/1 Georgia,serif}
.letter-heading::after{content:"";height:1px;flex:1;background:var(--line)}

.popular-note,.empty-state,.load-error{padding:18px;border:1px solid var(--line);border-radius:15px;background:#fffefb;color:var(--muted);font-size:12px}
.popular-note{margin-bottom:14px;border-color:#e2cf9c;background:#fff7df;color:#6d552d}
.rank-list{display:grid;gap:10px}
.rank-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:13px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fffefb;box-shadow:var(--shadow-soft)}
.rank-number{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:#6e8e69;color:#fff;font:700 19px/1 Georgia,serif}
.rank-row h3{margin:0;font-family:Georgia,serif;font-size:20px}
.rank-row p{margin:3px 0 0;color:var(--muted);font-size:10px}
.rank-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.rank-actions a{padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#f8faf6;color:#3e5f42;text-decoration:none;font-size:9px;font-weight:900}
.empty-state{text-align:center;padding:42px 24px}
.empty-state strong{display:block;margin-bottom:6px;color:var(--ink);font-family:Georgia,serif;font-size:24px}
.load-error{border-color:#e4c4bd;background:#fff2ef;color:#804d45}
.no-results{padding:34px;border:1px dashed #bdc9b8;border-radius:16px;background:#fffefb;color:var(--muted);text-align:center}

footer{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-top:34px;padding:23px 4px 0;border-top:1px solid var(--line);color:var(--muted);font-size:11px}
footer p{max-width:870px;margin:0}
footer strong{color:var(--ink)}
footer a{flex:0 0 auto;color:var(--green-dark);font-weight:900;text-decoration:none}
footer a:hover{text-decoration:underline}

@media(max-width:1080px){
  .hero{grid-template-columns:1fr;gap:24px}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));max-width:470px}
  .principles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalog-toolbar{grid-template-columns:1fr}
  .cabinet{grid-template-columns:230px minmax(0,1fr)}
  .project-grid{grid-template-columns:1fr}
}

@media(max-width:760px){
  main{width:min(100% - 20px,1320px);padding-top:18px}
  .sitebar{min-height:64px;padding:8px 12px}
  .brand img{width:34px;height:34px}
  .brand strong{font-size:17px}
  .brand small{display:none}
  .site-nav{gap:7px;font-size:10px}
  .hero{min-height:0;padding:28px 21px;border-radius:19px}
  .hero::after{display:none}
  .hero h1{font-size:48px}
  .hero-text{margin-top:16px;font-size:13px}
  .stats{gap:7px}
  .stats div{min-height:86px;padding:10px}
  .stats dt{font-size:29px}
  .stats dd{font-size:8px}
  .principles{gap:8px}
  .principles article{min-height:128px;padding:13px;gap:9px}
  .principles article>span{width:34px;height:34px;font-size:13px}
  .principles h2{font-size:13px}
  .principles p{font-size:10px}
  .catalog-toolbar{position:relative;top:auto;padding:9px}
  .view-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalog-heading{align-items:flex-start;flex-direction:column;gap:10px;margin-top:26px}
  .cabinet{grid-template-columns:1fr;padding:11px}
  .drawer-list{grid-template-columns:1fr 1fr}
  .drawer-button{grid-template-columns:34px minmax(0,1fr);min-height:74px;padding:9px}
  .drawer-icon{width:32px;height:32px}
  .drawer-count{display:none}
  .drawer-copy small{white-space:normal;line-height:1.25}
  .drawer-stage{padding:15px}
  .drawer-head{display:block}
  .sort-controls{justify-content:flex-start;margin-top:11px}
  .rank-row{grid-template-columns:43px minmax(0,1fr)}
  .rank-actions{grid-column:2;justify-content:flex-start}
  footer{display:block}
  footer a{display:inline-block;margin-top:12px}
}

@media(max-width:470px){
  .hero h1{font-size:43px}
  .lead{font-size:17px}
  .principles{grid-template-columns:1fr}
  .principles article{min-height:0}
  .drawer-list{grid-template-columns:1fr}
  .project-actions{grid-template-columns:1fr}
  .project-actions a.secondary{grid-column:1}
  .view-tab b{font-size:10px}
}

@media(prefers-reduced-motion:no-preference){
  .drawer-button,.view-tab,.project-actions a{transition:transform .16s ease,background .16s ease,border-color .16s ease}
}