/* escort-04 — jade and tangerine on a mint-white page, geometric sans, two corners rounded and two square on every panel. */ :root { --mint: #eef9f3; --paper: #ffffff; --ink: #12271f; --muted: #5c776c; --line: #cdeadd; --jade: #00a676; --jade-deep: #017a57; --tangerine: #ff7a1a; /* Not part of the declared palette (no colour), so not read by the palette test: one radius pair, reused everywhere a panel needs the asymmetric corner. */ --radius: 16px 0 16px 0; --radius-sm: 8px 0 8px 0; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--mint); color: var(--ink); font: 15px/1.55 "Work Sans", "Century Gothic", Futura, sans-serif; } a { color: inherit; } img, video { display: block; max-width: 100%; } h1, h2 { font-weight: 800; letter-spacing: -.01em; } /* Header: the wordmark top left, always in view; the links and the button sit to its right on the desktop and fold behind a burger on the phone, where the logo stays put. */ .ato-header { background: var(--paper); border-bottom: 1px solid var(--line); } .ato-bar { position: relative; max-width: 1240px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 16px; } .ato-logo { display: block; width: 200px; height: 30px; margin-right: auto; overflow: hidden; text-indent: 110%; white-space: nowrap; color: transparent; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='30' viewBox='0 0 200 30' role='img' aria-label='A Touch of Nordic'%3E%3Ctitle%3EA Touch of Nordic%3C/title%3E%3Cdefs%3E%3CclipPath id='word'%3E%3Cpath transform='translate(0 0)' d='M665.849365234375 0H505.880859375L455.48046875 155.070556640625H215.769287109375L164.87890625 0H8.3603515625L244.290771484375 660H429.93896484375ZM247.709228515625 264.369873046875H424.030517578125L335.85986328125 542.330810546875Z'/%3E%3Cpath transform='translate(970 0)' d='M618.05908203125 660V537.9609375H399.81884765625V0H244.850341796875V537.9609375H26.1201171875V660Z'/%3E%3Cpath transform='translate(1614 0)' d='M299.510009765625 510Q376.8798828125 510 435.2998046875 479.2449951171875Q493.7197265625 448.489990234375 526.6796875 390.2349853515625Q559.6396484375 331.97998046875 559.6396484375 250Q559.6396484375 168.510009765625 526.6796875 110.010009765625Q493.7197265625 51.510009765625 435.2998046875 20.7550048828125Q376.8798828125 -10 299.510009765625 -10Q223.14013671875 -10 164.22021484375 20.7550048828125Q105.30029296875 51.510009765625 72.34033203125 110.010009765625Q39.38037109375 168.510009765625 39.38037109375 250Q39.38037109375 331.97998046875 72.34033203125 390.2349853515625Q105.30029296875 448.489990234375 164.22021484375 479.2449951171875Q223.14013671875 510 299.510009765625 510ZM299.510009765625 398.86083984375Q266.149658203125 398.86083984375 242.3994140625 382.9656982421875Q218.649169921875 367.070556640625 206.009033203125 334.1253662109375Q193.368896484375 301.18017578125 193.368896484375 250Q193.368896484375 199.329833984375 206.009033203125 166.3746337890625Q218.649169921875 133.41943359375 242.3994140625 117.279296875Q266.149658203125 101.13916015625 299.510009765625 101.13916015625Q333.3603515625 101.13916015625 356.8656005859375 117.279296875Q380.370849609375 133.41943359375 393.010986328125 166.3746337890625Q405.651123046875 199.329833984375 405.651123046875 250Q405.651123046875 301.18017578125 393.010986328125 334.1253662109375Q380.370849609375 367.070556640625 356.8656005859375 382.9656982421875Q333.3603515625 398.86083984375 299.510009765625 398.86083984375Z'/%3E%3Cpath transform='translate(2213 0)' d='M237.74072265625 -10Q187.78076171875 -10 148.4656982421875 7.7550048828125Q109.150634765625 25.510009765625 86.3255615234375 64.7850341796875Q63.50048828125 104.06005859375 63.50048828125 167.10009765625V500H216.9990234375V203.77978515625Q216.9990234375 150.809326171875 238.4842529296875 129.9041748046875Q259.969482421875 108.9990234375 299.8798828125 108.9990234375Q319.550048828125 108.9990234375 337.4852294921875 116.049072265625Q355.42041015625 123.09912109375 369.08056640625 137.9642333984375Q382.74072265625 152.829345703125 390.5858154296875 176.2545166015625Q398.430908203125 199.6796875 398.430908203125 231.429931640625V500H551.929443359375V0H414.80078125L409.80078125 90.69970703125Q385.7607421875 39.329833984375 342.24072265625 14.6649169921875Q298.720703125 -10 237.74072265625 -10Z'/%3E%3Cpath transform='translate(2831 0)' d='M298.530029296875 510Q370.129638671875 510 418.6944580078125 489.3450927734375Q467.25927734375 468.690185546875 495.5242919921875 434.2802734375Q523.789306640625 399.870361328125 533.45947265625 358.870361328125L390.82080078125 310.130615234375Q382.66064453125 354.210693359375 361.430419921875 376.28076171875Q340.2001953125 398.350830078125 302.409912109375 398.350830078125Q267.109619140625 398.350830078125 242.6243896484375 382.220703125Q218.13916015625 366.090576171875 205.7540283203125 332.900390625Q193.368896484375 299.710205078125 193.368896484375 248.530029296875Q193.368896484375 197.369873046875 206.7340087890625 164.65966796875Q220.09912109375 131.949462890625 244.829345703125 116.79931640625Q269.5595703125 101.649169921875 302.89990234375 101.649169921875Q330.14013671875 101.649169921875 349.0853271484375 111.4442138671875Q368.030517578125 121.2392578125 380.16064453125 140.3193359375Q392.290771484375 159.3994140625 396.350830078125 186.51953125L535.029541015625 141.89990234375Q525.869384765625 97.85986328125 495.6343994140625 63.6348876953125Q465.3994140625 29.409912109375 417.03955078125 9.7049560546875Q368.6796875 -10 304.409912109375 -10Q224.610107421875 -10 164.710205078125 20.7550048828125Q104.810302734375 51.510009765625 72.0953369140625 109.7650146484375Q39.38037109375 168.02001953125 39.38037109375 250Q39.38037109375 331.97998046875 72.0953369140625 390.2349853515625Q104.810302734375 448.489990234375 163.4852294921875 479.2449951171875Q222.16015625 510 298.530029296875 510Z'/%3E%3Cpath transform='translate(3396 0)' d='M66.54052734375 0V715.30029296875H220.0390625V411.770263671875Q243.09912109375 461.18017578125 284.3841552734375 485.590087890625Q325.669189453125 510 379.609130859375 510Q431.649169921875 510 471.2392578125 489.989990234375Q510.829345703125 469.97998046875 533.409423828125 430.1849365234375Q555.989501953125 390.389892578125 555.989501953125 330.77978515625V0H402.490966796875V287.10009765625Q402.490966796875 346.090576171875 380.220703125 368.790771484375Q357.950439453125 391.490966796875 322.610107421875 391.490966796875Q296.409912109375 391.490966796875 272.65966796875 378.6558837890625Q248.909423828125 365.82080078125 234.4742431640625 337.610595703125Q220.0390625 309.400390625 220.0390625 263.530029296875V0Z'/%3E%3Cpath transform='translate(4311 0)' d='M299.510009765625 510Q376.8798828125 510 435.2998046875 479.2449951171875Q493.7197265625 448.489990234375 526.6796875 390.2349853515625Q559.6396484375 331.97998046875 559.6396484375 250Q559.6396484375 168.510009765625 526.6796875 110.010009765625Q493.7197265625 51.510009765625 435.2998046875 20.7550048828125Q376.8798828125 -10 299.510009765625 -10Q223.14013671875 -10 164.22021484375 20.7550048828125Q105.30029296875 51.510009765625 72.34033203125 110.010009765625Q39.38037109375 168.510009765625 39.38037109375 250Q39.38037109375 331.97998046875 72.34033203125 390.2349853515625Q105.30029296875 448.489990234375 164.22021484375 479.2449951171875Q223.14013671875 510 299.510009765625 510ZM299.510009765625 398.86083984375Q266.149658203125 398.86083984375 242.3994140625 382.9656982421875Q218.649169921875 367.070556640625 206.009033203125 334.1253662109375Q193.368896484375 301.18017578125 193.368896484375 250Q193.368896484375 199.329833984375 206.009033203125 166.3746337890625Q218.649169921875 133.41943359375 242.3994140625 117.279296875Q266.149658203125 101.13916015625 299.510009765625 101.13916015625Q333.3603515625 101.13916015625 356.8656005859375 117.279296875Q380.370849609375 133.41943359375 393.010986328125 166.3746337890625Q405.651123046875 199.329833984375 405.651123046875 250Q405.651123046875 301.18017578125 393.010986328125 334.1253662109375Q380.370849609375 367.070556640625 356.8656005859375 382.9656982421875Q333.3603515625 398.86083984375 299.510009765625 398.86083984375Z'/%3E%3Cpath transform='translate(4910 0)' d='M294.530029296875 727.650146484375Q332.289794921875 727.650146484375 362.149658203125 719.690185546875Q392.009521484375 711.730224609375 406.4794921875 700.730224609375L388.41943359375 602.410888671875Q377.3994140625 608.94091796875 363.3994140625 612.930908203125Q349.3994140625 616.9208984375 329.45947265625 616.9208984375Q292.33935546875 616.9208984375 269.809326171875 600.3408203125Q247.279296875 583.7607421875 247.279296875 542.6806640625V475.50048828125L255.119140625 448.030517578125V0H101.62060546875V552.640625Q101.62060546875 597.890380859375 116.2755126953125 631.0352783203125Q130.930419921875 664.18017578125 157.5552978515625 685.650146484375Q184.18017578125 707.1201171875 219.3450927734375 717.3851318359375Q254.510009765625 727.650146484375 294.530029296875 727.650146484375ZM402.029541015625 500V388.86083984375H17.790283203125V500Z'/%3E%3Cpath transform='translate(5617 0)' d='M660.29931640625 660V0H486.330810546875L268.149658203125 372.42138671875L214.809326171875 475.351806640625H213.3193359375L217.3193359375 357.712158203125V0H79.58056640625V660H253.549072265625L471.22021484375 288.108642578125L525.070556640625 184.13818359375H526.560546875L522.560546875 302.287841796875V660Z'/%3E%3Cpath transform='translate(6357 0)' d='M299.510009765625 510Q376.8798828125 510 435.2998046875 479.2449951171875Q493.7197265625 448.489990234375 526.6796875 390.2349853515625Q559.6396484375 331.97998046875 559.6396484375 250Q559.6396484375 168.510009765625 526.6796875 110.010009765625Q493.7197265625 51.510009765625 435.2998046875 20.7550048828125Q376.8798828125 -10 299.510009765625 -10Q223.14013671875 -10 164.22021484375 20.7550048828125Q105.30029296875 51.510009765625 72.34033203125 110.010009765625Q39.38037109375 168.510009765625 39.38037109375 250Q39.38037109375 331.97998046875 72.34033203125 390.2349853515625Q105.30029296875 448.489990234375 164.22021484375 479.2449951171875Q223.14013671875 510 299.510009765625 510ZM299.510009765625 398.86083984375Q266.149658203125 398.86083984375 242.3994140625 382.9656982421875Q218.649169921875 367.070556640625 206.009033203125 334.1253662109375Q193.368896484375 301.18017578125 193.368896484375 250Q193.368896484375 199.329833984375 206.009033203125 166.3746337890625Q218.649169921875 133.41943359375 242.3994140625 117.279296875Q266.149658203125 101.13916015625 299.510009765625 101.13916015625Q333.3603515625 101.13916015625 356.8656005859375 117.279296875Q380.370849609375 133.41943359375 393.010986328125 166.3746337890625Q405.651123046875 199.329833984375 405.651123046875 250Q405.651123046875 301.18017578125 393.010986328125 334.1253662109375Q380.370849609375 367.070556640625 356.8656005859375 382.9656982421875Q333.3603515625 398.86083984375 299.510009765625 398.86083984375Z'/%3E%3Cpath transform='translate(6956 0)' d='M66.54052734375 0V500H201.119140625L209.17919921875 396.930419921875Q228.21923828125 450.770263671875 266.269287109375 480.3851318359375Q304.3193359375 510 362.809326171875 510Q380.709228515625 510 394.4942626953125 507.02001953125Q408.279296875 504.0400390625 416.33935546875 499.02001953125L399.889404296875 371.14111328125Q389.869384765625 375.14111328125 374.909423828125 377.631103515625Q359.949462890625 380.12109375 337.909423828125 380.12109375Q307.3994140625 380.12109375 280.5543212890625 366.2860107421875Q253.709228515625 352.450927734375 236.8741455078125 325.0157470703125Q220.0390625 297.58056640625 220.0390625 255.30029296875V0Z'/%3E%3Cpath transform='translate(7382 0)' d='M252.720703125 -10Q191.210693359375 -10 143.62060546875 20.7550048828125Q96.030517578125 51.510009765625 69.4404296875 109.52001953125Q42.850341796875 167.530029296875 42.850341796875 248.530029296875Q42.850341796875 332.02001953125 70.7054443359375 390.2650146484375Q98.560546875 448.510009765625 147.170654296875 479.2550048828125Q195.78076171875 510 257.290771484375 510Q324.6806640625 510 366.9957275390625 470.4051513671875Q409.310791015625 430.810302734375 421.86083984375 368.50048828125L406.9609375 350.230712890625V715.30029296875H560.45947265625V0H423.330810546875L412.90087890625 160.689208984375L431.250732421875 149.53955078125Q424.74072265625 101.129638671875 400.20068359375 65.23974609375Q375.66064453125 29.349853515625 337.650634765625 9.6749267578125Q299.640625 -10 252.720703125 -10ZM302.369873046875 104.589111328125Q334.690185546875 104.589111328125 357.9404296875 121.9742431640625Q381.190673828125 139.359375 394.0758056640625 172.8345947265625Q406.9609375 206.309814453125 406.9609375 253.570068359375Q406.9609375 298.3203125 394.5657958984375 330.010498046875Q382.170654296875 361.70068359375 359.1854248046875 378.310791015625Q336.2001953125 394.9208984375 304.409912109375 394.9208984375Q253.889404296875 394.9208984375 225.609130859375 358.8455810546875Q197.328857421875 322.770263671875 197.328857421875 250Q197.328857421875 177.229736328125 225.09912109375 140.909423828125Q252.869384765625 104.589111328125 302.369873046875 104.589111328125Z'/%3E%3Cpath transform='translate(8009 0)' d='M143.289794921875 564.640625Q96.2001953125 564.640625 73.8203125 583.8355712890625Q51.4404296875 603.030517578125 51.4404296875 642.2802734375Q51.4404296875 682.02001953125 73.8203125 700.969970703125Q96.2001953125 719.919921875 143.289794921875 719.919921875Q190.37939453125 719.919921875 212.75927734375 700.969970703125Q235.13916015625 682.02001953125 235.13916015625 642.2802734375Q235.13916015625 603.030517578125 212.75927734375 583.8355712890625Q190.37939453125 564.640625 143.289794921875 564.640625ZM220.0390625 500V0H66.54052734375V500Z'/%3E%3Cpath transform='translate(8296 0)' d='M298.530029296875 510Q370.129638671875 510 418.6944580078125 489.3450927734375Q467.25927734375 468.690185546875 495.5242919921875 434.2802734375Q523.789306640625 399.870361328125 533.45947265625 358.870361328125L390.82080078125 310.130615234375Q382.66064453125 354.210693359375 361.430419921875 376.28076171875Q340.2001953125 398.350830078125 302.409912109375 398.350830078125Q267.109619140625 398.350830078125 242.6243896484375 382.220703125Q218.13916015625 366.090576171875 205.7540283203125 332.900390625Q193.368896484375 299.710205078125 193.368896484375 248.530029296875Q193.368896484375 197.369873046875 206.7340087890625 164.65966796875Q220.09912109375 131.949462890625 244.829345703125 116.79931640625Q269.5595703125 101.649169921875 302.89990234375 101.649169921875Q330.14013671875 101.649169921875 349.0853271484375 111.4442138671875Q368.030517578125 121.2392578125 380.16064453125 140.3193359375Q392.290771484375 159.3994140625 396.350830078125 186.51953125L535.029541015625 141.89990234375Q525.869384765625 97.85986328125 495.6343994140625 63.6348876953125Q465.3994140625 29.409912109375 417.03955078125 9.7049560546875Q368.6796875 -10 304.409912109375 -10Q224.610107421875 -10 164.710205078125 20.7550048828125Q104.810302734375 51.510009765625 72.0953369140625 109.7650146484375Q39.38037109375 168.02001953125 39.38037109375 250Q39.38037109375 331.97998046875 72.0953369140625 390.2349853515625Q104.810302734375 448.489990234375 163.4852294921875 479.2449951171875Q222.16015625 510 298.530029296875 510Z'/%3E%3C/clipPath%3E%3ClinearGradient id='metal' gradientUnits='userSpaceOnUse' x1='8.4' y1='801.4' x2='8831.0' y2='-83.8'%3E%3Cstop offset='0' stop-color='%2312271f'/%3E%3Cstop offset='0.10' stop-color='%2312271f'/%3E%3Cstop offset='0.18' stop-color='%2300a676'/%3E%3Cstop offset='0.27' stop-color='%2312271f'/%3E%3Cstop offset='0.52' stop-color='%2312271f'/%3E%3Cstop offset='0.60' stop-color='%2300a676'/%3E%3Cstop offset='0.70' stop-color='%2312271f'/%3E%3Cstop offset='0.88' stop-color='%2312271f'/%3E%3Cstop offset='0.94' stop-color='%2300a676'/%3E%3Cstop offset='1' stop-color='%2312271f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(0 -1) scale(1)'%3E%3Cpath fill='%2300a676' d='M16.00 1.00 L18.30 10.46 L24.49 7.51 L21.54 13.70 L31.00 16.00 L21.54 18.30 L24.49 24.49 L18.30 21.54 L16.00 31.00 L13.70 21.54 L7.51 24.49 L10.46 18.30 L1.00 16.00 L10.46 13.70 L7.51 7.51 L13.70 10.46Z'/%3E%3Cpath fill='%2312271f' d='M16 12.4 L19.6 16 L16 19.6 L12.4 16Z'/%3E%3C/g%3E%3Cg transform='translate(36.847437 21.548000) scale(0.018248446 -0.018248446)'%3E%3Cg clip-path='url(%23word)'%3E%3Crect x='-65.4' y='-83.8' width='8970.2' height='885.2' fill='url(%23metal)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat left center / contain; } .ato-toggle { position: absolute; opacity: 0; pointer-events: none; } .ato-burger { display: none; } .ato-links { display: flex; align-items: center; gap: 18px; } .ato-links a { text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; } .ato-links a:hover { color: var(--jade-deep); } .ato-links .ato-post { color: #fff; background: var(--jade); padding: 8px 16px; border-radius: var(--radius-sm); } .ato-links .ato-post:hover { background: var(--jade-deep); } @media (max-width: 700px) { .ato-bar { padding: 12px 16px; } .ato-burger { display: block; position: relative; width: 34px; height: 30px; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--mint); } .ato-burger span, .ato-burger span::before, .ato-burger span::after { content: ""; position: absolute; left: 8px; right: 8px; height: 2px; background: var(--ink); } .ato-burger span { top: 14px; } .ato-burger span::before { top: -6px; left: 0; right: 0; } .ato-burger span::after { top: 6px; left: 0; right: 0; } .ato-links { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 5; flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 16px 16px; background: var(--paper); border-bottom: 1px solid var(--line); } .ato-toggle:checked ~ .ato-links { display: flex; } .ato-toggle:focus-visible ~ .ato-burger { outline: 2px solid var(--jade); } } .ato-sheet { flex: 1 0 auto; width: 100%; max-width: 1240px; margin: 0 auto; padding: 22px 20px 56px; } .ato-heading { margin: 0 0 4px; font-size: 27px; line-height: 1.15; } .ato-meta { margin: 0 0 18px; color: var(--muted); font-size: 14px; } /* The wall of previews: large tiles, about 140x187, seven to a row at the 1280 width this is measured at and fewer as the row narrows — one rule, no breakpoint, since the tile keeps its size and the row simply holds less of them. The caption sits under the photo on a jade strip, the price is a tangerine badge in the photo's own corner, and a video is a plain round dot rather than a word or a play triangle. */ .ato-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, 140px); justify-content: space-between; row-gap: 26px; column-gap: 20px; } .ato-card-link { display: block; width: 100%; text-decoration: none; color: inherit; overflow: hidden; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); } .ato-card-link:hover { box-shadow: 0 0 0 2px var(--jade); } .ato-card-photo { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; background: var(--line); } .ato-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .ato-card-price { position: absolute; top: 7px; right: 7px; padding: 3px 9px; background: var(--tangerine); color: #fff; font-size: 13px; font-weight: 800; border-radius: 999px; font-variant-numeric: tabular-nums; } /* A play sign in a tangerine badge, bottom left — a plain dot read as a status light on review, not as "video" (2026-09-30); a triangle in its own circle reads on sight, the way the big catalogues (escort.club, roksa) mark a card. */ .ato-card-video { position: absolute; bottom: 7px; left: 7px; width: 22px; height: 22px; border-radius: 50%; background: var(--tangerine); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(18, 39, 31, .3); display: flex; align-items: center; justify-content: center; } .ato-card-video::after { content: ""; margin-left: 2px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; } .ato-card-strip { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 6px 9px; background: var(--jade); color: #fff; line-height: 1.3; } .ato-card-name { font-size: 12px; font-weight: 800; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ato-card-age { font-size: 12px; opacity: .85; font-variant-numeric: tabular-nums; flex: none; } /* Places: a real multi-column list, not a grid — it reads top to bottom within a column and wraps sideways, the way a printed index does. */ .ato-places { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); } .ato-places-head { margin: 0 0 10px; font-size: 17px; } .ato-places-grid { list-style: none; margin: 0; padding: 0; columns: 190px 4; column-gap: 22px; } .ato-places-grid li { break-inside: avoid; margin-bottom: 6px; } .ato-places-grid a { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; text-decoration: none; color: var(--ink); font-size: 14px; } .ato-places-grid a:hover { color: var(--jade-deep); } .ato-places-grid b { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .ato-places-all { display: inline-block; margin-top: 10px; color: var(--jade-deep); font-weight: 700; text-decoration: none; font-size: 14px; } /* The row of pages, at the right edge of the cards above it: a bare bold number in 14px was called barely visible (operator review, 2026-09-29). No font-size of its own now — the page's own 15px carries it above the 15px floor. Every link at least 36px tall for a thumb, the current page a jade pill. 40px clears the 32px floor with room — 22px alone read as stuck to the cards (review 2026-09-29). */ .ato-pager { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 40px; } .ato-pager-step { display: inline-flex; align-items: center; min-height: 36px; box-sizing: border-box; padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; } .ato-pager-step:hover { border-color: var(--jade); color: var(--jade-deep); } .ato-pager-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .ato-pager-num { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; box-sizing: border-box; padding: 0 6px; border-radius: var(--radius-sm); text-decoration: none; } .ato-pager-num:hover { background: var(--paper); box-shadow: 0 0 0 1px var(--line); } .ato-pager-num.is-here { background: var(--jade); color: #fff; font-weight: 700; } .ato-pager-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; color: var(--muted); } .ato-about { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 72ch; } .ato-about h2 { margin: 20px 0 8px; font-size: 18px; } .ato-about h2:first-child { margin-top: 0; } .ato-qa dt { margin-top: 12px; font-weight: 700; } .ato-qa dd { margin: 2px 0 0; color: var(--muted); } /* Index of places */ .ato-index { list-style: none; margin: 0; padding: 0; columns: 200px 4; column-gap: 24px; } .ato-index li { break-inside: avoid; } .ato-index a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); text-decoration: none; } .ato-index a:hover { color: var(--jade-deep); } .ato-index b { color: var(--muted); font-variant-numeric: tabular-nums; } /* Profile */ .ato-portrait-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 12px; } .ato-portrait-head h1 { margin: 0; font-size: 29px; } .ato-portrait-head h1 span { color: var(--jade-deep); font-weight: 600; } .ato-portrait-where { color: var(--jade-deep); font-size: 14px; text-decoration: none; } .ato-gallery { margin-bottom: 26px; } .ato-track { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: var(--radius); } .ato-track > * { flex: 0 0 auto; height: 480px; width: auto; aspect-ratio: 3 / 4; object-fit: cover; scroll-snap-align: start; background: var(--line); } @media (max-width: 600px) { .ato-track { border-radius: var(--radius-sm); } .ato-track > * { height: auto; width: 84vw; } } /* A video stands as a frame, not a bare player: a grey box without a poster and black bands around a clip cut to another ratio than this 3:4 strip were both "crooked" on review (2026-09-30). */ .ato-track-video { position: relative; overflow: hidden; background: var(--ink); } .ato-track-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ato-track-poster-blank { background: linear-gradient(135deg, var(--jade-deep), var(--ink)); } .ato-track-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; background: rgba(18, 39, 31, .5); border: 3px solid var(--tangerine); display: flex; align-items: center; justify-content: center; } .ato-track-play::before { content: ""; margin-left: 6px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent var(--tangerine); } .ato-thumbs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .ato-thumbs a { display: block; position: relative; width: 56px; height: 56px; overflow: hidden; background: var(--line); border-radius: var(--radius-sm); } .ato-thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .ato-thumbs a:hover { box-shadow: 0 0 0 2px var(--jade); } .ato-thumb-film::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; } .ato-thumb-blank { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--jade-deep), var(--ink)); } /* The locked frame closing the row: blurred past recognition, under a plain shade. */ .ato-thumb-locked img { filter: blur(5px) saturate(1.3); transform: scale(1.15); } .ato-thumb-locked::after { content: ""; position: absolute; inset: 0; background: rgba(18, 39, 31, .4) no-repeat center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M17 9V7A5 5 0 0 0 7 7v2H5v13h14V9h-2zM9 7a3 3 0 0 1 6 0v2H9V7z'/%3E%3C/svg%3E"); } .ato-more { display: inline-block; margin-top: 12px; padding: 9px 18px; border-radius: var(--radius-sm); background: var(--jade); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; } .ato-more:hover { background: var(--jade-deep); } /* The player over the page: built by script on the press, sized to the clip's own ratio once its metadata arrives (see profile.html.twig), never ato-track's 3:4. */ .ato-curtain { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(18, 39, 31, .9); align-items: center; justify-content: center; padding: 20px; } .ato-curtain-shown { display: flex; } /* The pane shrinks to the video it holds: JS sizes the