/* ==========================================================================
   Hiking Crew BN — Varianta 3 „Carnet de tură”
   Un carnet de drumeție: hârtie cu curbe de nivel, polaroiduri prinse cu
   pioneze roșii, notițe scrise de mână și marcaje de traseu.
   ========================================================================== */

:root {
  /* Paleta „Zi”: extrasă din sigla de zi (cer senin, pajiște de vară,
     geaca roșie a drumețului, focul de tabără), pe hârtia caldă a carnetului. */
  --paper: #faf6ef;
  --paper-2: #f2eadb;
  --card: #fffdf9;
  --ink: #2b201e;
  --ink-soft: #5a4a42;
  --ink-mute: #63534a;
  --sky: #3d8bc4;       /* cerul din siglă — accent principal (linii, marcaje) */
  --sky-ink: #1f5f8b;   /* cer adânc — text, butonul principal, focus */
  --sky-soft: #80c0e8;  /* cerul exact din siglă — doar decor */
  --grass: #4f9a35;     /* pajiștea de vară — decor */
  --green: #2d6623;     /* brad — text verde */
  --red: #b3322a;       /* geaca drumețului — ștampile, bife, pioneze */
  --sun: #f2b52e;       /* soarele — sublinieri, marcaje */
  --line: rgba(43, 32, 30, .16);

  --note-1: #fbefc4;
  --note-2: #e2f0d6;
  --note-3: #dcecf7;
  --note-4: #f8e6cf;

  --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
  --sans: 'Nunito', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --brand: 'Alfa Slab One', Rockwell, Georgia, serif; /* numele „Hiking Crew BN” din antet și subsol */

  --wrap: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 9vw, 120px);
  --wobbly: 255px 14px 225px 16px / 16px 225px 14px 255px;
  --shadow: 0 1px 2px rgba(43, 32, 30, .14), 0 12px 26px -12px rgba(43, 32, 30, .38);

  /* Curbe de nivel (tile fără îmbinări) și desene de mână reutilizate. */
  --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cpath fill='none' stroke='%23e2d6c0' stroke-width='1.1' d='M8 0Q3 16 4 24Q4 32 6 40Q9 48 14 60Q20 72 26 81Q32 89 40 96Q48 103 52 105Q56 106 64 108Q72 109 80 106Q88 104 93 100Q98 96 103 88Q108 80 110 74Q112 67 112 58Q112 48 111 40Q109 32 106 24Q102 16 97 8L92 0M512 333L512 333M92 800Q72 783 60 780Q48 777 36 780Q24 783 20 786Q16 789 12 794L8 800M123 0Q136 48 135 64Q135 80 131 92Q126 104 120 112Q115 120 109 125Q104 130 92 135Q80 141 72 141Q64 141 56 139Q48 137 36 128Q24 118 12 101L0 84M772 0Q781 40 790 62L800 84M512 280L512 280M123 800Q104 760 100 755Q96 751 88 745Q80 740 72 737Q64 735 52 734Q40 734 28 737Q16 740 8 744L0 748M800 748Q780 768 777 776Q774 784 773 792L772 800M146 0Q156 56 156 72Q156 88 151 104Q145 120 140 128Q134 136 127 144Q120 151 112 157Q104 162 96 165Q88 168 80 168Q72 169 64 168Q56 167 48 163Q40 160 32 155Q24 149 12 136L0 122M745 0Q769 64 784 93L800 122M504 245L504 245M800 684Q760 672 755 672Q750 672 750 692Q749 712 745 736Q741 760 743 780L745 800M146 800Q134 736 131 730Q128 725 122 718Q115 712 108 708Q101 704 91 701Q80 697 40 691L0 684M168 0Q178 72 177 88Q176 104 174 112Q172 120 166 132Q160 144 148 158Q136 173 128 178Q120 183 112 186Q104 189 88 190Q72 192 60 189Q48 186 40 182Q32 179 24 173Q16 168 8 160L0 153M720 0Q767 104 776 118Q784 132 792 142L800 153M800 645Q768 621 736 591Q704 561 683 544Q661 528 654 520Q647 512 643 500Q639 488 636 452Q634 416 622 360Q610 304 602 284Q594 264 584 252Q574 240 563 233Q552 226 540 222Q528 219 516 219Q504 219 494 221Q483 224 474 229Q464 235 457 241Q449 248 430 276Q410 304 405 320Q399 336 396 372Q394 408 383 436Q372 464 372 468Q373 472 376 480Q379 488 391 500Q402 512 409 517Q416 521 428 526Q440 531 460 535Q480 538 528 540Q576 541 588 545Q600 548 608 554Q616 559 632 582Q648 604 670 642Q692 680 696 692Q700 704 705 736Q710 768 715 784L720 800M168 800Q168 728 165 720Q162 712 156 704Q149 696 134 688Q120 680 80 671Q40 662 20 653L0 645M191 0Q192 32 198 64Q203 96 203 108Q202 120 200 128Q198 136 192 148Q186 160 181 168Q176 176 169 184Q161 192 153 197Q144 203 136 206Q128 209 116 210Q104 212 92 212Q80 212 60 207Q40 202 30 197Q20 192 10 184L0 177M696 0Q755 120 766 136Q777 152 788 164L800 177M800 620Q776 600 764 588Q751 576 734 556Q716 536 704 520Q692 504 684 488Q676 472 665 440Q655 408 648 384Q641 360 635 328Q628 296 624 284Q620 272 613 260Q606 248 599 239Q592 231 583 223Q574 216 563 210Q552 205 536 201Q520 198 504 199Q488 199 472 203Q456 207 444 213Q432 220 421 230Q411 240 384 272Q357 304 355 312Q352 320 351 344Q350 368 347 376Q343 384 336 389Q328 395 304 399Q280 403 275 405Q270 408 266 412Q262 416 260 420Q258 424 257 432Q256 440 259 448Q262 456 268 464Q274 472 284 480Q294 488 339 514Q384 541 396 546Q408 551 420 553Q432 556 480 559Q528 561 540 563Q552 565 568 570Q584 576 595 584Q606 592 620 608Q634 624 648 648Q661 672 666 684Q670 696 677 728Q683 760 690 780L696 800M191 800Q202 744 202 736Q202 728 200 716Q197 704 188 692Q179 680 166 672Q152 664 140 661Q128 657 88 650Q48 643 36 638Q24 634 12 627L0 620M219 0Q217 32 222 52Q227 72 246 113Q264 153 268 158Q272 164 276 166Q280 169 312 177Q344 186 356 187Q368 189 424 184Q480 179 504 180Q528 180 540 183Q552 185 560 188Q568 191 576 196Q584 200 593 208Q603 216 612 228Q622 240 631 256Q640 272 645 288Q650 304 659 344Q668 384 676 404Q684 424 699 456Q714 488 723 504Q732 520 743 536Q755 552 765 564Q776 577 788 587L800 598M674 0Q706 72 719 96Q732 120 750 144Q768 168 784 183L800 198M674 800Q661 760 655 728Q648 696 642 680Q636 664 629 652Q622 640 615 631Q608 622 600 614Q592 606 584 601Q576 595 560 589Q544 583 528 581Q512 579 492 579Q472 580 432 584Q392 588 376 588Q360 588 324 580Q288 572 280 568Q272 564 268 558Q264 553 252 528Q240 504 232 484Q224 464 221 452Q218 440 217 428Q216 416 218 408Q219 400 230 376Q241 352 244 340Q246 328 245 320Q244 312 240 300Q236 288 230 276Q224 263 218 256Q212 248 206 244Q200 240 192 238Q184 235 144 234Q104 233 84 231Q64 228 48 223Q32 218 16 208L0 198M219 800Q241 752 244 740Q246 728 245 720Q244 712 240 700Q236 688 230 676Q224 663 218 656Q212 648 206 644Q200 640 192 638Q184 635 144 634Q104 633 84 631Q64 628 48 623Q32 618 16 608L0 598M292 0Q272 7 268 10Q264 13 261 19Q258 24 257 28Q256 32 257 40Q259 48 263 56Q267 64 273 71Q280 78 287 83Q294 88 335 112Q375 136 388 142Q400 148 420 153Q440 157 484 159Q528 161 544 164Q560 166 576 174Q592 181 604 191Q616 202 628 218Q640 233 651 253Q661 272 667 288Q672 304 681 344Q690 384 712 432Q734 480 749 508Q765 536 774 548Q783 560 792 568L800 577M652 0Q676 72 687 92Q698 112 725 144Q751 176 764 188Q776 200 788 210L800 220M0 577Q32 599 48 604Q64 610 84 611Q104 612 120 609Q136 606 149 599Q161 592 171 580Q182 568 190 552Q198 536 201 520Q203 504 197 456Q191 408 197 368Q202 328 200 316Q197 304 192 296Q187 288 178 280Q169 272 160 268Q152 264 140 261Q128 257 88 250Q48 243 36 238Q24 234 12 227L0 220M652 800Q626 688 621 676Q616 664 611 656Q606 648 599 639Q592 631 580 621Q568 612 556 607Q544 602 528 600Q512 598 500 598Q488 599 476 602Q464 604 452 609Q440 615 432 620Q424 626 396 657Q369 688 363 696Q357 704 355 712Q352 720 351 744Q350 768 347 776Q343 784 336 789Q328 795 310 797L292 800M395 0Q391 16 384 32Q377 48 374 56Q372 64 372 68Q373 72 376 80Q379 88 391 100Q402 112 416 120Q430 128 443 132Q456 135 472 137Q488 139 524 139Q560 140 576 142Q592 145 600 149Q608 153 619 164Q630 176 652 212Q675 248 683 264Q692 280 697 296Q702 312 707 344Q712 376 717 392Q723 408 745 456Q767 504 776 518Q784 532 792 542L800 553M631 0Q637 40 638 64Q639 88 643 100Q647 112 654 120Q661 128 683 144Q704 161 736 191Q768 221 784 233L800 245M0 553Q24 574 40 581Q56 589 72 590Q88 592 100 589Q112 587 124 580Q136 573 148 558Q160 544 167 528Q175 512 176 496Q178 480 173 440Q168 400 169 368Q169 336 167 328Q166 320 161 312Q157 304 147 296Q138 288 129 284Q120 280 80 271Q40 262 20 253L0 245M631 800Q608 696 600 678Q592 660 584 651Q576 641 568 635Q560 630 548 625Q536 620 524 619Q512 618 500 620Q488 622 476 628Q464 635 453 645Q443 656 431 672Q420 688 413 700Q406 712 403 720Q401 728 398 764L395 800M428 0Q427 64 429 73Q432 82 438 89Q444 96 450 100Q456 103 464 106Q472 108 484 110Q496 111 508 110Q520 110 532 107Q544 104 553 100Q561 96 571 88Q581 80 588 72Q594 64 599 52Q605 40 606 32Q608 24 608 12L608 0M800 284Q760 272 755 272Q750 272 750 292Q749 312 745 340Q740 368 742 384Q745 400 750 416Q755 432 768 460Q780 488 790 505L800 522M0 522Q24 549 36 557Q48 564 60 566Q72 569 84 567Q96 565 108 558Q120 551 130 540Q140 528 146 516Q152 504 155 488Q157 472 156 460Q155 448 147 400Q138 352 136 344Q134 336 129 328Q124 320 118 315Q112 310 100 305Q88 299 44 292L0 284M608 800Q593 720 586 700Q578 680 573 672Q567 664 560 658Q552 651 544 648Q536 645 528 644Q520 643 508 645Q497 648 488 653Q480 659 472 667Q464 676 454 690Q444 704 438 716Q433 728 431 736Q428 744 428 772L428 800M459 0Q469 32 474 42Q480 51 488 56Q496 62 504 63Q512 64 524 61Q536 58 548 50Q560 43 567 33Q575 24 578 12L582 0M0 484Q18 512 29 522Q40 532 48 536Q56 540 68 540Q80 541 92 535Q104 530 112 522Q120 514 127 501Q133 488 135 476Q137 464 135 448Q133 432 128 416Q123 400 117 387Q112 374 104 362Q96 351 88 345Q80 340 68 337Q56 334 40 335Q24 337 12 342L0 348M800 348Q780 368 777 376Q774 384 773 392Q772 400 776 420Q781 440 790 462L800 484M582 800Q582 776 580 764Q577 752 573 737Q568 721 564 713Q560 704 552 695Q544 685 539 683Q534 680 527 679Q520 678 512 681Q504 683 496 689Q488 695 480 703Q473 712 468 720Q463 728 459 744Q455 760 457 780L459 800M504 0Q520 7 524 7Q528 6 533 3L539 0M24 383L24 383M539 800Q547 784 547 772Q546 760 541 750Q536 741 532 738Q528 734 524 733Q520 732 516 733Q512 733 508 736Q504 738 500 743Q496 747 494 754Q492 760 493 772Q494 784 499 792L504 800'/%3E%3C/svg%3E");
  --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9C40 4 90 3 130 5s50 2 66-2' fill='none' stroke='%233d8bc4' stroke-width='3.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M12 12c40-4 100-5 150-3' fill='none' stroke='%23f2b52e' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --trail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40'%3E%3Cpath d='M0 20C40 4 80 4 120 20S200 36 240 20' fill='none' stroke='%23b8a282' stroke-width='2.4' stroke-dasharray='1 9' stroke-linecap='round'/%3E%3C/svg%3E");
  --hook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cg fill='none' stroke='%231f5f8b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 26C22 26 10 20 6 6'/%3E%3Cpath d='M2 12l4-7 6 5'/%3E%3C/g%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 17c3 2 6 5 8 9 4-9 9-16 16-23' fill='none' stroke='%23b3322a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

/* Pe telefon, ce iese o clipă din ecran (ștampila care cade rotită și mărită) lățea pagina pentru totdeauna:
   overflow-x pe body trecea la fereastră, iar browserul de mobil o lărgește oricum. Acum body taie el însuși
   (clip nu face din body un al doilea scroll, deci header-ul lipit și derularea rămân la fel). */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--paper) var(--topo) 0 0 / 900px;
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--sky-ink); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 6px;
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Scris de mână ---------- */

.scribble {
  background: var(--scribble) left bottom / 100% .32em no-repeat;
  padding-bottom: .12em;
}

/* Marcaje de traseu: pătrat alb cu bandă, cruce, punct sau triunghi. */
.mark {
  position: relative; flex: none;
  width: 30px; height: 30px;
  background: #fff; border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 1px 2px rgba(43, 32, 30, .15);
  transform: rotate(-3deg);
}
.mark::after { content: ''; position: absolute; }
.mark--band::after { inset: 33% 0; background: var(--red); }
.mark--cross::after {
  inset: 17%;
  background: linear-gradient(var(--sky), var(--sky)) center / 100% 30% no-repeat,
              linear-gradient(var(--sky), var(--sky)) center / 30% 100% no-repeat;
}
.mark--triangle::after { inset: 20% 17% 23%; background: var(--grass); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mark--dot::after { inset: 27%; background: var(--sun); box-shadow: inset 0 0 0 2px #d38a14; border-radius: 50%; }

/* Marcajele de lângă titluri sunt mai mari decât cele din text (desenul din interior e în procente, deci se mărește odată cu ele). */
.section-head .mark { width: clamp(38px, 4vw, 48px); height: clamp(38px, 4vw, 48px); border-radius: 4px; box-shadow: 0 1px 3px rgba(43, 32, 30, .2); }
.section-head { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 { font: 700 clamp(2.6rem, 5vw, 3.6rem)/1 var(--hand); }

.trail { height: 40px; background: var(--trail) center / 240px 40px repeat-x; }

/* ---------- Butoane desenate ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 24px;
  border: 2px solid var(--ink); border-radius: var(--wobbly);
  font: 800 1rem/1.2 var(--sans); text-decoration: none;
  color: var(--ink); background: var(--card);
  box-shadow: 3px 4px 0 rgba(43, 32, 30, .85);
}
.btn--go { background: var(--sky-ink); color: #fff; }
.btn svg { width: 34px; height: 22px; }

/* ---------- Polaroid + pioneză roșie ---------- */

.polaroid {
  position: relative; margin: 0;
  background: #fff;
  padding: 10px 10px 0;
  box-shadow: var(--shadow);
  transform: rotate(var(--tilt, -1.5deg));
}
.polaroid img { width: 100%; aspect-ratio: var(--ratio, 4 / 3); object-fit: cover; background: var(--paper-2); }
.polaroid figcaption {
  padding: 8px 4px 12px;
  font: 700 1.45rem/1.15 var(--hand); text-align: center; color: var(--ink);
}
.polaroid figcaption small { display: block; font: 600 .85rem/1.4 var(--sans); color: var(--ink-mute); }
/* Pioneza (shared/pin.svg, 64×80): vârful acului e la 31.25% din lățime și 92.5% din înălțime.
   Mărimea vine din --pin (lățimea); vârful cade la mijlocul chenarului alb de sus, pe centrul pozei.
   Pioneza iese cu ~--pin deasupra pozei, așa că grilele lasă loc pe verticală (vezi .recent__grid, .albums, .photos). */
.polaroid::before, .note::before, .card::before {
  content: ''; position: absolute; z-index: 1;
  left: 50%; top: calc(var(--pin, 38px) * -1);
  width: var(--pin, 38px); height: calc(var(--pin, 38px) * 1.25); margin-left: calc(var(--pin, 38px) * -.3125);
  background: url("shared/pin.svg") center / contain no-repeat;
  pointer-events: none;
}

/* ---------- Header ---------- */

/* Bara rămâne sus la derulare. Are același fundal ca pagina (hârtie + curbe de nivel, pornite din 0 0),
   deci la începutul paginii se contopește cu ea; după derulare primește o umbră fină (clasa .is-stuck din main.js). */
html { scroll-padding-top: 112px; }
.bar {
  position: sticky; top: 0; z-index: 20;
  padding: 18px 0;
  background: var(--paper) var(--topo) 0 0 / 900px;
  transition: box-shadow .2s ease;
}
.bar.is-stuck { box-shadow: 0 1px 0 var(--line), 0 8px 16px -10px rgba(43, 32, 30, .4); }
.bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 400 1.1rem/1 var(--brand); letter-spacing: .01em; }
@media (min-width: 601px) {
  /* Banda are 96px; sigla (62px înălțime), numele și meniul stau toate cu centrul la mijlocul ei (~48px):
     sigla 17px + 62px / 2; meniul pornește de la 30px (scrisul de mână are centrul vizual mai sus decât rândul lui). */
  .bar { padding: 0; }
  .bar__inner { min-height: 96px; align-items: flex-start; }
  .brand { position: absolute; left: 88px; top: 17px; z-index: 1; }
  .nav { margin: 30px 0 0 auto; }
  .nav ul { min-height: 40px; align-items: center; }
}
/* Tablete mici / telefoane ținute pe lat: numele și meniul nu încap unul lângă altul (se suprapuneau),
   așa că, la fel ca pe telefon, sigla cu numele stă centrată deasupra meniului. */
@media (min-width: 601px) and (max-width: 760px) {
  .bar { padding: 10px 0 8px; }
  .bar__inner { min-height: 0; align-items: center; justify-content: center; gap: 6px 24px; }
  .brand { position: static; }
  .bar .subnav ul { justify-content: center; }
  .nav { margin: 0; }
  .nav ul { min-height: 0; justify-content: center; }
}
.brand img { width: 44px; filter: drop-shadow(0 2px 3px rgba(43, 32, 30, .25)); }
.nav ul { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.nav a { font: 700 1.6rem/1.2 var(--hand); text-decoration: none; color: var(--ink); padding: 2px 0; }
.nav a:hover, .nav a[aria-current="page"], .album__back:hover span, .album__pager a:hover span { background: var(--scribble) left bottom / 100% .3em no-repeat; }

/* Rândul de sub „Ghid”: se deschide sub bară, peste pagină (nu împinge conținutul), cu același fundal de hârtie. */
.subnav {
  position: absolute; left: 0; right: 0; top: 100%;
  padding: 10px 0 14px;
  background: var(--paper) var(--topo) 0 -96px / 900px;
  border-top: 1px dashed rgba(43, 32, 30, .22);
  box-shadow: 0 10px 16px -10px rgba(43, 32, 30, .4);
  visibility: hidden; opacity: 0;
}
.bar.is-sub-open .subnav { visibility: visible; opacity: 1; }
.bar.is-sub-open { box-shadow: none; }
/* Pe pagina ghidului rândul stă mereu deschis, în bară (nu peste pagină), ca un cuprins care te urmează. */
.subnav--pinned { position: static; visibility: visible; opacity: 1; background: none; box-shadow: none; }
.subnav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 22px; }
.subnav a { font: 700 1.3rem/1.2 var(--hand); text-decoration: none; color: var(--ink-soft); padding: 2px 0; white-space: nowrap; }
.subnav a:hover, .subnav a:focus-visible { color: var(--ink); background: var(--scribble) left bottom / 100% .3em no-repeat; }
.subnav .subnav__sos { color: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .subnav { transition: opacity .15s ease, visibility .15s; }
}
/* Pe telefon rândul nu mai cade peste pagină (tăia sigla și soarele din hero): se deschide în bară și împinge
   tot site-ul în jos, lin, cât e de înalt. */
@media (max-width: 760px) {
  .bar .subnav:not(.subnav--pinned) {
    position: static; max-height: 0; overflow: hidden;
    box-shadow: 0 18px 40px -22px rgba(43, 32, 30, .55);
  }
  .bar.is-sub-open .subnav:not(.subnav--pinned) { max-height: 90px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .bar .subnav:not(.subnav--pinned) { transition: max-height .25s ease, opacity .2s ease, visibility .25s; }
}
@media (max-width: 600px) {
  .subnav { background-position: 0 -80px; padding: 8px 0 10px; }
  .subnav ul { justify-content: center; gap: 2px 16px; }
  .subnav a { font-size: 1.2rem; }
}

/* ---------- Hero: prima pagină din carnet ---------- */

/* Jos, hero-ul are doar jumătate din pauza până la „Cine suntem” (cealaltă jumătate e sus în .about), cu poteca la mijloc. */
.hero { padding: clamp(16px, 3vw, 40px) 0 clamp(40px, 4.2vw, 57px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
/* Sigla + motto: blocul are exact lățimea textului de dedesubt, iar sigla și motto-ul stau centrate pe el. */
.hero__mark { max-width: calc(34 * 1.07rem); text-align: center; }
/* Sigla lipită în carnet, doar cu o umbră ușoară (fără contur alb). */
.sticker { display: block; width: fit-content; margin: 0 auto 26px; }
.hero__logo {
  /* Cât de mare se poate, dar să se vadă din prima motto-ul și primele rânduri de text. */
  width: clamp(190px, min(21vw, 32.5vh), 288px);
  filter: drop-shadow(0 10px 14px rgba(43, 32, 30, .3));
}
/* Numele rămâne titlul paginii pentru cititoarele de ecran, dar nu se mai vede (sigla îl conține deja). */
.hero h1 {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.hero__tagline {
  margin: 0 0 22px;
  font: 700 clamp(2.7rem, 5.76vw, 4.6rem)/.95 var(--hand);
  color: var(--ink);
}
/* Cele două rânduri în trepte — primul trage spre stânga, al doilea spre dreapta — ca un scris de mână. */
.hero__tagline span { display: block; padding-right: 1.1em; } /* padding, nu transform: rămâne în lățimea ecranului */
.hero__tagline span + span { color: var(--sky-ink); padding: 0 0 0 1.1em; }
.hero__intro { color: var(--ink-soft); max-width: 34em; /* = lățimea din .hero__mark */ font-size: 1.07rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 28px; }

/* Trei poze prinse cu pioneze roșii: sus stânga (vârful), sus dreapta (gașca), dedesubt în dreapta (câinii).
   Nu se acoperă una pe alta, iar pozele stau sus, aliniate cu sigla.
   margin-top lasă nota „Voie bună...” sub submeniul Ghid când acesta se deschide peste hero. */
.stack { position: relative; aspect-ratio: 1 / 1; align-self: start; margin-top: 92px; container-type: inline-size; }
.stack .polaroid { position: absolute; }
.stack__a { --ratio: 4 / 5; --tilt: -3deg; width: 40%; left: 1%; top: 4%; z-index: 2; }
.stack__b { --ratio: 4 / 3; --tilt: 2deg; width: 57%; right: 1%; top: 0; z-index: 1; }
/* Câinii stau sub poza cu gașca: top = înălțimea ei reală (poză 4:3 + chenar + legendă) + cât să încapă pioneza
   de la mijloc fără să acopere legenda de deasupra, indiferent de ecran. */
.stack__c { --ratio: 16 / 10; --tilt: -1.5deg; width: 52%; right: 5%; top: calc((57cqw - 20px) * .75 + 100px); z-index: 3; }
.stack__note {
  position: absolute; left: 5%; top: 70%; z-index: 3;
  display: flex; align-items: flex-end; gap: 4px;
  font: 700 1.55rem/1.05 var(--hand); color: var(--sky-ink);
  transform: rotate(-5deg);
}
.stack__note svg { width: 56px; height: 40px; flex: none; }
/* Nota de sus: deasupra pozelor, cu săgeata spre gașca de la Caraiman. */
.stack__note--top { top: -66px; left: 3%; align-items: flex-start; transform: rotate(-3deg); }
.stack__note--top svg { margin-top: 12px; }

/* ---------- Despre ---------- */

.about { padding: clamp(34px, 4.2vw, 57px) 0 var(--section); }
.about__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.about__text p { max-width: 38em; }
.about__photo { --ratio: 16 / 10; --tilt: 2deg; margin-top: 12px; }
/* Două poze mai mici sub cea mare, lipite una de alta ca pe un panou: una în picioare, una culcată, înclinate în sensuri diferite.
   Au cam aceeași înălțime, așa că stau centrate pe același rând; loc deasupra pentru pioneze. */
.about__more { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); align-items: center; margin-top: 6px; }
.about__more .polaroid { --pin: 28px; }
.about__more-a { --ratio: 3 / 4; --tilt: -3deg; }
.about__more-b { --ratio: 4 / 3; --tilt: 2.5deg; margin-left: -10px; }
.about__more > a:last-child { position: relative; z-index: 1; }

.notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(48px, 6vw, 80px); }
.note {
  position: relative;
  padding: 30px 22px 24px;
  background: var(--note-1);
  box-shadow: 0 1px 1px rgba(43, 32, 30, .1), 0 14px 20px -14px rgba(43, 32, 30, .45);
  transform: rotate(-1.4deg);
}
.note:nth-child(2) { background: var(--note-2); transform: rotate(1.2deg); }
.note:nth-child(3) { background: var(--note-3); transform: rotate(-.6deg); }
.note:nth-child(4) { background: var(--note-4); transform: rotate(1.6deg); }
.note { --pin: 34px; }
/* Pe bilețel vârful intră ceva mai jos (~12px), în hârtie, deasupra titlului. */
.note::before { top: calc(12px - var(--pin) * 1.156); }
.note h3 { font: 700 1.8rem/1.05 var(--hand); margin-bottom: 10px; }
.note p { font-size: .96rem; line-height: 1.55; margin: 0; color: var(--ink-soft); }

/* ---------- Cifre ---------- */

.stats { padding: clamp(40px, 6vw, 72px) 0; background: var(--paper-2); border-block: 1px dashed rgba(43, 32, 30, .22); }
.stats ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stat__value { font: 700 clamp(3.2rem, 6vw, 4.6rem)/1 var(--hand); color: var(--ink); }
.stat__label {
  margin-top: 6px; padding-left: 40px;
  background: var(--hook) left top / 34px 26px no-repeat;
  font: 700 1.5rem/1.1 var(--hand); color: var(--sky-ink);
  transform: rotate(-2deg);
}

/* ---------- Ture viitoare: pagini de itinerar ---------- */

.trips { padding: var(--section) 0 clamp(24px, 5vw, 66px); }
/* Notița „bifează…” stă pe același rând cu titlul, aliniată la marginea dreaptă a paginii de itinerar;
   săgeata coboară spre lista „ce să ai în rucsac” din dreapta cardului. */
.section-head--hint { flex-wrap: wrap; row-gap: 6px; }
.trips__hint { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 0 auto; position: relative; top: 16px; /* puțin sub linia titlului */ padding-left: 12px; font: 700 1.5rem/1.1 var(--hand); color: var(--sky-ink); text-align: right; }
/* Săgeata stă în stânga textului: aceeași buclă, oglindită, cu vârful în jos spre card. */
.trips__hint svg { width: 40px; height: 44px; flex: none; margin: 8px 0 -26px; transform: scaleX(-1); }
@media (min-width: 981px) {
  /* Pe ecrane late notița stă centrată deasupra post-it-ului „Ce să aduci”:
     aceeași lățime ca coloana lui (340px) și aceeași margine dreaptă ca pagina de itinerar. */
  .trips__hint { width: 340px; margin-right: clamp(20px, 4vw, 48px); padding-left: 0; justify-content: center; white-space: nowrap; }
}
.trips__list { display: grid; gap: clamp(48px, 6vw, 72px); }

.itinerary {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(24px, 4vw, 48px);
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px) clamp(28px, 4vw, 48px) clamp(52px, 6.5vw, 84px);
  background:
    linear-gradient(90deg, transparent calc(clamp(34px, 4vw, 48px) - 1px), rgba(179, 50, 42, .35) 0, rgba(179, 50, 42, .35) calc(clamp(34px, 4vw, 48px) + 1px), transparent 0),
    linear-gradient(rgba(61, 139, 196, .13) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(61, 139, 196, .13) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--card);
  box-shadow: var(--shadow);
  border-radius: 2px;
}
/* Pagina de itinerar e o foaie de caiet cu spirală: pe marginea din stânga, găuri perforate și spire de sârmă
   care trec peste marginea foii (o placă de 44×24px, repetată; marginea foii e la 16px în placă). */
.itinerary::before {
  content: ''; position: absolute; left: -16px; top: 14px; bottom: 10px; width: 44px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='24' viewBox='0 0 44 24'%3E%0A%3Cdefs%3E%0A%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f4f6f8'/%3E%3Cstop offset='.45' stop-color='%23b9c0c7'/%3E%3Cstop offset='1' stop-color='%235d646b'/%3E%3C/linearGradient%3E%0A%3Cfilter id='b' x='-20%25' y='-40%25' width='140%25' height='180%25'%3E%3CfeGaussianBlur stdDeviation='.9'/%3E%3C/filter%3E%0A%3C/defs%3E%0A%3Cpath d='M5 11C5.6 14.6 9.5 17.4 16 18' fill='none' stroke='%236b7279' stroke-width='2.6' stroke-linecap='round'/%3E%0A%3Cellipse cx='33.6' cy='12.6' rx='3.6' ry='4.2' fill='%233a2c26' opacity='.78'/%3E%0A%3Cpath d='M30.6 14.6a3.6 4.2 0 0 0 6.2 0' fill='none' stroke='%23fff' stroke-opacity='.9' stroke-width='.9'/%3E%0A%3Cpath d='M34.5 13.5C29 7.5 19.5 5 11 6C7 6.6 4.6 8.6 5 11.4' fill='none' stroke='%232b201e' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' filter='url(%23b)' transform='translate(1.4 2)'/%3E%0A%3Cpath d='M33.6 12.2C28.4 6.4 19 4 10.6 5C6.6 5.6 4.3 7.8 5 11' fill='none' stroke='url(%23m)' stroke-width='3.1' stroke-linecap='round'/%3E%0A%3Cpath d='M31 9.2C26.5 5.6 18.5 4.3 11.5 5.1' fill='none' stroke='%23fff' stroke-opacity='.85' stroke-width='.9' stroke-linecap='round'/%3E%0A%3C/svg%3E") 0 0 / 44px 24px repeat-y;
}

.itinerary__main { position: relative; min-width: 0; }
.itinerary__date { display: block; font: 700 1.75rem/1.1 var(--hand); color: var(--sky-ink); margin-bottom: 6px; }
.itinerary h3 { font: 800 clamp(1.5rem, 2.6vw, 2rem)/1.15 var(--sans); max-width: calc(100% - 110px); }
.itinerary__where { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-weight: 700; color: var(--ink-mute); }
.itinerary__where .mark { width: 22px; height: 22px; }

.stamp {
  position: absolute; top: 0; right: 0;
  width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  padding-top: 4px; /* coborâm puțin textul: sus cercul e mai îngust decât „DIFICULTATE” */
  border: 3px double currentColor;
  color: var(--sky-ink);
  transform: rotate(-12deg);
}
.stamp small { font: 800 .62rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.stamp strong { font: 700 1.7rem/1 var(--hand); }
/* Munții de sub dificultate: aceeași cerneală, puțin mai stinsă, ca o ștampilă apăsată inegal. */
.stamp__peaks { display: block; width: auto; height: 14px; margin: 4px auto 0; fill: currentColor; opacity: .88; }
.stamp--usor { color: var(--green); }
.stamp--dificil { color: var(--red); }

.specs { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 22px 0 6px; }
.specs div { display: flex; flex-direction: column-reverse; }
.specs dt { font: 800 .72rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.specs dd { margin: 0; font: 700 2.1rem/1 var(--hand); }

.profile { width: 100%; max-width: 420px; height: 84px; margin: 4px 0 18px; color: var(--sky); }
.profile text { font: 700 24px var(--hand); fill: var(--sky-ink); }

.meet { display: flex; gap: 16px; align-items: baseline; margin-top: 20px; padding-top: 16px; border-top: 1px dashed rgba(43, 32, 30, .3); }
.meet__time { font: 700 2.1rem/1 var(--hand); color: var(--red); }
.meet p { margin: 0; }
.meet strong { display: block; font: 800 .72rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }

.bring {
  position: relative; align-self: start;
  padding: 28px 24px 22px;
  background: var(--note-1);
  box-shadow: 0 1px 1px rgba(43, 32, 30, .1), 0 14px 20px -14px rgba(43, 32, 30, .45);
  transform: rotate(1.2deg);
}
.bring h4 { font: 700 2rem/1 var(--hand); margin-bottom: 14px; }
.bring li + li { margin-top: 8px; }

.check { position: relative; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: .98rem; line-height: 1.45; }
.check input { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.check__box {
  position: relative; flex: none; width: 22px; height: 22px; margin-top: 1px;
  border: 2px solid var(--ink); border-radius: 3px 6px 4px 5px; background: rgba(255, 255, 255, .7);
  transform: rotate(-3deg);
}
.check__box::after { content: ''; position: absolute; left: -2px; top: -9px; width: 30px; height: 30px; background: var(--tick) center / contain no-repeat; opacity: 0; }
.check input:checked + .check__box::after { opacity: 1; }
.check input:focus-visible + .check__box { outline: 3px solid var(--sky-ink); outline-offset: 3px; }
.check input:checked ~ .check__text { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }

/* ---------- Albume recente ---------- */

/* Între „Albume recente” și „Contact” e și o potecă (.trail), deci paddingul dintre ele e mai mic,
   ca golul vizual să fie cam cât celelalte pauze dintre secțiuni. */
.recent { padding: clamp(24px, 5vw, 66px) 0 clamp(4px, 2.5vw, 30px); }
.recent__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.recent__grid li:nth-child(2) .polaroid { --tilt: 1.8deg; margin-top: 28px; }
.recent__grid li:nth-child(3) .polaroid { --tilt: -.8deg; }
.recent__grid li:nth-child(4) { display: none; }
.album-link { display: block; text-decoration: none; }
.album-link:focus-visible { outline: none; }
.album-link:focus-visible .polaroid { outline: 3px solid var(--sky-ink); outline-offset: 6px; }
.recent__more { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }

/* ---------- Contact + cum vii cu noi ---------- */

.contact { padding: clamp(22px, 14px + 2.5vw, 48px) 0 calc(var(--section) + 16px); }
/* Pe calculator: „Prima dată cu noi?” în stânga, „Cum vii cu noi” în dreapta, fișa de contact centrată dedesubt.
   Pe ecrane înguste rămâne ordinea fișă → pași → întrebări. */
.contact__grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "faq join" "card card";
  gap: clamp(72px, 7vw, 104px) clamp(28px, 3vw, 44px); align-items: start;
}
.contact__grid > .faq { grid-area: faq; }
.contact__grid > .join { grid-area: join; }
.contact__grid > .card { grid-area: card; justify-self: center; width: min(100%, 760px); }

.card {
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  background: var(--card);
  border-top: 4px solid rgba(61, 139, 196, .6);
  box-shadow: var(--shadow);
  transform: rotate(-.8deg);
}
/* Fișa de contact: pioneza înfiptă prin banda albastră de sus. */
.card::before { top: calc(2px - var(--pin, 38px) * 1.156); }
.card__lead { font-size: 1.1rem; margin-bottom: 26px; }
.card dl { margin: 0; display: grid; gap: 14px; }
.card dt { font: 800 .72rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.card dd { margin: 0; font: 700 1.9rem/1.15 var(--hand); overflow-wrap: anywhere; }
.card dd a { text-decoration-color: var(--sky); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.card__note {
  position: absolute; right: -14px; bottom: -34px; max-width: 230px;
  padding: 14px 16px; background: var(--note-4);
  font: 700 1.3rem/1.15 var(--hand); color: var(--ink);
  box-shadow: 0 10px 18px -10px rgba(43, 32, 30, .5);
  transform: rotate(3deg);
}
/* Pe calculator fișa ține toată lățimea și e joasă: textul sus, dedesubt pe un rând e-mail, telefon și bilețelul. */
@media (min-width: 981px) {
  .contact__grid > .card {
    width: 100%; display: flex; flex-wrap: wrap; align-items: center; column-gap: clamp(40px, 5vw, 80px);
    padding: clamp(30px, 3vw, 40px) clamp(32px, 4vw, 52px); transform: rotate(-.35deg);
  }
  .card__lead { flex: 1 0 100%; margin-bottom: 22px; }
  .card dl { display: flex; gap: clamp(40px, 5vw, 80px); }
  .card__note { position: relative; right: auto; bottom: auto; max-width: 236px; margin: 0 calc(clamp(32px, 4vw, 52px) * -1 - 12px) 0 auto; }
}

.join h3 { font: 700 clamp(2.2rem, 4vw, 2.8rem)/1 var(--hand); margin-bottom: 26px; }
.steps { position: relative; counter-reset: step; }
.steps::before { content: ''; position: absolute; left: 21px; top: 20px; bottom: 26px; border-left: 3px dotted var(--sky); }
.steps li { position: relative; counter-increment: step; display: flex; align-items: center; gap: 18px; min-height: 44px; font-weight: 700; font-size: 1.05rem; }
.steps li + li { margin-top: 22px; }
.steps li::before {
  content: counter(step); flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%;
  background: var(--card); font: 700 1.6rem/1 var(--hand);
}
.steps li:last-child::before { content: ''; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 21V4m0 1h11l-3 4 3 4H7' fill='none' stroke='%23b3322a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }

/* ---------- Footer ---------- */

.foot { background: var(--paper-2); border-top: 1px dashed rgba(43, 32, 30, .22); padding: 40px 0 36px; }
.foot__inner { display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; }
.foot img { width: 64px; filter: drop-shadow(0 4px 6px rgba(43, 32, 30, .25)); }
.foot__name { font: 400 1.42rem/1.15 var(--brand); letter-spacing: .01em; margin: 0; white-space: nowrap; }
.foot__tag { font: 700 1.45rem/1.1 var(--hand); color: var(--sky-ink); margin: 0; }
.foot__copy { margin: 0 0 0 auto; font-size: .92rem; color: var(--ink-mute); }
/* Mențiunea cerută de licența OpenStreetMap (formele traseelor animate din fundal). */
.foot__credit { flex-basis: 100%; margin: -8px 0 0; text-align: right; font-size: .78rem; color: var(--ink-mute); }
.foot__credit a { color: inherit; }

/* ---------- Galerie ---------- */

.gallery-head { padding: clamp(16px, 3vw, 40px) 0 clamp(32px, 4vw, 48px); }
.gallery-head h1 { font: 700 clamp(3.4rem, 7vw, 5.4rem)/.95 var(--hand); }
.gallery-head p { margin: 10px 0 0; font-weight: 700; color: var(--ink-mute); }

.albums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 5vw, 64px) clamp(28px, 4vw, 48px); padding-bottom: var(--section); }
.albums li:nth-child(3n + 2) .polaroid { --tilt: 1.6deg; }
.albums li:nth-child(3n) .polaroid { --tilt: -.7deg; }
.albums__note { margin: 18px 6px 0; font: 700 1.3rem/1.25 var(--hand); color: var(--ink-soft); }

/* Deschis direct pe un album: până pune main.js albumul, lista stă ascunsă și pagina ține subsolul jos (galerie.html). */
.hc-album-first #album-list { display: none; }
.hc-album-first main { min-height: 100vh; }
.album { padding-bottom: var(--section); }
.album__back { display: inline-flex; align-items: center; gap: 8px; font: 700 1.5rem/1 var(--hand); text-decoration: none; margin-bottom: 20px; }
.album__back svg { width: 34px; height: 22px; }
.album__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px 48px; align-items: end; margin-bottom: clamp(36px, 5vw, 56px); }
.album__head h1 { font: 700 clamp(3rem, 6vw, 4.6rem)/.95 var(--hand); }
.album__head h1:focus { outline: none; }
.album__meta { margin: 12px 0 0; font-weight: 700; color: var(--ink-mute); }
.album__note { position: relative; margin: 0; padding: 20px 22px; background: var(--note-2); font: 700 1.35rem/1.25 var(--hand); box-shadow: 0 14px 20px -14px rgba(43, 32, 30, .45); transform: rotate(1.2deg); }

/* Rândurile au loc pentru pioneza de 30px care iese deasupra fiecărei poze. */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: clamp(44px, 4vw, 52px) clamp(22px, 3vw, 36px); padding-top: 20px; }
.photos .polaroid { --ratio: 1; --pin: 30px; padding-bottom: 30px; }
.photos li:nth-child(4n + 1) .polaroid { --tilt: -1.8deg; }
.photos li:nth-child(4n + 2) .polaroid { --tilt: 1.2deg; }
.photos li:nth-child(4n + 3) .polaroid { --tilt: -.6deg; }
.photos li:nth-child(4n) .polaroid { --tilt: 1.9deg; }
.photo-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.photo-btn:focus-visible { outline: none; }
.photo-btn:focus-visible .polaroid { outline: 3px solid var(--sky-ink); outline-offset: 6px; }

.album__pager { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: clamp(48px, 6vw, 72px); }
.album__pager a { display: flex; flex-direction: column; gap: 4px; max-width: 48%; font: 700 1.5rem/1.1 var(--hand); text-decoration: none; }
.album__pager small { font: 800 .7rem/1 var(--sans); letter-spacing: .1em; white-space: nowrap; text-transform: uppercase; color: var(--ink-mute); }
.album__next { margin-left: auto; text-align: right; align-items: flex-end; }
@media (max-width: 600px) {
  .album__pager { gap: 10px; }
  .album__pager a { font-size: 1.25rem; }
  .album__pager small { font-size: .6rem; letter-spacing: .06em; }
}

/* Lightbox: fundal negru transparent — pagina se mai ghicește în spate, poza iese în față. */
.hc-lb { --lb-bg: rgba(14, 11, 10, .88); --lb-fg: #f4ede6; --lb-accent: #f2b52e; }
/* Poza fără chenar, doar cu colțuri ușor rotunjite și o umbră moale. */
.hc-lb .hc-lb__fig { max-width: calc(100vw - 200px); }
.hc-lb .hc-lb__fig img { border-radius: 6px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8); }
.hc-lb .hc-lb__fig figcaption { align-items: baseline; font: 700 1.45rem/1.1 var(--hand); opacity: 1; padding-top: 16px; }
.hc-lb .hc-lb__count {
  font: 800 .78rem/1 var(--sans); letter-spacing: .08em; color: var(--ink-soft);
  padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 1px var(--line);
}
/* Butoanele: cercuri albe egale, cu iconițe desenate; la mouse se umplu cu cerneala carnetului. */
.hc-lb .hc-lb__close, .hc-lb .hc-lb__nav {
  position: absolute; display: grid; place-items: center;
  width: 52px; height: 52px; padding: 0; border-radius: 50%;
  background: #fff; color: var(--ink);
  box-shadow: 0 1px 2px rgba(43, 32, 30, .16), 0 10px 24px -10px rgba(43, 32, 30, .5), 0 0 0 1px var(--line);
}
.hc-lb .hc-lb__close svg, .hc-lb .hc-lb__nav svg { width: 22px; height: 22px; }
.hc-lb .hc-lb__close { top: 20px; right: 20px; width: 46px; height: 46px; }
.hc-lb .hc-lb__close svg { width: 20px; height: 20px; }
.hc-lb .hc-lb__nav { top: 50%; margin-top: -26px; }
.hc-lb .hc-lb__prev { left: clamp(12px, 2.5vw, 36px); }
.hc-lb .hc-lb__next { right: clamp(12px, 2.5vw, 36px); }
.hc-lb .hc-lb__close:hover, .hc-lb .hc-lb__nav:hover { background: var(--ink); color: #fff; }
.hc-lb .hc-lb__close:focus-visible, .hc-lb .hc-lb__nav:focus-visible { color: var(--ink); outline: 3px solid var(--sky-ink); outline-offset: 3px; }
.hc-lb .hc-lb__close:active, .hc-lb .hc-lb__nav:active { transform: scale(.94); }
@media (prefers-reduced-motion: no-preference) {
  .hc-lb .hc-lb__close, .hc-lb .hc-lb__nav { transition: background .18s ease, color .18s ease, transform .12s ease; }
}
/* Pe telefon: sus doar ×, jos un rând fix cu ‹  3 / 12  ›; poza și legenda stau între ele, fără să se suprapună.
   Fundalul devine opac, ca titlurile paginii din spate să nu se mai vadă prin el. */
@media (max-width: 640px) {
  .hc-lb { --lb-bg: rgb(14, 11, 10); padding: 60px 8px 72px; box-sizing: border-box; }
  .hc-lb .hc-lb__fig, .hc-lb.is-open .hc-lb__fig { position: static; max-width: 100%; animation: none; }
  .hc-lb .hc-lb__fig img { max-height: calc(100vh - 168px); max-height: calc(100dvh - 168px); }
  .hc-lb .hc-lb__fig figcaption { justify-content: center; padding: 10px 8px 0; text-align: center; text-wrap: balance; font-size: 1.15rem; line-height: 1.15; }
  .hc-lb .hc-lb__count { position: absolute; left: 50%; bottom: 25px; transform: translateX(-50%); white-space: nowrap; }
  .hc-lb .hc-lb__nav { top: auto; bottom: 14px; margin-top: 0; width: 48px; height: 48px; }
  .hc-lb .hc-lb__prev { left: 16px; } .hc-lb .hc-lb__next { right: 16px; }
  .hc-lb .hc-lb__close { top: 8px; right: 10px; width: 44px; height: 44px; }
}

/* ---------- Ghidul drumețului ---------- */

.guide-head { padding: clamp(24px, 4vw, 48px) 0 0; }
/* Vremea e primul lucru de pe pagină; titlul ghidului și introducerea vin după ea. */
main > .wx:first-child { padding-top: clamp(16px, 3vw, 40px); }
.guide-head h1 { font: 700 clamp(3.4rem, 7vw, 5.4rem)/.95 var(--hand); }
.guide-head__lead { max-width: 44em; margin: 18px 0 0; font-size: 1.07rem; color: var(--ink-soft); }
/* Urgența: fișa cu numerele, cu bandă roșie de marcaj sus, și bilețelul „ce le spui”. */
.sos { padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 5vw, 60px); }
.sos__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.sos__card {
  position: relative;
  padding: clamp(28px, 4vw, 40px);
  background: var(--card);
  border-top: 10px solid var(--red);
  box-shadow: var(--shadow);
  transform: rotate(-.6deg);
}
.sos__card h2 { font: 700 clamp(2.4rem, 4.4vw, 3.2rem)/1 var(--hand); color: var(--red); margin-bottom: 22px; }
.sos__numbers { display: grid; gap: 18px; }
.sos__numbers li { display: grid; grid-template-columns: minmax(0, 1fr); }
.sos__label { font: 800 .72rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.sos__num { font: 700 clamp(2.4rem, 5vw, 3.2rem)/1.05 var(--hand); color: var(--ink); text-decoration: none; width: fit-content; }
.sos__num:hover { background: var(--scribble) left bottom / 100% .28em no-repeat; }
.sos__numbers li:first-child .sos__num { color: var(--red); font-size: clamp(3.4rem, 7vw, 4.6rem); }
.sos__note { font-size: .95rem; color: var(--ink-soft); }
.sos__extra { margin: 22px 0 0; padding-top: 16px; border-top: 1px dashed rgba(43, 32, 30, .3); font-size: .98rem; color: var(--ink-soft); }
.sos__say {
  position: relative; --pin: 34px;
  padding: 30px 24px 22px;
  background: var(--note-4);
  box-shadow: 0 1px 1px rgba(43, 32, 30, .1), 0 14px 20px -14px rgba(43, 32, 30, .45);
  transform: rotate(1.4deg);
  margin-top: 16px;
}
.sos__say::before {
  content: ''; position: absolute; z-index: 1; left: 50%;
  top: calc(12px - var(--pin) * 1.156);
  width: var(--pin); height: calc(var(--pin) * 1.25); margin-left: calc(var(--pin) * -.3125);
  background: url("shared/pin.svg") center / contain no-repeat;
}
.sos__say h3 { font: 700 1.9rem/1.05 var(--hand); margin-bottom: 12px; }
.sos__say ol { counter-reset: say; display: grid; gap: 8px; }
.sos__say li { counter-increment: say; position: relative; padding-left: 30px; font-size: .98rem; line-height: 1.45; }
.sos__say li::before { content: counter(say) '.'; position: absolute; left: 0; top: -3px; font: 700 1.45rem/1 var(--hand); color: var(--red); }

/* Secțiunile ghidului */
.wx, .guide { padding: clamp(32px, 5vw, 60px) 0; }
.guide__intro { max-width: 46em; margin: -8px 0 clamp(24px, 3vw, 36px); color: var(--ink-soft); }
.guide__hint { margin: -6px 0 28px; font: 700 1.45rem/1.15 var(--hand); color: var(--sky-ink); }
.guide__hint--below { margin: 36px 0 0; max-width: 44em; }
.guide-notes { margin-top: 12px; }
@media (min-width: 981px) { #pregatire .notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.checklist li + li { margin-top: 8px; }

/* Niveluri de dificultate: trei foi de caiet cu pătrățele, fiecare cu ștampila ei. */
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 36px); align-items: start; }
.level {
  position: relative;
  padding: 28px clamp(20px, 2.4vw, 28px) 26px;
  background:
    linear-gradient(rgba(61, 139, 196, .13) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(61, 139, 196, .13) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--card);
  box-shadow: var(--shadow);
  border-radius: 2px;
}
.level:nth-child(1) { transform: rotate(-.8deg); }
.level:nth-child(2) { transform: rotate(.6deg); }
.level:nth-child(3) { transform: rotate(-.4deg); }
.level .stamp { top: -14px; right: -10px; width: 88px; height: 88px; background: rgba(255, 253, 249, .85); }
.level .stamp small { font-size: .56rem; }
.level h3 { font: 800 1.35rem/1.2 var(--sans); max-width: calc(100% - 80px); margin-bottom: 10px; }
.level__desc { font-size: .95rem; color: var(--ink-soft); margin-bottom: 14px; min-height: 4.4em; }
.level__plus { margin: 0 0 10px; font: 700 1.3rem/1.1 var(--hand); color: var(--sky-ink); }
.level .check { font-size: .95rem; }

/* Noaptea: bilețelul cu ce ai la tine + pașii. */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.guide-bring { transform: rotate(-1deg); background: var(--note-3); }
.guide-bring h3, .split__steps h3, .group h3, .rules h3 { font: 700 2rem/1 var(--hand); margin-bottom: 16px; }
.steps--text li { align-items: flex-start; font-weight: 400; font-size: 1rem; line-height: 1.5; }
.steps--text li > span { padding-top: 9px; }
.steps--text li:last-child::before { content: counter(step); background: var(--card); }
.steps--text::before { bottom: 40px; }

/* Cortul: grupe de echipament pe coloane + regulile pe un bilețel. */
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px clamp(24px, 3vw, 40px); }
.group { padding: 22px 22px 18px; background: rgba(255, 253, 249, .8); border: 1.5px dashed rgba(43, 32, 30, .28); border-radius: 6px; }
.group h3 { font-size: 1.75rem; margin-bottom: 12px; }
.rules {
  position: relative; --pin: 34px;
  max-width: 760px; margin: clamp(40px, 5vw, 56px) auto 0;
  padding: 30px clamp(22px, 3vw, 34px) 22px;
  background: var(--note-2);
  box-shadow: 0 1px 1px rgba(43, 32, 30, .1), 0 14px 20px -14px rgba(43, 32, 30, .45);
  transform: rotate(-.8deg);
}
/* Bilețelul stă în grila grupelor: pe toată lățimea pe ecran îngust; pe ecran lat (3 coloane) ocupă cele două
   coloane goale de lângă „Restul”, cu marginea de sus pe aceeași linie cu foaia din stânga. */
.groups .rules { grid-column: 1 / -1; width: 100%; margin: 16px auto 0; }
@media (min-width: 981px) {
  .groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .groups .rules { grid-column: 2 / -1; max-width: none; margin: 0; align-self: start; }
}
.rules::before {
  content: ''; position: absolute; z-index: 1; left: 50%;
  top: calc(12px - var(--pin) * 1.156);
  width: var(--pin); height: calc(var(--pin) * 1.25); margin-left: calc(var(--pin) * -.3125);
  background: url("shared/pin.svg") center / contain no-repeat;
}
.rules ul { display: grid; gap: 8px; }
.rules li { position: relative; padding-left: 26px; font-size: .98rem; line-height: 1.5; }
.rules li::before { content: ''; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; background: var(--tick) center / contain no-repeat; }

/* Marcajele: pătrățelul și explicația lui. */
.marks-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px clamp(28px, 4vw, 56px); }
.marks-legend li { display: flex; gap: 18px; align-items: flex-start; }
.marks-legend .mark { width: 52px; height: 52px; border-radius: 4px; margin-top: 2px; }
.marks-legend .mark--triangle-yellow::after { inset: 20% 17% 23%; background: var(--sun); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.marks-legend .mark--dot-red::after { inset: 27%; background: var(--red); border-radius: 50%; }
.marks-legend h3 { font: 800 1.1rem/1.25 var(--sans); margin-bottom: 4px; }
.marks-legend p { margin: 0; font-size: .96rem; color: var(--ink-soft); }

/* Salvamont pe masive: fișe mici, cu numerele de apăsat direct din telefon. */
.phones { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }
.phone { padding: 18px 20px 16px; background: var(--card); box-shadow: 0 1px 2px rgba(43, 32, 30, .14), 0 8px 18px -12px rgba(43, 32, 30, .4); border-left: 6px solid var(--red); border-radius: 2px; }
.phone h3 { font: 700 1.7rem/1.05 var(--hand); margin-bottom: 8px; }
.phone ul { display: grid; gap: 8px; }
.phone li { display: flex; flex-direction: column; }
.phone__name { font-size: .88rem; color: var(--ink-mute); line-height: 1.35; }
/* Restul masivelor: un buton desenat care desface lista; săgeata se întoarce când lista e deschisă. */
.phones-more { margin-top: 26px; }
.phones-more summary { display: flex; width: fit-content; margin-inline: auto; list-style: none; cursor: pointer; }
/* Nota de sub primele trei masive: centrată, pe un singur rând pe ecran lat; pe ecran îngust se rupe în rânduri egale. */
.guide__hint--phones { margin: 30px auto 0; max-width: none; text-align: center; text-wrap: balance; font-size: clamp(1.15rem, 1.6vw, 1.3rem); }
:is(.guide__hint--phones, .rules) .nowrap { white-space: nowrap; }
.phones-more summary::-webkit-details-marker { display: none; }
.phones-more summary svg { width: 20px; height: 20px; transition: transform .2s ease; }
.phones-more[open] summary svg { transform: rotate(180deg); }
.phones-more[open] summary { margin-bottom: 22px; }
.phones-more__close, .phones-more[open] .phones-more__open { display: none; }
.phones-more[open] .phones-more__close { display: inline; }
.phone__num { font: 800 1.12rem/1.3 var(--sans); color: var(--ink); text-decoration-color: rgba(179, 50, 42, .5); text-underline-offset: 3px; width: fit-content; }

.guide-sources { padding: clamp(24px, 4vw, 48px) 0 var(--section); }
.guide-sources h2 { font: 700 1.9rem/1 var(--hand); margin-bottom: 10px; }
.guide-sources p { max-width: 60em; font-size: .92rem; color: var(--ink-mute); }
.guide-sources a { color: var(--sky-ink); }

/* ---------- Vremea pe creste ---------- */

/* Masivele: etichete de hârtie; cea aleasă e „colorată” cu cerneala carnetului. */
.wx__tabs { display: flex; flex-wrap: wrap; gap: 10px 10px; margin-bottom: 22px; }
.wx__tabs button {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 7px 14px 6px; cursor: pointer;
  background: var(--card); color: var(--ink);
  border: 1.5px solid rgba(43, 32, 30, .45); border-radius: var(--wobbly);
  font: 700 .95rem/1.2 var(--sans);
}
.wx__tabs button:hover { background: var(--note-3); }
.wx__tab-temp { font: 700 1.25rem/1 var(--hand); color: var(--sky-ink); }
.wx__tabs button[aria-selected="true"] { background: var(--sky-ink); border-color: var(--sky-ink); color: #fff; box-shadow: 2px 3px 0 rgba(43, 32, 30, .85); }
.wx__tabs button[aria-selected="true"] .wx__tab-temp { color: #fff; }

.wx__panel {
  position: relative; min-height: 360px;
  padding: clamp(22px, 3vw, 36px);
  background:
    linear-gradient(rgba(61, 139, 196, .1) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(61, 139, 196, .1) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--card);
  box-shadow: var(--shadow);
  border-radius: 2px;
}
.wx__panel:focus-visible { outline-offset: 6px; }
.wx__loading, .wx__error { margin: 0; padding: 60px 0; text-align: center; font: 700 1.6rem/1.3 var(--hand); color: var(--ink-mute); }
.wx__error .btn { margin-top: 18px; font-size: .95rem; }

.wx__now { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 56px); align-items: center; padding-bottom: 22px; border-bottom: 1px dashed rgba(43, 32, 30, .3); }
.wx__where h3 { font: 700 clamp(2.2rem, 4vw, 2.9rem)/1 var(--hand); }
.wx__where p { margin: 6px 0 0; font-weight: 700; color: var(--ink-mute); }
.wx__big { display: flex; align-items: center; gap: 12px; }
.wx__desc { margin-left: 14px; } /* semnul de grad al temperaturii mari iese din cutia ei */
.wx__big .wx-icon { width: 84px; height: 84px; }
.wx__temp { margin: 0; font: 700 clamp(4rem, 7vw, 5.2rem)/.9 var(--hand); color: var(--ink); }
.wx__desc p { margin: 0; font-size: .95rem; color: var(--ink-soft); line-height: 1.35; }
.wx__desc strong { color: var(--ink); font-size: 1.05rem; }
.wx__facts { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 10px 28px; margin: 0; justify-content: end; }
.wx__facts div { display: flex; flex-direction: column-reverse; }
.wx__facts dt { font: 800 .68rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.wx__facts dd { margin: 0; font: 700 1.6rem/1 var(--hand); white-space: nowrap; }
.is-strong { color: var(--red); }

.wx__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 18px; }
.wx__days li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 6px; }
.wx__days li + li { border-left: 1px dashed rgba(43, 32, 30, .2); }
.wx__days li:first-child { background: rgba(242, 181, 46, .14); border-radius: 6px; }
.wx__day { margin: 0; font: 700 1.35rem/1.1 var(--hand); color: var(--sky-ink); white-space: nowrap; }
.wx__days .wx-icon { width: 52px; height: 52px; margin: 4px 0; }
.wx__range { margin: 0; font: 700 1.5rem/1 var(--hand); white-space: nowrap; }
.wx__range span { color: var(--ink-mute); font-size: 1.2rem; }
.wx__label { margin: 4px 0 6px; font-size: .78rem; line-height: 1.25; color: var(--ink-soft); min-height: 2.5em; }
.wx__meta { margin: 0; display: flex; flex-direction: column; gap: 2px; font: 700 .8rem/1.2 var(--sans); color: var(--ink-mute); }
.wx__meta span { display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.wx-mini { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.wx__warn { display: grid; gap: 6px; margin-top: 20px; padding-top: 16px; border-top: 1px dashed rgba(43, 32, 30, .3); }
.wx__warn li { position: relative; padding-left: 30px; font: 700 1.3rem/1.2 var(--hand); }
.wx__warn li::before { content: '!'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font: 800 .8rem/1 var(--sans); color: #fff; background: var(--sky-ink); }
.wx__warn .is-danger { color: var(--red); }
.wx__warn .is-danger::before { background: var(--red); }
.wx__warn .is-warn { color: #8a5300; }
.wx__warn .is-warn::before { background: #c98410; }
.wx__warn .is-info { color: var(--sky-ink); }

.wx__note { margin: 20px 0 0; color: var(--ink-soft); }
.wx__foot { margin: 6px 0 0; font-size: .85rem; color: var(--ink-mute); }
.wx__foot a { color: var(--sky-ink); }

/* Desenele de vreme: contur de cerneală, puțină culoare dedesubt. */
.wx-icon { fill: none; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.wx-sun { stroke: #d99a14; fill: rgba(242, 181, 46, .35); }
.wx-moon { stroke: var(--sky-ink); fill: var(--note-3); }
.wx-cloud { stroke: var(--ink-soft); fill: #fff; }
.wx-rain { stroke: var(--sky); stroke-width: 2.6; }
.wx-snow { stroke: var(--sky-ink); stroke-width: 2; }
.wx-bolt { stroke: var(--red); stroke-width: 2.6; }
.wx-fog { stroke: var(--ink-mute); }

/* ---------- Mișcare (doar dacă e dorită) ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .btn { transition: transform .18s ease, box-shadow .18s ease; }
  .btn:hover { transform: translate(-1px, -2px); box-shadow: 5px 7px 0 rgba(43, 32, 30, .85); }
  .album-link .polaroid, .photo-btn .polaroid { transition: transform .25s ease, box-shadow .25s ease; }
  .album-link:hover .polaroid, .photo-btn:hover .polaroid { transform: rotate(0deg) translateY(-6px) scale(1.02); box-shadow: 0 2px 4px rgba(43, 32, 30, .14), 0 22px 34px -14px rgba(43, 32, 30, .45); }
  .check__box::after { transition: opacity .15s ease; }
}

/* Pe telefon și tabletă, pozele din hero apar pe rând când ajung pe ecran: fiecare urcă de jos și se ridică puțin
   din pagină, se așază, apoi pioneza ei cade de sus și se înfige; bilețelele apar după poza la care arată.
   Pornește din main.js (.is-in) și se reia de fiecare dată când pozele ies de pe ecran și revin. */
@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
  .anim-wait .stack:not(.is-in) .polaroid,
  .anim-wait .stack:not(.is-in) .stack__note { opacity: 0; }

  .stack.is-in .stack__a { --d: 0s; }
  .stack.is-in .stack__b { --d: .4s; }
  .stack.is-in .stack__c { --d: .8s; }
  .stack.is-in .stack__note--top { --d: 1.1s; }
  .stack.is-in .stack__note:not(.stack__note--top) { --d: 1.5s; }

  .stack.is-in .polaroid { animation: photo-rise .9s cubic-bezier(.25, .8, .3, 1) var(--d) backwards; }
  .stack.is-in .polaroid::before { animation: pin-drop .45s cubic-bezier(.5, 0, .75, .3) calc(var(--d) + .75s) backwards; }
  .stack.is-in .stack__note { animation: note-in .5s ease-out var(--d) backwards; }
  @keyframes photo-rise {
    0% { opacity: 0; scale: .92; translate: 0 70px; box-shadow: 0 0 0 rgba(43, 32, 30, 0); }
    50% { opacity: 1; scale: 1.06; translate: 0 -8px; box-shadow: 0 4px 6px rgba(43, 32, 30, .14), 0 34px 44px -14px rgba(43, 32, 30, .55); }
    100% { scale: 1; translate: 0 0; box-shadow: var(--shadow); }
  }
  /* Pioneza cade (accelerând), lovește hârtia, se turtește o clipă și revine. Butoanele stau deasupra pozelor. */
  .hero__actions { position: relative; z-index: 2; }
  @keyframes pin-drop {
    0% { opacity: 0; translate: 0 -44px; } /* destul de scurt cât să nu treacă peste butoanele din hero */
    20% { opacity: 1; }
    70% { translate: 0 0; scale: 1; animation-timing-function: ease-out; }
    82% { translate: 0 2px; scale: 1.12 .86; }
    100% { translate: 0 0; scale: 1; }
  }
  @keyframes note-in { from { opacity: 0; translate: 0 10px; } }
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .hero__grid, .about__grid, .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .contact__grid { grid-template-areas: "card" "join" "faq"; row-gap: clamp(48px, 7vw, 72px); align-items: start; }
  .stack { max-width: 620px; width: 100%; margin: 72px auto 0; }
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .itinerary { grid-template-columns: minmax(0, 1fr); }
  .bring { max-width: 460px; }
  .albums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .album__head { grid-template-columns: minmax(0, 1fr); }
  .about__photo, .about__more { max-width: 520px; }
}

@media (max-width: 720px) {
  .stats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Pe telefon: două câte două, pe două rânduri, ca să nu ocupe fiecare album un ecran întreg. */
  .recent__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(14px, 4vw, 28px); }
  .recent__grid li:nth-child(4) { display: block; }
  .recent__grid li:nth-child(2) .polaroid { margin-top: 0; }
  .recent__grid li:nth-child(4) .polaroid { --tilt: 1.2deg; }
  .recent__grid .polaroid { padding: 6px 6px 0; }
  .recent__grid .polaroid figcaption { padding: 6px 2px 9px; font-size: 1.12rem; }
  .recent__grid .polaroid figcaption small { font-size: .7rem; line-height: 1.35; }
  .card__note { position: relative; right: auto; bottom: auto; margin: 24px 0 -8px auto; }
}

@media (max-width: 600px) {
  body { font-size: 1rem; }
  html { scroll-padding-top: 104px; }
  .bar { padding: 8px 0 6px; }
  .bar__inner { justify-content: center; gap: 2px 24px; }
  .brand { font-size: 1rem; }
  .brand img { width: 26px; }
  .nav ul { justify-content: center; gap: 0 20px; }
  .nav a { font-size: 1.4rem; line-height: 1.1; }
  .hero { text-align: center; }
  .hero__intro { text-align: left; } /* textul de prezentare stă la stânga, ca tot restul site-ului */
  .hero__mark { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .stack { aspect-ratio: 1 / .97; }
  .stack__a { width: 40%; }
  .stack__b { width: 55%; }
  .stack__c { width: 56%; right: 1%; top: calc((55cqw - 12px) * .75 + 58px); }
  .stack .polaroid { padding: 6px 6px 0; }
  .stack .polaroid figcaption { font-size: 1.12rem; padding: 5px 2px 8px; }
  .stack .polaroid figcaption small { display: none; }
  .stack .polaroid, .about__photo, .recent__grid .polaroid, .albums .polaroid { --pin: 26px; }
  .note, .card, .itinerary { --pin: 28px; }
  .stack__note { font-size: 1.3rem; left: 2%; top: 69%; }
  .stack__note svg { width: 40px; height: 30px; }
  .stack__note--top { top: -58px; left: 2%; }
  .notes { grid-template-columns: minmax(0, 1fr); }
  .section-head--hint { margin-bottom: 44px; }
  .trips__hint { font-size: 1.35rem; top: 2px; }
  .trips__hint svg { width: 34px; height: 38px; margin-bottom: -20px; }
  .itinerary__date { font-size: 1.5rem; }
  .itinerary__date, .itinerary h3 { max-width: none; padding-right: 78px; }
  .stamp { width: 76px; height: 76px; top: -6px; right: -8px; }
  .stamp strong { font-size: 1.4rem; }
  .stamp small { font-size: .5rem; letter-spacing: .06em; }
  .stamp__peaks { height: 11px; margin-top: 3px; }
  .specs { gap: 8px 24px; }
  /* Galeria pe telefon: tot două câte două, ca „Albume recente”. Notița de sub album ar face fiecare card cât
     un ecran pe o coloană îngustă, așa că aici nu apare; o vezi sus în album, când îl deschizi. */
  .albums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(14px, 4vw, 28px); }
  .albums .polaroid { padding: 6px 6px 0; }
  .albums .polaroid figcaption { padding: 6px 2px 9px; font-size: 1.12rem; text-wrap: balance; }
  /* Un titlu pe două rânduri („Traseu Bran – …”) nu mai face polaroidul mai lung decât vecinul lui. */
  .albums .album-link, .albums .polaroid { height: 100%; }
  .albums .polaroid figcaption small { font-size: .7rem; line-height: 1.35; }
  .albums .albums__note { display: none; }
  .albums li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - clamp(14px, 4vw, 28px) / 2); }
  .foot__inner { column-gap: 20px; }
  .foot__copy { margin-left: 0; }
  .foot__credit { text-align: left; margin-top: 0; }
  .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 18px; }
  .photos .polaroid { padding: 6px 6px 18px; }
  .photos .polaroid { --pin: 24px; }
}

/* ---------- Ghid: ecrane mai mici ---------- */

@media (max-width: 980px) {
  .sos__grid, .split { grid-template-columns: minmax(0, 1fr); }
  .sos__say, .guide-bring { max-width: 520px; }
  .levels { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .wx__note { font-size: .95rem; } /* rămâne pe un singur rând și pe tabletă */
  .level__desc { min-height: 0; }
  .wx__now { grid-template-columns: minmax(0, 1fr) auto; }
  .wx__facts { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; }
  /* Cele 7 zile nu mai încap una lângă alta: se derulează orizontal în cadrul foii. */
  .wx__days { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(clamp(22px, 3vw, 36px) * -1); padding-inline: clamp(22px, 3vw, 36px); scrollbar-width: thin; }
  .wx__days li { flex: 0 0 96px; scroll-snap-align: start; }
}

@media (max-width: 720px) {
  .marks-legend { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .sos__say, .rules { --pin: 28px; }
  .wx__tabs { gap: 8px; }
  .wx__tabs button { padding: 6px 11px 5px; font-size: .88rem; }
  .wx__now { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .wx__big .wx-icon { width: 68px; height: 68px; }
  .wx__facts { grid-template-columns: repeat(2, minmax(0, auto)); gap: 10px 36px; }
  .wx__days li { flex-basis: 88px; }
  .level .stamp { width: 76px; height: 76px; right: -4px; } /* -6px ieșea un pixel din ecran (foaia e rotită) */
  .level .stamp strong { font-size: 1.4rem; }
  .level .stamp small { font-size: .5rem; letter-spacing: .06em; }
}

/* ================= Înscriere, „Prima dată cu noi?”, telefon (2026-10-03) ================= */

/* Punctul de întâlnire duce pe hartă. */
.meet a { color: inherit; text-decoration: none; }
.meet a.meet__map { color: var(--sky-ink); font-weight: 700; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* „Vreau să vin” + până când te poți înscrie. */
.signup { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px; }
.signup .btn { min-height: 48px; }
.signup__by { margin: 0; font: 700 1.35rem/1.1 var(--hand); color: var(--red); }

/* Descrierea: pe telefon arată doar 3 rânduri, cu „citește tot”. */
.more { display: none; }
.itinerary__desc p { margin: 0 0 1em; }

/* „Ce să aduci” e acum un <details>: pe calculator stă deschis și arată ca înainte, pe telefon se deschide la atingere. */
.bring > summary { list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; cursor: default; }
.bring > summary::-webkit-details-marker { display: none; }
.bring > summary h4 { margin-bottom: 14px; }
.bring__count { display: none; }

/* Prima dată cu noi? */
.faq { min-width: 0; }
.faq__title { font: 700 clamp(2.2rem, 4vw, 2.8rem)/1 var(--hand); margin-bottom: 18px; }
.faq__item { border-bottom: 1px dashed rgba(43, 32, 30, .3); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 10px 0; font-weight: 800; font-size: 1.08rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
/* Plusul și minusul sunt desenate (nu litere), ca să stea exact în centrul cercului. */
.faq__item summary::before {
  content: ''; flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--sky-ink); transform: rotate(-4deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 7.5v11M7.5 13h11' stroke='%231f5f8b' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.faq__item[open] summary::before {
  background: var(--sky-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M7.5 13h11' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.faq__item summary:focus-visible { outline: 3px solid var(--sky-ink); outline-offset: 3px; }
.faq__item p { margin: 0 0 16px 44px; line-height: 1.55; }
.faq__item a { color: var(--sky-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bring-hint { display: none; } /* doar pe telefon, vezi mai jos */

@media (max-width: 600px) {
  /* Descrierea strânsă la 3 rânduri. */
  .itinerary__desc p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-bottom: 4px; }
  .itinerary__desc.is-open p { display: block; -webkit-line-clamp: unset; }
  .more {
    display: inline-block; min-height: 44px; padding: 8px 0; border: 0; background: none; cursor: pointer;
    font: 700 1.3rem/1 var(--hand); color: var(--sky-ink); text-decoration: underline; text-decoration-color: var(--sky); text-underline-offset: 4px;
  }
  .signup .btn { flex: 1 1 100%; justify-content: center; }
  .signup__by { flex: 1 1 100%; text-align: center; }

  /* Pe telefon, „bifează…” nu mai stă lângă titlul secțiunii, ci în fiecare tură, între termenul de înscriere
     și bilețelul „Ce să aduci”, cu săgeata spre el. */
  .trips__hint { display: none; }
  .section-head--hint { margin-bottom: 28px; }
  .bring-hint {
    display: flex; align-items: flex-start; justify-content: center; gap: 6px;
    margin: -10px 0 -8px; padding-right: 8px; white-space: nowrap; /* rândul de grilă are deja 24px sus și jos */
    font: 700 clamp(1.1rem, 5.4vw, 1.3rem)/1.1 var(--hand); color: var(--sky-ink);
  }
  .bring-hint svg { width: 30px; height: 34px; flex: none; margin: 6px 0 -18px; transform: scaleX(-1); }

  /* „Ce să aduci” strâns: un bilețel cu titlul și câte lucruri sunt, care se deschide la atingere. */
  .bring { padding: 16px 20px; }
  .bring > summary { cursor: pointer; align-items: center; min-height: 44px; }
  .bring > summary h4 { margin: 0; font-size: 1.8rem; }
  .bring__count { display: inline-flex; align-items: center; gap: 8px; font: 700 1.25rem/1 var(--hand); color: var(--ink-soft); }
  .bring__count::after { content: ''; width: 9px; height: 9px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: translateY(-3px) rotate(45deg); }
  .bring[open] .bring__count::after { transform: translateY(2px) rotate(-135deg); }
  .bring[open] > summary { margin-bottom: 10px; }

  /* Mai mult loc pentru deget în meniu, fără să crească bara: zona de atingere se lărgește în jurul cuvântului. */
  .nav a, .subnav a { padding: 10px 6px; margin: -10px -6px; background-clip: content-box; background-origin: content-box; }
  .nav a { display: inline-block; }
  .nav ul { row-gap: 4px; }
  /* Fontul de mână lasă mult loc gol sub litere: fără asta sublinierea cădea departe de cuvânt, lipită de marginea benzii. */
  .nav a:hover, .nav a[aria-current="page"] { background-position: left 0 bottom .2em; }

  /* Rândul cu scurtăturile ghidului: un singur rând care se derulează cu degetul, cu marginile estompate. */
  .subnav { padding: 4px 0 6px; }
  .subnav .wrap { padding-inline: 0; }
  .subnav ul {
    flex-wrap: nowrap; justify-content: flex-start; gap: 0 20px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    padding: 6px var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 36px), transparent);
  }
  .subnav ul::-webkit-scrollbar { display: none; }
  .subnav a { display: inline-block; }

  /* Vremea: celulele ceva mai înguste ca să se vadă o a cincea zi pe jumătate — semn că lista continuă. */
  .wx__days li { flex-basis: 76px; }
}

/* Prognoza veche, arătată când nu e semnal. */
.wx__stale { margin: 0 0 14px; padding: 10px 14px; background: var(--note-1); font-weight: 700; font-size: .95rem; transform: rotate(-.4deg); box-shadow: 0 8px 14px -10px rgba(43, 32, 30, .45); }

/* Formularul „Vreau să vin”: o foaie de carnet peste pagină. */
.signup-dlg { padding: 0; border: 0; background: none; width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: visible; }
.signup-dlg::backdrop { background: rgba(43, 32, 30, .55); }
.sf {
  position: relative; max-height: calc(100dvh - 24px); overflow-y: auto;
  padding: 30px clamp(20px, 5vw, 36px) 26px;
  background:
    linear-gradient(rgba(61, 139, 196, .13) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(61, 139, 196, .13) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--card);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55);
  border-radius: 3px;
}
.sf__x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none; font: 400 2rem/1 var(--sans); color: var(--ink-mute); cursor: pointer; border-radius: 50%; }
.sf__x:hover { color: var(--ink); background: rgba(43, 32, 30, .06); }
.sf__date { margin: 0 0 4px; font: 700 1.5rem/1.1 var(--hand); color: var(--sky-ink); }
.sf h3 { font: 800 clamp(1.25rem, 4vw, 1.55rem)/1.2 var(--sans); margin: 0 40px 8px 0; }
.sf__lead { margin: 0 0 18px; color: var(--ink-soft); font-size: .98rem; }
.sf__field { display: block; margin: 0 0 16px; padding: 0; border: 0; }
.sf__field > span, .sf__field legend { display: block; margin-bottom: 6px; padding: 0; font: 800 .78rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.sf__field small { text-transform: none; letter-spacing: 0; font-weight: 600; }
.sf input:not([type]), .sf input[type="tel"], .sf textarea {
  width: 100%; padding: 10px 12px; min-height: 48px;
  font: 600 1.05rem/1.3 var(--sans); color: var(--ink);
  background: rgba(255, 255, 255, .85); border: 2px solid var(--ink); border-radius: 4px 7px 5px 6px;
}
.sf textarea { resize: vertical; min-height: 64px; }
.sf input:focus-visible, .sf textarea:focus-visible { outline: 3px solid var(--sky); outline-offset: 1px; }
.sf__opt { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 600; }
.sf__opt input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--sky-ink); }
.sf__first { margin: -6px 0 12px; }
.sf__err { margin: 0 0 12px; padding: 8px 12px; background: #fbe3df; color: var(--red); font-weight: 700; border-radius: 4px; }
.sf__send { width: 100%; justify-content: center; min-height: 52px; font-size: 1.1rem; }
.sf__done { text-align: center; padding: 10px 0 4px; }
.sf__done svg { width: 64px; height: 64px; color: var(--red); }
.sf__done h3 { margin: 6px 0 10px; font: 700 2.4rem/1 var(--hand); }
.sf__done p { margin: 0 0 12px; }
.sf__sim { font-size: .85rem; color: var(--ink-mute); }
@media (prefers-reduced-motion: no-preference) {
  .signup-dlg[open] .sf { animation: sf-in .22s ease-out; }
  @keyframes sf-in { from { opacity: 0; transform: translateY(18px) rotate(-1deg); } }
}
button.btn { cursor: pointer; }

/* Locurile libere din mașină: un bilețel galben sub opțiune, cu − număr + și omuleți desenați. */
.sf__seats {
  margin: 2px 0 10px 34px; padding: 12px 16px 12px;
  background: var(--note-1); border-radius: 2px; transform: rotate(-.6deg);
  box-shadow: 0 1px 1px rgba(43, 32, 30, .1), 0 10px 16px -12px rgba(43, 32, 30, .45);
}
.sf__seats-q { margin: 0 0 8px; font: 700 1.35rem/1.1 var(--hand); color: var(--ink); }
.sf__stepper { display: inline-flex; align-items: center; gap: 6px; }
.sf__step {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0 0 3px;
  border: 2px solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink);
  font: 700 1.6rem/1 var(--sans); cursor: pointer; box-shadow: 2px 3px 0 rgba(43, 32, 30, .85);
}
.sf__step:hover:not(:disabled) { background: var(--ink); color: #fff; }
.sf__step:active:not(:disabled) { transform: translate(1px, 2px); box-shadow: 1px 1px 0 rgba(43, 32, 30, .85); }
.sf__step:disabled { opacity: .3; cursor: default; box-shadow: none; }
.sf__step:focus-visible { outline: 3px solid var(--sky-ink); outline-offset: 2px; }
.sf .sf__stepper input {
  width: 64px; height: 52px; padding: 0; text-align: center; border: 0; background: none;
  font: 700 2.6rem/1 var(--hand); color: var(--red); -moz-appearance: textfield; appearance: textfield;
}
.sf .sf__stepper input::-webkit-inner-spin-button, .sf .sf__stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sf .sf__stepper input:focus-visible { outline: 3px solid var(--sky); outline-offset: 0; border-radius: 6px; }
.sf__seats-pp { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; margin: 10px 0 0; min-height: 30px; }
.sf__seats-pp svg { width: 20px; height: 27px; fill: none; stroke: var(--sky-ink); stroke-width: 2.4; stroke-linecap: round; }
.sf__seats-pp span { margin-left: 8px; font: 700 1.2rem/1 var(--hand); color: var(--ink-soft); }
@media (prefers-reduced-motion: no-preference) {
  .sf__seats:not([hidden]) { animation: sf-seats-in .2s ease-out; }
  @keyframes sf-seats-in { from { opacity: 0; transform: translateY(-6px) rotate(-.6deg); } }
  .sf__seats-pp svg:last-of-type { animation: sf-pp-in .25s ease-out; }
  @keyframes sf-pp-in { from { opacity: 0; transform: translateY(6px) scale(.7); } }
}