@charset "UTF-8";

body.hejmo{ background:var(--green-dk) }
.hejmo .sheet{ background:var(--paper); overflow:clip }

.haveno{
  position:relative; overflow:hidden;
  min-height:min(92vh, 780px);
  display:flex; flex-direction:column; justify-content:flex-end;
  isolation:isolate;
}
.haveno .scene{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:linear-gradient(#F4F0E0, #E4DFC2 62%, #E1DCBE);
}
.haveno .ship{
  position:absolute; right:clamp(-14px,1.5vw,44px); bottom:clamp(96px,12.5vw,172px);
  width:clamp(148px,20vw,272px); height:auto;
}
.haveno .kompaso{
  position:absolute; right:clamp(18px,4vw,74px); top:clamp(22px,3.5vw,52px);
  width:clamp(112px,15vw,214px); height:auto; opacity:.3;
}
@keyframes rozo{ 0%,100%{ transform:rotate(-2.4deg) } 50%{ transform:rotate(2.4deg) } }
.rozo{ animation:rozo 22s ease-in-out infinite; transform-origin:110px 110px }

.haveno .birdoj{
  position:absolute; right:clamp(150px,23vw,330px); top:clamp(96px,13vw,178px);
  width:clamp(78px,10vw,150px); height:auto; opacity:.38;
}
@keyframes flugas{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(-16px,-7px) } }
.flugas{ animation:flugas 19s ease-in-out infinite }

@media (max-width:900px){ .haveno .birdoj{ display:none } .haveno .kompaso{ opacity:.16 } }
@media (max-width:700px){ .haveno .kompaso{ display:none } }

.haveno .globo{
  position:absolute; right:clamp(-30px,1vw,34px); bottom:clamp(150px,19vw,262px);
  width:clamp(180px,24vw,326px); height:auto; opacity:.5;
}
.haveno .fora-velo{
  position:absolute; right:clamp(230px,30vw,430px); bottom:clamp(150px,18vw,238px);
  width:clamp(38px,5vw,72px); height:auto; opacity:.3;
}
.haveno .ondoj{ position:absolute; left:0; right:0; bottom:0; width:100%; height:clamp(130px,17vw,235px) }

.haveno .inner{
  position:relative; z-index:2;
  padding:clamp(40px,6vw,72px) clamp(18px,4vw,54px) clamp(120px,15vw,205px);
  width:100%;
}
.haveno h1{
  font-size:clamp(31px,5.4vw,55px); line-height:1.06; margin:0 0 14px;
  max-width:17ch; text-wrap:balance;
}
.haveno h1 em{ font-style:italic; font-weight:400; color:var(--brass-tx) }
.haveno .sub{
  font-size:clamp(16.5px,2.2vw,20px); color:var(--muted);
  max-width:46ch; margin:0 0 26px;
}
.haveno .eyebrow{ color:var(--brass-tx) }

@keyframes drift{ from{ transform:translateX(0) } to{ transform:translateX(-300px) } }
.drift{ animation:drift linear infinite }
.d-a{ animation-duration:26s } .d-b{ animation-duration:17s } .d-c{ animation-duration:11s }

@keyframes bob{
  0%,100%{ transform:translateY(0) rotate(-1.1deg) }
  50%    { transform:translateY(-9px) rotate(1.1deg) }
}
.bob{ animation:bob 6.5s ease-in-out infinite; transform-origin:52% 82% }
@keyframes velo{ 0%,100%{ transform:scaleX(1) } 50%{ transform:scaleX(1.035) } }
.velo{ animation:velo 6.5s ease-in-out infinite; transform-origin:119px 40px }
@keyframes jibo{ 0%,100%{ transform:skewX(0deg) } 50%{ transform:skewX(-1.6deg) } }
.jibo{ animation:jibo 6.5s ease-in-out infinite; transform-origin:112px -56px }
@keyframes saumo{ 0%,100%{ opacity:.35; transform:scaleX(.94) } 50%{ opacity:.8; transform:scaleX(1.06) } }
.saumo{ animation:saumo 3.2s ease-in-out infinite; transform-origin:290px 376px }
@keyframes fora{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(-14px,-3px) } }
.fora{ animation:fora 30s ease-in-out infinite }

@media (min-width:1000px){
  .haveno .inner{ padding-right:min(40%, 430px) }
  .kursoj{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:999px) and (min-width:701px){
  .haveno .ship{ opacity:.32; right:-46px; bottom:175px; width:min(300px,46vw) }
}

@media (max-width:700px){
  .haveno .ship{ display:none }
  .haveno{ min-height:0 }
  .haveno .inner{ padding-bottom:clamp(88px,20vw,130px) }
}

.kurso-q{
  font-family:var(--serif); font-weight:700; font-size:clamp(17px,2.3vw,21px);
  margin:0 0 14px; display:flex; align-items:center; gap:10px;
}
.kurso-q::before{ content:""; width:.72em; height:.72em; flex:none;
  background:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M12.00,1.50 L14.47,9.10 L22.46,9.10 L16.00,13.80 L18.47,21.40 L12.00,16.70 L5.53,21.40 L8.00,13.80 L1.54,9.10 L9.53,9.10Z%27 fill=%27%236B8B4C%27/></svg>") center/contain no-repeat }

.kursoj{
  display:grid; gap:11px; max-width:880px;
  grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
}
.kurso{
  display:flex; flex-direction:column; gap:5px; text-align:left;
  background:var(--paper-2); border:1.5px solid var(--rule); border-radius:var(--r);
  padding:15px 16px; min-height:var(--tap); cursor:pointer;
  font-family:inherit; color:inherit; text-decoration:none;
  transition:border-color .16s, background .16s, transform .16s;
  touch-action:manipulation;
}
.kurso:hover{ border-color:var(--green); background:#fff; transform:translateY(-2px) }
.kurso b{ font-family:var(--serif); font-size:16.5px; line-height:1.25 }
.kurso span{ font-size:13.5px; color:var(--muted); line-height:1.45 }
.kurso .go{ font-family:var(--mono); font-size:11.5px; color:var(--brass-tx); margin-top:3px }
.kurso[aria-pressed="true"]{ border-color:var(--green); background:#fff; box-shadow:inset 0 0 0 1px var(--green) }

.instruisto{ margin:16px 0 0; font-size:14.5px; color:var(--muted) }

.rev{ opacity:0; transform:translateY(22px); transition:opacity .55s ease, transform .55s ease }
.rev.in{ opacity:1; transform:none }
.rev.d1{ transition-delay:.09s } .rev.d2{ transition-delay:.18s } .rev.d3{ transition-delay:.27s }

.faktoj{ background:var(--green-dk); color:var(--paper-2); padding:clamp(44px,7vw,76px) 0; position:relative; overflow:hidden }
.faktoj .in-wrap{ padding:0 clamp(18px,4vw,54px); position:relative; z-index:1 }
.faktoj h2{ color:var(--paper-2); margin:0 0 8px }
.faktoj .lede{ color:rgba(245,241,225,.78); margin-bottom:34px }
.fakt-grid{ display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) }
.fakt .n{
  font-family:var(--serif); font-weight:900; font-size:clamp(46px,7vw,68px);
  line-height:1; color:var(--paper-2); display:block; margin-bottom:6px;
}
.fakt .n small{ font-size:.34em; font-weight:700; color:rgba(245,241,225,.6); margin-left:6px }
.fakt p{ margin:0; font-size:15.5px; color:rgba(245,241,225,.85); max-width:34ch }

.faktoj .hatch{ position:absolute; inset:0; width:100%; height:100%; opacity:.08; z-index:0 }

.vortfarado{ padding-block:clamp(44px,7vw,76px) }
.builder{
  background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r);
  padding:clamp(20px,3.4vw,32px); margin-top:22px; max-width:760px;
}
.builder .out{
  font-family:var(--serif); font-weight:900;
  font-size:clamp(30px,6vw,52px); line-height:1.1; color:var(--green-dk);
  min-height:1.15em; word-break:break-word;
}
.builder .out .add{ color:var(--brass) }
.builder .gloss{ font-size:17px; color:var(--muted); margin:4px 0 20px; min-height:1.5em }
.builder .gloss b{ color:var(--ink); font-weight:600 }
.chips{ display:flex; flex-wrap:wrap; gap:9px }
.chip{
  font-family:var(--mono); font-size:14px; font-weight:600;
  min-height:44px; padding:0 16px; display:inline-flex; align-items:center; gap:7px;
  border:1.5px solid var(--rule); border-radius:var(--r); background:var(--paper);
  color:var(--ink); cursor:pointer; touch-action:manipulation;
  transition:background .14s, border-color .14s;
}
.chip small{ font-family:var(--body); font-size:12.5px; color:var(--muted); font-weight:400 }
.chip:hover{ border-color:var(--green) }
.chip[aria-pressed="true"]{ background:var(--green-btn); border-color:var(--green-btn); color:#fff }
.chip[aria-pressed="true"] small{ color:rgba(255,255,255,.8) }
.builder .hint{ font-size:14px; color:var(--muted); margin:18px 0 0 }

.strekoj{ padding-block:clamp(34px,5vw,60px) }
.streko{
  display:grid; grid-template-columns:1fr auto; gap:22px; align-items:center;
  border-top:1px solid var(--rule); padding:22px 0; text-decoration:none; color:inherit;
}
.streko:last-of-type{ border-bottom:1px solid var(--rule) }
.streko h3{ margin:0 0 4px; transition:color .15s }
.streko p{ margin:0; font-size:15px; color:var(--muted) }
.streko .arr{ font-family:var(--mono); font-size:20px; color:var(--brass-tx); transition:transform .18s }
.streko:hover h3{ color:var(--green-dk) }
.streko:hover .arr{ transform:translateX(6px) }
.streko.dim{ opacity:.45 }
.streko.hi{ background:var(--paper-2); box-shadow:0 0 0 12px var(--paper-2); border-radius:2px }

.libro{
  background:var(--green-dk); color:var(--paper-2);
  padding:clamp(38px,6vw,64px) clamp(18px,4vw,54px);
  display:grid; grid-template-columns:170px 1fr; gap:clamp(22px,4vw,44px); align-items:center;
}
.libro img{ border-radius:3px; box-shadow:0 10px 34px rgba(0,0,0,.28) }
.libro h2{ color:var(--paper-2); margin:0 0 10px }
.libro p{ color:rgba(245,241,225,.85); max-width:52ch }
.libro .btn{ background:var(--paper-2); color:var(--green-dk); margin-top:8px }
.libro .btn:hover{ background:#fff; color:var(--green-dk) }
@media (max-width:640px){ .libro{ grid-template-columns:1fr; justify-items:start } .libro img{ width:150px } }

@media (prefers-reduced-motion:reduce){
  .rev{ opacity:1; transform:none }
  .pl{ transform:none !important }
  .drift, .bob, .velo, .jibo, .saumo, .fora, .rozo, .flugas{ animation:none !important }
}

.vortfarado, .strekoj{ position:relative; overflow:hidden }
.navigas{
  position:absolute; z-index:0; pointer-events:none;
  width:clamp(92px,10vw,148px); height:auto; opacity:0;
  transition:transform 1.25s cubic-bezier(.22,.7,.3,1), opacity .9s ease;
}
.navigas.dekstren{ right:clamp(6px,2vw,40px); top:clamp(150px,20vw,210px); transform:translateX(150px) scaleX(-1) }
.navigas.maldekstren{ left:30%; top:10px; transform:translateX(-190px) }
.navigas.dekstren.in{ opacity:.55; transform:translateX(0) scaleX(-1) }
.navigas.maldekstren.in{ opacity:.5; transform:translateX(0) }

@keyframes bob2{
  0%,100%{ transform:translateY(0) rotate(-1.4deg) }
  50%    { transform:translateY(-5px) rotate(1.4deg) }
}
.bob2{ animation:bob2 5.2s ease-in-out infinite; transform-origin:50% 85% }

@media (min-width:1000px){ .builder{ max-width:min(760px, calc(100% - 190px)) } }

@media (max-width:820px){ .navigas{ display:none } }

@media (prefers-reduced-motion:reduce){
  .bob2{ animation:none !important }
  .navigas{ transition:none !important }
}

.hejmo h2{ margin-top:0 }
.hejmo .lede{ margin-bottom:18px }

.haveno{ min-height:min(84vh, 700px) }
.haveno .inner{ padding:clamp(30px,4vw,52px) clamp(18px,4vw,54px) clamp(104px,12vw,168px) }
.haveno h1{ margin-bottom:12px }
.haveno .sub{ margin-bottom:20px }
.kurso-q{ margin-bottom:11px }
.kursoj{ gap:9px }
.kurso{ padding:12px 14px; gap:3px }
.kurso b{ font-size:15.5px }
.kurso span{ font-size:13px; line-height:1.4 }
.instruisto{ margin-top:12px; font-size:14px }
.haveno .ondoj{ height:clamp(104px,13vw,196px) }
.haveno .ship{ bottom:clamp(84px,10.5vw,146px) }
.haveno .globo{ bottom:clamp(128px,16vw,224px) }
.haveno .fora-velo{ bottom:clamp(128px,15vw,200px) }

.faktoj{ padding:clamp(30px,4.5vw,54px) 0 }
.fakt-grid{ gap:clamp(16px,2vw,24px) }
.fakt .n{ font-size:clamp(34px,5vw,54px); margin-bottom:3px }
.fakt p{ font-size:15px; line-height:1.5 }

.vortfarado{ padding-block:clamp(30px,4.5vw,54px) }
.builder{ padding:clamp(16px,2.4vw,26px); margin-top:16px }
.builder .out{ font-size:clamp(28px,4.6vw,44px) }
.builder .gloss{ margin:2px 0 15px; font-size:16px }
.builder .hint{ margin-top:14px; font-size:13.5px }

.strekoj{ padding-block:clamp(26px,3.6vw,44px) }
.streko{ padding:15px 0; gap:18px }
.streko h3{ font-size:18px }
.streko p{ font-size:14.5px }

.libro{ padding:clamp(28px,4vw,50px) clamp(18px,4vw,54px); gap:clamp(20px,3vw,36px) }
.libro p{ margin-bottom:10px }

@media (max-width:700px){

  .fakt-grid{ grid-template-columns:repeat(2,1fr); gap:16px 14px }
  .fakt .n{ font-size:32px }
  .fakt p{ font-size:13.5px; line-height:1.45 }

  .kurso{ padding:11px 13px }
  .haveno .inner{ padding-bottom:clamp(80px,18vw,120px) }
  .haveno .ondoj{ height:clamp(78px,16vw,120px) }

  .streko{ grid-template-columns:1fr auto; padding:13px 0; gap:12px }
  .streko h3{ font-size:16.5px }
  .streko p{ font-size:13.5px }

  .libro img{ width:120px }
  .libro h2{ font-size:22px }
  .libro p{ font-size:14.5px }

  .hejmo .foot{ padding-top:22px }
  .hejmo .foot .cols{ grid-template-columns:repeat(2,1fr); gap:16px 14px }
  .hejmo .foot li{ margin-bottom:4px }
  .hejmo .foot ul{ font-size:13.5px }
}

@media (min-width:960px){
  .streko-listo{ display:grid; grid-template-columns:1fr 1fr; column-gap:34px }
  .streko{ border-top:1px solid var(--rule) }
  .streko:nth-child(4){ border-bottom:1px solid var(--rule) }
  .streko:last-of-type{ border-bottom:1px solid var(--rule) }
}

@media (min-width:960px){
  .navigas.maldekstren{ left:auto; right:9%; top:auto; bottom:18px }
}

@media (min-width:1000px){
  .haveno .inner{ padding-right:min(40%, 430px) }
  .kursoj{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width:999px){
  .haveno .ship, .haveno .globo, .haveno .fora-velo{ display:none }
  .haveno .kompaso{ opacity:.22 }
}

.haveno{ min-height:min(76vh, 640px) }
.haveno .inner{ padding-top:clamp(16px,2.2vw,28px) }
.haveno .eyebrow{ margin-bottom:9px }
.haveno h1{ font-size:clamp(28px,4.6vw,46px); margin-bottom:11px }
.haveno .sub{ font-size:clamp(16px,1.9vw,18px); margin-bottom:18px }
.haveno .kompaso{ top:clamp(12px,2vw,30px) }

.hejmo .top{ padding-top:calc(7px + env(safe-area-inset-top)); padding-bottom:7px }
.haveno .inner{ padding-top:clamp(12px,1.6vw,20px) }
.haveno .eyebrow{ margin-bottom:6px }
.haveno h1{ line-height:1.02; margin-bottom:9px }
.haveno .sub{ margin-bottom:15px }
.haveno .kompaso{ top:clamp(8px,1.4vw,22px) }

.hejmo{
  --ear:  clamp(100px, 5.4vw, 470px);
  --band: min(860px, max(600px, 32vw));
}

@media (min-width:1140px){
  .hejmo .sheet{ max-width:min(2800px, calc(100vw - var(--ear) * 2)) }
}

@media (min-width:1240px){
  .hejmo .top,
  .hejmo .nav ul,
  .hejmo .wrap,
  .hejmo .libro,
  .hejmo .foot{
    padding-left:max(clamp(18px,4vw,54px), calc(50% - var(--band)));
    padding-right:max(clamp(18px,4vw,54px), calc(50% - var(--band)));
  }
  .hejmo .haveno .inner{
    padding-left:max(clamp(18px,4vw,54px), calc(50% - var(--band)));

    padding-right:max(min(40%,430px), calc(50% - var(--band) + 430px));
  }

  .haveno .ship{      right:max(-14px,  calc(50% - var(--band) - 20px)) }
  .haveno .globo{     right:max(-30px,  calc(50% - var(--band) - 40px)) }
  .haveno .kompaso{   right:max(18px,   calc(50% - var(--band) - 60px)) }
  .haveno .fora-velo{ right:max(230px,  calc(50% - var(--band) + 220px)) }
}

.haveno h1{ font-size:clamp(28px,3.5vw,44px); max-width:23ch }

.haveno .inner{ padding-bottom:clamp(86px,9vw,132px) }
.haveno .ondoj{ height:clamp(92px,11vw,158px) }
.haveno .ship{ bottom:clamp(74px,9vw,124px) }
.haveno .globo{ bottom:clamp(112px,14vw,196px) }
.haveno .fora-velo{ bottom:clamp(110px,13vw,172px) }

.haveno .inner{ padding-top:clamp(20px,3vw,40px) }

.radiko-etikedo{
  font-family:var(--serif); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass-tx); margin:0 0 8px;
}
.radiko-etikedo b{ font-family:var(--mono); font-size:13px; letter-spacing:0; text-transform:none; color:var(--ink) }
.builder .alia{
  display:inline; background:none; border:none; padding:0; margin-left:4px;
  font-family:inherit; font-size:inherit; color:var(--green-dk);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.builder .alia:hover{ color:var(--brass-tx) }

.builder .chips{ min-height:92px; align-content:flex-start }
@media (max-width:560px){ .builder .chips{ min-height:140px } }

.aksoj{ display:grid; gap:13px; margin-top:4px }
.akso{ display:grid; grid-template-columns:104px 1fr; gap:12px; align-items:start }
.akso-nom{
  font-family:var(--serif); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brass-tx); padding-top:13px;
}
.aksoj .chips{ min-height:0 }
.aksoj .chip{ min-height:38px; padding:0 12px; font-size:13px }
.aksoj .chip small{ font-size:11.5px }
.chip.nula{ font-family:var(--body); opacity:.85 }
.builder .out .fin{ color:var(--green) }
@media (max-width:640px){
  .akso{ grid-template-columns:1fr; gap:5px }
  .akso-nom{ padding-top:0 }
}

.malmunt{
  font-size:13.5px; color:var(--muted); margin:-6px 0 16px; line-height:1.8;
}
.malmunt b{ font-family:var(--mono); font-size:12.5px; color:var(--ink); font-weight:600 }
.malmunt .plus{ color:var(--brass); margin:0 9px; font-weight:600 }
.gloss .nekonata{ font-size:15px; color:var(--muted); font-style:italic; font-weight:400 }
.aksoj .chip{ position:relative }
.aksoj .chip .nro{
  position:absolute; top:-6px; right:-6px; min-width:17px; height:17px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brass); color:#fff; border-radius:50%;
  font-family:var(--mono); font-size:10.5px; font-style:normal;
}
.aksoj .chip .nro:empty{ display:none }

.aksoj .chip:disabled{
  opacity:.32; cursor:not-allowed; border-style:dashed;
  background:transparent; color:var(--muted);
}
.aksoj .chip:disabled small{ color:var(--muted) }
.aksoj .chip:disabled:hover{ border-color:var(--rule) }

.vortfarado.malluma{
  background:var(--green-dk); color:var(--paper-2);
  position:relative; overflow:hidden;
  padding-block:clamp(40px,6vw,72px);
}

.vortfarado.malluma .hatch{
  position:absolute; inset:0; width:100%; height:100%; opacity:.08; z-index:-1;
}

.malluma h2{ color:var(--paper-2) }
.malluma > p{ color:rgba(245,241,225,.8) }
.malluma > p b{ color:var(--paper-2) }

.malluma .builder{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(245,241,225,.24);
}

@media (min-width:1000px){
  .malluma .builder{ max-width:min(760px, calc(100% - 190px)) }
}
.malluma .radiko-etikedo{ color:#D2C49B }
.malluma .radiko-etikedo b{ color:var(--paper-2) }

.malluma .out{ color:var(--paper-2) }
.malluma .out .add{ color:#C9B98C }
.malluma .out .fin{ color:#9DB182 }

.malluma .gloss b{ color:var(--paper-2) }
.malluma .malmunt{ color:rgba(245,241,225,.72) }
.malluma .malmunt b{ color:var(--paper-2) }
.malluma .malmunt .plus{ color:#D2C49B }

.malluma .akso-nom{ color:rgba(245,241,225,.72) }

.malluma .chip{
  background:rgba(255,255,255,.07);
  border-color:rgba(245,241,225,.28);
  color:var(--paper-2);
}
.malluma .chip small{ color:rgba(245,241,225,.72) }
.malluma .chip:hover{ border-color:var(--paper-2); background:rgba(255,255,255,.13) }
.malluma .chip[aria-pressed="true"]{
  background:var(--paper-2); border-color:var(--paper-2); color:var(--green-dk);
}
.malluma .chip[aria-pressed="true"] small{ color:rgba(62,82,48,.8) }
.malluma .chip:disabled{
  opacity:.3; border-style:dashed; background:transparent; color:rgba(245,241,225,.6);
}
.malluma .chip:disabled small{ color:rgba(245,241,225,.5) }
.malluma .chip:disabled:hover{ border-color:rgba(245,241,225,.28); background:transparent }

.malluma .hint{ color:rgba(245,241,225,.72) }
.malluma .hint b{ color:var(--paper-2) }
.malluma .hint code{ background:rgba(255,255,255,.14); color:var(--paper-2) }
.malluma .alia{ color:var(--paper-2) }
.malluma .alia:hover{ color:#C9B98C }

.malluma .navigas.dekstren.in{ opacity:.32 }

.malluma .navigas .korpo{ fill:#DCE2CB }

@media (hover:none), (max-width:820px){
  .aksoj .chip{ min-height:48px; padding:0 14px }
  .chips{ gap:8px }
}

@media (min-width:821px){
  .malluma .builder{ max-width:min(760px, calc(100% - 190px)) }
}

@media (min-width:1240px){
  .malluma .navigas.dekstren{ right:max(clamp(6px,2vw,40px), calc(50% - var(--band))) }

  .strekoj .navigas.maldekstren{ left:auto; right:max(9%, calc(50% - var(--band) + 40px)) }
}

.hejmo .alia-vico{margin:16px 0 0}
.hejmo .vortfarado .btn.ghost{border-color:rgba(245,241,225,.4);color:var(--paper-2);background:transparent}
.hejmo .vortfarado .btn.ghost:hover{background:rgba(245,241,225,.14);border-color:var(--paper-2)}

.citajoj{background:var(--paper);color:var(--ink);position:relative;overflow:hidden;
  padding:clamp(46px,7vw,86px) 0}
.citajoj .cit-in{position:relative;padding:0 clamp(18px,4vw,54px);display:block}
.citajoj .cit{margin:0;max-width:min(720px, 62%)}
.citajoj blockquote{margin:0 0 18px;font-family:var(--serif);font-weight:400;
  font-size:clamp(19px,2.5vw,27px);line-height:1.42;color:var(--ink);position:relative;
  text-wrap:pretty}
.citajoj blockquote::before{content:"«";color:var(--brass);opacity:.5}
.citajoj blockquote::after{content:"»";color:var(--brass);opacity:.5}
.citajoj figcaption{font-family:var(--mono);font-size:13.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brass-tx)}
.citajoj figcaption::before{content:"— ";opacity:.6}
.citajoj .navigas.spegule{position:absolute;right:clamp(6px,2vw,40px);top:50%;
  width:clamp(150px,17vw,240px);height:auto;opacity:0;
  transform:translate(120px,-50%) scaleX(-1);
  transition:opacity 1.1s ease, transform 1.25s cubic-bezier(.22,.68,.36,1)}
.citajoj .navigas.spegule.in{opacity:.5;transform:translate(0,-50%) scaleX(-1)}
@media (max-width:820px){
  .citajoj .navigas.spegule{display:none}
  .citajoj .cit{max-width:none}
}
@media (min-width:1240px){
  .citajoj .cit-in{
    padding-left:max(clamp(18px,4vw,54px), calc(50% - var(--band)));
    padding-right:max(min(40%,430px), calc(50% - var(--band) + 430px));
  }
  .citajoj .navigas.spegule{ right:max(-10px, calc(50% - var(--band) - 30px)) }
}
.hejmo-sekcio{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brass-tx);margin:26px 0 10px;padding-bottom:6px;
  border-bottom:1px solid var(--line)}
.hejmo-sekcio:first-of-type{margin-top:14px}
.hejmo-sekcio a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.hejmo-sekcio a:hover{border-bottom-color:var(--brass-tx)}
.hejmo-kolumnoj{display:grid;grid-template-columns:1fr;gap:0;align-items:start}
.hejmo-grupo{min-width:0}
.hejmo-grupo .hejmo-sekcio{margin-top:22px}
.hejmo-grupo:first-child .hejmo-sekcio{margin-top:18px}
@media (min-width:760px){
  .hejmo-kolumnoj{grid-template-columns:1fr 1fr;gap:0 36px}
  .hejmo-grupo:nth-child(-n+2) .hejmo-sekcio{margin-top:14px}
}
@media (min-width:1180px){
  .hejmo-kolumnoj{grid-template-columns:1fr 1fr 1fr;gap:0 34px;grid-auto-flow:row}
  .hejmo-grupo:nth-child(-n+3) .hejmo-sekcio{margin-top:14px}
}
}