/* ===================================================================== theroad.ch — "Expedition Field Journal" (layout competition winner, 2026) Paper & ink by day, campfire night after dark. Fonts: Barlow Condensed (display, UI, stamps) + Source Serif 4 (reading) ===================================================================== */ /* Fonts are loaded with in app/partials/head.php. */ /* ---------- 1. TOKENS: light (paper & ink) ---------- */ :root { color-scheme: light; /* surfaces */ --paper: #F2EBDD; /* journal page */ --paper-2: #E8DDC6; /* kraft / stained page */ --card: #FBF7EE; /* index card, polaroid */ --ink: #1D1A15; /* fountain-pen black */ --ink-2: #4F473C; /* pencil (muted text) 7.6:1 on paper */ --rule: #CDBFA5; /* ruled lines */ --rule-strong:#A8977A; --shadow: 0 1px 0 rgba(60,40,10,.08), 0 6px 18px -8px rgba(60,40,10,.35); --topo: rgba(110, 84, 40, .16); --grain-op: .35; --grain-blend: multiply; --glow: none; /* trip colours: tape (fill) + ink (text-safe on paper) + on (text on tape) */ --t1: #EC45B7; --t1-ink: #A8157B; --t1-on: #1D1A15; --t2: #C60523; --t2-ink: #B0041F; --t2-on: #FFFFFF; --t3: #630325; --t3-ink: #630325; --t3-on: #FFFFFF; --t4: #1F88CE; --t4-ink: #135F94; --t4-on: #0C0A08; --accent: #9A3B00; /* rust = links, CTAs (5.9:1 on paper, distinct from trip II red) */ --accent-on: #FFFFFF; --focus: #0B57B0; --tape-op: .93; /* type */ --f-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --f-body: "Source Serif 4", Georgia, "Times New Roman", serif; --fs-body: 1.0625rem; /* 17px mobile */ --lh-body: 1.65; --measure: 66ch; /* space */ --gutter: 16px; --wrap: 1200px; --radius: 3px; --topo-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cpath d='M460 8 458 10 450 16 446 20 440 28 439 30 435 40 432 50 431 60 431 70 432 80 435 90 440 98 443 100 450 104 460 104 470 102 473 100 480 97 490 91 492 90 500 83 502 80 510 70 510 69 514 60 516 50 517 40 516 30 513 20 510 15 506 10 500 5 490 2 480 2 470 4 460 8M100 219 98 220 90 230 90 230 88 240 90 250 90 251 95 260 100 265 110 268 120 267 130 262 132 260 140 250 140 250 141 240 140 236 138 230 130 222 127 220 120 217 110 216 100 219M454 0 450 2 441 10 440 11 433 20 430 25 427 30 424 40 422 50 421 60 420 70 420 80 421 90 423 100 427 110 430 114 440 119 450 120 460 117 470 113 477 110 480 108 490 102 494 100 500 95 506 90 510 85 514 80 520 70 520 69 523 60 525 50 525 40 525 30 523 20 520 10 514 0M80 208 78 210 72 220 70 230 70 240 71 250 74 260 77 270 80 277 83 280 90 286 100 288 110 287 120 284 130 280 130 280 140 274 145 270 150 264 153 260 156 250 157 240 154 230 150 221 149 220 140 211 139 210 130 205 120 202 110 200 100 200 90 202 80 208M514 640 510 636 500 631 494 630 490 630 486 630 480 630 470 633 460 637 454 640M437 0 430 6 427 10 420 20 420 21 416 30 414 40 412 50 411 60 410 70 410 74 410 80 410 90 410 97 410 100 411 110 414 120 419 130 420 131 430 136 440 136 450 133 458 130 460 129 470 124 478 120 480 119 490 113 494 110 500 106 507 100 510 97 517 90 520 86 524 80 528 70 530 65 531 60 533 50 533 40 533 30 532 20 530 11 530 10 526 0M80 189 77 190 70 193 61 200 60 201 56 210 55 220 55 230 56 240 57 250 58 260 60 270 60 271 62 280 64 290 67 300 70 305 78 310 80 311 84 310 90 310 100 306 110 303 116 300 120 298 130 294 137 290 140 288 150 281 152 280 160 272 162 270 167 260 169 250 169 240 166 230 162 220 160 217 155 210 150 205 143 200 140 198 130 194 120 190 118 190 110 189 100 188 90 188 80 189M300 320 292 320 290 320 280 328 278 330 277 340 279 350 280 351 290 358 300 358 310 352 311 350 314 340 313 330 310 326 301 320 300 320M580 478 576 480 570 484 564 490 560 495 557 500 554 510 554 520 556 530 560 536 565 540 570 542 580 541 583 540 590 537 600 530 600 530 608 520 610 516 613 510 615 500 615 490 612 480 610 478 600 474 590 474 580 478M526 640 521 630 520 628 510 621 508 620 500 618 490 619 482 620 480 620 470 623 460 627 452 630 450 631 440 638 437 640M421 0 420 1 413 10 410 16 408 20 405 30 404 40 402 50 401 60 400 70 400 79 400 80 399 90 399 100 399 110 400 120 400 123 401 130 405 140 410 148 413 150 420 153 430 152 439 150 440 150 450 145 460 140 460 140 470 135 478 130 480 129 490 122 494 120 500 116 508 110 510 108 519 100 520 99 527 90 530 86 533 80 537 70 539 60 540 52 540 50 540 40 540 30 540 27 539 20 538 10 536 0M60 177 51 180 50 180 40 190 40 192 38 200 38 210 39 220 40 226 41 230 42 240 44 250 45 260 46 270 46 280 46 290 46 300 44 310 42 320 40 328 40 330 37 340 35 350 34 360 37 370 40 372 50 370 50 370 60 361 61 360 70 351 71 350 80 340 80 340 90 331 91 330 100 324 105 320 110 317 120 311 122 310 130 306 140 300 140 300 150 294 157 290 160 288 169 280 170 278 176 270 180 260 180 255 180 250 180 246 179 240 177 230 173 220 170 215 167 210 160 202 158 200 150 194 144 190 140 188 130 184 120 181 117 180 110 179 100 177 90 176 80 176 70 176 60 177M280 306 271 310 270 311 262 320 260 326 259 330 258 340 260 350 260 351 264 360 270 370 270 370 280 376 290 378 300 377 310 373 315 370 320 366 325 360 330 350 330 350 331 340 331 330 330 328 327 320 320 310 320 310 310 305 300 302 290 303 280 306M590 458 586 460 580 462 570 468 566 470 560 474 554 480 550 485 546 490 542 500 540 509 540 510 539 520 540 530 540 533 541 540 545 550 550 557 557 560 560 561 566 560 570 560 580 556 590 551 592 550 600 544 605 540 610 535 615 530 620 522 621 520 626 510 629 500 630 492 630 490 631 480 630 472 630 470 625 460 620 456 610 454 600 456 590 458M536 640 534 630 531 620 530 618 523 610 520 608 510 605 500 606 490 608 482 610 480 610 470 614 460 617 452 620 450 621 440 626 433 630 430 632 421 640M404 0 400 7 398 10 395 20 394 30 393 40 392 50 391 60 391 70 390 80 390 83 390 90 389 100 388 110 388 120 388 130 390 140 390 143 392 150 397 160 400 163 410 169 420 169 430 166 440 162 444 160 450 157 460 151 461 150 470 145 477 140 480 138 490 132 492 130 500 125 507 120 510 118 520 110 520 110 530 100 530 100 537 90 540 85 542 80 545 70 546 60 547 50 547 40 547 30 546 20 546 10 545 0M0 497 2 490 3 480 5 470 6 460 8 450 10 441 10 440 14 430 20 423 23 420 30 415 36 410 40 407 48 400 50 399 59 390 60 389 68 380 70 378 76 370 80 365 84 360 90 352 92 350 100 341 101 340 110 331 112 330 120 324 125 320 130 317 140 311 142 310 150 306 160 300 160 300 170 294 176 290 180 286 186 280 190 271 190 270 192 260 191 250 190 245 189 240 186 230 182 220 180 216 177 210 170 200 170 200 160 190 160 190 150 183 144 180 140 178 130 175 120 172 112 170 110 170 100 168 90 166 80 165 70 163 60 162 50 162 40 162 30 165 23 170 20 174 18 180 17 190 19 200 20 205 21 210 24 220 27 230 29 240 30 246 31 250 32 260 32 270 32 280 31 290 30 298 30 300 27 310 24 320 21 330 20 332 17 340 14 350 12 360 10 367 9 370 7 380 6 390 4 400 0 410 0 411M270 296 260 300 260 300 250 309 249 310 245 320 244 330 244 340 246 350 249 360 250 364 252 370 258 380 260 383 270 390 270 390 280 393 290 393 300 391 303 390 310 388 320 382 323 380 330 374 334 370 340 360 340 359 342 350 343 340 342 330 340 320 340 320 335 310 330 302 327 300 320 295 310 291 300 290 290 291 280 293 270 296M640 411 635 420 630 424 622 430 620 431 610 436 602 440 600 441 590 445 580 450 580 450 570 455 560 460 560 460 550 467 547 470 540 477 538 480 532 490 530 498 529 500 528 510 527 520 527 530 528 540 528 550 528 560 527 570 522 580 520 582 510 588 507 590 500 593 490 597 482 600 480 601 470 604 460 608 453 610 450 611 440 615 430 620 429 620 420 625 413 630 410 633 404 640M640 497 639 500 636 510 632 520 630 523 626 530 620 538 618 540 610 548 608 550 600 556 594 560 590 563 580 569 577 570 570 574 560 580 550 588 548 590 544 600 543 610 543 620 544 630 545 640M382 0 381 10 380 20 381 30 381 40 381 50 381 60 381 70 380 80 380 82 379 90 379 100 378 110 378 120 378 130 378 140 379 150 380 155 381 160 386 170 390 176 395 180 400 183 410 184 420 182 426 180 430 179 440 174 446 170 450 168 460 161 462 160 470 154 476 150 480 148 490 141 491 140 500 134 507 130 510 128 520 121 521 120 530 113 533 110 540 102 542 100 548 90 550 83 551 80 553 70 554 60 554 50 554 40 554 30 553 20 553 10 553 0M0 522 1 520 5 510 9 500 10 495 12 490 14 480 17 470 20 461 20 460 25 450 30 441 31 440 38 430 40 428 48 420 50 418 58 410 60 408 67 400 70 397 76 390 80 385 84 380 90 372 91 370 98 360 100 358 107 350 110 346 116 340 120 337 128 330 130 329 140 322 144 320 150 317 160 312 164 310 170 307 180 302 186 300 190 298 200 291 202 290 206 280 206 270 204 260 202 250 200 245 199 240 195 230 191 220 190 218 186 210 180 200 180 200 172 190 170 188 160 180 160 180 150 174 142 170 140 169 130 166 120 163 110 161 106 160 100 159 90 157 80 154 70 152 60 150 59 150 50 148 40 147 30 147 20 148 12 150 10 151 0 160 0 160M640 160 637 170 637 180 639 190 640 194M0 351 0 350 3 340 6 330 10 320 10 318 13 310 16 300 18 290 19 280 19 270 19 260 17 250 15 240 12 230 10 223 9 220 5 210 2 200 0 194M300 280 300 280 290 281 280 282 270 284 260 286 250 289 247 290 240 294 231 300 230 302 228 310 228 320 230 330 230 332 231 340 234 350 236 360 239 370 240 374 242 380 246 390 250 398 252 400 260 407 270 409 280 409 290 407 300 404 310 400 310 400 320 395 329 390 330 389 340 381 341 380 348 370 350 364 351 360 353 350 353 340 352 330 350 320 350 320 347 310 342 300 340 297 334 290 330 287 320 282 310 280 301 280 300 280M640 351 638 360 635 370 632 380 630 385 628 390 624 400 620 406 618 410 610 418 608 420 600 426 594 430 590 432 580 438 576 440 570 443 560 448 557 450 550 454 540 460 540 460 530 470 530 470 523 480 520 488 519 490 517 500 516 510 516 520 516 530 515 540 514 550 512 560 510 564 507 570 500 578 497 580 490 585 480 590 480 590 470 594 460 598 455 600 450 602 440 605 430 608 424 610 420 612 410 615 400 620 400 620 390 627 387 630 382 640M640 522 636 530 630 539 629 540 620 550 620 550 610 559 608 560 600 566 595 570 590 573 580 580 580 580 570 589 568 590 560 600 560 601 556 610 554 620 553 630 553 640M336 0 340 2 350 8 351 10 359 20 360 22 363 30 366 40 368 50 369 60 369 70 369 80 369 90 368 100 368 110 367 120 367 130 368 140 368 150 370 160 370 163 372 170 375 180 380 188 381 190 390 196 400 198 410 197 420 194 429 190 430 190 440 184 447 180 450 178 460 171 462 170 470 164 476 160 480 157 490 150 490 150 500 144 506 140 510 137 520 131 522 130 530 124 536 120 540 117 548 110 550 107 554 100 558 90 560 80 560 79 561 70 561 60 561 50 560 40 560 32 560 30 560 20 560 10 560 0 560 0M0 538 5 530 10 520 10 520 14 510 18 500 20 492 21 490 24 480 28 470 30 465 32 460 38 450 40 447 45 440 50 435 54 430 60 424 64 420 70 413 73 410 80 402 82 400 90 390 90 390 97 380 100 376 104 370 110 362 112 360 120 351 121 350 130 341 132 340 140 334 146 330 150 328 160 323 168 320 170 319 180 317 190 316 200 317 204 320 210 325 213 330 218 340 220 346 221 350 224 360 226 370 228 380 230 389 230 390 232 400 233 410 233 420 231 430 230 432 226 440 220 446 217 450 210 458 208 460 201 470 200 472 196 480 193 490 192 500 192 510 194 520 199 530 200 532 210 538 220 539 230 537 240 532 241 530 247 520 249 510 250 505 250 500 251 490 251 480 251 470 251 460 253 450 258 440 260 439 270 431 272 430 280 426 290 421 292 420 300 416 310 412 314 410 320 407 330 402 334 400 340 396 348 390 350 388 356 380 360 370 360 370 362 360 363 350 362 340 361 330 360 325 359 320 356 310 353 300 350 293 349 290 341 280 340 279 330 273 320 271 310 270 300 270 290 271 280 272 270 274 260 275 250 275 240 275 230 271 228 270 220 262 219 260 213 250 210 244 208 240 204 230 200 221 200 220 195 210 190 202 189 200 182 190 180 187 174 180 170 177 161 170 160 170 150 164 140 161 138 160 130 158 120 155 110 152 100 150 100 150 90 148 80 145 70 142 62 140 60 139 50 137 40 135 30 134 20 133 10 134 0 136M640 136 632 140 630 141 622 150 620 156 619 160 619 170 620 179 620 180 623 190 626 200 630 210 630 211 634 220 638 230 640 237M0 307 2 300 4 290 5 280 6 270 5 260 3 250 1 240 0 237M640 307 639 310 636 320 634 330 631 340 630 343 628 350 625 360 622 370 620 377 619 380 614 390 610 398 609 400 601 410 600 411 590 420 589 420 580 426 574 430 570 432 560 437 554 440 550 442 540 447 534 450 530 453 520 460 520 460 512 470 510 474 508 480 506 490 505 500 505 510 505 520 505 530 504 540 502 550 500 554 498 560 490 570 490 570 480 578 477 580 470 584 460 588 455 590 450 592 440 594 430 597 420 599 410 600 410 600 400 601 390 600 389 600 380 598 370 595 360 590 360 590 350 585 340 581 335 580 330 579 320 579 313 580 310 581 301 590 300 593 298 600 299 610 300 612 304 620 310 627 313 630 320 633 330 637 336 640M640 538 639 540 630 550 630 550 620 560 620 560 610 568 608 570 600 576 594 580 590 584 582 590 580 592 573 600 570 604 567 610 563 620 561 630 560 640M254 0 254 10 254 20 260 30 260 30 270 34 280 34 290 33 300 32 310 31 320 31 330 34 340 39 341 40 348 50 350 53 352 60 355 70 356 80 356 90 357 100 357 110 357 120 357 130 358 140 358 150 359 160 360 166 360 170 362 180 365 190 369 200 370 202 378 210 380 211 390 213 400 212 406 210 410 209 420 205 430 200 430 200 440 195 447 190 450 188 460 181 462 180 470 174 476 170 480 167 490 160 490 160 500 153 505 150 510 147 520 141 522 140 530 136 540 130 541 130 550 125 557 120 560 117 566 110 569 100 570 90 570 80 569 70 568 60 568 50 567 40 566 30 566 20 566 10 567 0M640 122 630 124 620 126 612 130 610 131 603 140 601 150 601 160 603 170 605 180 608 190 610 196 611 200 615 210 619 220 620 224 622 230 626 240 628 250 630 259 630 260 631 270 631 280 630 287 630 290 628 300 626 310 624 320 621 330 620 336 619 340 616 350 614 360 611 370 610 372 607 380 602 390 600 393 595 400 590 405 585 410 580 414 571 420 570 421 560 426 551 430 550 431 540 435 530 439 527 440 520 443 510 448 506 450 500 455 496 460 492 470 491 480 492 490 493 500 493 510 494 520 493 530 492 540 490 546 489 550 483 560 480 563 472 570 470 572 460 577 452 580 450 581 440 584 430 585 420 586 410 586 400 584 390 581 388 580 380 576 370 571 369 570 360 566 350 561 348 560 340 557 330 553 320 550 320 550 310 547 300 544 293 540 290 538 283 530 280 525 278 520 274 510 273 500 272 490 271 480 272 470 275 460 279 450 280 449 288 440 290 438 300 431 301 430 310 425 319 420 320 420 330 415 340 410 340 410 350 404 356 400 360 396 366 390 370 380 370 380 372 370 372 360 372 350 371 340 370 335 369 330 367 320 365 310 363 300 360 290 360 290 356 280 351 270 350 269 340 262 333 260 330 260 320 259 312 260 310 260 300 261 290 262 280 264 270 264 260 264 250 263 240 260 240 260 230 254 226 250 220 242 219 240 213 230 210 224 208 220 203 210 200 204 198 200 192 190 190 187 185 180 180 174 176 170 170 165 161 160 160 159 150 155 140 152 134 150 130 149 120 146 110 144 100 141 96 140 90 138 80 135 70 132 62 130 60 129 50 126 40 124 30 123 20 122 10 122 0 122M254 640 254 630 254 620 254 610 251 600 250 597 245 590 240 585 230 581 225 580 220 579 210 578 200 578 190 575 182 570 180 568 176 560 174 550 172 540 172 530 172 520 172 510 174 500 175 490 178 480 180 474 182 470 186 460 190 454 192 450 199 440 200 438 206 430 210 421 211 420 214 410 216 400 216 390 215 380 214 370 211 360 210 357 207 350 200 340 200 339 190 333 180 331 170 332 160 335 150 340 140 347 136 350 130 355 126 360 120 366 117 370 110 380 110 380 103 390 100 394 95 400 90 406 87 410 80 418 78 420 70 428 68 430 60 439 59 440 51 450 50 451 44 460 40 467 38 470 34 480 30 490 30 490 26 500 23 510 20 517 19 520 14 530 10 537 8 540 1 550 0 551M640 551 631 560 630 561 620 569 619 570 610 577 606 580 600 585 594 590 590 594 584 600 580 605 576 610 572 620 570 626 569 630 567 640M175 0 180 2 190 9 191 10 200 20 200 20 206 30 210 38 211 40 217 50 220 54 226 60 230 64 240 69 243 70 250 71 260 72 270 70 272 70 280 68 290 66 300 64 310 63 320 64 330 69 331 70 338 80 340 86 341 90 343 100 345 110 346 120 347 130 348 140 348 150 349 160 350 166 350 170 352 180 353 190 354 200 355 210 356 220 356 230 350 237 346 240 340 242 330 245 320 248 310 250 310 250 300 252 290 254 280 255 270 255 260 254 250 252 245 250 240 247 231 240 230 239 224 230 220 225 217 220 212 210 210 206 207 200 202 190 200 187 196 180 190 172 189 170 180 161 179 160 170 153 163 150 160 149 150 145 140 142 131 140 130 140 120 137 110 135 100 132 93 130 90 129 80 126 70 122 62 120 60 119 50 117 40 114 30 113 20 112 10 111 0 110M574 0 573 10 572 20 573 30 574 40 575 50 576 60 578 70 580 79 580 80 584 90 589 100 590 102 600 108 610 110 610 110 620 110 630 110 640 110M530 148 525 150 520 152 510 157 506 160 500 163 490 170 490 170 480 177 476 180 470 184 462 190 460 191 450 198 447 200 440 204 430 210 430 210 420 216 411 220 410 220 400 225 390 229 387 230 380 234 370 239 368 240 365 250 365 260 367 270 368 280 370 289 370 290 372 300 374 310 376 320 378 330 379 340 380 343 381 350 383 360 384 370 385 380 385 390 381 400 380 401 370 410 370 410 360 415 350 419 348 420 340 424 330 428 326 430 320 434 310 440 310 440 300 450 300 450 293 460 290 470 290 471 289 480 290 490 290 490 293 500 298 510 300 513 306 520 310 523 320 529 322 530 330 534 340 538 345 540 350 542 360 547 366 550 370 552 380 558 384 560 390 563 400 568 407 570 410 571 420 572 430 573 440 571 445 570 450 568 460 563 465 560 470 555 474 550 478 540 480 534 481 530 481 520 480 510 480 509 478 500 475 490 471 480 470 476 467 470 463 460 460 450 466 440 470 438 480 436 490 434 500 432 510 431 513 430 520 429 530 426 540 423 548 420 550 419 560 414 567 410 570 408 580 400 580 400 589 390 590 388 595 380 599 370 600 367 602 360 605 350 607 340 609 330 610 325 611 320 612 310 614 300 615 290 615 280 615 270 614 260 612 250 610 241 610 240 607 230 604 220 600 210 600 209 597 200 594 190 590 180 590 179 587 170 583 160 580 154 577 150 570 143 560 140 550 141 540 144 530 148M175 640 170 638 160 633 154 630 150 627 143 620 140 615 138 610 137 600 138 590 140 583 141 580 145 570 148 560 150 552 150 550 153 540 155 530 156 520 158 510 159 500 160 496 161 490 163 480 166 470 170 460 170 460 175 450 180 441 181 440 187 430 190 424 192 420 197 410 200 401 200 400 202 390 201 380 200 373 199 370 195 360 190 354 185 350 180 348 170 347 160 349 158 350 150 354 142 360 140 362 132 370 130 372 124 380 120 385 116 390 110 399 109 400 101 410 100 411 92 420 90 422 82 430 80 432 73 440 70 443 64 450 60 454 56 460 50 468 49 470 44 480 40 488 39 490 36 500 32 510 30 515 28 520 24 530 20 536 18 540 11 550 10 551 2 560 0 562M640 562 630 570 630 570 620 578 618 580 610 586 605 590 600 594 594 600 590 605 586 610 580 620 580 620 576 630 574 640M127 0 130 4 138 10 140 12 150 18 153 20 160 25 167 30 170 32 179 40 180 42 187 50 190 54 194 60 200 68 201 70 210 80 210 80 220 87 227 90 230 91 240 93 250 93 260 92 270 91 276 90 280 89 290 88 300 88 310 90 311 90 320 95 324 100 330 110 330 111 333 120 335 130 337 140 338 150 340 160 340 164 341 170 341 180 341 190 341 200 340 207 339 210 336 220 330 227 327 230 320 234 310 239 307 240 300 242 290 244 280 246 270 246 260 244 250 241 248 240 240 235 235 230 230 224 227 220 221 210 220 208 216 200 211 190 210 188 206 180 201 170 200 168 195 160 190 154 186 150 180 145 171 140 170 140 160 136 150 134 140 132 131 130 130 130 120 127 110 125 100 122 93 120 90 119 80 116 70 112 62 110 60 109 50 107 40 105 30 103 20 102 10 101 0 100M581 0 580 7 580 10 579 20 579 30 580 37 580 40 582 50 584 60 588 70 590 75 593 80 600 89 602 90 610 95 620 98 630 99 639 100 640 100M540 158 530 160 530 160 520 164 510 168 507 170 500 174 491 180 490 180 480 187 476 190 470 194 462 200 460 201 450 208 447 210 440 214 430 220 430 220 420 226 413 230 410 232 400 239 398 240 390 248 388 250 382 260 380 269 380 270 379 280 380 290 380 295 380 300 382 310 384 320 386 330 388 340 390 347 391 350 394 360 398 370 400 376 402 380 409 390 410 392 420 400 421 400 430 404 440 407 450 409 455 410 460 411 470 413 480 414 490 416 500 416 510 416 520 415 530 414 540 411 543 410 550 407 560 402 562 400 570 394 574 390 580 382 582 380 587 370 590 362 590 360 593 350 595 340 596 330 598 320 598 310 599 300 599 290 599 280 598 270 597 260 596 250 594 240 591 230 590 226 588 220 586 210 582 200 580 194 579 190 574 180 570 173 568 170 560 162 555 160 550 158 540 158M127 640 120 631 119 630 115 620 113 610 113 600 115 590 118 580 120 576 123 570 128 560 130 555 132 550 136 540 140 530 140 528 142 520 144 510 146 500 148 490 150 480 150 478 152 470 154 460 158 450 160 445 162 440 167 430 170 425 173 420 178 410 180 405 182 400 183 390 182 380 180 376 174 370 170 368 160 368 157 370 150 374 143 380 140 383 134 390 130 395 126 400 120 408 118 410 110 419 109 420 100 429 99 430 90 438 88 440 80 448 78 450 70 458 68 460 61 470 60 471 55 480 50 489 50 490 46 500 42 510 40 514 38 520 34 530 30 537 29 540 22 550 20 552 13 560 10 563 2 570 0 572M340 439 338 440 330 444 322 450 320 452 313 460 310 467 309 470 308 480 310 490 310 490 315 500 320 506 325 510 330 513 340 519 342 520 350 524 360 528 363 530 370 533 380 539 382 540 390 544 400 550 401 550 410 554 420 556 430 557 440 556 450 552 452 550 460 542 461 540 464 530 465 520 463 510 460 501 460 500 453 490 450 486 445 480 440 475 435 470 430 465 424 460 420 456 414 450 410 446 402 440 400 438 390 434 380 432 370 432 360 433 350 436 340 439M640 572 630 580 630 580 620 587 616 590 610 595 604 600 600 605 595 610 590 618 588 620 584 630 581 640M106 0 110 7 112 10 120 19 121 20 130 28 133 30 140 35 147 40 150 42 159 50 160 51 168 60 170 62 175 70 180 78 181 80 186 90 190 100 190 100 195 110 200 116 210 116 220 115 230 113 240 112 250 110 251 110 260 109 270 107 280 107 290 107 300 109 303 110 310 114 316 120 320 126 322 130 325 140 328 150 329 160 330 165 330 170 331 180 330 190 330 193 329 200 325 210 320 218 318 220 310 226 304 230 300 232 290 234 280 236 270 236 260 234 251 230 250 229 240 221 239 220 231 210 230 208 226 200 221 190 220 187 217 180 213 170 210 161 210 160 206 150 203 140 200 132 199 130 190 120 180 120 170 120 160 120 150 120 150 120 140 119 130 118 120 116 110 114 100 111 97 110 90 108 80 104 70 102 64 100 60 99 50 97 40 95 30 94 20 93 10 92 0 90M588 0 587 10 586 20 586 30 588 40 590 50 590 50 594 60 599 70 600 71 609 80 610 81 620 86 630 89 638 90 640 90M520 177 512 180 510 181 500 186 493 190 490 192 480 198 478 200 470 205 463 210 460 212 450 218 447 220 440 224 430 230 430 230 420 237 416 240 410 244 404 250 400 254 396 260 392 270 390 277 389 280 389 290 389 300 390 309 390 310 392 320 394 330 397 340 400 347 401 350 406 360 410 366 413 370 420 377 424 380 430 384 440 389 444 390 450 392 460 395 470 397 480 399 485 400 490 401 500 402 510 403 520 402 530 401 533 400 540 398 550 393 555 390 560 386 566 380 570 375 573 370 577 360 580 351 580 350 582 340 583 330 584 320 584 310 583 300 583 290 582 280 581 270 580 262 580 260 578 250 577 240 575 230 573 220 570 210 570 210 566 200 561 190 560 188 552 180 550 178 540 175 530 174 520 177M106 640 101 630 100 628 98 620 96 610 95 600 96 590 99 580 100 578 103 570 109 560 110 558 114 550 120 540 120 540 124 530 128 520 130 511 130 510 132 500 133 490 134 480 135 470 135 460 135 450 132 440 130 438 120 438 117 440 110 443 100 449 99 450 90 456 86 460 80 465 76 470 70 477 68 480 62 490 60 493 57 500 53 510 50 517 49 520 46 530 41 540 40 541 35 550 30 556 27 560 20 566 16 570 10 574 2 580 0 582M350 458 346 460 340 465 336 470 334 480 338 490 340 492 350 500 350 500 360 505 370 510 370 510 380 514 390 519 391 520 400 524 410 529 413 530 420 532 430 531 432 530 438 520 435 510 430 503 427 500 420 493 417 490 410 484 405 480 400 476 394 470 390 467 380 461 379 460 370 457 360 456 350 458M640 582 630 589 628 590 620 596 615 600 610 605 605 610 600 616 597 620 592 630 590 635 588 640M89 0 90 2 94 10 100 20 100 20 107 30 110 33 117 40 120 43 128 50 130 52 139 60 140 62 147 70 150 77 152 80 152 90 150 92 140 100 138 100 130 101 120 100 117 100 110 99 100 96 90 94 80 91 73 90 70 89 60 87 50 86 40 85 30 84 20 83 10 82 0 81M596 0 594 10 593 20 594 30 596 40 599 50 600 53 604 60 610 67 614 70 620 74 630 78 637 80 640 81M250 127 243 130 240 132 230 140 230 140 225 150 225 160 226 170 228 180 230 185 232 190 237 200 240 205 244 210 250 216 256 220 260 222 270 225 280 225 290 223 298 220 300 219 310 210 310 210 316 200 319 190 320 180 320 170 318 160 315 150 310 140 310 139 302 130 300 129 290 124 280 123 270 123 260 125 250 127M500 199 498 200 490 204 480 210 480 210 470 216 464 220 460 222 450 228 447 230 440 234 431 240 430 241 420 249 418 250 410 259 409 260 403 270 400 278 400 280 398 290 398 300 399 310 400 317 401 320 404 330 407 340 410 345 413 350 420 360 420 360 430 368 433 370 440 374 450 378 456 380 460 381 470 384 480 386 490 388 500 389 510 389 520 389 530 387 540 383 545 380 550 376 556 370 560 364 562 360 566 350 568 340 569 330 569 320 568 310 567 300 566 290 565 280 564 270 562 260 561 250 560 241 560 240 558 230 555 220 551 210 550 207 544 200 540 196 530 192 520 192 510 195 500 199M89 640 86 630 83 620 80 610 80 608 79 600 78 590 78 580 80 572 80 570 84 560 90 552 92 550 99 540 100 538 104 530 110 520 110 519 112 510 114 500 114 490 111 480 110 478 100 475 90 479 89 480 80 489 79 490 73 500 70 506 68 510 65 520 62 530 60 536 59 540 55 550 50 556 47 560 40 566 35 570 30 573 20 579 19 580 10 585 2 590 0 592M640 592 630 598 627 600 620 606 615 610 610 616 606 620 600 630 600 630 596 640M75 0 79 10 80 14 83 20 87 30 90 38 91 40 95 50 98 60 92 70 90 70 80 72 70 73 60 74 50 74 40 74 30 74 20 73 10 72 0 70M605 0 602 10 601 20 602 30 605 40 609 50 610 51 618 60 620 62 630 67 638 70 640 70M250 148 248 150 242 160 241 170 242 180 246 190 250 198 252 200 260 208 266 210 270 212 280 212 287 210 290 209 300 200 300 200 305 190 307 180 306 170 303 160 300 153 297 150 290 144 280 140 270 140 260 143 250 148M490 218 487 220 480 223 470 228 466 230 460 233 450 239 448 240 440 245 434 250 430 253 422 260 420 263 415 270 410 280 408 290 407 300 408 310 410 320 410 320 414 330 419 340 420 342 427 350 430 353 440 360 440 360 450 365 460 369 465 370 470 371 480 373 490 374 500 375 510 374 520 373 529 370 530 369 540 362 542 360 548 350 550 344 551 340 552 330 552 320 552 310 551 300 550 294 550 290 548 280 547 270 545 260 543 250 541 240 540 236 538 230 532 220 530 218 520 213 510 213 500 215 490 218M75 640 72 630 70 625 68 620 64 610 60 600 60 600 51 590 50 589 40 587 30 589 27 590 20 592 10 596 3 600 0 602M640 602 630 608 628 610 620 617 617 620 610 629 609 630 605 640M61 0 64 10 66 20 68 30 68 40 64 50 60 53 50 59 45 60 40 61 30 62 20 62 10 62 3 60 0 59M614 0 611 10 610 20 612 30 616 40 620 47 623 50 630 55 640 59M270 167 267 170 265 180 270 188 280 188 284 180 282 170 280 168 270 167M480 237 472 240 470 241 460 246 452 250 450 251 440 258 438 260 430 267 428 270 422 280 420 285 418 290 417 300 418 310 420 318 421 320 426 330 430 336 433 340 440 346 447 350 450 352 460 356 470 358 480 360 487 360 490 360 493 360 500 360 510 357 520 352 523 350 530 341 531 340 534 330 535 320 535 310 534 300 533 290 531 280 530 274 529 270 526 260 523 250 520 245 515 240 510 236 500 234 490 234 480 237M61 640 60 638 57 630 52 620 50 617 43 610 40 608 30 605 20 605 10 608 6 610 0 613M640 613 630 620 630 620 620 630 614 640M44 0 48 10 50 20 49 30 43 40 40 42 30 47 20 49 10 48 0 46M627 0 623 10 622 20 625 30 630 39 631 40 640 46M460 260 459 260 450 266 444 270 440 275 436 280 431 290 430 297 430 300 430 305 430 310 434 320 440 328 442 330 450 336 457 340 460 341 470 344 480 344 490 343 499 340 500 340 510 331 511 330 515 320 516 310 516 300 515 290 513 280 510 273 509 270 502 260 500 259 490 254 480 254 470 256 460 260M44 640 40 632 38 630 30 623 20 621 10 622 0 627M640 627 636 630 630 636 627 640' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E"); --grain-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- 1b. TOKENS: dark (campfire night) ---------- */ html[data-theme="dark"] { color-scheme: dark; --paper: #15120E; --paper-2: #1E1913; --card: #251F18; --ink: #F0E7D5; --ink-2: #C2B49B; --rule: #3E3428; --rule-strong:#5E4F3C; --shadow: 0 1px 0 rgba(0,0,0,.4), 0 10px 24px -10px rgba(0,0,0,.8); --topo: rgba(255, 170, 90, .075); --grain-op: .5; --grain-blend: screen; --glow: radial-gradient(1200px 520px at 50% -120px, rgba(255,128,48,.16), transparent 70%); --t1: #F25BC2; --t1-ink: #F57ACD; --t1-on: #15120E; --t2: #E5223F; --t2-ink: #FF6B7D; --t2-on: #FFFFFF; --t3: #A3164A; --t3-ink: #E77FA3; --t3-on: #FFFFFF; --t4: #3A9BDC; --t4-ink: #6CB8EE; --t4-on: #0C0A08; --accent: #FF8A4C; /* ember */ --accent-on: #1A0E05; --focus: #FFC857; --tape-op: .9; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { color-scheme: dark; --paper:#15120E; --paper-2:#1E1913; --card:#251F18; --ink:#F0E7D5; --ink-2:#C2B49B; --rule:#3E3428; --rule-strong:#5E4F3C; --shadow:0 1px 0 rgba(0,0,0,.4), 0 10px 24px -10px rgba(0,0,0,.8); --topo:rgba(255,170,90,.075); --grain-op:.5; --grain-blend:screen; --glow:radial-gradient(1200px 520px at 50% -120px, rgba(255,128,48,.16), transparent 70%); --t1:#F25BC2; --t1-ink:#F57ACD; --t1-on:#15120E; --t2:#E5223F; --t2-ink:#FF6B7D; --t2-on:#FFFFFF; --t3:#A3164A; --t3-ink:#E77FA3; --t3-on:#FFFFFF; --t4:#3A9BDC; --t4-ink:#6CB8EE; --t4-on:#0C0A08; --accent:#FF8A4C; --accent-on:#1A0E05; --focus:#FFC857; --tape-op:.9; } } @media (min-width: 760px) { :root { --fs-body: 1.1875rem; --gutter: 32px; } } /* 19px desktop */ /* ---------- 2. BASE ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 130px; } body { margin: 0; min-height: 100vh; background: var(--glow), var(--paper); background-attachment: fixed; color: var(--ink); font: 400 var(--fs-body)/var(--lh-body) var(--f-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; } body::after { /* paper grain over everything, never blocks clicks */ content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; background-image: var(--grain-img); opacity: var(--grain-op); mix-blend-mode: var(--grain-blend); } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration-thickness: .08em; text-underline-offset: .18em; } a:hover { text-decoration-thickness: .16em; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 800; line-height: .95; letter-spacing: -.005em; text-transform: uppercase; margin: 0 0 .4em; text-wrap: balance; } h1 { font-size: clamp(2.9rem, 11vw, 6.5rem); } h2 { font-size: clamp(2rem, 6.5vw, 3.4rem); } h3 { font-size: clamp(1.5rem, 4vw, 1.9rem); line-height: 1; } p { margin: 0 0 1em; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: 8px; top: -60px; z-index: 300; background: var(--ink); color: var(--paper); padding: 8px 14px; font: 700 1rem var(--f-display); text-transform: uppercase; } .skip:focus { top: 8px; } .icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* topo contour texture: add .topo to any positioned block */ .topo { position: relative; isolation: isolate; } .topo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--topo); -webkit-mask: var(--topo-img) 0 0 / 640px 640px repeat; mask: var(--topo-img) 0 0 / 640px 640px repeat; } /* ---------- 3. LABELS: kicker, tape, stamp, ticket ---------- */ .kicker { font: 700 .95rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: .6em; margin: 0 0 .9rem; } .kicker::before { content: ""; width: 28px; height: 3px; background: currentColor; } /* gaffer tape: torn ends via clip-path, woven texture via gradients */ .tape { --tc: var(--ink); --to: var(--paper); display: inline-block; position: relative; background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, transparent 2px 5px), repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 4px), var(--tc); color: var(--to); opacity: var(--tape-op); font: 800 1rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; padding: .45em 1.1em .4em; clip-path: polygon(0 8%, 3% 0, 6% 12%, 9% 2%, 91% 0, 94% 10%, 97% 1%, 100% 9%, 100% 92%, 97% 100%, 94% 88%, 91% 99%, 9% 100%, 6% 90%, 3% 99%, 0 91%, 2% 50%); transform: rotate(-1.5deg); box-shadow: none; } .tape--t1 { --tc: var(--t1); --to: var(--t1-on); } .tape--t2 { --tc: var(--t2); --to: var(--t2-on); } .tape--t3 { --tc: var(--t3); --to: var(--t3-on); } .tape--t4 { --tc: var(--t4); --to: var(--t4-on); } .tape--ink { --tc: var(--ink); --to: var(--paper); } .tape--r { transform: rotate(1.2deg); } /* the 4-strip trip bar (header/footer edge) */ .tripbar { display: grid; grid-template-columns: repeat(4, 1fr); height: 7px; } .tripbar span:nth-child(1) { background: var(--t1); } .tripbar span:nth-child(2) { background: var(--t2); } .tripbar span:nth-child(3) { background: var(--t3); } .tripbar span:nth-child(4) { background: var(--t4); } /* passport stamp */ .stamp { --sc: var(--accent); display: inline-grid; place-items: center; text-align: center; font: 800 .95rem/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--sc); border: 3px solid var(--sc); border-radius: 6px; padding: .35em .6em .3em; outline: 1.5px solid var(--sc); outline-offset: -7px; transform: rotate(-4deg); background: transparent; } .stamp small { display: block; font-size: .7em; letter-spacing: .16em; font-weight: 700; margin-top: .2em; } .stamp--round { border-radius: 50%; width: 8.2rem; height: 8.2rem; padding: 0; outline-offset: -9px; font-size: 1.05rem; } .stamp--round b { display: block; font-size: 2.3rem; letter-spacing: 0; line-height: .9; } .stamp--t1 { --sc: var(--t1-ink); } .stamp--t2 { --sc: var(--t2-ink); } .stamp--t3 { --sc: var(--t3-ink); } .stamp--t4 { --sc: var(--t4-ink); } .stamp--ink { --sc: var(--ink); } /* ticket stub with notches + perforation */ .ticket { --notch: 9px; position: relative; background: var(--card); color: var(--ink); padding: .8rem 1rem .75rem; border-radius: 4px; -webkit-mask: radial-gradient(circle var(--notch) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle var(--notch) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; filter: drop-shadow(0 2px 3px rgba(60,40,10,.18)); box-shadow: inset 0 0 0 1px var(--rule); } .ticket__num { font: 800 clamp(1.9rem, 7vw, 2.6rem)/.9 var(--f-display); display: block; letter-spacing: -.01em; } .ticket__lbl { font: 700 .82rem/1.1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); display: block; margin-top: .35rem; padding-top: .4rem; border-top: 2px dashed var(--rule-strong); } /* buttons */ .btn { display: inline-flex; align-items: center; gap: .55em; min-height: 48px; font: 800 1.15rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: .7em 1.2em .65em; border: 2.5px solid var(--ink); color: var(--ink); background: transparent; border-radius: var(--radius); box-shadow: 4px 4px 0 var(--ink); transition: transform .12s, box-shadow .12s; cursor: pointer; } .btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); } .btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); } .btn--solid { background: var(--accent); color: var(--accent-on); border-color: var(--ink); } .more-link { font: 800 1.1rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; display: inline-flex; gap: .4em; align-items: center; padding: .5em 0; color: var(--ink); border-bottom: 3px solid var(--accent); } .more-link:hover { color: var(--accent); } /* polaroid / taped photo */ .photo { position: relative; background: var(--card); padding: 10px 10px 12px; box-shadow: var(--shadow); margin: 0; } .photo img { width: 100%; aspect-ratio: var(--ar, 4/3); object-fit: cover; filter: saturate(.92) contrast(1.03); } .photo figcaption { font: 600 1rem/1.25 var(--f-display); letter-spacing: .02em; color: var(--ink-2); padding: .55rem .2rem 0; } .photo::before, .photo::after { /* tape corners */ content: ""; position: absolute; width: 78px; height: 24px; z-index: 2; background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 5px), var(--pt, rgba(222, 208, 170, .78)); clip-path: polygon(0 10%, 4% 0, 96% 6%, 100% 0, 100% 90%, 96% 100%, 4% 94%, 0 100%); } .photo::before { top: -9px; left: -18px; transform: rotate(-38deg); } .photo::after { top: -9px; right: -18px; transform: rotate(38deg); } html[data-theme="dark"] .photo { --pt: rgba(120, 104, 80, .8); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .photo { --pt: rgba(120, 104, 80, .8); } } .photo--tilt-l { transform: rotate(-1.6deg); } .photo--tilt-r { transform: rotate(1.4deg); } .photo--plain::before, .photo--plain::after { display: none; } /* ---------- 4. HEADER ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); box-shadow: 0 1px 0 var(--rule); } .site-header::before { /* subtle topo inside the bar */ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--topo); -webkit-mask: var(--topo-img) 0 -40px / 640px repeat; mask: var(--topo-img) 0 -40px / 640px repeat; opacity: .8; } .hdr { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "logo . tools" "nav nav nav"; align-items: center; column-gap: 12px; padding-top: 10px; } .logo { grid-area: logo; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font: 800 1.75rem/1 var(--f-display); letter-spacing: -.01em; text-transform: lowercase; padding: 4px 0; } .logo svg { width: 34px; height: 34px; flex: none; } .logo .dot { color: var(--accent); } .tools { grid-area: tools; display: flex; gap: 2px; align-items: center; } .tool { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--ink); border-radius: 4px; cursor: pointer; font: 700 1rem/1 var(--f-display); letter-spacing: .06em; } .tool:hover { background: var(--paper-2); } .tool .icon { width: 22px; height: 22px; } .tool .lang-code { min-width: 1.4em; } .i-sun { display: none; } html[data-theme="dark"] .i-sun { display: block; } html[data-theme="dark"] .i-moon { display: none; } .nav { grid-area: nav; position: relative; min-width: 0; margin-top: 4px; } .nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; align-items: stretch; white-space: nowrap; } .nav__list > li { flex: none; } .nav__list > li[hidden] { display: none; } .nav a, .nav__more-btn { display: flex; align-items: center; gap: 4px; height: 46px; padding: 0 12px; font: 700 1.2rem/1 var(--f-display); letter-spacing: .09em; text-transform: uppercase; text-decoration: none; color: var(--ink); background: none; border: 0; cursor: pointer; position: relative; } .nav__list > li:first-child > a { padding-left: 0; } .nav a:hover, .nav__more-btn:hover { color: var(--accent); } .nav a[aria-current="page"]::after { /* current item: strip of tape under it */ content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 6px; background: var(--accent); transform: rotate(-1.5deg); clip-path: polygon(0 20%, 4% 0, 96% 10%, 100% 0, 100% 90%, 96% 100%, 4% 85%, 0 100%); } .nav__list > li:first-child > a[aria-current="page"]::after { left: 0; } .nav__more { position: relative; } .nav__more-btn .icon { width: 16px; height: 16px; transition: transform .2s; } .nav__more-btn[aria-expanded="true"] .icon { transform: rotate(180deg); } .menu { /* dropdown: an index card */ position: absolute; top: calc(100% + 4px); z-index: 60; min-width: 220px; list-style: none; margin: 0; padding: 8px; background: var(--card); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); border-radius: 3px; } .menu[hidden] { display: none; } .menu li[hidden] { display: none; } .menu a, .menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px; font: 700 1.15rem/1 var(--f-display); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); text-decoration: none; background: none; border: 0; border-radius: 2px; cursor: pointer; text-align: left; } .menu a:hover, .menu button:hover, .menu [aria-current="true"], .menu [aria-checked="true"] { background: var(--paper-2); } .menu [aria-checked="true"]::after { content: "✓"; color: var(--accent); } .menu li + li { border-top: 1px dashed var(--rule); } .menu--right { right: 0; } .nav .menu { right: 0; left: auto; } .lang-wrap { position: relative; } @media (min-width: 980px) { .hdr { grid-template-columns: auto 1fr auto; grid-template-areas: "logo nav tools"; padding-block: 10px; column-gap: 28px; } .nav { margin-top: 0; } .nav__list > li:first-child > a { padding-left: 12px; } .nav__list > li:first-child > a[aria-current="page"]::after { left: 10px; } .logo { font-size: 2rem; } } /* search overlay */ .search { position: fixed; inset: 0; z-index: 200; background: var(--paper); overflow-y: auto; padding: 16px var(--gutter) 40px; } .search[hidden] { display: none; } .search::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--topo); -webkit-mask: var(--topo-img) 0 0 / 640px repeat; mask: var(--topo-img) 0 0 / 640px repeat; } .search__box { max-width: 760px; margin: 0 auto; } .search__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .search label { font: 800 1rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .search__field { display: flex; align-items: center; gap: 10px; border-bottom: 4px solid var(--ink); padding-bottom: 6px; } .search__field .icon { width: 30px; height: 30px; } .search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 800 clamp(1.8rem, 7vw, 3.2rem)/1.1 var(--f-display); text-transform: uppercase; padding: 4px 0; } .search input::placeholder { color: var(--ink-2); opacity: .75; } .search input:focus-visible { outline: none; } .search__field:focus-within { border-color: var(--accent); } .search__hint { font: 600 1rem/1.4 var(--f-display); letter-spacing: .04em; color: var(--ink-2); margin: 12px 0 20px; } .results { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .results a { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 8px; background: var(--card); color: var(--ink); text-decoration: none; border-left: 6px solid var(--tc, var(--ink)); box-shadow: var(--shadow); } .results a:hover { outline: 2px solid var(--ink); } .results img { width: 64px; height: 48px; object-fit: cover; } .results b { display: block; font: 800 1.25rem/1.05 var(--f-display); text-transform: uppercase; } .results span { font: 600 .95rem/1.2 var(--f-display); letter-spacing: .05em; color: var(--ink-2); text-transform: uppercase; } .results mark { background: color-mix(in srgb, var(--accent) 28%, transparent); color: inherit; } .results__empty { font: 700 1.2rem var(--f-display); color: var(--ink-2); text-transform: uppercase; } /* ---------- 5. FOOTER ---------- */ .site-footer { margin-top: 80px; background: #1A1611; color: #EFE6D4; position: relative; isolation: isolate; } .site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255,170,90,.08); -webkit-mask: var(--topo-img) 0 0 / 640px repeat; mask: var(--topo-img) 0 0 / 640px repeat; } .site-footer a { color: #FFB37F; } .footer-in { display: grid; gap: 28px; padding-block: 44px 28px; } .footer-logo { font: 800 2.6rem/1 var(--f-display); text-transform: lowercase; } .footer-logo + p { font-style: italic; color: #C9BBA2; max-width: 36ch; } .footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px 20px; list-style: none; margin: 0; padding: 0; } .footer-nav a { display: inline-block; padding: 8px 0; font: 700 1.15rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: #EFE6D4; text-decoration: none; } .footer-nav a:hover { color: #FFB37F; } .footer-legal { border-top: 1px dashed #5E4F3C; padding-top: 18px; font: 500 1rem/1.5 var(--f-display); letter-spacing: .03em; color: #C9BBA2; } .site-footer :focus-visible { outline-color: #FFC857; } @media (min-width: 760px) { .footer-in { grid-template-columns: 1.3fr 1fr; align-items: start; } .footer-legal { grid-column: 1 / -1; } } /* ---------- 6. SECTIONS (shared) ---------- */ .section { padding-block: 56px 8px; } .section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; } .section__head h2 { margin: 0; } .section__head p { margin: .5rem 0 0; color: var(--ink-2); max-width: 46ch; } /* ---------- 7. HOME ---------- */ .hero { padding-block: 28px 40px; } .hero__grid { display: grid; gap: 34px; align-items: center; } .hero__grid > * { min-width: 0; } .hero h1 { font-size: clamp(3.1rem, 13.5vw, 7.2rem); line-height: .86; margin-bottom: .3em; } .hero h1 .hl { color: var(--accent); } .hero h1 .tape { font-size: .36em; vertical-align: middle; transform: rotate(-3deg) translateY(-.2em); letter-spacing: .06em; padding: .3em .7em; } .hero__lede { font-size: 1.12em; max-width: 40ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 26px; } .hero__pic { position: relative; max-width: 640px; justify-self: center; width: 100%; padding-inline: 8px; } .hero__pic .photo { --ar: 16/10; } .hero__pic .stamp--round { position: absolute; right: -2px; bottom: 40px; z-index: 3; background: color-mix(in srgb, var(--paper) 55%, transparent); transform: rotate(-12deg); } .hero__pic .tape { position: absolute; left: 16px; bottom: 54px; z-index: 3; font-size: .95rem; } .stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 40px; } .stats .ticket:nth-child(odd) { transform: rotate(-1deg); } .stats .ticket:nth-child(even) { transform: rotate(.8deg); } .stats .ticket:last-child { grid-column: 1 / -1; } @media (min-width: 640px) { .stats { grid-template-columns: repeat(5, minmax(0,1fr)); } .stats .ticket:last-child { grid-column: auto; } } @media (min-width: 980px) { .hero { padding-top: 48px; } .hero__grid { grid-template-columns: 1.08fr .92fr; } .hero__pic .photo { transform: rotate(2deg); } } /* trips */ .trips { display: grid; gap: 30px 22px; } @media (min-width: 640px) { .trips { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 1100px) { .trips { grid-template-columns: repeat(4, minmax(0,1fr)); } } .trip { --tc: var(--ink); --ti: var(--ink); position: relative; background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; border-top: 8px solid var(--tc); } .trip--1 { --tc: var(--t1); --ti: var(--t1-ink); } .trip--2 { --tc: var(--t2); --ti: var(--t2-ink); } .trip--3 { --tc: var(--t3); --ti: var(--t3-ink); } .trip--4 { --tc: var(--t4); --ti: var(--t4-ink); } .trip__pic { position: relative; } .trip__pic img { width: 100%; aspect-ratio: 16/10; object-fit: cover; filter: grayscale(.25) contrast(1.05); } .trip__pic .tape { position: absolute; left: -8px; top: 14px; font-size: 1.05rem; } .trip__no { position: absolute; right: 10px; bottom: -26px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 3px solid var(--ti); color: var(--ti); font: 800 1.5rem/1 var(--f-display); transform: rotate(8deg); outline: 1.5px solid var(--ti); outline-offset: -7px; } .trip__body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; } .trip__body h3 { margin: 0 0 .3em; padding-right: 50px; } .trip__meta { font: 700 1rem/1.2 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ti); margin-bottom: .7em; } .trip__body p { font-size: 1rem; line-height: 1.55; } .trip__links { margin-top: auto; display: flex; gap: 18px; flex-wrap: wrap; } .trip__links a { font: 800 1.05rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 10px 0 4px; border-bottom: 3px solid var(--tc); } .trip__links a:hover { color: var(--ti); } /* diary entries (used on home + diary) */ .entries { display: grid; gap: 26px; list-style: none; margin: 0; padding: 0; } .entry { --tc: var(--t4); --ti: var(--t4-ink); position: relative; display: grid; gap: 0; background: var(--card); box-shadow: var(--shadow); } .entry--t1 { --tc: var(--t1); --ti: var(--t1-ink); } .entry--t2 { --tc: var(--t2); --ti: var(--t2-ink); } .entry--t3 { --tc: var(--t3); --ti: var(--t3-ink); } .entry__pic { position: relative; overflow: hidden; } .entry__pic img { width: 100%; aspect-ratio: 3/2; object-fit: cover; height: 100%; } .entry__body { padding: 18px 18px 20px; position: relative; background-image: repeating-linear-gradient(transparent 0 calc(1.6em - 1px), var(--rule) calc(1.6em - 1px) 1.6em); background-position: 0 2.3em; } .entry__body h3 { font-size: clamp(1.65rem, 5.5vw, 2.1rem); margin: .2em 0 .35em; } .entry__body h3 a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--tc), var(--tc)) 0 100% / 0 4px no-repeat; transition: background-size .25s; } .entry__body h3 a:hover { background-size: 100% 4px; } .entry__body h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */ .entry__teaser { font-size: 1rem; line-height: 1.6; margin: 0 0 .9rem; } .entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 700 .98rem/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } .entry__meta .who { display: inline-flex; align-items: center; gap: 6px; } .entry__meta .who i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--ink); color: var(--paper); font-size: .85rem; letter-spacing: 0; } .entry__date { position: absolute; z-index: 2; top: 12px; right: 12px; font-size: .85rem; background: color-mix(in srgb, var(--card) 88%, transparent); } .entry__ctry { font-size: .82rem; transform: rotate(-3deg); } @media (min-width: 700px) { .entry { grid-template-columns: minmax(220px, 34%) 1fr; } .entry__pic { min-height: 230px; } .entry__pic img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; } .group .entries { max-width: 1040px; } .entry__teaser { max-width: 60ch; } .entry__body { padding: 22px 26px 22px; } .entry__date { top: auto; bottom: 14px; right: auto; left: 14px; } } .home-entries .entries { gap: 22px; } @media (min-width: 1100px) { .home-entries .entries { grid-template-columns: repeat(3, minmax(0,1fr)); } .home-entries .entry { grid-template-columns: 1fr; } .home-entries .entry__pic { min-height: 0; } .home-entries .entry__pic img { position: static; aspect-ratio: 3/2; height: auto; } .home-entries .entry__date { top: 12px; right: 12px; left: auto; bottom: auto; } } /* foto teaser: contact sheet */ .sheet { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 14px; padding: 10px 6px; } .sheet .photo { padding: 7px 7px 9px; } .sheet .photo figcaption { font-size: .92rem; padding-top: .4rem; } .sheet .photo:nth-child(3n+1) { transform: rotate(-2deg); } .sheet .photo:nth-child(3n+2) { transform: rotate(1.5deg); } .sheet .photo:nth-child(3n) { transform: rotate(-.6deg); } .sheet .photo::before, .sheet .photo::after { width: 52px; height: 18px; } .sheet .photo:nth-child(even)::before, .sheet .photo:nth-child(odd)::after { display: none; } @media (min-width: 760px) { .sheet { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px 24px; } } @media (min-width: 1100px) { .sheet { grid-template-columns: repeat(6, minmax(0,1fr)); } } /* map teaser */ .maptease { position: relative; display: grid; gap: 24px; background: var(--paper-2); padding: 24px 18px; border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); overflow: hidden; } .maptease svg.route { width: 100%; height: auto; } .maptease h2 { margin-bottom: .2em; } .legend { list-style: none; padding: 0; margin: 14px 0 22px; display: grid; gap: 8px; } .legend li { display: flex; align-items: center; gap: 10px; font: 700 1.05rem/1.2 var(--f-display); letter-spacing: .06em; text-transform: uppercase; } .legend li::before { content: ""; width: 34px; height: 9px; background: var(--c); transform: rotate(-3deg); flex: none; clip-path: polygon(0 15%, 6% 0, 94% 10%, 100% 0, 100% 85%, 94% 100%, 6% 90%, 0 100%); } @media (min-width: 900px) { .maptease { grid-template-columns: .8fr 1.2fr; align-items: center; padding: 36px; } } /* ---------- 8. DIARY LIST ---------- */ .pagehead { padding-block: 34px 14px; } .pagehead h1 { margin-bottom: .15em; } .pagehead__dek { font-size: 1.12em; color: var(--ink-2); max-width: 46ch; margin: 0; font-style: italic; } .crumbs { font: 700 .95rem/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px; } .crumbs a { color: var(--ink-2); padding: 6px 0; } .crumbs span[aria-hidden] { padding: 6px 2px; } .filters { display: flex; gap: 10px; overflow-x: auto; padding: 14px 4px 16px; margin-inline: -4px; scrollbar-width: none; } .filters::-webkit-scrollbar { display: none; } .chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font: 800 1.02rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-radius: 3px; cursor: pointer; } .chip i { width: 14px; height: 14px; background: var(--c, var(--ink)); display: inline-block; transform: rotate(-8deg); } .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); } .group { margin-top: 38px; } .group__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 22px; } .group__head .tape { font-size: 1.05rem; } .group__head h2 { font-size: clamp(2rem, 7vw, 2.9rem); margin: 0; } .group__head a { font: 700 1rem var(--f-display); letter-spacing: .08em; text-transform: uppercase; padding: 8px 0; } .pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 40px; flex-wrap: wrap; } .pager__info { font: 700 1rem var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } /* ---------- 9. STORY ---------- */ .progress { position: fixed; left: 0; top: 0; height: 6px; width: 100%; z-index: 120; background: var(--t4); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%); } .story-head { padding-block: 30px 10px; } .story-head__stamps { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 18px; } .story-head h1 { font-size: clamp(3.6rem, 17vw, 8.5rem); line-height: .82; margin-bottom: .25em; } .story-head .dek { font-size: clamp(1.2rem, 3.5vw, 1.5rem); line-height: 1.4; font-style: italic; max-width: 32ch; margin-bottom: 22px; } .byline { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; } .byline .ticket { display: flex; align-items: center; gap: 14px; padding: 10px 22px; } .byline .who { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 800 1.2rem var(--f-display); flex: none; } .byline b { display: block; font: 800 1.2rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; } .byline span { font: 600 .95rem/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); } .story-lead { margin: 30px auto 6px; max-width: 720px; } .story-lead .photo { --ar: 5/4; } @media (min-width: 760px) { .story-lead .photo { --ar: 16/10; transform: rotate(-.8deg); } } .prose { max-width: var(--measure); margin-inline: auto; padding-top: 22px; } .prose p { margin-bottom: 1.15em; hyphens: auto; } article .prose > p:first-of-type::first-letter { float: left; font: 800 5.4em/.78 var(--f-display); color: var(--accent); margin: .07em .1em 0 0; text-transform: uppercase; } .prose blockquote { margin: 1.8em 0; padding: 18px 0 14px 20px; border-left: 8px solid var(--t4); position: relative; } .prose blockquote p { font: 700 clamp(1.7rem, 5.5vw, 2.4rem)/1.05 var(--f-display); text-transform: uppercase; margin: 0; letter-spacing: .005em; } .prose blockquote::before { content: "“"; position: absolute; right: 0; top: -.25em; font: 800 6rem/1 var(--f-display); color: var(--t4-ink); opacity: .35; } .prose .credit { font-style: italic; color: var(--ink-2); } .signoff { max-width: var(--measure); margin: 30px auto 0; display: grid; gap: 16px; } .odometer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; background: var(--ink); color: var(--paper); padding: 16px 18px; border-radius: 4px; } .odometer__digits { display: flex; gap: 3px; } .odometer__digits span { background: var(--paper); color: var(--ink); font: 800 1.9rem/1 var(--f-display); padding: 6px 7px 4px; border-radius: 2px; min-width: 1.15em; text-align: center; box-shadow: inset 0 -10px 0 rgba(0,0,0,.08); } .odometer__digits span.sep { background: none; color: var(--paper); padding: 6px 0; min-width: 0; box-shadow: none; } .odometer p { margin: 0; font: 700 1.05rem/1.3 var(--f-display); letter-spacing: .08em; text-transform: uppercase; } .odometer p b { color: var(--t4-ink); } html[data-theme="dark"] .odometer p b { color: var(--t4); } .tags { display: flex; flex-wrap: wrap; gap: 8px; } .tags a { font: 700 .95rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; padding: 10px 12px; border: 1.5px dashed var(--rule-strong); color: var(--ink); text-decoration: none; border-radius: 3px; } .tags a:hover { border-style: solid; border-color: var(--ink); } .ministrip { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 14px; } @media (min-width: 900px) { .ministrip { grid-template-columns: repeat(4, minmax(0,1fr)); } } .ministrip .photo:nth-child(odd) { transform: rotate(-1.4deg); } .ministrip .photo:nth-child(even) { transform: rotate(1.2deg); } .ministrip .photo { padding: 7px 7px 10px; } .ministrip .photo::before, .ministrip .photo::after { width: 50px; height: 18px; } .ministrip figcaption { font-size: .95rem; } .ministrip figcaption small { display: block; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; margin-top: 4px; } .storynav { display: grid; gap: 16px; margin-top: 50px; } .storynav a { display: block; text-decoration: none; color: var(--ink); } .storynav .ticket { padding: 16px 26px; height: 100%; } .storynav small { display: block; font: 700 .92rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; } .storynav b { font: 800 1.5rem/1.05 var(--f-display); text-transform: uppercase; } .storynav a:hover b { color: var(--accent); } .storynav .next { text-align: right; } @media (min-width: 700px) { .storynav { grid-template-columns: 1fr 1fr; } } .routecard { display: grid; gap: 16px; background: var(--paper-2); border: 2px solid var(--ink); padding: 18px; } .routecard svg { width: 100%; height: auto; } @media (min-width: 760px) { .routecard { grid-template-columns: 1.4fr 1fr; align-items: center; padding: 26px; } } /* ---------- 10. STATIC PAGE ---------- */ .jump { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 8px; } .jump a { text-decoration: none; } .jump .tape { font-size: 1.05rem; padding: .6em 1.1em .55em; } .jump a:hover .tape { transform: rotate(0) scale(1.04); } .content { max-width: var(--measure); } .bike { margin-top: 56px; } .bike__head { display: grid; gap: 6px; margin-bottom: 18px; } .bike__head h2 { margin: 0; } .bike__head .kicker { margin: 0; } .bike__grid { display: grid; gap: 34px; } @media (min-width: 1000px) { .bike__grid { grid-template-columns: minmax(0, 66ch) minmax(300px, 1fr); align-items: start; gap: 48px; } } /* spec sheet = luggage tag / data plate */ .spec { background: var(--card); box-shadow: var(--shadow); position: relative; border: 2px solid var(--ink); } .spec__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--ink); color: var(--paper); padding: 12px 16px; } .spec__head h3 { margin: 0; font-size: 1.5rem; } .spec__head .hole { width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 4px var(--rule-strong); flex: none; } .spec table { width: 100%; border-collapse: collapse; } .spec th, .spec td { text-align: left; vertical-align: top; padding: 11px 16px; border-bottom: 1px dashed var(--rule-strong); } .spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; } .spec th { font: 700 .92rem/1.25 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); width: 42%; padding-top: 14px; } .spec td { font: 700 1.2rem/1.25 var(--f-display); letter-spacing: .02em; } .spec td small { display: block; font-weight: 500; color: var(--ink-2); font-size: .95rem; letter-spacing: .03em; } .spec .stamp { position: absolute; right: 10px; bottom: -22px; font-size: .85rem; background: var(--card); } @media (min-width: 1000px) { .spec--sticky { position: sticky; top: 130px; } } .strip-wrap { margin-top: 26px; position: relative; } .strip { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 4px 22px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-color: var(--rule-strong) transparent; } .strip .photo { flex: 0 0 min(72vw, 300px); scroll-snap-align: start; padding: 8px 8px 10px; } .strip .photo:nth-child(odd) { transform: rotate(-1.4deg); } .strip .photo:nth-child(even) { transform: rotate(1.1deg); } .strip .photo::before, .strip .photo::after { width: 54px; height: 18px; } .strip .photo:nth-child(odd)::after, .strip .photo:nth-child(even)::before { display: none; } .strip__hint { font: 700 .95rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: 8px; } .logtable { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-family: var(--f-display); } .logtable caption { text-align: left; font: 700 .95rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 10px; } .logtable th { text-align: left; font: 800 .95rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; padding: 10px 8px; border-bottom: 3px solid var(--ink); } .logtable td { padding: 10px 8px; font-size: 1.1rem; line-height: 1.3; border-bottom: 1px solid var(--rule); vertical-align: top; } .logtable td:nth-child(-n+2) { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .logtable tr.hl td { background: color-mix(in srgb, var(--t2) 12%, transparent); } .logtable tr.hl td:last-child { font-weight: 700; } .tbl-scroll { overflow-x: auto; } /* ---------- 11. MOTION ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ===================================================================== 12. SITE ADDITIONS (grafts from the layout jury + real-site needs) ===================================================================== */ /* one class gives any component its trip colour: --tc fill, --ti text-safe ink, --to text on fill */ .t1 { --tc: var(--t1); --ti: var(--t1-ink); --to: var(--t1-on); } .t2 { --tc: var(--t2); --ti: var(--t2-ink); --to: var(--t2-on); } .t3 { --tc: var(--t3); --ti: var(--t3-ink); --to: var(--t3-on); } .t4 { --tc: var(--t4); --ti: var(--t4-ink); --to: var(--t4-on); } .tape.t1, .tape.t2, .tape.t3, .tape.t4 { color: var(--to); } /* header height is measured by site.js so sticky bars sit right below it */ :root { --hdr-h: 112px; } @media (min-width: 980px) { :root { --hdr-h: 72px; } } .tripbar--hazard { height: 8px; display: block; background: repeating-linear-gradient(-45deg, var(--t1) 0 14px, var(--t2) 14px 28px, var(--t3) 28px 42px, var(--t4) 42px 56px); } .tripbar--trip { height: 8px; display: block; background: repeating-linear-gradient(-45deg, var(--tc) 0 14px, color-mix(in srgb, var(--tc) 55%, var(--paper)) 14px 28px); } .lang-menu a small { font-size: .8em; color: var(--ink-2); } .lang-menu a[aria-current="true"]::after { content: "\2713"; color: var(--accent); } .tool .lang-code { font-size: 1rem; } /* search results: stories, countries, places */ .results a { grid-template-columns: 48px 1fr; } .results__ico { width: 48px; height: 48px; display: grid; place-items: center; background: var(--paper-2); color: var(--ti, var(--ink)); } .results__ico .icon { width: 24px; height: 24px; } .results p { margin: .25rem 0 0; font: 400 .95rem/1.4 var(--f-body); color: var(--ink-2); text-transform: none; letter-spacing: 0; } .results__group { font: 800 .95rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 22px 0 8px; } .results__links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; } .results__links a { all: unset; cursor: pointer; font: 700 .9rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); padding: 6px 0; } .results__links a:hover, .results__links a:focus-visible { text-decoration: underline; } .results li.results__country { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding: 8px; background: var(--card); box-shadow: var(--shadow); border-left: 6px solid var(--tc, var(--ink)); } .results li.results__country b { font: 800 1.25rem/1.05 var(--f-display); text-transform: uppercase; } /* compact stats (2x2 on phones) */ .stats--compact { gap: 10px; margin-top: 30px; } .stats--compact .ticket { padding: .6rem .8rem .55rem; } .stats--compact .ticket__num { font-size: clamp(1.6rem, 6vw, 2.3rem); } .stats--compact .ticket:last-child { grid-column: auto; } @media (min-width: 640px) { .stats--compact { grid-template-columns: repeat(4, minmax(0,1fr)); } } /* country marquee: one tape strip */ .marquee { overflow: hidden; background: var(--ink); color: var(--paper); transform: rotate(-1deg); margin: 34px -12px 0; padding: 10px 0; } .marquee__track { display: flex; width: max-content; animation: marquee 70s linear infinite; } .marquee a { color: inherit; text-decoration: none; font: 800 1.35rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; padding: 0 .6em; white-space: nowrap; } .marquee a::after { content: "\2605"; color: var(--accent); margin-left: 1.2em; font-size: .8em; } .marquee a:hover { color: var(--accent); } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; width: auto; } } /* compact diary rows (graft from proposal C) */ .rows { list-style: none; margin: 0; padding: 0; } .row { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px dashed var(--rule-strong); } .row__pic img { width: 92px; height: 92px; object-fit: cover; background: var(--paper-2); border: 3px solid var(--card); box-shadow: var(--shadow); } .row__pic--none { width: 92px; height: 92px; display: grid; place-items: center; background: var(--paper-2); color: var(--ti, var(--ink)); border: 3px solid var(--tc, var(--ink)); font: 800 2.2rem/1 var(--f-display); opacity: .85; } .row__meta { font: 700 .85rem/1.25 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ti, var(--ink-2)); margin: 0 0 .3rem; } .row h3 { font-size: clamp(1.3rem, 4.6vw, 1.75rem); margin: 0 0 .3rem; line-height: 1; } .row h3 a { color: var(--ink); text-decoration: none; } .row h3 a::after { content: ""; position: absolute; inset: 0; } .row h3 a:hover { color: var(--accent); } .row p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (min-width: 700px) { .row { grid-template-columns: 168px 1fr; gap: 24px; padding: 20px 0; } .row__pic img, .row__pic--none { width: 168px; height: 118px; } } /* country chapter header in lists */ .chapter { display: flex; align-items: center; gap: 14px; margin: 36px 0 6px; padding-bottom: 10px; border-bottom: 3px solid var(--ink); } .chapter__no { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; border: 3px solid var(--ti); color: var(--ti); font: 800 1.3rem/1 var(--f-display); outline: 1.5px solid var(--ti); outline-offset: -7px; transform: rotate(-6deg); } .chapter h2 { font-size: clamp(1.8rem, 6vw, 2.5rem); margin: 0; } .chapter p { margin: .2rem 0 0; font: 700 .9rem/1.3 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); } .chapter p a { color: var(--accent); } .tripband { margin: 46px 0 0; } .tripband .tape { font-size: clamp(1.1rem, 3.5vw, 1.4rem); } .listend { text-align: center; font: 700 1rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding: 30px 0; } .loadmore { display: flex; justify-content: center; margin-top: 26px; } .featured { margin: 10px 0 8px; } .featured .entry__body { background-image: none; } /* filters bar: one sticky row of chips */ .filterbar { position: sticky; top: var(--hdr-h); z-index: 20; background: var(--paper); border-bottom: 1px solid var(--rule); } .filterbar .filters { padding: 10px 4px; } .chip small { font-weight: 700; color: var(--ink-2); letter-spacing: .04em; } .chip[aria-pressed="true"] small { color: inherit; opacity: .8; } /* ---------- story page ---------- */ .story-hero { margin: 0; position: relative; } .story-hero img { width: 100%; max-height: 72vh; object-fit: cover; } @media (max-width: 759px) { .story-hero { margin-inline: calc(-1 * var(--gutter)); } .story-hero.photo { padding: 0; box-shadow: none; } .story-hero.photo::before, .story-hero.photo::after { display: none; } } @media (min-width: 760px) { .story-hero.photo { max-width: 860px; margin: 26px auto 0; transform: rotate(-.6deg); } .story-hero.photo img { max-height: none; aspect-ratio: 16/10; } } .story-head h1 { font-size: clamp(2.6rem, 11vw, 6.2rem); line-height: .88; } .story-head .kicker a { color: inherit; } .metastrip { display: flex; flex-wrap: wrap; margin: 4px 0 0; padding: 0; list-style: none; border-top: 3px solid var(--ink); border-bottom: 1px dashed var(--rule-strong); } .metastrip li { flex: 1 1 auto; min-width: 7.5em; padding: 10px 14px 10px 0; } .metastrip b { display: block; font: 800 1.35rem/1 var(--f-display); text-transform: uppercase; color: var(--ti, var(--ink)); } .metastrip span { display: block; font: 700 .82rem/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-top: 3px; } .langnote { max-width: var(--measure); margin: 18px auto 0; padding: 10px 14px; border-left: 5px solid var(--accent); background: var(--card); font: 600 1rem/1.4 var(--f-display); letter-spacing: .02em; color: var(--ink-2); } .langnote a { font-weight: 700; } .quotecard { position: relative; margin: 26px auto 0; max-width: 860px; padding: 34px 26px 30px; background: var(--tc, var(--ink)); color: var(--to, var(--paper)); transform: rotate(-1deg); box-shadow: 8px 8px 0 var(--ink); } .quotecard p { margin: 0; font: 800 clamp(1.8rem, 6vw, 3rem)/1.02 var(--f-display); text-transform: uppercase; } .quotecard::before { content: "\201C"; position: absolute; right: 16px; top: -12px; font: 800 7rem/1 var(--f-display); opacity: .35; } .prose h2, .prose h3 { margin-top: 1.4em; } .prose h2 { font-size: clamp(1.7rem, 5vw, 2.3rem); } .prose h3 { font-size: clamp(1.35rem, 4vw, 1.7rem); } .prose img { margin: 1.4em auto; box-shadow: var(--shadow); border: 6px solid var(--card); } .prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font: 500 1rem/1.35 var(--f-display); display: block; overflow-x: auto; } .prose table td, .prose table th { padding: 7px 8px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; } .prose table th { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-bottom: 3px solid var(--ink); } .prose a { word-break: break-word; } .actions { display: flex; flex-wrap: wrap; gap: 10px; max-width: var(--measure); margin: 26px auto 0; } .pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); color: var(--ink); font: 800 1rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .pill:hover { background: var(--ink); color: var(--paper); } .pill .icon { width: 18px; height: 18px; } .progress { background: var(--tc, var(--t4)); top: var(--hdr-h); height: 5px; } /* ---------- content pages (motorcycles, equipment, about) ---------- */ .pagehero { position: relative; margin: 0; } .pagehero img { width: 100%; height: clamp(220px, 42vw, 460px); object-fit: cover; } .content { margin-inline: auto; } .content .lead { font-size: 1.12em; } .content h2 { margin-top: 1.8em; font-size: clamp(2rem, 7vw, 3.1rem); position: relative; padding-top: 18px; scroll-margin-top: calc(var(--hdr-h) + 16px); } .content h2::before { content: ""; position: absolute; top: 0; left: 0; width: 120px; height: 10px; background: var(--ac, var(--ink)); transform: rotate(-1.5deg); clip-path: polygon(0 15%, 5% 0, 95% 10%, 100% 0, 100% 85%, 95% 100%, 5% 90%, 0 100%); } .content h3 { margin-top: 1.5em; } .accent-1 { --ac: var(--t1); } .accent-2 { --ac: var(--t2); } .accent-3 { --ac: var(--t3); } .accent-4 { --ac: var(--t4); } .accent-5 { --ac: var(--accent); } .content .meta { font: 700 1rem/1.3 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } .content .note { font: 600 1rem/1.4 var(--f-display); letter-spacing: .02em; color: var(--ink-2); } .content p.jump { display: block; font: 700 1.05rem/1.6 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); } .content figure { margin: 0; } .figs { display: grid; gap: 22px 16px; margin: 1.4em 0; } .figs figure { background: var(--card); padding: 8px 8px 10px; box-shadow: var(--shadow); } .figs figure:nth-child(odd) { transform: rotate(-1deg); } .figs figure:nth-child(even) { transform: rotate(.8deg); } .figs img { width: 100%; height: auto; } .figs figcaption, .content figure.wide figcaption { font: 600 .98rem/1.3 var(--f-display); color: var(--ink-2); padding-top: .45rem; } .figs-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .figs-3, .figs-people { grid-template-columns: repeat(3, minmax(0, 1fr)); } .figs-thumbs { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } .figs-thumbs figure, .figs-people figure { transform: none !important; padding: 5px 5px 7px; } .content figure.wide { margin: 1.6em 0; background: var(--card); padding: 8px 8px 10px; box-shadow: var(--shadow); } .content figure.wide img { width: 100%; } table.spec { width: 100%; border-collapse: collapse; margin: 1em 0 1.4em; } .cols-2 { display: grid; gap: 0 28px; } @media (min-width: 760px) { .cols-2 { grid-template-columns: 1fr 1fr; } } .table-wrap { overflow-x: auto; margin: 1em 0; } table.data { width: 100%; border-collapse: collapse; font-family: var(--f-display); } table.data th { text-align: left; font: 800 .95rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; padding: 10px 8px; border-bottom: 3px solid var(--ink); } table.data td { padding: 9px 8px; font-size: 1.08rem; line-height: 1.3; border-bottom: 1px solid var(--rule); vertical-align: top; } table.data td:nth-child(-n+2) { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .cards { display: grid; gap: 22px; margin: 1.2em 0; } @media (min-width: 760px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .card { background: var(--card); box-shadow: var(--shadow); border-top: 8px solid var(--ac, var(--ink)); padding: 14px 18px 8px; scroll-margin-top: calc(var(--hdr-h) + 16px); } .card h3 { margin: .1em 0 .4em; font-size: 1.6rem; } .card ul { margin: 0 0 12px; padding-left: 1.1em; } .card li { font-size: 1rem; line-height: 1.45; margin-bottom: 3px; } .card li::marker { color: var(--ac, var(--ink)); } .brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; margin: 1.2em 0; } .brands figure { text-align: center; background: var(--card); padding: 14px 10px; box-shadow: var(--shadow); } .brands img { height: 80px; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto 10px; } html[data-theme="dark"] .brands img { background: #F2EBDD; padding: 6px; border-radius: 3px; } .brands figcaption { font: 600 .95rem/1.3 var(--f-display); color: var(--ink-2); } .brands figcaption b { display: block; color: var(--ink); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; } .profile { display: grid; gap: 14px 22px; align-items: center; margin: .6em 0 1em; } .profile figure { background: var(--card); padding: 8px; box-shadow: var(--shadow); transform: rotate(-1.2deg); max-width: 380px; } .profile-small figure { max-width: 150px; } @media (min-width: 640px) { .profile { grid-template-columns: minmax(0, 380px) 1fr; } .profile-small { grid-template-columns: 150px 1fr; } } /* ---------- route page ---------- */ .routepage { display: grid; } .routemap { position: relative; height: min(45vh, 420px); min-height: 280px; background: var(--paper-2); border-bottom: 3px solid var(--ink); } .routemap #map { position: absolute; inset: 0; } .routelist { padding: 18px var(--gutter) 40px; min-width: 0; } .routelist h1 { font-size: clamp(2.4rem, 9vw, 4rem); } @media (min-width: 980px) { .routepage { grid-template-columns: minmax(380px, 34%) 1fr; } .routemap { order: 2; position: sticky; top: var(--hdr-h); height: calc(100vh - var(--hdr-h)); border-bottom: 0; border-left: 3px solid var(--ink); } .routelist { order: 1; padding: 26px 26px 60px 32px; } } .legend--inline { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 18px; } .legend--inline li { font-size: .95rem; } .stops { list-style: none; margin: 0; padding: 0; } .stop { display: grid; grid-template-columns: 78px 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px dashed var(--rule-strong); } .stop__date { grid-row: span 2; font: 800 .95rem/1.15 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ti, var(--ink-2)); } .stop__place { font: 800 1.2rem/1.1 var(--f-display); text-transform: uppercase; } .stop__place button { all: unset; cursor: pointer; } .stop__place button:hover, .stop__place button:focus-visible { color: var(--accent); text-decoration: underline; } .stop__km { font: 700 1rem/1 var(--f-display); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; } .stop__more { grid-column: 2 / -1; font-size: .95rem; line-height: 1.4; color: var(--ink-2); } .stop__more i { font-style: italic; } .stop__gpx { all: unset; cursor: pointer; font: 700 .85rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .countries { list-style: none; margin: 0; padding: 0; } .countries li a { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px dashed var(--rule-strong); color: var(--ink); text-decoration: none; } .countries li a:hover b { color: var(--accent); } .countries b { font: 800 1.2rem/1.1 var(--f-display); text-transform: uppercase; } .countries span { font: 600 .9rem/1 var(--f-display); letter-spacing: .06em; color: var(--ink-2); text-transform: uppercase; } .countries .km { font: 700 1rem/1 var(--f-display); font-variant-numeric: tabular-nums; } .total { display: flex; justify-content: space-between; font: 800 1.2rem/1 var(--f-display); text-transform: uppercase; padding: 14px 0; border-top: 3px solid var(--ink); } .iw { font: 500 15px/1.4 var(--f-body); color: #1D1A15; max-width: 260px; } .iw h3 { font: 800 20px/1.05 var(--f-display); text-transform: uppercase; margin: 0 0 6px; } .iw p { margin: 0 0 4px; } .iw-motto { font-style: italic; } .iw-geo { font: 600 13px/1.2 var(--f-display); letter-spacing: .06em; color: #4F473C; } /* ---------- misc ---------- */ .totop { position: fixed; right: 14px; bottom: 14px; z-index: 40; width: 48px; height: 48px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--card); color: var(--ink); display: grid; place-items: center; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s; } .totop.is-on { opacity: 1; pointer-events: auto; } .totop .icon { transform: rotate(-90deg); } .footer-langs { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0; padding: 0; } .footer-langs a { font: 700 1rem/1 var(--f-display); letter-spacing: .06em; color: #C9BBA2; text-decoration: none; padding: 6px 0; } .footer-langs a[aria-current="true"], .footer-langs a:hover { color: #FFB37F; } .notfound { border: 3px solid var(--ink); background: var(--card); padding: 16px 18px; margin: 18px 0; box-shadow: 6px 6px 0 var(--ink); } /* CJK: no uppercase tracking, normal line breaks */ html:lang(zh) h1, html:lang(ja) h1, html:lang(zh) h2, html:lang(ja) h2 { letter-spacing: 0; line-height: 1.1; } html:lang(zh) body, html:lang(ja) body { line-break: strict; word-break: normal; }