/* Karta grobnice — ekspediciona karta Richa Wildea. Papir karte, tamna tirkizna, oker. */
:root{
  --paper:#E3D5B8;--paper-l:#EEE4CE;--paper-xl:#F6F0E2;--paper-d:#D2BE95;
  --ink:#211F1A;--ink-2:#4B4336;--ink-3:#6E6250;
  --teal:#0F3B3A;--teal-d:#092625;--teal-l:#1C5452;--teal-x:#2C7472;
  --ochre:#B5651D;--ochre-d:#8A4811;--ochre-l:#D9984D;--gold:#E2B862;
  --line:rgba(33,31,26,.16);
  --fh:'Alegreya SC',Georgia,'Times New Roman',serif;
  --fb:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --side:clamp(320px,29vw,420px);
  --pad:clamp(18px,4vw,56px);
  --trail:56px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.68 var(--fb);overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:var(--teal);text-decoration-color:rgba(181,101,29,.7);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--ochre-d)}
:focus-visible{outline:3px solid var(--ochre);outline-offset:2px;border-radius:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--teal);color:var(--paper);padding:8px 14px;border-radius:4px}
.skip:focus{top:12px}
h1,h2,h3{font-family:var(--fh);font-weight:700;color:var(--teal);letter-spacing:.01em;margin:0}
h1{font-size:clamp(2.05rem,1.2rem + 3.1vw,3.35rem);line-height:1.02}
h2{font-size:clamp(1.5rem,1.15rem + 1.1vw,1.95rem);line-height:1.12;margin:0 0 .7em}
h3{font-size:1.3rem;line-height:1.2}
p{margin:0 0 1em}

/* ---------- okvir: lepljiva karta levo, ruta desno ---------- */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);grid-template-areas:"side top" "side main" "side foot";min-height:100vh}
.top{grid-area:top}.main{grid-area:main;min-width:0}.foot{grid-area:foot}
.side{grid-area:side;grid-row:1/-1;position:sticky;top:0;align-self:start;height:100vh;display:flex;flex-direction:column;gap:14px;padding:22px 22px 16px;color:var(--paper);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23E3D5B8' stroke-opacity='.07'%3E%3Cpath d='M-10 60c40-30 80 20 120-6s80-40 140 0'/%3E%3Cpath d='M-10 90c40-26 80 22 120-4s80-36 140 4'/%3E%3Cpath d='M-10 150c50-20 70 30 130 6s70-30 130 4'/%3E%3Cpath d='M-10 180c50-16 70 32 130 8s70-26 130 6'/%3E%3Cpath d='M-10 210c50-12 70 34 130 10s70-22 130 8'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(120% 60% at 50% 0%,#14504e 0%,transparent 70%),var(--teal);
  border-right:1px solid rgba(226,184,98,.35);box-shadow:inset -14px 0 30px -18px rgba(0,0,0,.6)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-family:var(--fh);font-weight:700;font-size:1.32rem;line-height:1}
.brand small{display:block;font-family:var(--fb);font-weight:400;font-size:.78rem;letter-spacing:.06em;opacity:.75;margin-top:4px;text-transform:uppercase}
.brand-rose{width:38px;height:38px;flex:none;color:var(--gold)}
.brand-rose text{display:none}
.brand:hover{color:var(--gold)}
.side-rg{margin:0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7}

/* ---------- grobnica u slojevima (CSS 3D) ---------- */
.tomb{position:relative;flex:1 1 auto;min-height:200px;perspective:760px;perspective-origin:50% 42%;overflow:hidden;border-radius:6px;background:#140d07;
  box-shadow:0 0 0 1px rgba(226,184,98,.35),0 18px 40px -20px rgba(0,0,0,.8)}
.tomb-stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.ly{position:absolute;inset:-7%;transform:translateZ(calc(var(--z) * var(--sep,1) * 1px)) scale(var(--s,1));transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.tomb{container-type:size}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.ly svg{max-width:none}
.ly-wall svg{width:100%;height:100%}
.gate{position:absolute;left:50%;bottom:7%;height:80cqh;width:auto;aspect-ratio:200/254;transform:translateX(-50%)}
.col{position:absolute;bottom:7%;height:92cqh;width:auto;aspect-ratio:46/300}
.col-l{left:calc(7% + 2cqw)}.col-r{right:calc(7% + 2cqw)}
.book{position:absolute;left:50%;top:50%;width:min(46cqw,60cqh);height:auto;aspect-ratio:120/92;transform:translate(-50%,-22%)}
.dunes{position:absolute;left:-12%;bottom:-4%;width:124%;height:32cqh}
.hat{position:absolute;right:20%;bottom:calc(4% + 12cqh);width:min(17cqw,22cqh);height:auto;transform:rotate(-10deg)}
.rubble{position:absolute;left:18%;bottom:calc(4% + 11cqh);width:min(15cqw,19cqh);height:auto}
.ly-book .book-glow{position:absolute;left:50%;top:58%;width:min(56cqw,70cqh);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,214,130,.75),rgba(255,180,80,.2) 45%,transparent 70%);animation:breathe 4.5s ease-in-out infinite alternate}
.book-bob{animation:bob 5.5s ease-in-out infinite;transform-origin:200px 190px}
.ly-dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:#f6dfa8;opacity:0;animation:dust 8s linear infinite}
.glow{position:absolute;top:18%;width:42%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,170,70,.42),transparent 62%);mix-blend-mode:screen;animation:flick 2.6s ease-in-out infinite alternate;pointer-events:none;transform:translateZ(40px)}
.glow-l{left:-12%}.glow-r{right:-12%;animation-delay:-1.3s}
.tomb::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,transparent 50%,rgba(5,3,1,.75));pointer-events:none}
.tomb.paused *{animation-play-state:paused!important}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes breathe{from{opacity:.55;transform:translate(-50%,-50%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes flick{0%{opacity:.65}35%{opacity:.95}55%{opacity:.75}100%{opacity:1}}
@keyframes dust{0%{opacity:0;transform:translate3d(0,0,0)}15%{opacity:.8}85%{opacity:.5}100%{opacity:0;transform:translate3d(18px,-90px,0)}}

/* ---------- mini karta + kompas ---------- */
.mapcard{position:relative;flex:none;background:var(--paper);color:var(--ink);border-radius:6px;padding:10px 10px 6px;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 10px 26px -16px #000;
  background-image:linear-gradient(90deg,transparent 49.6%,rgba(110,80,40,.12) 50%,transparent 50.4%),linear-gradient(transparent 49.4%,rgba(110,80,40,.1) 50%,transparent 50.6%),radial-gradient(90% 80% at 30% 20%,var(--paper-l),var(--paper) 70%,var(--paper-d))}
.route{width:100%;height:auto;overflow:visible}
.route-shadow{fill:none;stroke:rgba(15,59,58,.12);stroke-width:9;stroke-linecap:round}
.route-path{fill:none;stroke:var(--ochre-d);stroke-width:2.2;stroke-dasharray:5 6;stroke-linecap:round}
.route-x{stroke:#8E2F1F;stroke-width:3;stroke-linecap:round;fill:none}
.stop{fill:var(--paper-xl);stroke:var(--teal);stroke-width:2;transition:fill .3s}
.stop.on,.stop-a:hover .stop{fill:var(--teal)}
.stop-a text{font:700 8.5px var(--fb);fill:var(--teal);pointer-events:none}
.stop-a:has(.on) text,.stop-a:hover text{fill:var(--paper)}
.here{transition:transform .8s cubic-bezier(.3,.8,.3,1);pointer-events:none}
.here circle{fill:none;stroke:var(--ochre);stroke-width:2.2;animation:ping 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes ping{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.5);opacity:0}}
.nowrow{display:flex;align-items:center;gap:14px;flex:none}
.rose{position:relative;flex:none;width:76px;height:76px;color:var(--teal);background:var(--paper-xl);border-radius:50%;box-shadow:0 6px 16px -6px rgba(0,0,0,.6),0 0 0 3px var(--teal)}
.rose text,.rb-rose text{font:700 10px var(--fh)}
.needle{transform-box:fill-box;transform-origin:center;transform:rotate(var(--deg,0deg));transition:transform 1s cubic-bezier(.3,1.4,.4,1)}
.now{margin:0;display:flex;gap:10px;align-items:baseline;min-height:2.6em;font-size:.95rem;line-height:1.3}
.now-n{font-family:var(--fh);font-weight:700;color:var(--gold);font-size:1.05rem;flex:none}
.now-t{opacity:.92;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- gornja traka ---------- */
.top{display:flex;align-items:center;gap:6px 18px;padding:14px var(--pad);border-bottom:1px solid var(--line);background:rgba(238,228,206,.6)}
.brand-m{display:none}
.nav{display:flex;flex-wrap:wrap;gap:4px 18px;flex:1}
.nav a{font-weight:600;font-size:.95rem;text-decoration:none;color:var(--ink-2);padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--teal);border-color:var(--ochre-l)}
.nav a[aria-current]{color:var(--teal);border-color:var(--ochre)}
.age-chip{flex:none;font:700 .8rem/1 var(--fb);color:var(--paper);background:#8E2F1F;border-radius:999px;padding:6px 9px}
.nav-t{display:none}

/* ---------- glavna kolona: papir karte ---------- */
.main{position:relative;padding:0 var(--pad) 40px;
  background:
    linear-gradient(90deg,transparent calc(50% - 1px),rgba(120,85,40,.07) 50%,transparent calc(50% + 1px)),
    radial-gradient(900px 500px at 90% 0%,rgba(255,250,236,.55),transparent 65%),
    radial-gradient(700px 700px at 0% 55%,rgba(160,110,50,.09),transparent 60%)}
.main>*{max-width:880px}
.main>.hero{max-width:1080px}
.hero{padding:clamp(26px,4vw,52px) 0 26px}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:.88rem;color:var(--ink-3);margin-bottom:14px}
.crumbs a{color:var(--ink-2)}
.kicker{font-family:var(--fh);font-weight:500;color:var(--ochre-d);letter-spacing:.08em;font-size:1rem;margin:0 0 12px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:34px;border-top:2px dashed var(--ochre)}
.hero h1{margin-bottom:22px;max-width:18ch}
.lead p{font-size:1.14rem;line-height:1.62;color:var(--ink);max-width:62ch}
.lead p:first-child::first-letter{font-family:var(--fh);font-weight:700;float:left;font-size:3.3em;line-height:.82;margin:.06em .1em 0 0;color:var(--ochre-d)}
.coords{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.coords li{position:relative;padding:12px 14px 11px;background:var(--paper-xl);border:1.5px solid var(--teal);border-radius:3px;box-shadow:3px 3px 0 var(--teal)}
.coords li::after{content:"";position:absolute;inset:4px;border:1px dashed rgba(15,59,58,.3);pointer-events:none}
.coords span{display:block;font-family:var(--fh);font-weight:500;font-size:.85rem;color:var(--ink-3);letter-spacing:.05em}
.coords b{display:block;font-family:var(--fh);font-size:1.3rem;color:var(--teal);line-height:1.15}

/* ---------- demo ---------- */
.demo{margin:8px 0 34px;background:var(--teal-d);border-radius:8px;padding:12px;box-shadow:0 24px 50px -28px rgba(9,38,37,.9);position:relative}
.demo::before,.demo::after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--gold);opacity:.7}
.demo::before{left:-7px;top:-7px;border-right:0;border-bottom:0}
.demo::after{right:-7px;bottom:-7px;border-left:0;border-top:0}
.demo-head{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 10px}
.demo-label{margin:0;color:var(--paper);font-family:var(--fh);font-weight:700;letter-spacing:.05em;display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:#59c27a;box-shadow:0 0 0 3px rgba(89,194,122,.25)}
.demo-fs,.ghost{font:600 .9rem var(--fb);border-radius:999px;padding:7px 14px;cursor:pointer}
.demo-fs{background:transparent;color:var(--paper);border:1px solid rgba(227,213,184,.5)}
.demo-wrap{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#000}
.demo-wrap.is-tall{aspect-ratio:9/15}
.demo-poster{width:100%;height:100%;object-fit:cover}
.demo-poster-svg{display:grid;place-items:center;background:radial-gradient(circle,#3a2a12,#0b0703);color:var(--gold)}
.demo-poster-svg svg{width:30%}
.demo-veil{position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,rgba(9,38,37,.15),rgba(9,38,37,.78))}
.demo-play{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;border:0;cursor:pointer;background:var(--ochre);color:#fff8ea;font:700 1.3rem var(--fh);letter-spacing:.04em;padding:14px 28px 14px 18px;border-radius:999px;box-shadow:0 0 0 6px rgba(181,101,29,.28),0 16px 30px -10px #000;transition:transform .25s,background .25s}
.demo-play:hover{background:#c6721f;transform:translate(-50%,-50%) scale(1.04)}
.demo-ic{width:38px;height:38px;border-radius:50%;background:#fff3d6;color:var(--ochre-d);display:grid;place-items:center;--sym-band:#fff3d6}
.demo-ic svg{width:26px}
.demo-note{position:absolute;left:0;right:0;bottom:0;margin:0;padding:10px 14px;font-size:.86rem;color:var(--paper);background:linear-gradient(transparent,rgba(5,20,20,.85));text-align:center}
.demo-foot{margin:10px 4px 2px;color:rgba(227,213,184,.82);font-size:.9rem}
.demo-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.demo-off .demo-msg{position:absolute;inset:auto 0 0;padding:18px;background:rgba(9,38,37,.92);color:var(--paper)}
.demo-off .demo-msg a{color:var(--gold)}

/* ---------- legenda (karakteristike) ---------- */
.legend{margin:0 0 40px;padding:6px;border:2px solid var(--teal);background:var(--paper-xl);position:relative}
.legend-in{border:1px solid rgba(15,59,58,.45);padding:22px clamp(16px,3vw,30px) 14px;background:linear-gradient(135deg,transparent 0 92%,rgba(181,101,29,.12) 92%)}
.legend h2{margin-bottom:.15em}
.legend-sub{color:var(--ink-3);font-size:.95rem;margin-bottom:14px}
.legend dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:34px}
.legend dl div{display:flex;align-items:baseline;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}
.legend dt{color:var(--ink-2);font-size:.95rem;flex:none}
.legend dt::after{content:"";display:inline-block}
.legend dd{margin:0 0 0 auto;font-weight:700;color:var(--teal);text-align:right}
.legend dl div::before{content:"";order:1;flex:1;border-bottom:2px dotted rgba(110,98,80,.45);transform:translateY(-4px);min-width:12px}
.legend dt{order:0}.legend dd{order:2}

/* ---------- ruta kroz tekst ---------- */
.flow{position:relative;padding-left:var(--trail)}
.flow::before{content:"";position:absolute;left:21px;top:6px;bottom:0;border-left:2px dashed rgba(181,101,29,.5)}
.st{padding:8px 0 18px}
.st h2,.faq h2,.gallery h2,.legend h2{position:relative}
.st-n{position:absolute;left:calc(-1 * var(--trail));top:-.05em;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:var(--paper);font:700 1rem/1 var(--fh);box-shadow:0 0 0 5px var(--paper),0 0 0 6.5px rgba(15,59,58,.35)}
.legend .st-n,.gallery .st-n,.faq .st-n{position:static;display:inline-grid;margin-right:12px;width:38px;height:38px;font-size:.92rem;vertical-align:.18em;box-shadow:none}
.st p,.st li{max-width:66ch}
.st ul,.lead ul{list-style:none;padding:0;margin:0 0 1.1em}
.st ul li{position:relative;padding-left:24px;margin-bottom:.45em}
.st ul li::before{content:"";position:absolute;left:3px;top:.62em;width:8px;height:8px;background:var(--ochre);transform:rotate(45deg)}
.st ol{list-style:none;padding:0;margin:0 0 1.2em;counter-reset:k}
.st ol li{counter-increment:k;position:relative;padding:10px 12px 10px 52px;margin-bottom:8px;background:rgba(246,240,226,.7);border:1px solid var(--line);border-radius:4px}
.st ol li::before{content:counter(k);position:absolute;left:10px;top:9px;width:30px;height:30px;border-radius:50%;border:2px solid var(--ochre);color:var(--ochre-d);font:700 .95rem/26px var(--fh);text-align:center}
.note{margin:0 0 1.2em;padding:14px 16px 14px 46px;background:var(--paper-xl);border-left:4px solid var(--ochre);position:relative;border-radius:0 4px 4px 0}
.note::before{content:"";position:absolute;left:14px;top:16px;width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#8E2F1F;box-shadow:inset 0 0 0 5px #8E2F1F,inset 0 0 0 9px var(--paper-xl)}
.note p{margin:0;max-width:none}
.st-pros ul:first-of-type li::before{width:12px;height:7px;background:none;border-left:3px solid #2f7a4f;border-bottom:3px solid #2f7a4f;transform:rotate(-45deg);top:.45em}
.st-pros ul:nth-of-type(2) li::before{content:"×";background:none;transform:none;width:auto;height:auto;top:-.05em;left:2px;color:#8E2F1F;font:700 1.25rem/1.2 var(--fb)}
.st-warn ul li::before{background:#8E2F1F}
.st-timeline ul{border-left:3px solid var(--teal);margin-left:8px;padding-left:0}
.st-timeline ul li{padding:6px 0 10px 26px}
.st-timeline ul li::before{left:-9.5px;top:.75em;width:16px;height:16px;border-radius:50%;transform:none;background:var(--paper);border:3px solid var(--ochre)}

/* ---------- alati ---------- */
.tool{margin:22px 0 38px calc(-1 * var(--trail));background:var(--teal);color:var(--paper);border-radius:8px;padding:clamp(18px,3vw,30px);position:relative;box-shadow:0 22px 44px -30px rgba(9,38,37,.95);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M0 40c40-18 80 18 160 0M0 120c40-18 80 18 160 0' fill='none' stroke='%23E3D5B8' stroke-opacity='.06'/%3E%3C/svg%3E")}
.flow>.tool,.main>.tool{max-width:none}
.main>.tool{margin-left:0}
.tool-head{margin-bottom:14px}
.tool-title{color:var(--gold);font-size:1.45rem;margin:0 0 6px}
h2.tool-title{font-size:clamp(1.5rem,1.15rem + 1.1vw,1.95rem)}
.tool-sub{margin:0;color:rgba(227,213,184,.86);max-width:62ch}
.tool-fine{margin:14px 0 0;font-size:.88rem;color:rgba(227,213,184,.75)}
.tool-ctl{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px;margin:0 0 16px}
.tool-ctl label{display:flex;flex-direction:column;gap:5px;font-size:.85rem;font-weight:600;letter-spacing:.03em;color:rgba(227,213,184,.9)}
.inp{display:flex;align-items:center;background:var(--paper-xl);border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 2px transparent}
.inp:focus-within{box-shadow:inset 0 0 0 2px var(--ochre)}
.inp input{width:96px;border:0;background:transparent;padding:9px 10px;font:700 1.05rem var(--fb);color:var(--teal);outline:0}
.inp i{font-style:normal;font-size:.8rem;color:var(--ink-3);padding:0 10px 0 2px;white-space:nowrap}
.tool-out{margin:0 0 4px;font-size:.95rem}
.tool-out b{color:var(--gold);font-size:1.1rem}
.ghost{background:transparent;color:var(--gold);border:1.5px solid var(--gold)}
.ghost:hover{background:rgba(226,184,98,.12)}
.tool .tbl-wrap{background:var(--paper-xl);border-radius:4px}
.tbl-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%}
.pay{min-width:520px;color:var(--ink)}
.pay th,.pay td{padding:10px 12px;text-align:center;border-bottom:1px solid var(--line)}
.pay thead th{font-family:var(--fh);font-size:1rem;color:var(--paper);background:var(--teal-l);border-bottom:0}
.pay thead th:first-child{text-align:left}
.pay tbody th{text-align:left;font-weight:700;color:var(--teal);white-space:nowrap}
.pay tbody th>*{vertical-align:middle}
.pay td b{display:block;font-family:var(--fh);font-size:1.12rem;color:var(--ink)}
.pay .rsd{display:block;font-size:.8rem;color:var(--ochre-d);font-weight:600;white-space:nowrap}
.pay .nil{color:var(--ink-3)}
.pay tr.t-high{background:rgba(181,101,29,.07)}
.pay tr.t-scatter{background:rgba(15,59,58,.09)}
.g{display:inline-grid;place-items:center;width:34px;height:34px;margin-right:10px;border-radius:6px;background:var(--teal);color:var(--gold);--sym-band:var(--teal);--sym-face:#E9D9B2}
.g svg{width:26px;height:26px}
.g-l{font:700 1.05rem/1 var(--fh);background:var(--paper-d);color:var(--teal)}
.g-book{background:var(--ochre);color:#fff1cf;--sym-band:var(--ochre)}

/* kalkulator proširujućeg simbola */
.exp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips legend{font-size:.85rem;font-weight:600;letter-spacing:.03em;margin-bottom:8px;color:rgba(227,213,184,.9);padding:0}
.chip{position:relative;display:flex;align-items:center;padding:5px 12px 5px 5px;border-radius:999px;background:rgba(227,213,184,.1);border:1.5px solid rgba(227,213,184,.25);cursor:pointer;font-weight:600;font-size:.92rem;transition:background .2s,border-color .2s}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip .g{width:30px;height:30px;margin-right:8px}
.chip .g svg{width:22px;height:22px}
.chip:hover{border-color:var(--gold)}
.chip:has(input:checked){background:var(--paper);color:var(--teal);border-color:var(--paper)}
.chip:has(input:focus-visible){outline:3px solid var(--ochre);outline-offset:2px}
.exp-board{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.reels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:10px;border-radius:6px;background:linear-gradient(#3b2410,#1d1208);box-shadow:inset 0 0 0 2px #a8783a,inset 0 0 0 5px #3b2410,inset 0 0 0 6px #d9a74a}
.reel{display:grid;grid-template-rows:repeat(3,1fr);gap:6px;padding:0;border:0;background:transparent;cursor:pointer;border-radius:4px;position:relative}
.reel .cell{display:grid;place-items:center;aspect-ratio:1;border-radius:4px;background:rgba(0,0,0,.35);opacity:.35;transition:opacity .25s,transform .35s,background .25s}
.reel .cell .g{margin:0;width:70%;height:70%;background:transparent}
.reel .cell .g svg{width:100%;height:100%}
.reel .cell .g-l{font-size:clamp(1rem,3.2vw,1.7rem);color:var(--paper)}
.reel.on .cell{opacity:1;background:linear-gradient(160deg,#f3d48a,#b8822f);transform:scale(1)}
.reel.on .cell .g{color:var(--teal-d);--sym-band:#e2b862}
.reel.on .cell .g-l{color:var(--teal-d)}
.reel:not(.on):hover .cell{opacity:.6}
.reel::after{content:"";position:absolute;inset:-3px;border-radius:6px;border:2px solid transparent;transition:border-color .25s}
.reel.on::after{border-color:#fff3d0;box-shadow:0 0 18px rgba(255,214,130,.5)}
.exp-out{background:var(--paper);color:var(--ink);border-radius:6px;padding:16px 18px;border-left:6px solid var(--ochre)}
.exp-out p{margin:0 0 4px}
.eo-big{font-family:var(--fh);color:var(--teal)}
.eo-big b{font-size:clamp(2rem,1.4rem + 2vw,2.8rem);line-height:1}
.eo-big span{font-size:1.2rem;color:var(--ochre-d)}
.eo-warn{color:#8E2F1F;font-weight:600}

/* lestvica RTP */
.ld-shaft{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;align-items:start}
.rungs{list-style:none;margin:0;padding:6px 18px;position:relative;border-left:6px solid #7a5426;border-right:6px solid #7a5426;background:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.35))}
.rungs li+li{margin-top:8px}
.rung{width:100%;display:grid;grid-template-columns:5.2em minmax(0,1fr) auto;align-items:center;gap:10px;background:transparent;border:0;color:var(--paper);cursor:pointer;padding:7px 4px;font:600 .95rem var(--fb);border-bottom:3px solid #9a6a30;text-align:left}
.r-v{font-family:var(--fh);font-weight:700;font-size:1.05rem}
.r-bar{height:10px;border-radius:5px;background:rgba(227,213,184,.15);position:relative;overflow:hidden}
.r-bar::after{content:"";position:absolute;inset:0;width:var(--w);background:linear-gradient(90deg,var(--ochre),var(--gold));border-radius:5px;transform-origin:left;transition:transform .5s}
.r-o{font-size:.85rem;opacity:.85;white-space:nowrap}
.rung.on{background:rgba(226,184,98,.16);outline:2px solid var(--gold);border-radius:4px}
.ld-out{background:var(--paper);color:var(--ink);border-radius:6px;padding:16px 18px;border-left:6px solid var(--ochre)}
.ld-out p{margin:0 0 6px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ld-out b{color:var(--teal);font-family:var(--fh);font-size:1.15rem}
.ld-diff{border-top:1px dashed var(--line);padding-top:6px}

/* kalkulator uloga */
.bet-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bet-out p{margin:0;background:var(--paper);color:var(--ink);border-radius:6px;padding:12px 14px}
.bet-out span{display:block;font-size:.82rem;color:var(--ink-3);font-weight:600}
.bet-out b{font-family:var(--fh);color:var(--teal);font-size:1.25rem}
.cmp{color:var(--ink);min-width:460px}
.cmp th,.cmp td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.cmp thead th{background:var(--teal-l);color:var(--paper);font-family:var(--fh)}
.cmp tbody th{font-weight:600;color:var(--ink-2)}

/* ---------- snimci ---------- */
.plate{margin:20px 0 30px;max-width:760px}
.plate-p{max-width:300px}
.zoom{display:block;width:100%;padding:8px;border:0;background:var(--paper-xl);cursor:zoom-in;box-shadow:0 1px 0 rgba(0,0,0,.1),0 14px 28px -18px rgba(0,0,0,.6);transform:rotate(-.6deg);position:relative;transition:transform .3s}
.zoom::before{content:"";position:absolute;left:50%;top:-10px;width:86px;height:22px;transform:translateX(-50%) rotate(2deg);background:rgba(217,152,77,.45);z-index:1}
.zoom:hover{transform:rotate(0)}
.zoom img{width:100%;height:auto}
.plate figcaption{font-size:.9rem;color:var(--ink-3);margin-top:10px;font-style:italic}
.gallery{margin:20px 0 34px}
.g-sub{color:var(--ink-3)}
.g-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,.58fr);grid-auto-flow:dense;gap:22px 18px;align-items:start}
.g-grid .plate{margin:0;max-width:none}
.g-grid .plate:nth-child(2n) .zoom{transform:rotate(.8deg)}
.g-grid .plate-p{grid-column:3;grid-row:1 / span 2}
.zoom{min-height:60px;background-color:var(--paper-xl)}
.lb{border:0;padding:0;background:transparent;max-width:min(96vw,1280px);max-height:92vh}
.lb::backdrop{background:rgba(5,15,15,.86)}
.lb img{max-height:88vh;width:auto;margin:auto;border:6px solid var(--paper-xl)}
.lb-x{position:absolute;right:8px;top:8px;width:40px;height:40px;border-radius:50%;border:0;background:var(--paper);color:var(--teal);font-size:1.6rem;line-height:1;cursor:pointer}

/* ---------- FAQ ---------- */
.faq{margin:30px 0 40px}
.fq{border-top:1.5px solid rgba(15,59,58,.3);background:transparent}
.fq:last-child{border-bottom:1.5px solid rgba(15,59,58,.3)}
.fq summary{list-style:none;cursor:pointer;padding:15px 44px 15px 0;font-weight:700;font-size:1.06rem;color:var(--teal);position:relative}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:14px;margin-top:-9px;border-right:2.5px solid var(--ochre);border-bottom:2.5px solid var(--ochre);transform:rotate(45deg);transition:transform .25s}
.fq[open] summary::after{transform:rotate(225deg);margin-top:-3px}
.fq-a{padding:0 0 14px;max-width:66ch}
.fq-a p{margin:0}

/* ---------- dalje na karti ---------- */
.next{margin:10px 0 20px;padding:28px clamp(16px,3vw,30px);background:var(--teal-d);color:var(--paper);border-radius:8px;position:relative;overflow:hidden}
.next h2{color:var(--gold)}
.next ol{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 46px}
.next ol::before{content:"";position:absolute;left:50%;top:10px;bottom:10px;border-left:2px dashed rgba(226,184,98,.45)}
.next li:nth-child(even){transform:translateY(34px)}
.next a{display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 12px;padding:12px;border-radius:6px;text-decoration:none;color:var(--paper);transition:background .2s}
.next a:hover{background:rgba(226,184,98,.1);color:var(--paper)}
.nx-n{grid-row:span 2;width:44px;height:44px;border-radius:50%;border:2px solid var(--gold);display:grid;place-items:center;font:700 .95rem var(--fh);color:var(--gold)}
.nx-t{font-family:var(--fh);font-weight:700;font-size:1.18rem;color:var(--paper)}
.nx-d{font-size:.88rem;line-height:1.45;opacity:.78}
.next ol:has(li:nth-child(even)){padding-bottom:34px}

/* ---------- podnožje ---------- */
.foot{padding:30px var(--pad) 36px;background:var(--teal-d);color:rgba(227,213,184,.85);font-size:.92rem;border-top:4px solid var(--ochre)}
.foot a{color:var(--paper)}
.foot-rg{display:flex;gap:16px;align-items:flex-start;max-width:880px}
.age{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2.5px solid #d26b52;color:#f0b3a3;font:700 1.05rem var(--fb)}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 20px;margin:18px 0;max-width:880px}
.foot-fine{max-width:880px;opacity:.75;font-size:.85rem;margin:0}

/* ---------- traka rute (telefon i tablet) ---------- */
.routebar{display:none}

@media (max-width:1180px) and (min-width:1024px){
  .legend dl{grid-template-columns:minmax(0,1fr)}
  .ld-shaft{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1023px){
  :root{--trail:42px}
  .shell{display:block}
  .side{position:relative;height:auto;padding:0;border:0;box-shadow:none;background:var(--teal)}
  .side .brand-d,.side .mapcard,.side .nowrow,.side-rg{display:none}
  .tomb{height:clamp(220px,56vw,360px);flex:none;border-radius:0;box-shadow:none}
  .top{position:relative;z-index:20;background:var(--teal);color:var(--paper);border-bottom:1px solid rgba(226,184,98,.3);padding:10px var(--pad)}
  .brand-m{display:flex;font-size:1.18rem;flex:1}
  .brand-m .brand-rose{width:32px;height:32px}
  .nav-t{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;background:transparent;border:1.5px solid rgba(227,213,184,.4);border-radius:6px;cursor:pointer;order:3}
  .nav-t i{display:block;height:2px;background:var(--paper);border-radius:2px;transition:transform .25s,opacity .25s}
  .nav-t[aria-expanded="true"] i:nth-child(2){transform:translateY(7px) rotate(45deg)}
  .nav-t[aria-expanded="true"] i:nth-child(3){opacity:0}
  .nav-t[aria-expanded="true"] i:nth-child(4){transform:translateY(-7px) rotate(-45deg)}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--teal-d);padding:8px var(--pad) 16px;box-shadow:0 20px 30px -10px rgba(0,0,0,.6)}
  .nav.open{display:flex}
  .nav a{color:var(--paper);padding:12px 0;border-bottom:1px solid rgba(227,213,184,.14);font-size:1.05rem}
  .nav a[aria-current]{color:var(--gold);border-color:rgba(227,213,184,.14)}
  .routebar{display:block;position:sticky;top:0;z-index:15;background:var(--paper-xl);border-bottom:1px solid var(--line);box-shadow:0 8px 18px -14px rgba(0,0,0,.5)}
  .rb-btn{display:flex;align-items:center;gap:10px;width:100%;padding:8px var(--pad);border:0;background:transparent;font:600 .95rem var(--fb);color:var(--ink);cursor:pointer;text-align:left;min-height:48px}
  .rb-rose{width:30px;height:30px;color:var(--teal);flex:none}
  .rb-rose text{display:none}
  .rb-n{font-family:var(--fh);font-weight:700;color:var(--ochre-d);flex:none}
  .rb-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rb-chev{width:14px;height:14px;flex:none;transition:transform .25s}
  .rb-btn[aria-expanded="true"] .rb-chev{transform:rotate(180deg)}
  .rb-list{list-style:none;margin:0;padding:4px var(--pad) 12px;max-height:60vh;overflow:auto;border-top:1px solid var(--line)}
  .rb-list a{display:flex;gap:10px;padding:9px 0;text-decoration:none;color:var(--ink-2);border-bottom:1px dashed var(--line)}
  .rb-list a span{font-family:var(--fh);font-weight:700;color:var(--ochre-d)}
  .rb-list a[aria-current]{color:var(--teal);font-weight:700}
  html{scroll-padding-top:64px}
  .legend dl{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  :root{--trail:0px}
  body{font-size:1.03rem}
  .flow{padding-left:0}
  .flow::before{display:none}
  .st-n{position:static;display:inline-grid;width:34px;height:34px;font-size:.85rem;margin-right:10px;vertical-align:.15em;box-shadow:none}
  .st h2{padding-top:18px;border-top:2px dashed rgba(181,101,29,.4)}
  .tool{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));border-radius:0}
  .demo{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));border-radius:0;padding:10px 0 12px}
  .demo::before,.demo::after{display:none}
  .demo-head,.demo-foot{padding-left:var(--pad);padding-right:var(--pad)}
  .demo-wrap{border-radius:0}
  .demo-play{font-size:1.1rem;padding:11px 20px 11px 12px}
  .demo-ic{width:32px;height:32px}
  .demo-note{font-size:.78rem;padding:8px 10px}
  .coords{grid-template-columns:repeat(2,minmax(0,1fr))}
  .coords b{font-size:1.15rem}
  .lead p{font-size:1.07rem}
  .ld-shaft{grid-template-columns:minmax(0,1fr)}
  .bet-out{grid-template-columns:minmax(0,1fr)}
  .rung{grid-template-columns:4.6em minmax(0,1fr);}
  .r-o{grid-column:2;justify-self:start}
  .inp input{width:84px}
  .g-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 calc(-1 * var(--pad));padding:12px var(--pad) 16px}
  .g-grid .plate{flex:0 0 84%;scroll-snap-align:center}
  .g-grid .plate-p{flex-basis:56%}
  .next ol{grid-template-columns:minmax(0,1fr);gap:4px}
  .next ol::before{left:33px}
  .next li:nth-child(even){transform:none}
  .next ol:has(li:nth-child(even)){padding-bottom:0}
  .next{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));border-radius:0}
  .legend{margin-left:-6px;margin-right:-6px}
  .legend dl div{flex-wrap:wrap}
  .pay{min-width:330px}
  .pay th,.pay td{padding:8px 3px}
  .pay thead th:first-child,.pay tbody th{padding-left:8px}
  .pay tbody th{font-size:.82rem;white-space:normal}
  .pay .g{width:28px;height:28px;margin-right:6px}
  .pay .g svg{width:20px;height:20px}
  .pay tr.t-low th>span:last-child{display:none}
  .pay td b{font-size:.95rem}
  .pay .rsd{font-size:.68rem}
  .tool .tbl-wrap{margin:0 -6px}
  .hero h1{max-width:none}
  .foot-rg{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ly-dust{display:none}
}
/* vremenska linija serijala */
.tl{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;position:relative}
.tl::before{content:"";position:absolute;left:0;right:0;top:15px;border-top:2px dashed rgba(226,184,98,.55)}
.tl li{position:relative;padding:36px 8px 0 0}
.tl li::before{content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;background:var(--teal);border:3px solid var(--gold)}
.tl time{display:block;font-size:.8rem;color:rgba(227,213,184,.75);letter-spacing:.03em}
.tl b{display:block;font-family:var(--fh);color:var(--paper);font-size:1.02rem;line-height:1.2;margin-top:2px}
.tl span{display:block;font-size:.8rem;color:var(--gold)}
.tl-on::before{background:var(--ochre)!important;box-shadow:0 0 0 5px rgba(181,101,29,.35)}
.tl-on b{color:var(--gold)}
@media (max-width:1180px){
  .tl{grid-template-columns:minmax(0,1fr);padding-left:6px}
  .tl::before{left:14px;right:auto;top:6px;bottom:6px;border-top:0;border-left:2px dashed rgba(226,184,98,.55)}
  .tl li{padding:4px 0 12px 40px}
  .tl li::before{left:6px;top:6px}
}

/* široki ekran: brze brojke desno od naslova, kalkulator u dve kolone */
.lead-more{margin:-4px 0 30px}
.lead-more p:first-child::first-letter{all:unset}
@media (min-width:1280px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) 210px;column-gap:44px;align-items:end}
  .hero .coords{grid-template-columns:minmax(0,1fr);margin:0 0 6px}
  .exp-board{grid-template-columns:minmax(0,1fr) 200px;align-items:start}
  .exp-board .tool-ctl{flex-direction:column;align-items:stretch;margin:0}
  .exp-board .inp input{width:100%}
}
.reels{max-width:560px}
.chip .g-l+span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.chip:has(.g-l){padding-right:5px}
.chip .g-l{margin-right:0}
@media (min-width:1024px) and (max-width:1240px){
  .nav{gap:4px 8px}
  .nav a{font-size:.84rem;white-space:nowrap}
  .top{gap:6px 12px}
}
.zoom{background:linear-gradient(135deg,#0f3b3a,#092625) content-box,var(--paper-xl)}
.zoom img{position:relative}
@media (min-width:1280px){.hero{align-items:start}.hero .coords{margin-top:62px}}

/* ---------- ikona igre u logotipu sajta ---------- */
.brand-img{width:36px;height:36px;flex:none;border-radius:8px;object-fit:cover;box-shadow:0 0 0 1.5px var(--gold),0 4px 12px -4px rgba(0,0,0,.6)}

/* ---------- naslovna: arta igre kao fotografija zalepljena na kartu ekspedicije ---------- */
.hero-home{display:block}
.hero-plate{position:relative;margin:0 0 28px;padding:0;background:var(--teal-d);border:8px solid var(--paper-xl);border-radius:3px;box-shadow:0 2px 0 var(--paper-d),0 26px 50px -26px rgba(33,31,26,.75);transform:rotate(-.6deg);overflow:hidden}
.hero-plate::before,.hero-plate::after{content:"";position:absolute;z-index:3;width:96px;height:26px;background:rgba(238,228,206,.78);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.hero-plate::before{left:-26px;top:12px;transform:rotate(-38deg)}
.hero-plate::after{right:-26px;bottom:12px;transform:rotate(-38deg)}
.hero-photo{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:70% 30%;animation:photo-in 1.2s ease-out both}
@keyframes photo-in{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.hero-title{position:relative;z-index:2}
.hero-logo{display:block;width:min(380px,100%);height:auto;margin:0 0 10px -4px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.55))}
@media (min-width:1280px){
  .hero-title{position:absolute;left:0;top:0;bottom:0;width:50%;display:flex;flex-direction:column;justify-content:center;padding:28px 0 28px clamp(24px,3vw,44px);transform:rotate(.6deg)}
  .hero-plate{isolation:isolate}
  .hero-photo{position:relative;z-index:0}
  .hero-title::before{content:"";position:absolute;z-index:-1;top:-40px;bottom:-40px;left:-40px;right:-60%;background:linear-gradient(90deg,rgba(9,38,37,.84) 0%,rgba(9,38,37,.62) 50%,rgba(9,38,37,0) 100%)}
  .hero-title .kicker{color:var(--gold)}
  .hero-title .kicker::before{border-color:var(--gold)}
  .hero-title h1{color:var(--paper-xl);font-size:clamp(1.9rem,.9rem + 1.6vw,2.7rem);max-width:15ch;margin:0;text-shadow:0 2px 18px rgba(0,0,0,.6)}
  .hero-home{display:grid;grid-template-columns:minmax(0,1fr) 210px;column-gap:44px;align-items:start}
  .hero-home .hero-plate{grid-column:1/-1}
  .hero-home .coords{margin-top:0}
}
@media (max-width:1279px){
  .hero-plate{transform:none;border:0;border-radius:0;box-shadow:none;background:none;overflow:visible;margin:0 calc(-1 * var(--pad)) 0}
  .hero-plate::before,.hero-plate::after{content:none}
  .hero-photo{aspect-ratio:auto;height:clamp(240px,52vw,460px);-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
  .hero-title{padding:0 var(--pad);margin-top:-64px}
  .hero-home h1{margin-bottom:18px}
  .hero-home{padding-top:0}
}
@media (max-width:1023px){
  .p-home .tomb{display:none}
  .hero-home{padding-top:0}
}
@media (max-width:760px){
  .hero-logo{width:min(84%,360px)}
  .hero-photo{object-position:72% 25%}
  .hero-title{margin-top:-44px}
}
@media (prefers-reduced-motion:reduce){.hero-photo{animation:none}}

/* ---------- rejting priređivača, alati i autor: stanice karte, pergament sa dvostrukim okvirom */
.rt,.tw,.au{--tw-bg:transparent;--tw-card:var(--paper-xl);--tw-ink:var(--ink);--tw-mute:var(--ink-2);--tw-line:rgba(15,59,58,.34);--tw-accent:var(--teal);--tw-radius:3px;--tw-btn-ink:#fff8ea;--tw-series:var(--ochre-d)}
.rt{margin:34px 0 40px}
.rt__head h2::before{content:var(--n,'');display:inline-grid;place-items:center;width:38px;height:38px;margin-right:12px;border-radius:50%;background:var(--teal);color:var(--paper);font:700 .92rem/1 var(--fh);vertical-align:.18em}
.rt__meta{color:var(--ink-2)}
.rt__item{position:relative;padding:22px 22px 18px;background:var(--paper-xl);border:2px solid var(--teal);border-radius:3px;box-shadow:0 16px 30px -24px rgba(9,38,37,.9)}
.rt__item::before{content:"";position:absolute;inset:5px;border:1px solid rgba(15,59,58,.3);pointer-events:none}
.rt__item:first-child{border-color:var(--ochre-d)}
.rt__item:first-child::before{border-color:rgba(138,72,17,.45)}
.rt__rank{width:44px;height:44px;border:0;border-radius:50%;background:var(--teal);color:var(--paper);font:700 1.05rem/1 var(--fh);box-shadow:0 0 0 5px var(--paper-xl),0 0 0 6.5px rgba(181,101,29,.6)}
.rt__item:first-child .rt__rank{background:var(--ochre-d);color:#fff8ea}
.rt__name{font:700 1.4rem/1.15 var(--fh);letter-spacing:.01em;color:var(--teal)}
.rt__score b{font:700 2.1rem/1 var(--fh);color:var(--ochre-d)}
.rt__logo{border-radius:4px;box-shadow:0 0 0 1.5px rgba(15,59,58,.45)}
.rt__bonus{border:2px dotted rgba(110,98,80,.6);border-radius:4px;background:rgba(15,59,58,.05)}
.rt__bonus--nd{border:2px solid var(--ochre);background:rgba(217,152,77,.16)}
.rt__btn{background:var(--ochre-d);color:#fff8ea;font:700 1.08rem/1.1 var(--fh);letter-spacing:.04em;transition:background .2s,transform .2s}
.rt__btn:hover{background:#6f3a0c}
.rt__steps li::marker{color:var(--ochre-d);font-family:var(--fh);font-weight:700}
.rt__warn{border-left:4px solid var(--ochre);border-radius:0 4px 4px 0;background:var(--paper-l);color:var(--ink-2)}
.rt__text{padding-top:1.1rem;border-top:2px dotted rgba(110,98,80,.55)}
.rt-method__t th{font-family:var(--fh);color:var(--teal)}
.tw{position:relative;margin:26px 0 40px;padding:clamp(20px,3vw,32px);background:var(--paper-xl);border:2px solid var(--teal);border-radius:3px;outline:1px solid rgba(15,59,58,.4);outline-offset:-8px;box-shadow:0 18px 36px -28px rgba(9,38,37,.9)}
.flow>.tw{margin-left:calc(-1 * var(--trail))}
.tw__h{font-size:1.55rem;color:var(--teal)}
.tw__h::before{content:"Beleška na karti";display:block;margin-bottom:.4rem;font:700 .76rem/1.3 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--ochre-d)}
.tw__f{font-weight:600;letter-spacing:.03em;color:var(--ink-2)}
.tw__f input,.tw__f select{background:#fffdf7;border:1.5px solid var(--teal);border-radius:4px;color:var(--teal);font-weight:700}
.tw__btn{border-radius:999px;background:var(--teal);color:var(--gold);font:700 1.05rem/1.1 var(--fh);letter-spacing:.04em;transition:background .2s}
.tw__btn:hover{background:var(--teal-l)}
.tw__o{background:var(--paper);border:1px solid rgba(15,59,58,.3);border-radius:6px}
.tw__o dd{font:700 1.45rem/1.2 var(--fh);color:var(--teal)}
.tw__verdict,.tw__q,.tw__dna{background:var(--paper-l)}
.au{margin:30px 0;grid-template-columns:84px 1fr;gap:18px;padding:18px 22px;background:var(--paper-l);border:2px solid var(--teal);border-radius:3px;outline:1px solid rgba(15,59,58,.4);outline-offset:-7px}
.au img{width:84px;height:84px;box-shadow:0 0 0 3px var(--paper-l),0 0 0 5px var(--ochre)}
.au>div::before{content:"Autor rang liste";display:block;margin-bottom:.3rem;font:700 .76rem/1.3 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--ochre-d)}
.au b{font:700 1.15rem/1.2 var(--fh);color:var(--teal)}
.au p{color:var(--ink-2)}
@media (max-width:760px){.rt__item{padding:20px 14px 16px}.au{grid-template-columns:64px 1fr;padding:16px}.au img{width:64px;height:64px}}
@media (prefers-reduced-motion:reduce){.rt__btn,.tw__btn{transition:none}}
/* герой: только появление без увеличения, иначе страница на секунду шире экрана */
@keyframes photo-fade{from{opacity:0}to{opacity:1}}
.hero-photo{animation-name:photo-fade}