/* css/fonts.css */
/* Generated by scripts/fonts/build.py; do not edit. Fonts and licences: docs/content/FONTS.md */

@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-00.7ef445c69e.woff2") format("woff2"); unicode-range: U+20-40, U+5B-60, U+7B-7E, U+B0, U+B2, U+B7, U+D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2032, U+2103, U+2116, U+2190, U+2192, U+2212, U+2661; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-01.ca8abe2d22.woff2") format("woff2"); unicode-range: U+41-5A, U+61-7A, U+D6, U+E1, U+E7, U+E9, U+ED, U+F1, U+F3, U+F6, U+F8, U+FC, U+101, U+14D; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-02.1c72b0d653.woff2") format("woff2"); unicode-range: U+3002, U+4E00, U+4E0A-4E0B, U+4E4B, U+4EAE, U+4EBA, U+4F1A, U+4F4D, U+4F4F, U+5012, U+5149, U+516C, U+5206, U+5230, U+523B, U+524D, U+5341, U+5348, U+53F0, U+540E, U+54CD, U+58F0, U+590F, U+5929, U+5934, U+5B50, U+5B57, U+5B63, U+5C0F, U+5C71, U+5E95, U+5F00, U+5FD8, U+624D, U+6389, U+63A5, U+6570, U+65E0, U+65F6, U+665A, U+6708, U+697C, U+6B63-6B64, U+6C34, U+6C99, U+6D77, U+6E56, U+6EAA, U+706B, U+706F, U+70B9, U+7684, U+76D0, U+7740, U+77F3, U+7EA2, U+7EBF, U+7ECF, U+7F18, U+81EA, U+8272, U+843D, U+884C, U+8D70, U+8DEF, U+8FC7, U+8FD1, U+8FDC, U+91CC, U+949F, U+94C1, U+96E8, U+96EA, U+9762, U+9876, U+98CE, U+9ED1, U+FF0C; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-03.33bd027bf1.woff2") format("woff2"); unicode-range: U+3001, U+300C-300D, U+4E09, U+4E0D, U+4E24, U+4E2A, U+4E2D, U+4E45, U+4E48, U+4E5D, U+4E5F, U+4E86, U+4E94, U+4EC0, U+4ECE, U+4ED6, U+4EE5, U+4EEC, U+4F0A, U+4F4E, U+4F60, U+5019, U+505A, U+505C, U+50CF, U+513F, U+5148, U+5165, U+518D, U+5199, U+51E0, U+51FA, U+521A, U+521D, U+52A8, U+5316, U+534A, U+5361, U+53BB, U+53C8, U+53D1, U+53E3, U+53E5, U+53EA, U+53F6, U+5411, U+542C, U+5468, U+548C, U+54EA, U+56DE, U+5728, U+5730, U+5757, U+57CE, U+58C1, U+591A, U+591C, U+5927, U+592A, U+597D, U+5B69, U+5B83, U+5B8C, U+5B9A, U+5BB6, U+5BF9, U+5C14, U+5C31, U+5C42, U+5C4F, U+5DF1, U+5E26, U+5E72, U+5E74, U+5EA7, U+5F20, U+5F71, U+5F80, U+5F88, U+5F97, U+5FC3, U+60F3, U+6210-6211, U+624B, U+627E, U+628A, U+62C9, U+62CD, U+62E7, U+6307, U+6362, U+6392, U+653E, U+6574, U+65AF, U+65B9, U+65C1, U+65E5, U+65E9, U+660E, U+662F, U+66FF-6700, U+6709, U+671D, U+6728, U+672A, U+672C, U+673A, U+6761, U+6765, U+676F, U+67D0, U+6837, U+6839, U+68AF, U+6B21, U+6BB5, U+6BCF, U+6BD4, U+6C14, U+6CA1, U+6E05, U+6E29, U+6EE1, U+70ED, U+7136, U+7167, U+722C, U+7247, U+73B0, U+7528, U+7535, U+753B, U+7559, U+767D-767E, U+76F4, U+770B, U+773C, U+77E5, U+79BB, U+7A7A, U+7A97, U+7AD9, U+7B2C, U+7B49, U+7B97, U+7BB1, U+7C73, U+7ED9, U+7F15, U+7F6E, U+8001, U+80CC, U+80FD, U+811A, U+8857, U+88AB, U+8981, U+89C1, U+8BA9, U+8BB0, U+8BDD, U+8BF4, U+8D77, U+8DDF, U+8EAB, U+8F66, U+8F6E, U+8FB0, U+8FB9, U+8FD8-8FD9, U+8FDB, U+904D, U+9053, U+90A3, U+90FD, U+95E8, U+95F4, U+9633, U+9694, U+987A, U+9AD8, U+9EC4, U+FF1A-FF1B; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-04.5bcfdc6628.woff2") format("woff2"); unicode-range: U+4F38, U+51B7, U+5821, U+5957, U+6298, U+6781, U+695A, U+6A2A, U+7194, U+771F, U+79CD, U+7BA1, U+7EA6, U+7EB9, U+7F57, U+8D34; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-05.ce42d302c9.woff2") format("woff2"); unicode-range: U+4F34, U+4FA7, U+53E4, U+53F7-53F8, U+56E0, U+5907, U+5F52, U+645E, U+6539, U+6559, U+6566, U+6587, U+65BD, U+65C5, U+666E, U+6843, U+6863, U+6CE8, U+6D01, U+6E14, U+6E90, U+714C, U+76EE, U+7897, U+7A9F, U+7B77, U+7F16, U+83F2, U+8BE5, U+8BED, U+9020, U+966A; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-06.599a243fd0.woff2") format("woff2"); unicode-range: U+4E03, U+5168, U+5CA9, U+5E03, U+6162, U+656C, U+6848, U+6D1E, U+6E7E, U+8BFB, U+9000; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-07.c0a184591a.woff2") format("woff2"); unicode-range: U+51B0, U+5212, U+53D8, U+5531, U+5F27, U+620F, U+677F, U+6CC9, U+7070, U+76D6, U+8336, U+84DD, U+888B, U+8C03; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-08.c6528d2361.woff2") format("woff2"); unicode-range: U+4E3E, U+4E9B, U+4F7F, U+516D, U+51B2, U+575D, U+5BFC, U+5CE1, U+5F53, U+62AC, U+679D, U+68F5, U+6CB3, U+6D41, U+6F02, U+7834, U+7B11, U+7FFB, U+81F3, U+96FE, U+9F99; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-09.816b4fe3cc.woff2") format("woff2"); unicode-range: U+4E4E, U+4E8E, U+50BB, U+5265, U+526A, U+52BF, U+5357, U+53CC, U+57AB, U+58F3, U+58F6, U+59FF, U+6233, U+624E, U+6295, U+62DB, U+6620, U+6A31, U+6B6A, U+6BCD, U+6C64, U+6D1B, U+6E21, U+6E2F, U+70E7, U+724C, U+7801, U+7B52, U+7CFB, U+7EC8, U+8054, U+867D, U+8863, U+9001, U+91CE, U+94F2, U+961F, U+FF01; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-10.04ce2d4a2d.woff2") format("woff2"); unicode-range: U+4E3A, U+508D, U+515C, U+51AC, U+585E, U+5916, U+5973, U+5CB8, U+6247, U+63D0, U+661F, U+6C60, U+751F, U+7901, U+8033, U+8BA4, U+8DB4, U+8FDE, U+964C, U+9897, U+9C7C; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-11.b3201410c5.woff2") format("woff2"); unicode-range: U+5DF2, U+5F55, U+61C2, U+6324, U+6563, U+680F, U+72D7, U+7968, U+8138, U+8282, U+9635; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-12.5e4320be90.woff2") format("woff2"); unicode-range: U+4E60, U+5185, U+52D2, U+5408, U+56F1, U+56FD, U+5E15, U+5F25, U+5FD7, U+60C5, U+60EF, U+6325, U+6390, U+63E1, U+63ED, U+64CE, U+6881, U+68B5, U+69B4, U+7076, U+70DF, U+7981, U+7BEE, U+83B2, U+8D85, U+8FE6, U+8FFD, U+914D, U+9192, U+91CA, U+95F9; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-13.f2f5798c8a.woff2") format("woff2"); unicode-range: U+4E8C, U+5403, U+5439, U+558A, U+5979, U+59E8, U+5C9B, U+5E8A, U+6240, U+6361, U+660F, U+670D, U+6B65, U+78B0, U+7D27, U+7EC4, U+7ED3, U+7FA4, U+80A1, U+8D9F, U+901F, U+91CD, U+95EE, U+9A8C, U+FF1F; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-14.11d32226e7.woff2") format("woff2"); unicode-range: U+5370, U+600E, U+63A8, U+63CF, U+683C, U+76EF, U+7B14, U+94C5, U+97F3; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-15.48f50fe0a3.woff2") format("woff2"); unicode-range: U+51F3, U+56ED, U+56F4, U+573A, U+5BA2, U+5E7F, U+5F39, U+6E38, U+8868, U+957F; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-16.1128de56b4.woff2") format("woff2"); unicode-range: U+5077, U+516B, U+51BB, U+5364, U+540D, U+5DE5, U+5E61, U+5EA6, U+6676, U+6CBF, U+6CE1, U+6F20, U+716E, U+73AF, U+76D8, U+7A7F, U+7F51, U+86CB, U+8865, U+8D3C, U+8FAB, U+96F6; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-17.9f0009eadb.woff2") format("woff2"); unicode-range: U+4E91, U+4F20, U+51FF, U+5229, U+522B, U+52A0, U+56DB, U+5723, U+5761, U+5B88, U+5CF0, U+6309, U+6807, U+7279, U+897F, U+8F6C, U+91D1, U+9634; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-18.caa17e512e.woff2") format("woff2"); unicode-range: U+5217, U+5931, U+5BFA, U+5C24, U+5DF7, U+5E02, U+5E1A, U+606F, U+626B, U+6536, U+65B0, U+684C, U+6BBF, U+6D88, U+7EA7, U+8D76, U+9636, U+963F, U+9884, U+9910, U+9A6C, U+9F50; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-19.acd4b554c4.woff2") format("woff2"); unicode-range: U+4E9A, U+514B, U+53CB, U+54FC, U+5DEE, U+6253, U+62A4, U+6311, U+63B0, U+642C, U+65F1, U+670B, U+71C3, U+7403, U+83DC, U+8425, U+8BB2, U+8C37; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-20.f0e017a133.woff2") format("woff2"); unicode-range: U+500D, U+526F, U+5343, U+5668, U+5693, U+62E2, U+66F4, U+6885, U+6B4C, U+6BEB, U+6C42, U+6CD5, U+7956, U+7A0B, U+7BDD, U+7EC6, U+80CE, U+819D, U+8BEF, U+8C22, U+8F68, U+8F86, U+9996; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-21.f2eaee7f47.woff2") format("woff2"); unicode-range: U+5708, U+5854, U+5899, U+5C11, U+5C16, U+5C40, U+5E3D, U+69FD, U+6C7D, U+70AE, U+7B1B, U+7ED5, U+8F7B, U+90AE, U+955C; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-22.abe72da40e.woff2") format("woff2"); unicode-range: U+4E58, U+4E70, U+5362, U+54C8, U+556A, U+5598, U+5766, U+5B9E, U+5DFE, U+6241, U+62BD, U+62C5, U+62D0, U+6591, U+6691, U+675F, U+6A47, U+6B47, U+6BDB, U+6F5C, U+7275, U+730E, U+7682, U+79FB, U+80A5, U+80A9, U+8180, U+8428, U+89E3, U+8BD5, U+901A, U+9047, U+9732, U+98D8; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-23.508f2b7f7f.woff2") format("woff2"); unicode-range: U+4E8B, U+4EF6, U+5173, U+5347, U+53F3, U+5947, U+5DE6, U+5E76, U+6263, U+786E, U+8DD1; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-24.924d1f5a60.woff2") format("woff2"); unicode-range: U+4E07, U+5200, U+5207, U+5385, U+53A8, U+53D7, U+53EE, U+5438, U+5802, U+5904, U+5A01, U+5E38, U+5F81, U+6015, U+611F, U+623F, U+6293, U+62DC, U+6321, U+6380, U+6643, U+6F6E, U+751C, U+75D5, U+76CF, U+793C, U+7F50, U+8155, U+8B66, U+8BA2, U+8BFE, U+9CD0; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-25.63f540d30c.woff2") format("woff2"); unicode-range: U+4EB2, U+4F30, U+51C0, U+538B, U+53A2, U+53CD, U+53E6, U+5750, U+62FF, U+6652, U+6D17, U+7530, U+7C92, U+8E0F, U+989C; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-26.4c99b1df3e.woff2") format("woff2"); unicode-range: U+4EFD, U+529E, U+540C, U+591F, U+5B58, U+5BA4, U+5E08, U+6628, U+6865, U+8239, U+89D2, U+8BA1, U+8D81, U+996D; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-27.c909566dd6.woff2") format("woff2"); unicode-range: U+4E22, U+4EF0, U+4F01, U+51C6, U+529B, U+5404, U+540A, U+5858, U+5C01, U+5C4B, U+67AF, U+67F1, U+6811, U+7126, U+718A, U+800C, U+82B1, U+88C2, U+94C3, U+9E45; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-28.209c005a0f.woff2") format("woff2"); unicode-range: U+4ECA, U+5269, U+52B2, U+533A, U+5355, U+539F, U+547C, U+5FEB, U+6446, U+65E7, U+671F, U+6B62, U+6EE8-6EE9, U+7236, U+76D2, U+77FF, U+7EF4, U+85CF, U+88C5; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-29.36330e59f5.woff2") format("woff2"); unicode-range: U+4E32, U+4EA1, U+51B3, U+5C81, U+5E2E, U+5FF5, U+622A, U+632A, U+667E, U+6B7B, U+6D3B, U+7A74, U+864E, U+8F88, U+8FDF, U+9009; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-30.f9c19e6d1c.woff2") format("woff2"); unicode-range: U+4E3B, U+4EA4, U+5171, U+5237, U+544A, U+5C45, U+610F, U+6276, U+62A5, U+6302, U+6668, U+6D3C, U+7406, U+79EF, U+7EB8, U+7EF3, U+89C9, U+8BC6, U+8BC9, U+8E72, U+90BB; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-31.96475f3993.woff2") format("woff2"); unicode-range: U+517B, U+52FA, U+5375, U+542B, U+5634, U+56E2, U+5751, U+5BDF, U+6216, U+6284, U+635E, U+677E, U+67CF, U+67F4, U+6C57, U+6CB9, U+6D47, U+6DF1, U+73CA, U+745A, U+7C89, U+7CBE, U+94FA, U+9632; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-32.fcab9760fa.woff2") format("woff2"); unicode-range: U+4F5C, U+4F69, U+5386, U+53EB, U+54E8, U+5965, U+5D16, U+5DDE, U+5F04, U+5F8B, U+603B, U+6050, U+625B, U+62B1, U+62CE, U+6495, U+64E6, U+652F, U+65AD, U+65CB, U+6653, U+6C89, U+6CF0, U+6D4E, U+6D82, U+6DFB, U+70DB, U+70E4, U+7130, U+8C01, U+8D4C, U+8F93, U+8FA9, U+8FC8, U+9676, U+9898; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-33.e39039699e.woff2") format("woff2"); unicode-range: U+4FE1, U+56FE, U+5BC4, U+5C3C, U+680B, U+73ED, U+7531, U+79D2, U+8131, U+978B; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-34.33ec48f443.woff2") format("woff2"); unicode-range: U+4E39, U+5409, U+59CB, U+5DF4, U+5FB7, U+6367, U+63AC, U+63D2, U+6797, U+6868, U+6C6A, U+6DE1, U+7011, U+731C, U+7761, U+798F; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-35.261a44bf5d.woff2") format("woff2"); unicode-range: U+4E18, U+4E1C, U+4E61, U+4F26, U+5E0C, U+5E93, U+6572, U+6717, U+671B, U+7B7E, U+7D22; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-36.f0510e97c7.woff2") format("woff2"); unicode-range: U+4E4C, U+5076, U+5192, U+5305, U+5473, U+5B89, U+5C51, U+5E73, U+638C, U+672B, U+70AD, U+786B, U+78FA, U+8E29, U+95F7, U+9759, U+9774, U+9875, U+9888, U+9F9F; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-37.8adf949e97.woff2") format("woff2"); unicode-range: U+4E92, U+5317, U+5417, U+5458, U+59C6, U+634F, U+6492, U+64AE, U+6735, U+6D6E, U+6F2B, U+704C, U+7092, U+72B9, U+745F, U+74F6, U+76F8, U+7BAD, U+80AF, U+80F3, U+817F, U+818A, U+8C6B, U+8E1D, U+8EBA, U+8FD0, U+900F, U+91CF, U+9505; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-38.509b39ea93.woff2") format("woff2"); unicode-range: U+4E66, U+4F5B, U+4FDD, U+501F, U+559D, U+59BB, U+5CE8, U+5E01, U+62C6, U+644A, U+6562, U+6746, U+679A, U+6905, U+6F14, U+739B, U+7537, U+767B, U+7709, U+786C, U+795D, U+7B3C, U+805A, U+8A8A, U+8E2E, U+9975; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-39.b777832f49.woff2") format("woff2"); unicode-range: U+4E95, U+5374, U+5494, U+6258, U+6EF4, U+7F1D, U+8BCD, U+9012, U+9F13; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-40.8cef76f464.woff2") format("woff2"); unicode-range: U+4FEE, U+51ED, U+55D3, U+5706, U+5835, U+5E86, U+5F85, U+5FFD, U+6254, U+62F3, U+6447, U+6458, U+674E, U+67B6, U+6C11, U+76D4, U+7EB3, U+8170, U+822A, U+82F1, U+8D28, U+90A6; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-41.50c32285e1.woff2") format("woff2"); unicode-range: U+4E01, U+4EFB, U+4F55, U+51CF, U+5435, U+5BE8, U+68A2, U+6C9F, U+6CBC, U+6D74, U+7231, U+73BB, U+7483, U+775B, U+7A81, U+7B0B, U+7F38, U+8584, U+8DDD, U+95EA, U+96F7, U+987F; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-42.8b81db692d.woff2") format("woff2"); unicode-range: U+300A-300B, U+4E0E, U+4E13, U+4E16, U+4E1A, U+4E34, U+4E50, U+4EA7, U+4ED8, U+4EE3, U+4F53, U+4F59, U+503C, U+5145, U+5170, U+5176, U+518C, U+51C9, U+5236, U+52A1, U+5356, U+5377, U+5398, U+539A, U+53BF, U+53C2, U+53D6, U+53EF, U+5431, U+54E5, U+5546, U+55B7, U+571F, U+5782, U+578B, U+57FA, U+5806, U+5883, U+58EB, U+590D, U+592B, U+5976, U+5982, U+5BBD, U+5BBF, U+5BC6, U+5BD2, U+5C5E, U+5C97, U+5DDD, U+5E8F, U+5E94, U+5EFA, U+5F0F, U+5F15, U+5F62, U+601D, U+6027, U+6237, U+6251, U+62D4, U+62E9, U+62FC, U+6301, U+6328, U+636E, U+63A2, U+642D, U+6545, U+659C, U+6613, U+6625, U+6682, U+6696-6697, U+6751, U+6784, U+67E5, U+6876, U+6A21, U+6B22, U+6CE5, U+6D32, U+6D45, U+6D4B, U+6DA8, U+6E7F, U+6ED1, U+7269, U+72EC, U+74E6, U+754C, U+76AE, U+7814, U+788E, U+78E8, U+795E, U+79CB, U+79D1, U+79F0, U+7A76, U+7A84, U+7A9D, U+7ACB, U+7B3A, U+7C7B, U+7CD6, U+7EAA, U+7EC7, U+7EE7, U+7EED, U+7EFF, U+7F8E, U+8005, U+810A, U+865A, U+8896, U+89C2, U+89C4, U+89C6, U+8BAE, U+8BB8, U+8BBE, U+8BC1, U+8BF7, U+8C61, U+8D25-8D26, U+8D8A, U+8DF3, U+8F6F, U+8F7D, U+8FBE, U+8FD4, U+9002, U+9057, U+90E8, U+9178, U+94FE, U+9547, U+9644, U+964D, U+9650, U+9662, U+9669, U+9675, U+968F, U+96C6, U+96D5, U+975E, U+9760, U+9886, U+989D, U+98DE, U+9999, U+9A91, U+9E23, U+FF08-FF09; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-43.8dd92c969c.woff2") format("woff2"); unicode-range: U+4E08, U+4E1D, U+4E25, U+4E30, U+4E49, U+4E71, U+4E73, U+4EAB, U+4EC5, U+4ECD, U+4EEA, U+4F0D, U+4F17, U+4F2F, U+4F46, U+4F9B, U+4FB5, U+504F, U+5174, U+5179, U+519B, U+51A5, U+51CC, U+51D1, U+51DD, U+51FB, U+523A, U+5267, U+5339, U+53CA, U+542F, U+54B8, U+559C, U+55E1, U+56FA, U+5747, U+57CB, U+5851, U+586B, U+5B66, U+5BA3, U+5BB9, U+5C04, U+5C3A, U+5C3D, U+5CED, U+5E97, U+5EF6, U+5F2F, U+5F3A, U+5F69, U+5F84, U+5F92, U+5FAE, U+6025, U+60AC, U+613F, U+6208, U+6212, U+6218, U+6279, U+6296, U+62D3, U+638F, U+63A7, U+6469, U+6478, U+649E, U+653F, U+6599, U+663E, U+666F, U+66FE, U+6743, U+6808, U+6838, U+6846, U+68AD, U+6B27, U+6BD2, U+6C27, U+6C5F, U+6CCA, U+6D2A, U+6D6A, U+6D8C, U+6E17, U+6EDA, U+7089, U+70C2, U+70EB, U+719F, U+71E5, U+7259, U+72B6, U+7334, U+738B, U+7434, U+752C, U+7532, U+7566, U+77E9, U+7802, U+78B3, U+793A, U+79DF, U+7A0D, U+7A33, U+7AD6, U+7AE0, U+7AEF, U+7B50-7B51, U+7EAC, U+7EDC, U+7EDF, U+8036, U+80F8, U+8106, U+8111, U+8150, U+822C, U+82CF, U+8349, U+8350, U+8499, U+8680, U+86A9, U+8721, U+87BA, U+8840, U+89C8, U+8D1D, U+8D2D, U+8D5B, U+8FCE, U+8FEA, U+91C7, U+9488, U+94BB, U+9519, U+9525, U+952E, U+95ED, U+9646, U+9664, U+96C5, U+9700, U+970D, U+971C, U+9752, U+9879, U+98DF, U+9986, U+9A76, U+9A7E, U+9C81, U+9E7F, U+9ECE, U+9F84; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-44.70d99d3963.woff2") format("woff2"); unicode-range: U+4E1B, U+4F11, U+4FBF, U+5047, U+50E7, U+5141, U+5177-5178, U+5219, U+521B, U+524A, U+5251, U+52B3, U+5360, U+536B, U+5371, U+5373, U+53E0, U+53F2, U+5415, U+5426, U+5428, U+5440, U+54AF, U+54C1, U+5510, U+552E, U+5580, U+560E, U+5636, U+566A, U+573E, U+5740, U+5783, U+5824, U+584C, U+5893, U+58A8, U+5915, U+5939, U+5B59, U+5B75, U+5B85, U+5B87, U+5B98, U+5B9D, U+5BF8, U+5C06, U+5C3E, U+5C94, U+5E10, U+5E45, U+5E55, U+5E9C, U+5F26, U+5F31, U+5F66, U+5FC5, U+6084, U+60A8, U+60E6, U+626D, U+62A2, U+62C7, U+62D6, U+62DF, U+62EC, U+6316, U+63E3, U+64A4, U+64CD, U+6525, U+6548, U+6551, U+6597, U+65A4, U+65CF, U+65D7, U+667A, U+66FC, U+672F, U+6790, U+679C, U+67D3, U+6821, U+68C0, U+690D, U+6A59, U+6A90, U+6B3E, U+6B66, U+6C0F, U+6C41, U+6CBB, U+6CDB, U+6CE2, U+6CF3, U+6D0B, U+6D78, U+6DB2, U+6F09, U+6F0F, U+6FD1, U+706D, U+7184, U+73A9, U+73E0, U+751A, U+7538, U+76B1, U+76C6, U+7701, U+7741, U+77ED-77EE, U+780C, U+7948, U+7977, U+79C0, U+79D8, U+79E4, U+79E9, U+7A00, U+7A46, U+7B5B, U+7C97-7C98, U+7F29, U+7F69, U+814A, U+820C, U+8212, U+8247, U+82D7, U+82E6, U+836F, U+84B8, U+86C7, U+889C, U+892A, U+89E6, U+8BBF, U+8D38-8D39, U+8DE8, U+8F70, U+8FF9, U+900A, U+9014, U+9102, U+94BE, U+95F8, U+95FB, U+9661, U+9690, U+96BE, U+97E9, U+9A7B, U+9AA8, U+9E21; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-45.19d2aef326.woff2") format("woff2"); unicode-range: U+4E14, U+4E3D, U+4E89, U+4EAC, U+4EC1, U+4ED1, U+4ED9, U+4EF7, U+4F0F, U+4F8B, U+4F9D, U+4FC3-4FC4, U+4FD7, U+50F5, U+5143-5144, U+51B5, U+51E4, U+51EA, U+5242, U+529F, U+5323, U+533B, U+535A, U+535C, U+53D4, U+53D9, U+541E, U+5427, U+5448, U+545C, U+547D, U+54A7, U+54E6, U+5507, U+552F, U+554A, U+5566, U+55E8, U+574E-574F, U+575A, U+5792, U+57A6, U+57C2-57C3, U+592E, U+5949, U+594F, U+5987, U+5A76, U+5B81, U+5BCC, U+5C1D, U+5D29, U+5E1D, U+5E7B, U+5E99, U+5F1F, U+5F7C, U+6062, U+6070, U+60CA, U+618B, U+6234, U+6267, U+626C, U+62A0, U+62E8, U+6320, U+6346, U+641C, U+643A, U+6444, U+6491, U+64AD, U+65E6, U+663C, U+6674, U+66B4, U+66F2, U+6740, U+6749, U+6750, U+675C, U+6760, U+67C4, U+6851, U+6869, U+68A6, U+68A8, U+68DA, U+68EE, U+69A8, U+69BB, U+6B96, U+6BC1, U+6C49, U+6D46, U+6DAE, U+6DCC, U+6DF7, U+6E0A, U+6E10, U+6E34, U+6E83, U+7075, U+70C8, U+722A, U+7384, U+73A0, U+7422, U+745E, U+7529, U+7565, U+756A, U+7597, U+7687, U+76D1, U+7838, U+7A23, U+7AA3, U+7AB8, U+7B93, U+7BF7, U+7CCA, U+7D2B, U+7E41, U+7EC3, U+7EDE, U+7F13, U+7F3A, U+80A2, U+8116, U+827A, U+82AF, U+83B1, U+846C, U+8568, U+85FB, U+8BBA, U+8BDE, U+8BE6, U+8BFA, U+8D24, U+8DB3, U+8E22, U+9499, U+94DC, U+9500, U+9508, U+9539, U+9645, U+9A73, U+9A7C, U+9A86, U+9E1F, U+9EBB, U+9ECF; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-46.5259283e3e.woff2") format("woff2"); unicode-range: U+4ECB, U+4ED3-4ED4, U+4EE4, U+4F1E, U+4F3D, U+4FE9, U+5021, U+503B, U+514D, U+5151, U+517C, U+519C, U+51A0, U+51FD, U+5228, U+522E, U+5256, U+5288, U+52A9, U+52D8, U+5308, U+5319, U+5389, U+53F9, U+53FC, U+5410, U+5413, U+542D, U+543B, U+5496, U+54AC, U+54BD, U+54C7, U+54D1, U+5514, U+5543, U+5561, U+5582, U+5584, U+55A7, U+5605, U+561B, U+56BC, U+57DF, U+593A, U+594B, U+5988, U+5A5A, U+5AC1, U+5AE9, U+5B64, U+5B97, U+5B99, U+5BA1, U+5BB3, U+5BC2, U+5BFB, U+5C1A, U+5C38, U+5C41, U+5C55, U+5D4C, U+5E7C-5E7D, U+5ECA, U+5ED3, U+5F02-5F03, U+5FCD, U+5FD9, U+6000-6001, U+6028, U+6094, U+6108-6109, U+61D2, U+626F, U+627F-6280, U+62AB, U+62B5, U+62C4, U+635F, U+6388, U+6401, U+641E, U+6454, U+64AC, U+64C5, U+6500, U+6512, U+653B, U+65EC, U+6670, U+6748, U+6756, U+6795, U+67A2, U+67AA, U+67EF, U+6803, U+68B0, U+783E, U+7840, U+78BE, U+78C1, U+7A20, U+7A83, U+7C4D, U+7D20, U+7EB5, U+7ED1, U+7EF5, U+7FE0, U+8003, U+8038, U+8089, U+80C6, U+80E1, U+8109, U+81F4, U+821E, U+83AB, U+83E9, U+841D, U+852C, U+866B, U+878D, U+8936, U+8A00, U+8A79, U+8BAF, U+8BD7, U+8BDB, U+8C8C, U+8D1F, U+8D23, U+8D35, U+8D60, U+8D64, U+8DC3, U+8EB2, U+8F99, U+9006, U+9010, U+9022, U+9489, U+94F6, U+9550, U+96A7, U+96CC, U+9707, U+9877, U+987B, U+9970, U+9992, U+9C8D, U+9ED4; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-400-47.46af78c25f.woff2") format("woff2"); unicode-range: U+68CD, U+68D2, U+6982, U+6A58, U+6B8B, U+6C1B, U+6C22, U+6C2F, U+6C38, U+6C50, U+6C61, U+6CBE, U+6CEA, U+6CFC, U+6D3E, U+6D9B, U+6DA9, U+6DF9, U+6E23, U+6E85, U+6EAF, U+6F06, U+6F88, U+6FA1, U+6FB3, U+6FC0, U+6FD2, U+7095, U+70B8, U+711A, U+718F, U+71AC, U+725F, U+7272, U+72AC, U+72ED, U+72FC, U+732A, U+7387, U+7389, U+74E3, U+75D2, U+7720, U+7728, U+772F, U+776B, U+7784, U+77AC, U+7816, U+7830, U+789F, U+78D5, U+793E, U+7A91, U+7ADE, U+7AF9, U+7B54, U+7B56, U+7BD3, U+7C38, U+7C9F, U+7CAE, U+7CD9, U+7CDF, U+7EAF, U+7EDD, U+7F06, U+7F2E, U+7F6A, U+7F72, U+8010, U+80A0, U+80B2, U+80DE, U+8102, U+817E, U+81C2, U+81ED, U+8200, U+820D, U+8214, U+8237, U+8258, U+82A6, U+82C7, U+82D4, U+8352, U+8361, U+836B, U+83B7, U+8471, U+85D3, U+867E, U+8712, U+873F, U+886C, U+88F9, U+8910, U+8986, U+8BA8, U+8BAD, U+8BC4, U+8C10, U+8C46, U+8D27, U+8D4F, U+8D56, U+8D62, U+8DA3, U+8DBE, U+8DEA, U+8DFA, U+8E6D, U+8F74, U+8F91, U+8FA8, U+8FBD, U+8FDD, U+8FF0, U+903B, U+907F-9080, U+914B, U+9152, U+916A, U+9274, U+94A2, U+94A5, U+94B1, U+94C0, U+9501, U+950C, U+951A, U+9614, U+9617, U+963B, U+9686, U+96B6, U+96C7, U+9769, U+987E, U+988A, U+9891, U+98A0, U+996E, U+997C, U+9A71, U+9A7F, U+9A82, U+9AB8, U+9ABC, U+9B54, U+9C9C, U+9E58, U+9ED8, U+9F20, U+9F3B, U+9FA5; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-00.b7c9749329.woff2") format("woff2"); unicode-range: U+20-40, U+5B-60, U+7B-7E, U+B0, U+B2, U+B7, U+D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2032, U+2103, U+2116, U+2190, U+2192, U+2212, U+2661; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-01.bbb2f251da.woff2") format("woff2"); unicode-range: U+41-5A, U+61-7A, U+D6, U+E1, U+E7, U+E9, U+ED, U+F1, U+F3, U+F6, U+F8, U+FC, U+101, U+14D; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-02.49298fa6bf.woff2") format("woff2"); unicode-range: U+3002, U+4E00, U+4E0A-4E0B, U+4E0D, U+4E2A, U+4E34, U+4E48, U+4E4B, U+4E86, U+4E8B, U+4E94, U+4EBA, U+4EC0, U+4EE5, U+4EF6, U+4EFD, U+4F0A, U+4F1A, U+4F60, U+505A, U+505C, U+5149, U+5165, U+5206, U+5230, U+523B, U+524D, U+5348, U+5361, U+53E3, U+53EA, U+53F6, U+540E, U+54EA, U+56DE, U+5728, U+591A, U+591C, U+5929, U+5934, U+5B50, U+5C0F, U+5C71, U+5C94, U+5E26, U+5F00, U+624B, U+624D, U+62C9, U+6570, U+65F6, U+66FF-6700, U+6708, U+6765, U+6837, U+6B63-6B64, U+6C34, U+6C99, U+6CA1, U+6D77, U+70B9, U+7559, U+767E, U+7684, U+7740, U+7EBF, U+7FFB, U+80CC, U+8272, U+8282, U+843D, U+8D70, U+8DEF, U+8EAB, U+8F66, U+8FB9, U+8FC7, U+8FD8, U+9009, U+90A3, U+91CC, U+949F, U+95E8, U+96EA, U+9762, U+FF0C, U+FF1A, U+FF1F; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-03.4b9c5db9aa.woff2") format("woff2"); unicode-range: U+5F20, U+662F, U+683C, U+7B49; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-04.2563c9b233.woff2") format("woff2"); unicode-range: U+4E39, U+4E5D, U+4E91, U+4EAE, U+5370, U+5403, U+5409, U+5BE8, U+5BFA, U+5DF4, U+5FC5, U+6574, U+6709, U+6797, U+6C9F, U+6E7E, U+6EAA, U+7AD9, U+82B1, U+8868, U+8D76; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-05.cd40b4270a.woff2") format("woff2"); unicode-range: U+4E8C, U+53A2, U+5730, U+60F3, U+672B, U+73ED, U+771F, U+7B2C, U+9A6C; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-06.7e965b87ee.woff2") format("woff2"); unicode-range: U+4EA1, U+4F26, U+585E, U+5B88, U+5E74, U+632A, U+672F, U+679D, U+6C6A, U+6E38, U+70EB, U+7D22, U+95ED, U+9C7C, U+9E23; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-07.aae4b68484.woff2") format("woff2"); unicode-range: U+4E2D, U+5148, U+5B83, U+5FEB, U+628A, U+6839, U+68AF, U+770B; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-08.8135457337.woff2") format("woff2"); unicode-range: U+51FA, U+53BB, U+5927, U+661F, U+6B7B, U+8BDD, U+8BF4, U+8C37; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-09.1109ad3a2c.woff2") format("woff2"); unicode-range: U+4E4C, U+5A01, U+5C3C, U+660F, U+6BCD, U+6EE8, U+7236, U+83F2, U+89D2, U+8FD9, U+957F, U+9EC4; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-10.c477c05d60.woff2") format("woff2"); unicode-range: U+6536, U+7968, U+8D77, U+8DDF, U+97F3; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-11.b4b3ecce4f.woff2") format("woff2"); unicode-range: U+4ECE, U+6876, U+6E29, U+7801, U+7EF4, U+8BA1; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-12.dcc59642a3.woff2") format("woff2"); unicode-range: U+4F20, U+53E4-53E5, U+542C, U+5973, U+6808, U+68A2, U+7089, U+7ED9, U+8C01, U+9053; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-13.146f46b30c.woff2") format("woff2"); unicode-range: U+4E24, U+51B2, U+53F7, U+58F6, U+5C42, U+5CE1, U+5CF0, U+6C64, U+798F, U+7B52, U+7C73, U+80F8, U+96FE; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-14.aab10aa604.woff2") format("woff2"); unicode-range: U+529B, U+5364, U+54CD, U+58F0, U+5C01, U+5C4B, U+5E61, U+5FB7, U+6247, U+6389, U+63A5, U+665A, U+677F, U+6C7D, U+70AE, U+718A, U+7A7F, U+7B1B, U+7ECF, U+7ED3, U+800C, U+8336, U+8865, U+8FAB, U+8FDB, U+94C3; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-15.f41901b291.woff2") format("woff2"); unicode-range: U+53D1, U+5BB6, U+5DF7, U+5F80, U+65E5, U+724C, U+8F6C; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-16.4ae6b79615.woff2") format("woff2"); unicode-range: U+518D, U+51E0, U+522B, U+58F3, U+5C31, U+6309, U+70E7, U+8D1D, U+9505, U+996D; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-17.8f8cabba49.woff2") format("woff2"); unicode-range: U+514B, U+53CA, U+53CC, U+5916, U+5B9E, U+5F97, U+6233, U+624E, U+6CB3, U+6D1B, U+6E2F, U+9A8C; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-18.6926b5a54e.woff2") format("woff2"); unicode-range: U+4F01, U+53D8, U+5404, U+540A, U+5C40, U+5DF1, U+5F27, U+65C5, U+6676, U+6843, U+6E90, U+7070, U+7126, U+753B, U+76D8, U+7F51, U+81EA, U+888B, U+8C03, U+90AE, U+9E45; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-19.8f5f517200.woff2") format("woff2"); unicode-range: U+4EF0, U+4F4F, U+5012, U+516B-516C, U+51B0, U+51BB, U+51C6, U+5341, U+5531, U+56ED, U+5854, U+5858, U+5C16, U+5DE5, U+5E3D, U+5E95, U+5EA6, U+627E, U+67AF, U+6811, U+6CE1, U+6E56, U+6F20, U+706F, U+76D0, U+77F3, U+7A97, U+7B97, U+8981, U+955C, U+96F6; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-20.529d488f78.woff2") format("woff2"); unicode-range: U+516D, U+573A, U+58C1, U+5E72, U+5E7F, U+6325, U+6545, U+671D, U+673A, U+6BCF, U+739B, U+78B0, U+7BEE, U+8349, U+88AB, U+8BB2, U+963F; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-21.a591b1b5ce.woff2") format("woff2"); unicode-range: U+4E09, U+5269, U+5B8C, U+5C14, U+5C24, U+5F71, U+65AF, U+6728, U+6761, U+7528, U+7F29, U+811A, U+8239; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-22.419763c342.woff2") format("woff2"); unicode-range: U+51C0, U+5411, U+5E8A, U+6865, U+68B5, U+6D41, U+722C, U+77E5, U+7EA7, U+7F1D, U+94FE; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-23.33caafe47b.woff2") format("woff2"); unicode-range: U+57CE, U+592A, U+59C6, U+6717, U+6781, U+7279, U+745F, U+7F57, U+9633; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-24.c2cd7216da.woff2") format("woff2"); unicode-range: U+4E18, U+51C9, U+5207, U+5343, U+5385, U+5931, U+5EA7, U+6276, U+65B9, U+6B4C, U+6BD4, U+6CBC, U+6D88, U+751C, U+81F3, U+8BA2, U+9006, U+9910, U+9996; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-25.e081d212b1.woff2") format("woff2"); unicode-range: U+4F69, U+513F, U+5899, U+5957, U+5B9D, U+5D16, U+5E93, U+6C14, U+79BB, U+987A; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-26.73b68c2913.woff2") format("woff2"); unicode-range: U+5077, U+53F0, U+540D, U+5B57, U+620F, U+65E0, U+67F1, U+69FD, U+6CBF, U+6CC9, U+716E, U+86CB, U+8D3C, U+98CE, U+9ED1; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-27.15cf7419a2.woff2") format("woff2"); unicode-range: U+4F4D, U+534A, U+5708, U+590F, U+697C, U+706B, U+73AF, U+7EA2, U+84DD, U+88C2, U+8BFB, U+94C1, U+96E8, U+9876; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-28.86ab555a3c.woff2") format("woff2"); unicode-range: U+52B3, U+53C2, U+5CA9, U+6566, U+656C, U+65BD, U+666E, U+675F, U+6CD5, U+6D1E, U+6DA8, U+6F6E, U+714C, U+7194, U+7247, U+752C, U+76EE, U+7B14, U+7F16, U+85CF, U+89C2, U+9020, U+970D, U+9A91, U+9AD8; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-29.3e38de96cd.woff2") format("woff2"); unicode-range: U+300C-300D, U+4E1C, U+5199, U+571F, U+5B58, U+5FD8, U+5FFD, U+6807, U+7B7E, U+7F18, U+884C, U+897F, U+8FD1, U+8FDC, U+9022; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-30.7b882ecd65.woff2") format("woff2"); unicode-range: U+5185, U+5356, U+56FD, U+59BB, U+5B9A, U+62C6, U+63A8, U+6572, U+65E9, U+79DF, U+7B3C, U+901F, U+914D; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-31.c2f3866a94.woff2") format("woff2"); unicode-range: U+4E16, U+4E45, U+4EEC, U+51FD, U+5362, U+5598, U+5E38, U+5F85, U+6BB5, U+72D7, U+754C, U+8428, U+8BF7, U+901A, U+9080, U+975E; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-32.3130eaa1ed.woff2") format("woff2"); unicode-range: U+4E32, U+5468, U+5751, U+5BDF, U+5CE8, U+6311, U+6563, U+6597, U+6746, U+680F, U+6B65, U+6C57, U+6D47, U+7709, U+7BA1, U+7F6E, U+8001, U+8BA9; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-33.7c7c7ff7e0.woff2") format("woff2"); unicode-range: U+4E95, U+4E9A, U+521A, U+5316, U+5766, U+5947, U+5B63, U+5BF9, U+5E15, U+65F1, U+7136, U+767B, U+7F15, U+8857; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-34.96d3e628e7.woff2") format("woff2"); unicode-range: U+51FF, U+5757, U+5802, U+6212, U+6216, U+6307, U+6F02, U+75D5, U+77FF, U+793C, U+8005, U+91D1; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-35.e4cba83db7.woff2") format("woff2"); unicode-range: U+4FDD, U+5965, U+5F15, U+64CE, U+6CF0, U+76D6, U+7EDE, U+7EFF, U+89C1, U+8FC8, U+9875; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-36.598a49ff31.woff2") format("woff2"); unicode-range: U+62A4, U+653E, U+6848, U+6EE9, U+7130, U+7EB3, U+7EC4, U+7F6A, U+82F1, U+8584, U+8BCD, U+8FA9, U+90A6, U+9525; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-37.9a56acbddf.woff2") format("woff2"); unicode-range: U+4E03, U+5229, U+52A0, U+56DB, U+5761, U+62DC, U+6390, U+65B0, U+706D; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-38.93ca62c696.woff2") format("woff2"); unicode-range: U+59CB, U+600E, U+6253, U+6302, U+659C, U+677E, U+7531, U+79CD, U+7A74, U+864E, U+8840, U+8FD0, U+9694, U+989C; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-39.f74e557962.woff2") format("woff2"); unicode-range: U+4E01, U+5173, U+5347, U+542B, U+5821, U+5DEE, U+62A5, U+7231, U+73CA, U+7403, U+745A, U+7901, U+79D2, U+7C89, U+8BB0; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-40.fee94a619a.woff2") format("woff2"); unicode-range: U+5019, U+54E8, U+56FE, U+5706, U+575D, U+5C45, U+5C9B, U+5DDE, U+5E1A, U+5E86, U+5E8F, U+626B, U+62FF, U+674E, U+6A31, U+6D4E, U+7EB8, U+8170, U+8D28, U+90BB, U+91CD, U+95EE, U+9884; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-41.61aec26f82.woff2") format("woff2"); unicode-range: U+5192, U+51F3, U+642C, U+671F, U+6C60, U+7EF3, U+8FDE, U+9012; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-42.6d97f7ea22.woff2") format("woff2"); unicode-range: U+3001, U+4E07, U+4E0E, U+4E3A-4E3B, U+4E50, U+4E5F, U+4E66, U+4E8E, U+4E9B, U+4EA4, U+4EA7, U+4ECA, U+4ED6, U+4EE3, U+4F38, U+4F4E, U+4F53, U+4F5B-4F5C, U+4FE1, U+4FEE, U+503C, U+50CF, U+5145, U+5168, U+5176, U+51AC, U+51B7, U+5217, U+52A1, U+52A8, U+5305, U+5317, U+533A, U+5355, U+5357, U+538B, U+5398, U+539F, U+53C8, U+53D6, U+53EB, U+53EF, U+5408, U+540C, U+5439, U+5458, U+548C, U+558A, U+56E0, U+56F4, U+5723, U+5750, U+5904, U+5907, U+5979, U+597D, U+5B69, U+5B89, U+5BA2, U+5BBD, U+5BFC, U+5C11, U+5CB8, U+5DF2, U+5E02-5E03, U+5E73, U+5EFA, U+5F0F, U+5F53, U+5F55, U+5F62, U+5F88, U+5FC3, U+610F, U+6162, U+6210-6211, U+6237, U+6240, U+62CD, U+6362, U+6392, U+652F, U+6559, U+6587, U+65C1, U+660E, U+6668, U+670D, U+672C, U+6735, U+676F, U+6784, U+67D0, U+6B21, U+6BBF, U+6C89, U+6CE8, U+6D32, U+6D4B, U+6D6E, U+6DE1, U+6DF1, U+6E05, U+6EE1, U+70ED, U+7167, U+7269, U+73B0, U+7406, U+751F, U+7535, U+767D, U+76CF, U+76F4, U+76F8, U+773C, U+786E, U+79EF, U+7A0B, U+7A7A, U+7B11, U+7B3A, U+7C7B, U+7EA6, U+7EAA, U+7EC6, U+7EED, U+80FD, U+865A, U+88C5, U+8BA4, U+8BBE, U+8BD5, U+8D26, U+8D34, U+8D8A, U+8F6E, U+8F7B, U+8FB0, U+9000-9001, U+904D, U+9057, U+90E8, U+90FD, U+91CF, U+95F4, U+9635-9636, U+9897, U+98DE, U+9999, U+9F99, U+FF08-FF09, U+FF1B; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-43.e2d49037ef.woff2") format("woff2"); unicode-range: U+300A-300B, U+4E13, U+4E3E, U+4E4E, U+4E70, U+4ED8, U+4EFB, U+4F59, U+4FA7, U+501F, U+508D, U+515C, U+5170-5171, U+518C, U+51B3, U+5212, U+5236, U+5374-5375, U+5377, U+539A, U+53BF, U+53D7, U+53E6, U+53F3, U+5431, U+5438, U+544A, U+5473, U+547C, U+54E5, U+55B7, U+5668, U+578B, U+57FA, U+590D, U+592B, U+5982, U+5BBF, U+5BC6, U+5BD2, U+5C5E, U+5DDD, U+5DE6, U+5E01, U+5E08, U+5E76, U+5FF5, U+601D, U+60C5, U+611F, U+61C2, U+622A, U+623F, U+6258, U+6263, U+6298, U+62AC, U+62D4, U+62E7, U+62E9, U+62FC, U+6301, U+6321, U+6324, U+636E, U+63A2, U+63D0, U+63D2, U+642D, U+6446, U+644A, U+6539, U+65AD, U+6625, U+6643, U+6652, U+6682, U+6697, U+66F4, U+6751, U+67E5, U+6A2A, U+6A47, U+6B6A, U+6D3B-6D3C, U+6D45, U+6E7F, U+6ED1, U+6F14, U+70DB, U+70DF, U+74E6, U+7530, U+76EF, U+7814, U+786B-786C, U+788E, U+78E8, U+78FA, U+795E, U+79CB, U+79D1, U+79F0, U+7A76, U+7A84, U+7A9F, U+7ACB, U+7BB1, U+7CD6, U+7CFB, U+7D27, U+7EC7, U+7ED5, U+7EE7, U+7F8E, U+7FA4, U+8033, U+8054, U+80A9, U+8138, U+83DC, U+8425, U+8863, U+89C4, U+89E3, U+8BAE, U+8BB8, U+8BC1, U+8BC9, U+8BED, U+8C22, U+8C61, U+8E29, U+8E72, U+8F7D, U+8F93, U+8FBE, U+9002, U+900F, U+9547, U+961F, U+9644, U+964D, U+9650, U+9662, U+9669, U+968F, U+96C6, U+9759, U+9760, U+978B, U+9886, U+9898, U+989D, U+9F13; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-44.7761005062.woff2") format("woff2"); unicode-range: U+4E1A, U+4E25, U+4E58, U+4E92, U+4EAB, U+4EB2, U+4F30, U+4F46, U+4F55, U+4F7F, U+4F9B, U+4FB5, U+504F, U+519B, U+51CC, U+51CF, U+51D1, U+51DD, U+51FB, U+521D, U+5237, U+5267, U+526F, U+529E, U+52BF, U+52D2, U+52FA, U+53F8, U+5494, U+54C8, U+5546, U+559C-559D, U+55E1, U+5634, U+56E2, U+56F1, U+5747, U+5782, U+5806, U+586B, U+5883, U+58EB, U+591F, U+5976, U+59E8, U+5B66, U+5BA4, U+5BC4, U+5C3D, U+5C81, U+5C97, U+5DFE, U+5E0C, U+5E2E, U+5E94, U+5F2F, U+5F3A, U+5F69, U+6025, U+6027, U+606F, U+6251, U+6296, U+62C5, U+62CE, U+6328, U+638C, U+63A7, U+64E6, U+653F, U+65E7, U+6613, U+666F, U+667E, U+6696, U+671B, U+672A, U+67B6, U+680B, U+6846, U+684C, U+68F5, U+695A, U+6A21, U+6B22, U+6B27, U+6B62, U+6BDB, U+6BEB, U+6C42, U+6C5F, U+6CE5, U+6D17, U+6D8C, U+6EF4, U+6F5C, U+7011, U+704C, U+70C2, U+70E4, U+71C3, U+7259, U+72EC, U+74F6, U+7537, U+76AE, U+775B, U+7802, U+7834, U+78B3, U+79FB, U+7A9D, U+7B51, U+7C92, U+7CBE, U+7EAC, U+7EDF, U+80A1, U+810A, U+822C, U+82CF, U+83B2, U+86A9, U+8896, U+89C6, U+89C9, U+8BC6, U+8BEF, U+8D25, U+8D85, U+8DD1, U+8DF3, U+8EBA, U+8F68, U+8F6F, U+8FCE, U+8FD4, U+8FEA, U+9178, U+94C5, U+94FA, U+9519, U+952E, U+95F9, U+9632, U+964C, U+9664, U+9675-9676, U+96C5, U+96D5, U+971C, U+9732, U+9752, U+9774, U+9A76, U+9A7E, U+9F50, U+FF01; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-45.6fab1d766d.woff2") format("woff2"); unicode-range: U+4E08, U+4E1D, U+4E22, U+4E30, U+4E49, U+4E60-4E61, U+4E71, U+4E73, U+4EC5, U+4ECD, U+4EEA, U+4F0D, U+4F17, U+4F2F, U+4F34, U+5076, U+5174, U+5179, U+517B, U+51A5, U+523A, U+5251, U+5265, U+5339, U+53CD, U+542F, U+54B8, U+56FA, U+57CB, U+5835, U+5851, U+59FF, U+5BA3, U+5BB9, U+5C04, U+5C3A, U+5C4F, U+5CED, U+5E97, U+5EF6, U+5F04, U+5F25, U+5F84, U+5F92, U+5FAE, U+5FD7, U+603B, U+6050, U+60AC, U+613F, U+6208, U+6218, U+6279, U+6284, U+6293, U+62D3, U+6361, U+6367, U+638F, U+63B0, U+6447, U+6458, U+6469, U+6478, U+6495, U+649E, U+6599, U+6628, U+663E, U+66FE, U+6743, U+679A, U+67CF, U+6838, U+6885, U+68AD, U+6905, U+69B4, U+6B47, U+6BD2, U+6C11, U+6C27, U+6CCA, U+6D2A, U+6D6A, U+6E17, U+6EDA, U+6F2B, U+70AD, U+719F, U+71E5, U+72B6, U+72B9, U+730E, U+7334, U+738B, U+73BB, U+7434, U+7483, U+7532, U+7566, U+76D2, U+7761, U+77E9, U+793A, U+795D, U+7981, U+7A0D, U+7A33, U+7A81, U+7AD6, U+7AE0, U+7AEF, U+7B50, U+7EB9, U+7EDC, U+8036, U+80A5, U+8106, U+8111, U+8150, U+817F, U+819D, U+822A, U+8350, U+8499, U+8680, U+8721, U+87BA, U+89C8, U+8B66, U+8BE5, U+8D2D, U+8D5B, U+8D9F, U+8DB4, U+8DDD, U+8E1D, U+8F86, U+8FFD, U+91C7, U+91CA, U+91CE, U+9488, U+94BB, U+94F2, U+95F7, U+9634, U+9646, U+9700, U+9879, U+987F, U+98D8, U+98DF, U+9986, U+9C81, U+9E7F, U+9ECE, U+9F84; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-46.fae261371e.woff2") format("woff2"); unicode-range: U+4E1B, U+4F11, U+4FBF, U+5047, U+50E7, U+5141, U+5177-5178, U+5219, U+521B, U+524A, U+526A, U+52B2, U+5360, U+536B, U+5371, U+5373, U+5386, U+53A8, U+53CB, U+53E0, U+53F2, U+5415, U+5417, U+5426, U+5428, U+5440, U+54AF, U+54C1, U+54FC, U+5510, U+552E, U+5580, U+55D3, U+560E, U+5636, U+566A, U+5693, U+573E, U+5740, U+5783, U+5824, U+584C, U+5893, U+58A8, U+5915, U+5939, U+5B59, U+5B75, U+5B85, U+5B87, U+5B98, U+5BF8, U+5C06, U+5C3E, U+5E10, U+5E45, U+5E55, U+5E9C, U+5F26, U+5F31, U+5F66, U+6015, U+6084, U+60A8, U+60E6, U+6241, U+626D, U+62A2, U+62B1, U+62C7, U+62D0, U+62D6, U+62DB, U+62DF, U+62E2, U+62EC, U+6316, U+63CF, U+63E3, U+6492, U+64A4, U+64CD, U+6525, U+6548, U+6551, U+65A4, U+65CF, U+65D7, U+66FC, U+6790, U+67D3, U+6821, U+68C0, U+6A59, U+6A90, U+6B66, U+6C41, U+6CE2, U+6D0B, U+6D74, U+6E14, U+6F09, U+6F0F, U+6FD1, U+7538, U+7701, U+7897, U+79D8, U+79E9, U+7A46, U+7B0B, U+7B5B, U+7BDD, U+7C97-7C98, U+7EC8, U+7F69, U+80CE, U+814A, U+8155, U+8180, U+820C, U+8212, U+8247, U+82D7, U+82E6, U+836F, U+84B8, U+86C7, U+889C, U+892A, U+89E6, U+8BBF, U+8C6B, U+8D38-8D39, U+8D81, U+8DE8, U+8F70, U+8F88, U+8FF9, U+900A, U+9014, U+9102, U+9192, U+94BE, U+95EA, U+95F8, U+95FB, U+9661, U+966A, U+9690, U+96BE, U+97E9, U+9A7B, U+9AA8, U+9CD0, U+9E21, U+9F9F; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-47.7f81467b34.woff2") format("woff2"); unicode-range: U+4E14, U+4E3D, U+4E89, U+4EAC, U+4EC1, U+4ED1, U+4ED9, U+4EF7, U+4F0F, U+4F8B, U+4F9D, U+4FC3-4FC4, U+4FD7, U+500D, U+50F5, U+5143-5144, U+51B5, U+51E4, U+51EA, U+51ED, U+5200, U+5242, U+529F, U+5323, U+533B, U+535A, U+535C, U+53D4, U+53D9, U+53EE, U+541E, U+5427, U+5435, U+5448, U+545C, U+547D, U+54A7, U+54E6, U+5507, U+552F, U+554A, U+5566, U+55E8, U+574E-574F, U+575A, U+5792, U+57A6, U+57C2-57C3, U+592E, U+5949, U+594F, U+5987, U+5A76, U+5B81, U+5BCC, U+5C1D, U+5C51, U+5D29, U+5E1D, U+5E7B, U+5E99, U+5F1F, U+5F39, U+5F52, U+5F7C, U+5F8B, U+6062, U+6070, U+60CA, U+60EF, U+618B, U+6234, U+6254, U+6267, U+626C, U+6295, U+62A0, U+667A, U+670B, U+679C, U+67F4, U+6868, U+6881, U+690D, U+6B3E, U+6C0F, U+6CBB, U+6CDB, U+6CF3, U+6D78, U+6DB2, U+6DFB, U+6E21, U+7184, U+7275, U+73A9, U+73E0, U+751A, U+7682, U+76B1, U+76C6, U+76D4, U+7741, U+77ED-77EE, U+780C, U+7948, U+7977, U+79C0, U+79E4, U+7A00, U+7A23, U+7AA3, U+7AB8, U+7B93, U+7BAD, U+7BF7, U+7CCA, U+7D2B, U+7E41, U+7EC3, U+7F13, U+7F3A, U+80A2, U+80F3, U+8116, U+818A, U+827A, U+82AF, U+83B1, U+846C, U+8568, U+85FB, U+8BBA, U+8BDE, U+8BE6, U+8BFA, U+8D24, U+8DB3, U+8E22, U+8FDF, U+8FE6, U+9499, U+94DC, U+9500, U+9508, U+9539, U+9645, U+96F7, U+9888, U+9A73, U+9A7C, U+9A86, U+9E1F, U+9EBB, U+9ECF; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-48.e6a4df9af0.woff2") format("woff2"); unicode-range: U+4ECB, U+4ED3-4ED4, U+4EE4, U+4F1E, U+4F3D, U+4FE9, U+5021, U+503B, U+50BB, U+514D, U+5151, U+517C, U+519C, U+51A0, U+5228, U+522E, U+5256, U+5288, U+52A9, U+52D8, U+5308, U+5319, U+5389, U+53F9, U+53FC, U+5410, U+5413, U+542D, U+543B, U+5496, U+54AC, U+54BD, U+62BD, U+62E8, U+62F3, U+6320, U+6346, U+635E, U+6380, U+63AC, U+63E1, U+63ED, U+641C, U+643A, U+6444, U+6491, U+64AD-64AE, U+65E6, U+663C, U+6674, U+66B4, U+66F2, U+6740, U+6749, U+6750, U+675C, U+6760, U+67C4, U+6851, U+6869, U+68A6, U+68A8, U+68DA, U+68EE, U+69A8, U+69BB, U+6B96, U+6BC1, U+6C49, U+6D01, U+6D46, U+6D82, U+6DAE, U+6DCC, U+6DF7, U+6E0A, U+6E10, U+6E34, U+6E83, U+7075, U+70C8, U+722A, U+731C, U+7384, U+73A0, U+7422, U+745E, U+7529, U+7565, U+756A, U+7597, U+7687, U+76D1, U+7838, U+783E, U+7840, U+78BE, U+78C1, U+7956, U+7A20, U+7A83, U+7C4D, U+7D20, U+7EB5, U+7ED1, U+7EF5, U+7F38, U+7F50, U+7FE0, U+8003, U+8038, U+805A, U+8089, U+80AF, U+80C6, U+80E1, U+8109, U+8131, U+81F4, U+821E, U+83AB, U+83E9, U+841D, U+852C, U+866B, U+878D, U+8936, U+8A00, U+8A79, U+8BAF, U+8BD7, U+8BDB, U+8BFE, U+8C8C, U+8D1F, U+8D23, U+8D35, U+8D4C, U+8D60, U+8D64, U+8DC3, U+8E0F, U+8EB2, U+8F99, U+9010, U+9489, U+94F6, U+9550, U+96A7, U+96CC, U+9707, U+9877, U+987B, U+9970, U+9975, U+9992, U+9C8D, U+9ED4; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-49.1322031688.woff2") format("woff2"); unicode-range: U+54C7, U+54D1, U+5514, U+5543, U+5561, U+556A, U+5582, U+5584, U+55A7, U+5605, U+561B, U+56BC, U+57AB, U+57DF, U+593A, U+594B, U+5988, U+5A5A, U+5AC1, U+5AE9, U+5B64, U+5B97, U+5B99, U+5BA1, U+5BB3, U+5BC2, U+5BFB, U+5C1A, U+5C38, U+5C41, U+5C55, U+5D4C, U+5E7C-5E7D, U+5ECA, U+5ED3, U+5F02-5F03, U+5F81, U+5FCD, U+5FD9, U+6000-6001, U+6028, U+6094, U+6108-6109, U+61D2, U+625B, U+626F, U+627F-6280, U+62AB, U+62B5, U+62C4, U+634F, U+635F, U+6388, U+6401, U+641E, U+6454, U+645E, U+64AC, U+64C5, U+6500, U+6512, U+653B, U+6562, U+6591, U+65CB, U+65EC, U+6620, U+6653, U+6670, U+6691, U+6748, U+6756, U+6795, U+67A2, U+67AA, U+67EF, U+6803, U+6863, U+68B0, U+68CD, U+68D2, U+6982, U+6A58, U+6B8B, U+6C1B, U+6C22, U+6C2F, U+6C38, U+6C50, U+6C61, U+6CB9, U+6CBE, U+6CEA, U+6CFC, U+6D3E, U+6D9B, U+6DA9, U+6DF9, U+6E23, U+6E85, U+6EAF, U+6F06, U+6F88, U+6FA1, U+6FB3, U+6FC0, U+6FD2, U+7076, U+7092, U+7095, U+70B8, U+711A, U+718F, U+71AC, U+725F, U+7272, U+72AC, U+72ED, U+72FC, U+732A, U+7387, U+7389, U+74E3, U+75D2, U+7720, U+7728, U+772F, U+776B, U+7784, U+77AC, U+7816, U+7830, U+789F, U+78D5, U+793E, U+7A91, U+7ADE, U+7AF9, U+7B54, U+7B56, U+7B77, U+7BD3, U+7C38, U+7C9F, U+7CAE, U+7CD9, U+7CDF, U+7EAF, U+7EDD, U+7F06, U+7F2E, U+7F72, U+8010, U+80A0, U+80B2; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-700-50.db0d44e728.woff2") format("woff2"); unicode-range: U+80DE, U+8102, U+817E, U+81C2, U+81ED, U+8200, U+820D, U+8214, U+8237, U+8258, U+82A6, U+82C7, U+82D4, U+8352, U+8361, U+836B, U+83B7, U+8471, U+85D3, U+867D-867E, U+8712, U+873F, U+886C, U+88F9, U+8910, U+8986, U+8A8A, U+8BA8, U+8BAD, U+8BC4, U+8C10, U+8C46, U+8D27, U+8D4F, U+8D56, U+8D62, U+8DA3, U+8DBE, U+8DEA, U+8DFA, U+8E2E, U+8E6D, U+8F74, U+8F91, U+8FA8, U+8FBD, U+8FDD, U+8FF0, U+903B, U+9047, U+907F, U+914B, U+9152, U+916A, U+9274, U+94A2, U+94A5, U+94B1, U+94C0, U+9501, U+950C, U+951A, U+9614, U+9617, U+963B, U+9686, U+96B6, U+96C7, U+9769, U+987E, U+988A, U+9891, U+98A0, U+996E, U+997C, U+9A71, U+9A7F, U+9A82, U+9AB8, U+9ABC, U+9B54, U+9C9C, U+9E58, U+9ED8, U+9F20, U+9F3B, U+9FA5; ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }

@font-face { font-family: "Story Serif Local"; font-weight: 700; src: local("Songti SC Bold"), local("STSongti-SC-Bold"), local("Noto Serif SC Bold"), local("NotoSerifSC-Bold"), local("Noto Serif CJK SC Bold"), local("Source Han Serif SC Bold"), local("SourceHanSerifSC-Bold"); ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Story Serif Local"; font-weight: 400; src: local("Songti SC Regular"), local("STSongti-SC-Regular"), local("Noto Serif SC"), local("NotoSerifSC-Regular"), local("Noto Serif CJK SC"), local("Source Han Serif SC"), local("SourceHanSerifSC-Regular"); ascent-override: 115.1%; descent-override: 28.6%; line-gap-override: 0%; }

@font-face { font-family: "Story Serif Latin"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/assets/fonts/story-serif-latin-400.8ac03cd66c.woff2") format("woff2"); unicode-range: U+20-7E, U+B0, U+B2, U+B7, U+D6-D7, U+E1, U+E7, U+E9, U+ED, U+F1, U+F3, U+F6, U+F8, U+FC, U+101, U+11F, U+14D, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2032, U+2116, U+2212; }
@font-face { font-family: "Story Serif Latin"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/assets/fonts/story-serif-latin-700.fc6385aa1b.woff2") format("woff2"); unicode-range: U+20-7E, U+B0, U+B2, U+B7, U+D6-D7, U+E1, U+E7, U+E9, U+ED, U+F1, U+F3, U+F6, U+F8, U+FC, U+101, U+11F, U+14D, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2032, U+2116, U+2212; }
@font-face { font-family: "Story Serif Latin Fallback"; font-weight: 400; src: local("Georgia"); size-adjust: 92.22%; ascent-override: 79.70%; descent-override: 28.74%; line-gap-override: 0.00%; }
@font-face { font-family: "Story Serif Latin Fallback"; font-weight: 700; src: local("Georgia Bold"), local("Georgia-Bold"); size-adjust: 89.90%; ascent-override: 81.76%; descent-override: 29.48%; line-gap-override: 0.00%; }

/* css/tokens.css */
/* =============================================================
   DESIGN TOKENS — single source of truth (DDD: docs/ui-components/DDD-spec.md §6)
   Direction "灯笼夜游 / Lantern Night": the UI is night, light falls only on
   what you can act on.

   Role rules (do not repurpose):
   - --color-action*  primary action, selected state, focus ring. Never decoration.
   - --color-mood*    mood keywords (#孤独) only.
   - --color-on-media text placed over photography, in both themes.
   ============================================================= */

/* Story serif: self-hosted subsets of Noto Serif SC and Newsreader (web/css/fonts.css, built by
   scripts/fonts/build.py; served from this site, so it works behind the GFW). Characters outside the
   subset (what travellers write) fall to a local Song face, then to the UI sans, never a synthetic bold. */

:root {
  /* --- Typography --- */
  --font-ui: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-story: "Story Serif", "Story Serif Local", var(--font-ui);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.8125rem;  /* 13 */
  --text-base: 0.875rem;   /* 14 */
  --text-md:   1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.375rem;   /* 22 */
  --text-2xl:  1.75rem;    /* 28 */
  --text-3xl:  2.25rem;    /* 36 */
  --text-4xl:  3rem;       /* 48 */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-prose: 1.85;

  /* --- Spacing (4px base) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* --- Layout --- */
  --nav-h: 64px;
  --container: 1200px;
  --container-narrow: 760px;

  /* --- Radius --- */
  --radius-control: 10px;
  --radius-card: 14px;
  --radius-sheet: 20px;
  --radius-pill: 999px;

  /* --- Motion --- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* Motion system: out for arrivals, in-out for things that travel, a long settle for scenes */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-scene: 1100ms;
  --stagger: 90ms;
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 600ms;

  /* --- Z-index --- */
  --z-sticky: 20;
  --z-nav: 50;
  --z-pet: 45;
  --z-bookbar: 40;
  --z-overlay: 80;
  --z-toast: 90;

  /* --- Color: dark (brand default) --- */
  --color-bg:           #0d0f13;
  --color-surface:      #151820;
  --color-surface-2:    #1c2029;
  --color-line:         rgba(255, 255, 255, .09);
  --color-line-strong:  rgba(255, 255, 255, .18);
  --color-text:         #f2ede4;  /* 16.5:1 on bg */
  --color-text-2:       #b8b1a5;  /*  9.0:1 */
  --color-text-3:       #8f897f;  /*  5.5:1 on bg, 4.7:1 on surface-2 */
  --color-action:       #f2c46d;  /* lantern gold */
  --color-on-action:    #1d1405;  /* 11.2:1 on action */
  --color-action-hover: #f7d48c;
  --color-action-soft:  rgba(242, 196, 109, .10);  /* selected option fill */
  /* Lumi (illustration only, never UI roles): lamplight and the four lantern bodies */
  --lumi-glow:      #ffc96b;
  --lumi-glow-a:    .55;
  --lumi-core:      #fff4d6;
  --lumi-flame-1:   #ffd27e;
  --lumi-flame-2:   #f08a3c;
  --lumi-crystal-1: #e6f2fb;
  --lumi-crystal-2: #8fb6da;
  --lumi-blossom-1: #ffe3e9;
  --lumi-blossom-2: #f09cb1;
  --lumi-paper-1:   #ffc9b2;
  --lumi-paper-2:   #e0684f;
  --lumi-ink:       #2a1d12;
  --lumi-line:      rgba(42, 29, 18, .32);
  --lumi-edge:      transparent;
  --lumi-ray:       #ffd27a;
  --lumi-cheek:     rgba(236, 104, 120, .55);
  --lumi-prop:      #ffe2a0;
  --lumi-prop-line: #ffd27a;
  --color-focus:        #f2c46d;
  --color-mood:         #f3aebd;  /* blossom, 7.7:1 on its tint */
  --color-mood-bg:      rgba(243, 174, 189, .12);
  --color-ok:           #86d6a8;
  --color-danger:       #ff9180;
  --color-danger-bg:    rgba(255, 145, 128, .10);
  --color-nav-bg:       rgba(13, 15, 19, .94);
  --color-scrim:        rgba(4, 5, 7, .62);
  --color-on-media:     #f6f1e8;
  --color-on-media-2:   rgba(246, 241, 232, .78);
  --color-media-shade:  rgba(6, 7, 10, .92);
  --shadow-float: 0 18px 50px rgba(0, 0, 0, .45);
  --shadow-raise: 0 1px 2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

/* --- Color: light ("晨雾 / dawn mist") --- */
[data-theme="light"] {
  --color-bg:           #f3f3f1;
  --color-surface:      #ffffff;
  --color-surface-2:    #e9e9e5;
  --color-line:         rgba(20, 22, 28, .10);
  --color-line-strong:  rgba(20, 22, 28, .22);
  --color-text:         #17191e;  /* 15.8:1 */
  --color-text-2:       #4a4e57;  /*  7.5:1 */
  --color-text-3:       #62666f;  /*  5.2:1 */
  --color-action:       #1a1c21;  /* lantern in daylight: ink button */
  --color-on-action:    #fbe1a6;  /* 13.3:1 */
  --color-action-hover: #2b2e35;
  --color-action-soft:  rgba(26, 28, 33, .05);
  --lumi-glow:      #f7b445;
  --lumi-glow-a:    .32;
  --lumi-ray:       #c4862a;
  --lumi-edge:      rgba(42, 29, 18, .28);
  --lumi-prop:      #ffd27a;
  --lumi-prop-line: #5c3d14;
  --color-focus:        #a86a12;  /* 4.0:1 against bg (non-text ≥ 3:1) */
  --color-mood:         #a3384f;
  --color-mood-bg:      rgba(163, 56, 79, .08);
  --color-ok:           #1f7a4a;
  --color-danger:       #b42318;
  --color-danger-bg:    rgba(180, 35, 24, .07);
  --color-nav-bg:       rgba(243, 243, 241, .95);
  --color-scrim:        rgba(15, 17, 21, .45);
  --shadow-float: 0 18px 50px rgba(20, 22, 28, .14);
  --shadow-raise: 0 1px 3px rgba(20, 22, 28, .12);
  color-scheme: light;
}

/* English: Latin-first stacks (CJK fonts set Latin hyphens and quotes too wide). */
:root:lang(en) {
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-story: "Story Serif Latin", "Story Serif Latin Fallback", "Story Serif", "Story Serif Local", Georgia, serif;
}

@media (max-width: 760px) {
  :root { --nav-h: 56px; }
}

/* Eight realms, spaced around the hue circle at one lightness per theme; lantern amber is kept for
   "open right now". Used by the doors on the home page, Explore and the journeys. */
:root {
  --realm-fire-stone: oklch(.72 .14 32); --realm-sand-stars: oklch(.8 .11 85); --realm-old-roads: oklch(.76 .1 125);
  --realm-ice-night: oklch(.8 .09 180); --realm-water-deep: oklch(.72 .12 245); --realm-mirror-salt: oklch(.86 .025 260);
  --realm-mist-temple: oklch(.74 .1 305); --realm-city-rules: oklch(.72 .14 358);
  --lamp-open: #f2c46d;
}
[data-theme="light"] {
  --realm-fire-stone: oklch(.52 .15 32); --realm-sand-stars: oklch(.56 .11 85); --realm-old-roads: oklch(.52 .1 125);
  --realm-ice-night: oklch(.53 .09 180); --realm-water-deep: oklch(.5 .13 245); --realm-mirror-salt: oklch(.5 .03 260);
  --realm-mist-temple: oklch(.5 .11 305); --realm-city-rules: oklch(.52 .15 358);
  --lamp-open: #b8690f;
}
/* the opening and the threshold are night in both themes */
.home-hero, .home-threshold { --lamp-open: #f2c46d; }


/* css/global.css */
/* =============================================================
   GLOBAL — reset, base elements, accessibility utilities
   ============================================================= */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: .01em; text-wrap: balance; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }
#main-content:focus { outline: none; }

::selection { background: color-mix(in srgb, var(--color-action) 35%, transparent); }

.num { font-variant-numeric: tabular-nums; }
.story-font { font-family: var(--font-story); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: var(--space-4); top: 0; z-index: calc(var(--z-nav) + 1);
  padding: 10px 16px; border-radius: var(--radius-control);
  background: var(--color-action); color: var(--color-on-action); font-weight: var(--weight-semibold);
  transform: translateY(calc(-100% - 8px)); transition: transform var(--dur-fast);
}
.skip-link:focus { transform: translateY(var(--space-3)); }

/* Presses answer at once; the default grey tap flash is replaced by these. */
html { -webkit-tap-highlight-color: transparent; }
.btn, .chip, .home-atlas__chip, .home-hero__dot, .home-hero__pause { transition-property: transform, background-color, border-color, color, box-shadow, opacity; }
.btn:active, .chip:active, .home-atlas__chip:active, .home-hero__pause:active { transform: scale(.97); transition-duration: 90ms; }

@media (forced-colors: active) {
  .home-hero__dot i { background: CanvasText !important; }
  .home-hero__dot[aria-current="true"] i { background: Highlight !important; }
  .door.is-selected, .door__link:focus-visible { outline: 3px solid Highlight; }
  .door__lamp, .home-atlas__chip i, .door-card__meta i { forced-color-adjust: none; }
}

.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 14px; height: 14px; }
.icon--lg { width: 22px; height: 22px; }
.icon--fill { fill: currentColor; }

html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: background-color 280ms var(--ease), color 280ms var(--ease), border-color 280ms var(--ease), fill 280ms var(--ease) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* Route transitions (View Transitions API): the nav stays put; the old page leaves before the new
   one arrives (never two pages at once); a clicked journey's image or door grows into the journey's
   opening, under its own scrim and title. */
#main-nav { view-transition-name: site-nav; }
.scene__media--hero img { view-transition-name: journey-hero; }
.scene__scrim--hero { view-transition-name: journey-scrim; }
.scene--hero .detail-hero__text { view-transition-name: journey-copy; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(site-nav) { animation-duration: 0s; }
  ::view-transition-old(root) { animation: vt-out 200ms cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: vt-in 420ms var(--ease-out) 160ms both; }
  ::view-transition-group(journey-hero) { animation-duration: 640ms; animation-timing-function: var(--ease-out); }
  ::view-transition-old(journey-hero), ::view-transition-new(journey-hero) { animation-duration: 640ms; width: 100%; height: 100%; object-fit: cover; }
  ::view-transition-new(journey-scrim) { animation: vt-fade 420ms var(--ease-out) 220ms both; }
  ::view-transition-new(journey-copy) { animation: vt-in 520ms var(--ease-out) 280ms both; }
  ::view-transition-old(journey-scrim), ::view-transition-old(journey-copy) { display: none; }
  /* through a door: the home leaves fast, a moment of dark, then the journey; its words wait for
     the picture, and the bar crossfades instead of snapping */
  html.vt-open::view-transition { background: #07080b; }
  html.vt-open::view-transition-old(root) { animation: vt-out 120ms cubic-bezier(.4, 0, 1, 1) both; }
  html.vt-open::view-transition-new(root) { animation: vt-in 420ms var(--ease-out) 280ms both; }
  html.vt-open::view-transition-group(site-nav) { animation-duration: 200ms; }
  html.vt-open::view-transition-new(journey-copy) { animation-delay: 460ms; }
  html.vt-arch::view-transition-new(journey-hero) { animation: vt-arch-open 640ms var(--ease-out) both; }
  html.vt-arch::view-transition-old(journey-hero) { animation: vt-arch-open 640ms var(--ease-out) both, vt-out 360ms linear both; }
  html.vt-swap::view-transition-old(root) { animation: vt-out 140ms ease-out both; }
  html.vt-swap::view-transition-new(root) { animation: vt-fade 200ms ease-out both; }
}
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@keyframes vt-fade { from { opacity: 0; } }
@keyframes vt-arch-open { from { clip-path: inset(0 round 50% 50% 6% 6% / 36% 36% 4% 4%); } to { clip-path: inset(0 round 0); } }

/* <picture> wrappers (UI.picture) take no box of their own, so image rules apply to the <img>. */
picture { display: contents; }

/* css/layout.css */
/* =============================================================
   LAYOUT — page-level structure. Vertical padding on .container
   elements always uses padding-block so the side gutter survives.
   ============================================================= */

#app { display: flex; flex-direction: column; min-height: 100vh; }
#main-content { flex: 1; min-height: 100svh; } /* the footer never starts inside the first screen, so rendering a page can't shift it */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--space-5), env(safe-area-inset-left, 0px)) max(var(--space-5), env(safe-area-inset-right, 0px));
}
.container--narrow { max-width: var(--container-narrow); }

/* Pages without a full-bleed media header start below the fixed nav. */
.page { padding-top: var(--nav-h); }
.page__head { padding-block: var(--space-6) var(--space-4); }
.page__head h1 { font-size: var(--text-2xl); }
.page__head p { margin-top: var(--space-1); color: var(--color-text-2); font-size: var(--text-base); max-width: 40em; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.section-head h2 { font-size: var(--text-2xl); }
.section-head p { margin-top: 6px; color: var(--color-text-2); font-size: var(--text-base); }

.grid-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }

/* Footer */
.site-footer { border-top: 1px solid var(--color-line); padding-block: var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); color: var(--color-text-3); font-size: var(--text-sm); }
.site-footer .container { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.site-footer nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.site-footer nav a { display: inline-block; padding-block: 12px; margin-block: -12px; } /* a finger-sized target without moving the line */
.site-footer__line { flex: 1 1 100%; display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; padding-bottom: var(--space-5); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-line); }
.site-footer__line span { font-family: var(--font-story); font-size: clamp(1.25rem, 2.6vw, 1.75rem); color: var(--color-text-2); }
.site-footer__line small { font-size: var(--text-xs); letter-spacing: .1em; color: var(--color-text-3); }
.site-footer a:hover { color: var(--color-text); }
body[data-bookbar] .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 1080px) {
  .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .container { padding-inline: max(var(--space-4), env(safe-area-inset-left, 0px)) max(var(--space-4), env(safe-area-inset-right, 0px)); }
  .page__head { padding-block: var(--space-5) var(--space-2); }
  .page__head h1 { font-size: var(--text-xl); }
  .section-head h2 { font-size: var(--text-xl); }
  .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}

/* css/components/ui.css */
/* =============================================================
   UI PRIMITIVES — buttons, chips, fields, alerts, sheets, toasts
   ============================================================= */

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 20px; border-radius: var(--radius-control);
  font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: 1; white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), opacity var(--dur-fast);
}
.btn--primary { background: var(--color-action); color: var(--color-on-action); }
.btn--primary:hover:not(:disabled) { background: var(--color-action-hover); }
.btn--ghost { border-color: var(--color-line-strong); color: var(--color-text); }
.btn--ghost:hover:not(:disabled) { border-color: var(--color-text-3); }
.btn--quiet { color: var(--color-text-2); padding: 0 12px; }
.btn--quiet:hover { color: var(--color-text); }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: var(--text-sm); }
.btn--lg { min-height: 52px; padding: 0 28px; font-size: var(--text-md); }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-busy="true"] { opacity: .55; }
.btn[aria-busy="true"]::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn {
  width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--color-line); color: var(--color-text-2);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.icon-btn:hover { color: var(--color-text); border-color: var(--color-line-strong); }
.icon-btn--square { border-radius: var(--radius-control); width: 52px; height: 52px; }
.icon-btn[aria-pressed="true"] { color: var(--color-mood); border-color: color-mix(in srgb, var(--color-mood) 50%, transparent); }

.link { color: var(--color-text); font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 3px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-2); font-size: var(--text-base); white-space: nowrap; }
.link-arrow:hover { color: var(--color-text); }

/* --- Chips (filters, choices) --- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
  border-radius: var(--radius-pill); border: 1px solid var(--color-line); background: var(--color-surface);
  color: var(--color-text-2); font-size: var(--text-base); white-space: nowrap;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.chip:hover { border-color: var(--color-line-strong); color: var(--color-text); }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--color-action); border-color: transparent; color: var(--color-on-action); font-weight: var(--weight-semibold);
}
.chip--sm { height: 28px; padding: 0 10px; font-size: var(--text-xs); }

/* --- Tags (read-only labels) --- */
.tag-mood { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--color-mood-bg); color: var(--color-mood); font-size: var(--text-xs); white-space: nowrap; }
.tag-code { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--color-line-strong); color: var(--color-text-2); font-size: 11px; letter-spacing: .08em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tag-code i { font-style: normal; letter-spacing: 0; color: var(--color-text-3); }

/* --- Meters --- */
.meter { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-3); font-size: var(--text-xs); }
.meter__dots { display: inline-flex; gap: 2px; }
.meter__dots b { width: 10px; height: 4px; border-radius: 2px; background: var(--color-line-strong); }
.meter__dots b.on { background: var(--color-text-2); }
.bar { height: 6px; border-radius: 3px; background: var(--color-surface-2); overflow: hidden; }
.bar > b { display: block; height: 100%; border-radius: 3px; background: var(--color-text-2); }

/* --- Segmented control --- */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: var(--radius-control); background: var(--color-surface-2); }
.seg button { min-height: 36px; padding: 0 8px; border-radius: 8px; font-size: var(--text-sm); color: var(--color-text-2); }
.seg button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); font-weight: var(--weight-semibold); box-shadow: var(--shadow-raise); }

/* --- Fields --- */
.field { display: grid; gap: 6px; }
.field > label, .field__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-2); }
.input {
  display: flex; align-items: center; gap: var(--space-2); min-height: 46px; padding: 0 14px;
  border-radius: var(--radius-control); background: var(--color-surface); border: 1px solid var(--color-line-strong);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input:focus-within { border-color: var(--color-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 25%, transparent); }
.input.is-invalid { border-color: var(--color-danger); }
.input input, .input select { flex: 1; min-width: 0; height: 44px; background: transparent; border: 0; outline: 0; color: var(--color-text); font-size: var(--text-md); }
.input select { appearance: none; cursor: pointer; }
.input input::placeholder { color: var(--color-text-3); }
.input .icon { color: var(--color-text-3); }
.input__btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--color-text-3); }
.input__btn:hover { color: var(--color-text); }
.field__help { font-size: var(--text-xs); color: var(--color-text-3); }
.field__error { font-size: var(--text-xs); color: var(--color-danger); }

.check { display: flex; align-items: center; gap: 10px; font-size: var(--text-base); color: var(--color-text-2); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--color-action); }

/* --- Alerts --- */
.alert {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: var(--text-base); line-height: 1.5;
  background: var(--color-danger-bg); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-danger) 35%, transparent);
}
.alert .icon { color: var(--color-danger); margin-top: 2px; }
.alert--ok { background: color-mix(in srgb, var(--color-ok) 10%, transparent); border-color: color-mix(in srgb, var(--color-ok) 35%, transparent); }
.alert--ok .icon { color: var(--color-ok); }
.alert--info { background: var(--color-surface); border-color: var(--color-line-strong); }
.alert--info .icon { color: var(--color-text-2); }

/* --- Summary lines (price breakdowns) --- */
.lines { display: grid; gap: 8px; font-size: var(--text-base); }
.lines > div { display: flex; justify-content: space-between; gap: var(--space-4); color: var(--color-text-2); }
.lines b { color: var(--color-text); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.lines .is-total { padding-top: 8px; border-top: 1px solid var(--color-line); }
.lines .is-total b { font-size: var(--text-lg); }
.lines .is-short b { color: var(--color-danger); }
.lines .is-plus b { color: var(--color-ok); }

/* --- Tabs --- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
@media (max-width: 480px) { .tabs { mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); padding-right: 20px; } }
.tabs [role="tab"] { min-height: 44px; padding: 0 14px; font-size: var(--text-base); color: var(--color-text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs [role="tab"]:hover { color: var(--color-text); }
.tabs [role="tab"][aria-selected="true"] { color: var(--color-text); font-weight: var(--weight-semibold); border-bottom-color: var(--color-action); }
[data-theme="light"] .tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--color-text); }
.tabs .count { margin-left: 6px; font-size: var(--text-xs); color: var(--color-text-3); font-weight: var(--weight-normal); }

/* --- Empty / error states --- */
.state { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); text-align: center; grid-column: 1 / -1; }
.state__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.state__text { color: var(--color-text-2); font-size: var(--text-base); max-width: 28em; }
.state__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); }

/* --- Skeleton --- */
.skeleton { background: linear-gradient(90deg, var(--color-surface) 0%, var(--color-surface-2) 50%, var(--color-surface) 100%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: var(--radius-card); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* --- Sheet (modal dialog; bottom sheet on phones) --- */
.scrim { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; padding: var(--space-4); background: var(--color-scrim); backdrop-filter: blur(2px); animation: fade-in var(--dur) var(--ease); }
.sheet {
  position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  display: grid; gap: var(--space-4); padding: var(--space-5);
  border-radius: var(--radius-sheet); background: var(--color-surface); border: 1px solid var(--color-line-strong); box-shadow: var(--shadow-float);
  animation: sheet-in var(--dur) var(--ease);
}
.sheet--wide { width: min(560px, 100%); }
.sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.sheet__head h2 { font-size: var(--text-xl); }
.sheet__head p { margin-top: 4px; font-size: var(--text-sm); color: var(--color-text-3); }
.sheet__close { margin: -6px -6px 0 0; }
.sheet__actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.sheet__actions--single { grid-template-columns: 1fr; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* --- Toast --- */
.toast-region { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: var(--z-toast); display: grid; gap: 8px; justify-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
body[data-bookbar] .toast-region { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
.toast { pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--color-text); color: var(--color-bg); font-size: var(--text-base); box-shadow: var(--shadow-float); animation: sheet-in var(--dur) var(--ease); }
.toast a, .toast button { color: inherit; font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

@media (max-width: 760px) {
  .scrim { place-items: end center; padding: 0; }
  .sheet, .sheet--wide { width: 100%; max-height: 88vh; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); border-bottom: 0; }
  @keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }
}

/* Small letter-spaced label above a page or section title */
.eyebrow { font-size: var(--text-xs); letter-spacing: .14em; color: var(--color-text-3); }

/* css/components/nav.css */
/* =============================================================
   NAV — fixed top bar, account menu, mobile drawer
   Over full-bleed media (home, detail) it starts transparent with
   media-safe text, then gains its surface once the page scrolls.
   ============================================================= */

#main-nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav); height: var(--nav-h);
  background: var(--color-nav-bg); border-bottom: 1px solid var(--color-line);
  backdrop-filter: saturate(140%) blur(18px); -webkit-backdrop-filter: saturate(140%) blur(18px);
  transition: background var(--dur), border-color var(--dur);
}
body[data-media-header]:not([data-scrolled]) #main-nav {
  background: linear-gradient(to bottom, rgba(5, 6, 8, .55), rgba(5, 6, 8, 0)), rgba(7, 8, 11, calc(var(--nav-scrim, 0) * .94));
  border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* Only the bar itself switches to media-safe colors; the menu and drawer keep the theme. */
body[data-media-header]:not([data-scrolled]) #main-nav .nav {
  --color-text: var(--color-on-media);
  --color-text-2: var(--color-on-media-2);
  --color-line: rgba(255, 255, 255, .2);
  --color-line-strong: rgba(255, 255, 255, .34);
  --color-surface: rgba(255, 255, 255, .08);
}
/* Over the picture the opening's own button is the one gold thing; signing in and up stay quiet
   until the bar is solid, where the theme's primary takes over. */
body[data-media-header]:not([data-scrolled]) #main-nav .btn--primary { background: transparent; color: var(--color-on-media); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
body[data-media-header]:not([data-scrolled]) #main-nav .btn--primary:hover { background: rgba(255, 255, 255, .1); }
body[data-media-header]:not([data-scrolled]) #main-nav #nav-login { border-color: transparent; background: transparent; }
body[data-media-header]:not([data-scrolled]) #main-nav #nav-login:hover { background: rgba(255, 255, 255, .08); }

.nav { height: 100%; display: flex; align-items: center; gap: var(--space-6); }
.nav__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); white-space: nowrap; }
.nav__brand .brand-mark { flex: none; width: 28px; height: 28px; }
.nav__brand span { font-family: var(--font-story); font-weight: 700; font-size: 1.125rem; letter-spacing: .08em; }
:root:lang(en) .nav__brand span { letter-spacing: .01em; }
.nav__links { display: flex; gap: var(--space-5); font-size: var(--text-base); color: var(--color-text-2); }
.nav__links a { position: relative; padding: 6px 0; transition: color var(--dur-fast); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--color-text); }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: currentColor; opacity: .5; transform: scaleX(0); transform-origin: left; transition: transform 180ms var(--ease-out); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a[aria-current="page"]::after { opacity: 1; transform: none; background: var(--color-action); }
[data-theme="light"] body:not([data-media-header]) .nav__links a[aria-current="page"]::after,
[data-theme="light"] body[data-scrolled] .nav__links a[aria-current="page"]::after { background: var(--color-focus); }

.nav__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.nav__lang { font-size: 12px; letter-spacing: .04em; }
.nav__wallet {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 6px;
  border: 1px solid var(--color-line); border-radius: var(--radius-pill); color: var(--color-text-2); font-size: var(--text-sm); white-space: nowrap;
}
.nav__wallet:hover { border-color: var(--color-line-strong); color: var(--color-text); }
.nav__wallet img { width: 24px; height: 24px; }
.nav__wallet b { color: var(--color-text); font-weight: var(--weight-semibold); }

.nav__user { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 4px; border-radius: var(--radius-pill); border: 1px solid var(--color-line); color: var(--color-text); font-size: var(--text-sm); }
.nav__user:hover { border-color: var(--color-line-strong); }
.nav__user img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--color-surface-2); }
.nav__user span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.menu {
  position: fixed; top: calc(var(--nav-h) + 8px); right: max(var(--space-4), calc((100vw - var(--container)) / 2 + var(--space-5)));
  min-width: 220px; padding: 6px;
  border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-line-strong); box-shadow: var(--shadow-float);
  display: grid; gap: 2px; animation: sheet-in var(--dur-fast) var(--ease);
}
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: var(--text-base); color: var(--color-text); text-align: left; }
.menu a:hover, .menu button:hover, .menu a:focus-visible, .menu button:focus-visible { background: var(--color-surface-2); }
.menu hr { border: 0; border-top: 1px solid var(--color-line); margin: 4px 0; }
.menu__meta { padding: 8px 12px 6px; font-size: var(--text-xs); color: var(--color-text-3); }

.nav__menu-btn { display: none; }
@media (max-width: 420px) {
  .nav__wallet-unit { display: none; }
  .nav__brand { letter-spacing: 0; gap: 8px; }
  .nav__actions { gap: 6px; }
}

/* Mobile drawer: a modal sheet over a dimmed page */
.drawer-scrim { position: fixed; inset: var(--nav-h) 0 0; z-index: calc(var(--z-nav) - 1); background: rgba(0, 0, 0, .5); animation: scrim-in 200ms var(--ease-out); }
@keyframes scrim-in { from { opacity: 0; } }
.drawer {
  position: fixed; inset: var(--nav-h) 0 auto; z-index: var(--z-nav);
  max-height: calc(100vh - var(--nav-h)); overflow: auto;
  background: var(--color-surface); border-bottom: 1px solid var(--color-line-strong); box-shadow: var(--shadow-float);
  padding-block: var(--space-3) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  animation: sheet-in var(--dur) var(--ease);
}
.drawer__links { display: grid; }
.drawer__links a, .drawer__links button { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-size: var(--text-md); border-bottom: 1px solid var(--color-line); color: var(--color-text); text-align: left; width: 100%; }
.drawer__links a[aria-current="page"] { font-weight: var(--weight-semibold); }
.drawer__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-4); }
.drawer__prefs { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.drawer__prefs .btn { flex: 1; }

@media (max-width: 860px) {
  .nav { gap: var(--space-3); }
  .nav__links, .nav__actions .hide-sm { display: none; }
  .nav__menu-btn { display: inline-grid; }
  .nav__user span { display: none; }
}
body[data-drawer] .ai-pet { opacity: 0; pointer-events: none; }

/* css/components/card.css */
/* =============================================================
   JOURNEY CARDS — one card component for explore, saved and
   recommendations; .feature-card is the image-led home variant.
   The lantern glow follows the pointer (--mx/--my set in ui.js).
   ============================================================= */

/* A journey card is a door: its picture under an arch with its realm's line, then its name, its
   number and whether it is open now. */
.journey-card {
  --lamp: var(--realm-mirror-salt);
  position: relative; display: flex; flex-direction: column; min-width: 0;
  transition: transform var(--dur) var(--ease);
}
.journey-card[data-realm="fire-stone"] { --lamp: var(--realm-fire-stone); }
.journey-card[data-realm="sand-stars"] { --lamp: var(--realm-sand-stars); }
.journey-card[data-realm="old-roads"] { --lamp: var(--realm-old-roads); }
.journey-card[data-realm="ice-night"] { --lamp: var(--realm-ice-night); }
.journey-card[data-realm="water-deep"] { --lamp: var(--realm-water-deep); }
.journey-card[data-realm="mist-temple"] { --lamp: var(--realm-mist-temple); }
.journey-card[data-realm="city-rules"] { --lamp: var(--realm-city-rules); }
.journey-card:hover { transform: translateY(-3px); }
.journey-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur-slow);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 30%), rgba(242, 196, 109, .16), transparent 60%);
}
.journey-card:hover::after { opacity: 1; }
[data-theme="light"] .journey-card::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 30%), rgba(168, 106, 18, .10), transparent 60%); }

.journey-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 50% 50% 14px 14px / 40% 40% 14px 14px; background: var(--color-surface-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lamp) 45%, transparent); }
.journey-card__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lamp) 45%, transparent); pointer-events: none; }
.journey-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.journey-card:hover .journey-card__media img { transform: scale(1.03); }
.journey-card__body { display: grid; gap: 6px; padding: 14px 4px 4px; }
.journey-card__meta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--text-xs); color: var(--color-text-3); }
.journey-card__meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journey-card__realm { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-2); white-space: nowrap; }
.journey-card__realm i { width: 7px; height: 7px; border-radius: 50%; background: var(--lamp); }
.journey-card__title { font-family: var(--font-story); font-size: var(--text-lg); font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.journey-card__hook { font-size: var(--text-sm); color: var(--color-text-2); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.journey-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: var(--text-sm); color: var(--color-text-3); }
.journey-card__foot .num { font-size: var(--text-xs); letter-spacing: .08em; }
.journey-card__state { text-align: right; }
.journey-card__state.is-open { color: var(--color-text); }
.journey-card__state.is-open::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--lamp-open); box-shadow: 0 0 8px color-mix(in oklab, var(--lamp-open) 60%, transparent); }
.price { font-weight: var(--weight-semibold); color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price small { font-size: .85em; font-weight: var(--weight-normal); color: var(--color-text-3); margin-left: 2px; }

.journey-card--skeleton { border-color: transparent; }
.journey-card--skeleton .journey-card__media { background: none; }
.journey-card--skeleton .line { height: 12px; border-radius: 6px; }

/* Home feature card: image-led, text over a shade */
.feature-card {
  position: relative; isolation: isolate; display: block; min-height: 300px;
  border-radius: var(--radius-card); overflow: hidden; color: var(--color-on-media); background: #111;
}
.feature-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.feature-card:hover img { transform: scale(1.04); }
.feature-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(6, 7, 10, .9) 0%, rgba(6, 7, 10, .25) 55%, rgba(6, 7, 10, 0) 100%); }
.feature-card__body { position: absolute; inset: auto 0 0; display: grid; gap: 8px; padding: 20px; }
.feature-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.feature-card .tag-mood { background: rgba(243, 174, 189, .2); color: #f8c4cf; }
.feature-card .tag-code { border-color: rgba(255, 255, 255, .32); color: rgba(246, 241, 232, .9); }
.feature-card__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.feature-card__hook { font-size: var(--text-base); color: var(--color-on-media-2); }
.feature-card__meta { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-sm); color: rgba(246, 241, 232, .78); }
.feature-card--lead .feature-card__title { font-family: var(--font-story); font-weight: 700; font-size: var(--text-3xl); line-height: 1.2; }
.feature-card--skeleton { background: none; }

@media (max-width: 760px) {
  .journey-card__body { padding: 10px 10px 12px; gap: 6px; }
  .journey-card__hook, .journey-card__meta .region, .journey-card .meter { display: none; }
  .journey-card__title { font-size: var(--text-base); }
  .feature-card { min-height: 220px; }
  .feature-card__body { padding: 14px; }
  .feature-card__title { font-size: var(--text-md); }
  .feature-card__hook { display: none; }
  .feature-card--lead { min-height: 360px; }
  .feature-card--lead .feature-card__title { font-size: var(--text-2xl); }
  .feature-card--lead .feature-card__hook { display: block; }
}

/* css/components/hero.css */
/* =============================================================
   HOME HERO — image-led, stays dark in both themes (it is a photo).
   One beat per scene: pictures cross while the old copy leaves, the new copy arrives on its
   decoded picture. On the first load the same entrance runs from the static shell into the app
   (--boot-t carries the time already spent), so nothing jumps.
   ============================================================= */

.home-hero {
  --exit: 0;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(640px, 100svh); display: flex; align-items: flex-end;
  color: var(--color-on-media); background: #07080b; touch-action: pan-y;
  /* The opening is always a dark photograph, so it keeps the night tokens in both themes:
     the lantern-gold action with dark ink, at rest, on hover and when pressed. */
  color-scheme: dark;
  --color-action: #f2c46d; --color-on-action: #1d1405; --color-action-hover: #f7d48c; --color-focus: #f2c46d;
}
.home-hero__slides {
  position: absolute; inset: 0; z-index: -3; overflow: hidden; transform-origin: 50% 40%;
  transform: scale(calc(1 + var(--exit) * .06)); filter: brightness(calc(1 - var(--exit) * .5));
}
.home-hero__img { --push-from: 1.02; --push-to: 1.1; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; opacity: 0; transform: scale(var(--push-from)); transition: opacity var(--dur-scene, 1100ms) var(--ease-in-out); }
/* Wide screens already show the pictures near their full resolution: push in less, so they stay sharp. */
@media (min-width: 1440px) { .home-hero__img { --push-from: 1; --push-to: 1.04; } }
.home-hero__img.is-active { opacity: 1; }
.home-hero__img.is-leaving { animation: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .home-hero.is-playing .home-hero__img.is-active { animation: hero-push 7.4s linear forwards; }
  .home-hero.is-held .home-hero__img.is-active, .home-hero.is-offscreen .home-hero__img.is-active { animation-play-state: paused; }
}
@keyframes hero-push { from { transform: scale(var(--push-from)); } to { transform: scale(var(--push-to)); } }

.home-hero__particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.home-hero__shade {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(6, 7, 10, .82) 0%, rgba(6, 7, 10, .5) 42%, rgba(6, 7, 10, .06) 76%),
    linear-gradient(0deg, rgba(6, 7, 10, .9) 0%, rgba(6, 7, 10, 0) 46%),
    linear-gradient(180deg, rgba(6, 7, 10, .5) 0%, rgba(6, 7, 10, 0) 18%);
}
/* A little film grain keeps large photos from looking smeared on dense screens. */
.home-hero__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The photo sinks into the night of the threshold that follows it (in both themes). */
.home-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(7, 8, 11, 0), #07080b); }

.home-hero__content { padding-block: calc(var(--nav-h) + var(--space-7)) clamp(36px, 7vh, 80px); }
/* the words are gone before they rise to the bar (they reach it at about 45% of the way out) */
.home-hero__copy { min-height: 0; transform: translate3d(0, calc(var(--exit) * -40px), 0); opacity: calc(1 - var(--exit) * 2.4); }
/* The button, the scene strip and the clock leave with the words, before they reach the bar. */
.home-hero__actions, .home-hero__foot { transform: translate3d(0, calc(var(--exit) * -24px), 0); opacity: calc(1 - var(--exit) * 2.2); }
.home-hero__line { display: inline-block; }
.home-hero__eyebrow { font-size: var(--text-sm); letter-spacing: .14em; color: rgba(246, 241, 232, .76); }
:lang(en) .home-hero__eyebrow { letter-spacing: .02em; }
.home-hero__title {
  margin-top: 14px; max-width: 11em; font-family: var(--font-story); font-weight: 700;
  font-size: clamp(3.25rem, 7.2vw, 7.5rem); line-height: 1.02; letter-spacing: .04em; text-wrap: balance; word-break: keep-all;
}
:lang(en) .home-hero__title { letter-spacing: 0; word-break: normal; }
.home-hero.scene-door .home-hero__title { font-size: clamp(2.75rem, 6vw, 6.25rem); line-height: 1.06; letter-spacing: .02em; }
.home-hero__title .t-place { display: block; margin-top: .5em; font-family: var(--font-ui); font-weight: 500; font-size: max(.3em, 1rem); letter-spacing: .14em; color: rgba(246, 241, 232, .74); }
:lang(en) .home-hero__title .t-place { letter-spacing: .02em; }
.home-hero__lead { margin-top: 18px; max-width: 30em; font-size: clamp(1.0625rem, 1.7vw, 1.375rem); line-height: 1.65; color: rgba(246, 241, 232, .92); text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
  .home-hero__copy.is-out .home-hero__line { opacity: 0; transform: translate3d(0, -8px, 0); transition: opacity .3s cubic-bezier(.4, 0, 1, 1), transform .3s cubic-bezier(.4, 0, 1, 1); }
  .home-hero__copy.is-in .home-hero__line { animation: hero-line .9s var(--ease-out) both; }
  .home-hero__copy.is-in .home-hero__title .home-hero__line { animation-delay: .08s; }
  .home-hero__copy.is-in .home-hero__lead .home-hero__line { animation-delay: .16s; }
  /* First load: the photo fades in, then the lines, the action and the controls, in one sequence. */
  .home-hero.is-booting .home-hero__slides { animation: hero-fade .9s var(--ease-out) both; animation-delay: calc(100ms + var(--boot-t, 0ms)); }
  .home-hero.is-booting .home-hero__copy.is-in .home-hero__line { animation-delay: calc(360ms + var(--boot-t, 0ms)); }
  .home-hero.is-booting .home-hero__copy.is-in .home-hero__title .home-hero__line { animation-delay: calc(440ms + var(--boot-t, 0ms)); }
  .home-hero.is-booting .home-hero__copy.is-in .home-hero__lead .home-hero__line { animation-delay: calc(520ms + var(--boot-t, 0ms)); }
  .home-hero.is-booting .home-hero__actions { animation: hero-line .9s var(--ease-out) both; animation-delay: calc(640ms + var(--boot-t, 0ms)); }
  .home-hero.is-booting .home-hero__foot { animation: hero-fade .9s var(--ease-out) both; animation-delay: calc(760ms + var(--boot-t, 0ms)); }
}
@keyframes hero-line { from { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(6px); } }
@keyframes hero-fade { from { opacity: 0; } }

.home-hero__actions { margin-top: var(--space-6); display: flex; gap: 12px; flex-wrap: wrap; }
.home-hero__step { min-height: 48px; padding: 0 22px; border-radius: 999px; gap: 10px; font-weight: var(--weight-semibold); box-shadow: 0 10px 30px -12px rgba(242, 196, 109, .6); }
.home-hero__step:is(:hover, :active, :focus-visible) { background: var(--color-action-hover); color: var(--color-on-action); }
.home-hero__step .icon { transition: transform var(--dur) var(--ease-out); }
.home-hero__step:hover .icon { transform: translateX(3px); }

.home-hero__foot { margin-top: var(--space-6); min-height: 40px; display: flex; align-items: center; gap: var(--space-3) var(--space-5); flex-wrap: wrap; }
.home-hero__pause { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .28); color: #f6f1e8; background: rgba(255, 255, 255, .06); }
.home-hero__pause:hover { background: rgba(255, 255, 255, .14); }
/* Space for the pause control and the three door scenes is kept from the first frame, so nothing
   moves when they arrive. */
.home-hero__pause[hidden] { display: grid; visibility: hidden; }
.home-hero__dot.is-placeholder { visibility: hidden; }
.home-hero__dots { display: flex; gap: 10px; align-items: flex-start; }
.home-hero__dot { position: relative; min-width: 56px; max-width: 11rem; min-height: 36px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "bar bar" "num place"; align-content: start; gap: 8px 6px; padding-top: 8px; text-align: left; }
.home-hero__dot i { grid-area: bar; }
.home-hero__dot .num { grid-area: num; }
/* the place behind the number, so the strip reads as places, not codes */
.home-hero__dot-place { grid-area: place; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .6875rem; letter-spacing: .04em; color: rgba(246, 241, 232, .5); transition: color var(--dur) var(--ease-out); }
.home-hero__dot[aria-current="true"] .home-hero__dot-place, .home-hero__dot:hover .home-hero__dot-place { color: rgba(246, 241, 232, .85); }
.home-hero__dot i { display: block; height: 2px; border-radius: 1px; background: rgba(246, 241, 232, .28); overflow: hidden; position: relative; }
.home-hero__dot i::after { content: ""; position: absolute; inset: 0; background: #f6f1e8; transform: scaleX(0); transform-origin: left; }
.home-hero__dot[aria-current="true"] i::after { transform: scaleX(1); }
.home-hero__dot span { font-size: .6875rem; letter-spacing: .08em; text-align: left; color: rgba(246, 241, 232, .55); transition: color var(--dur) var(--ease-out); }
.home-hero__dot[aria-current="true"] span, .home-hero__dot:hover span { color: #f6f1e8; }
/* The place behind each dot, on hover or focus */
.home-hero__dot[data-label]:hover::before, .home-hero__dot[data-label]:focus-visible::before {
  content: attr(data-label); position: absolute; left: 0; bottom: calc(100% + 6px); white-space: nowrap; pointer-events: none;
  padding: 6px 10px; border-radius: 8px; font-size: var(--text-xs); color: #f6f1e8; background: rgba(10, 11, 14, .82);
}
@media (prefers-reduced-motion: no-preference) {
  .home-hero.is-playing:not(.is-held):not(.is-offscreen) .home-hero__dot[aria-current="true"] i::after { animation: hero-dot 6.8s linear both; }
}
@keyframes hero-dot { from { transform: scaleX(0); } }
/* The visitor's time, and a way straight to the doors open right now */
.home-hero__now { margin-left: auto; display: inline-flex; align-items: baseline; gap: 12px; font-size: var(--text-sm); color: rgba(246, 241, 232, .8); }
.home-hero__now time { font-size: var(--text-lg); letter-spacing: .06em; color: #f6f1e8; }
.home-hero__now span { border-bottom: 1px solid rgba(246, 241, 232, .32); padding-bottom: 2px; transition: border-color var(--dur); }
.home-hero__now:hover span { border-color: currentColor; }
@media (prefers-reduced-motion: no-preference) { .home-hero__now time i { animation: hero-colon 2s steps(1, end) infinite; } }
@keyframes hero-colon { 50% { opacity: .25; } }
.home-hero.is-stopped .home-hero__now time i { animation: none; }
.home-hero :focus-visible { outline-color: #f2c46d; }

/* The prologue's traveller stands just right of centre. On wide screens show more of the picture's
   left, and keep the English title a little narrower, so the words end before she begins (the static
   opening matches, so nothing moves when the app takes over). */
@media (min-width: 1024px) and (orientation: landscape) {
  .home-hero__slides > picture:first-child > .home-hero__img { object-position: 6% 38%; }
  :root:lang(en) .home-hero.scene-taoyuan .home-hero__title { font-size: clamp(3.25rem, 5.6vw, 6.25rem); }
  :root:lang(en) .home-hero.scene-taoyuan .home-hero__lead { max-width: 25em; }
}

@media (max-width: 760px) {
  .home-hero__shade { background: linear-gradient(0deg, rgba(6, 7, 10, .95) 0%, rgba(6, 7, 10, .6) 42%, rgba(6, 7, 10, .05) 70%), linear-gradient(180deg, rgba(6, 7, 10, .55) 0%, rgba(6, 7, 10, 0) 22%); }
  .home-hero__img { object-position: 50% 30%; }
  .home-hero__content { padding-bottom: 28px; }
  .home-hero__title { font-size: clamp(2.75rem, 13vw, 3.75rem); }
  .home-hero.scene-door .home-hero__title { font-size: clamp(2.25rem, 10vw, 3.125rem); }
  .home-hero__lead { font-size: var(--text-md); line-height: 1.6; }
  .home-hero__actions { margin-top: var(--space-5); }
  .home-hero__foot { margin-top: var(--space-5); min-height: 76px; }
  .home-hero__now { margin-left: 0; flex-basis: 100%; }
  .home-hero__dot { max-width: none; }
  .home-hero__dot-place { display: none; }
}

/* The static opening in index.html: shown only on the home route, in one language, until the
   app renders the real one in its place. */
.boot-shell { display: none; }
html[data-boot="home"] .boot-shell { display: flex; }
html[data-boot-lang="en"] .boot-shell [lang="zh-CN"], html[data-boot-lang="zh"] .boot-shell [lang="en"] { display: none; }

/* css/components/filter.css */
/* =============================================================
   FILTER TOOLBAR — sticky search + fantasy facets + filter panel.
   The panel is a popover on desktop and a bottom sheet on phones.
   ============================================================= */

.explore-toolbar { position: sticky; top: var(--nav-h); z-index: var(--z-sticky); background: var(--color-bg); border-bottom: 1px solid var(--color-line); padding-block: 12px; }
.explore-toolbar__row { display: flex; align-items: center; gap: 12px; }
.explore-search {
  flex: 1 1 320px; max-width: 420px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px;
  border-radius: var(--radius-control); background: var(--color-surface); border: 1px solid var(--color-line-strong); color: var(--color-text-3);
}
.explore-search:focus-within { border-color: var(--color-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 25%, transparent); }
.explore-search input { flex: 1; min-width: 0; height: 42px; background: transparent; border: 0; outline: 0; color: var(--color-text); font-size: var(--text-md); }
.explore-search input::placeholder { color: var(--color-text-3); }

.explore-facets { flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px 28px 6px 6px; margin: -6px 0 -6px -6px; mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.explore-facets::-webkit-scrollbar { display: none; }

.explore-filter { position: relative; flex: none; }
.explore-filter__btn { min-height: 40px; }
.explore-filter__badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--color-action); color: var(--color-on-action); font-size: 11px; font-weight: var(--weight-bold); }

.explore-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: calc(var(--z-sticky) + 1);
  width: min(540px, calc(100vw - 32px)); max-height: min(70vh, 620px); overflow: auto;
  display: grid; gap: 18px; padding: 20px;
  border-radius: var(--radius-sheet); background: var(--color-surface); border: 1px solid var(--color-line-strong); box-shadow: var(--shadow-float);
  animation: sheet-in var(--dur) var(--ease);
}
.explore-panel__section h3 { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: var(--text-sm); color: var(--color-text-2); }
.explore-panel__section h3 em { font-style: normal; font-weight: var(--weight-normal); color: var(--color-text-3); }
.explore-panel__mbti { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.explore-panel__mbti .chip { justify-content: center; height: 34px; padding: 0; letter-spacing: .06em; font-size: var(--text-sm); }
.explore-panel__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.explore-panel__foot { position: sticky; bottom: -20px; margin: 0 -20px -20px; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; background: var(--color-surface); border-top: 1px solid var(--color-line); }

.explore-active { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; font-size: var(--text-sm); color: var(--color-text-3); }
.explore-active .chip { gap: 4px; }

@media (max-width: 1024px) {
  .explore-toolbar__row { flex-wrap: wrap; gap: 10px; }
  .explore-search { flex-basis: 100%; max-width: none; }
  .explore-facets { order: 2; flex: 1 1 0; }
  .explore-filter { order: 3; }
}
@media (max-width: 760px) {
  .explore-toolbar { padding-block: 10px; }
  .explore-toolbar__row { flex-wrap: wrap; gap: 10px; }
  .explore-search { flex-basis: 100%; max-width: none; }
  .explore-facets { order: 2; flex: 1 1 0; margin-right: -16px; }
  .explore-filter { order: 3; }
  .explore-panel {
    position: fixed; inset: auto 0 0; top: auto; width: 100%; max-height: 82vh;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; border-bottom: 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .explore-panel__foot { bottom: calc(-20px - env(safe-area-inset-bottom, 0px)); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  body.explore-panel-open::after { content: ""; position: fixed; inset: 0; z-index: calc(var(--z-sticky) - 1); background: var(--color-scrim); }
}

/* Explore speaks the doors' language: a story-serif title, realm chips with their colour, and the
   lamp for "open now". */
.explore__head h1 { font-family: var(--font-story); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; letter-spacing: .02em; }
:root:lang(en) .explore__head h1 { letter-spacing: 0; }
.explore__head p { font-family: var(--font-story); font-size: var(--text-lg); color: var(--color-text-2); }
#filter-realm .explore-chip { display: inline-flex; align-items: center; gap: 8px; }
#filter-realm .explore-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--lamp, var(--color-text-3)); }
#filter-realm .explore-chip[data-value=""] i { display: none; }
#filter-realm .explore-chip--now i { background: var(--lamp-open); box-shadow: 0 0 10px color-mix(in oklab, var(--lamp-open) 60%, transparent); }

/* css/components/checkout.css */
/* =============================================================
   CHECKOUT SHEET — order summary, payment, success state
   ============================================================= */

.checkout-sum { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border-radius: 12px; background: var(--color-surface-2); }
.checkout-sum img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; }
.checkout-sum b { display: block; font-size: var(--text-base); }
.checkout-sum span { font-size: var(--text-sm); color: var(--color-text-3); }
.checkout-wait { color: var(--color-text-2); font-size: var(--text-base); }
.checkout-done { display: grid; gap: 10px; justify-items: center; text-align: center; padding-top: 6px; }
.checkout-done__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--color-ok) 14%, transparent); color: var(--color-ok); }
.checkout-done h2 { font-family: var(--font-story); font-size: var(--text-2xl); }
.checkout-done p { color: var(--color-text-2); }
.checkout-done__no { font-size: var(--text-sm); color: var(--color-text-3) !important; }
.checkout-done .sheet__actions { width: 100%; margin-top: 8px; }

/* css/components/ai-pet.css */
/* =============================================================
   AI PET — floating lantern guide + chat panel
   ============================================================= */

.ai-pet { position: fixed; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-pet); display: grid; justify-items: end; gap: 12px; }
body[data-bookbar] .ai-pet { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

.ai-pet__avatar {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-surface); border: 1px solid var(--color-line-strong); box-shadow: var(--shadow-float);
  transition: transform var(--dur) var(--ease);
}
.ai-pet__avatar:hover { transform: translateY(-2px); }
/* over the night photograph (the opening, the threshold, a journey's opening) Lumi is a lantern in
   the dark, not a white disc, in both themes */
body[data-media-header]:not([data-scrolled]) .ai-pet__avatar { background: rgba(10, 11, 14, .5); border-color: rgba(242, 196, 109, .38); box-shadow: 0 0 26px -6px rgba(242, 196, 109, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ai-pet__avatar [data-lumi-slot] { display: grid; place-items: center; }
.ai-pet__avatar--hint [data-lumi-slot] { animation: lantern 2.4s ease-in-out 3; }
@keyframes lantern { 50% { transform: translateY(-3px); filter: drop-shadow(0 0 16px rgba(242, 196, 109, .7)); } }

.ai-pet__chat {
  width: min(360px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - var(--nav-h) - 120px));
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  border-radius: var(--radius-sheet); background: var(--color-surface); border: 1px solid var(--color-line-strong); box-shadow: var(--shadow-float);
  overflow: hidden; animation: sheet-in var(--dur) var(--ease);
}
.ai-pet__header { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 16px; border-bottom: 1px solid var(--color-line); }
.ai-pet__face { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface-2); }
.ai-pet__name { font-size: var(--text-md); }
.ai-pet__status { font-size: var(--text-xs); color: var(--color-text-3); }
.ai-pet__close { margin-left: auto; width: 34px; height: 34px; }
.ai-pet__messages { overflow-y: auto; padding: 14px 16px; display: grid; align-content: start; gap: 10px; min-height: 160px; }
.ai-pet__msg { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: var(--text-base); line-height: 1.55; overflow-wrap: anywhere; }
.ai-pet__msg--pet { background: var(--color-surface-2); border-top-left-radius: 4px; justify-self: start; }
.ai-pet__msg--user { background: var(--color-action); color: var(--color-on-action); border-top-right-radius: 4px; justify-self: end; }
.ai-pet__msg p + p, .ai-pet__msg p + div, .ai-pet__msg p + ul { margin-top: 8px; }
.ai-pet__step { font-size: var(--text-xs); color: var(--color-text-3); }
.ai-pet__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-pet__links { display: grid; gap: 4px; }
.ai-pet__links a { text-decoration: underline; text-underline-offset: 3px; }
.ai-pet__quiz { display: grid; gap: 6px; }
.ai-pet__quiz-option { text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--color-line-strong); background: var(--color-surface); font-size: var(--text-sm); }
.ai-pet__quiz-option:hover:not(:disabled) { border-color: var(--color-text-3); }
.ai-pet__quiz-option:disabled { opacity: .55; }
.ai-pet__quiz-option.is-chosen { opacity: 1; border-color: var(--color-action); }
.ai-pet__input-area { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--color-line); }
.ai-pet__input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border-radius: var(--radius-control); background: var(--color-bg); border: 1px solid var(--color-line-strong); color: var(--color-text); }
.ai-pet__input:focus { outline: none; border-color: var(--color-focus); }

@media (max-width: 760px) {
  .ai-pet { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  body[data-bookbar] .ai-pet { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .ai-pet__avatar { width: 48px; height: 48px; }
  .ai-pet__avatar .lumi { width: 38px; height: 38px; }
  .ai-pet__chat { width: calc(100vw - 28px); max-height: 70vh; }
}

/* Stay out of the way of bottom sheets that own the screen edge. */
body.explore-panel-open .ai-pet { display: none; }

/* Typing dots while the guide thinks */
.ai-pet__typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.ai-pet__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-3); }
@media (prefers-reduced-motion: no-preference) {
  .ai-pet__typing i { animation: pet-typing 1s ease-in-out infinite; }
  .ai-pet__typing i:nth-child(2) { animation-delay: .15s; }
  .ai-pet__typing i:nth-child(3) { animation-delay: .3s; }
}
@keyframes pet-typing { 50% { opacity: .3; transform: translateY(-2px); } }

/* Lumi floats over the bottom-right corner. Where the page's right edge comes within reach of it
   (narrower than the container plus Lumi), the rows that end there keep that corner free, and a
   focused element always scrolls clear of it, and of the bar at the top. */
html { scroll-padding-block: calc(var(--nav-h) + 16px) 96px; }
@media (max-width: 1320px) {
  .site-footer .container, .home-hero__foot, .home-close__inner { padding-right: max(var(--space-5), 96px); }
}
@media (max-width: 760px) {
  .site-footer .container, .home-hero__foot, .home-close__inner { padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }
  .site-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}


/* css/components/lumi.css */
/* =============================================================
   LUMI — the lantern sprite (web/js/lumi.js). Illustration tokens only (--lumi-*).
   ============================================================= */

.lumi { display: block; overflow: visible; flex: none; }
.lumi * { transform-box: view-box; }
.lumi__body { stroke: var(--lumi-edge); stroke-width: 1.5; }
.lumi__petals circle { stroke: var(--lumi-edge); stroke-width: 1.5; }
.lumi__facet, .lumi__rib { fill: none; stroke: var(--lumi-line); stroke-width: 1.4; stroke-linecap: round; }
.lumi__shine { fill: none; stroke: #fff; stroke-opacity: .7; stroke-width: 2.4; stroke-linecap: round; }
.lumi__cap { fill: var(--lumi-ink); opacity: .82; }
.lumi__tassel { stroke: var(--lumi-paper-2); stroke-width: 3; stroke-linecap: round; }
.lumi__inner { fill: var(--lumi-core); opacity: .85; }
.lumi__eyes ellipse { fill: var(--lumi-ink); }
.lumi__cheek { fill: var(--lumi-cheek); }
.lumi__mouth { fill: var(--lumi-ink); }
.lumi__mouth--line { fill: none; stroke: var(--lumi-ink); stroke-width: 1.8; stroke-linecap: round; }
.lumi__rays path { stroke: var(--lumi-ray); stroke-width: 3; stroke-linecap: round; }
.lumi__halo { fill: none; stroke: var(--lumi-ray); stroke-width: 1.6; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .9; }
.lumi__prop { fill: var(--lumi-prop); stroke: var(--lumi-prop-line); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.lumi__prop .lumi__prop-hole { fill: var(--lumi-ink); stroke: none; }
.lumi__sparks circle { fill: var(--lumi-glow); }
.lumi__glow { opacity: var(--lumi-glow-a); }

.lumi__pose--sway { transform-origin: 60px 64px; transform: rotate(-6deg); }

@media (prefers-reduced-motion: no-preference) {
  .lumi:not(.lumi--still) .lumi__float { animation: lumi-bob 3.4s ease-in-out infinite; }
  .lumi:not(.lumi--still) .lumi__pose--sway { animation: lumi-sway 4.6s ease-in-out infinite; }
  .lumi:not(.lumi--still) .lumi__glow { transform-origin: 60px 64px; animation: lumi-breathe 4s ease-in-out infinite; }
  .lumi:not(.lumi--still) .lumi__eyes { transform-origin: 60px 66px; animation: lumi-blink 5.2s infinite; }
  .lumi--idle:not(.lumi--still) .lumi__eyes { transform-origin: 60px 72px; }
  .lumi:not(.lumi--still) .lumi__rays { transform-origin: 60px 64px; animation: lumi-turn 30s linear infinite; }
  .lumi:not(.lumi--still) .lumi__sparks circle { animation: lumi-spark 3.6s ease-in-out infinite; }
  .lumi:not(.lumi--still) .lumi__sparks circle:nth-child(2) { animation-delay: -1.2s; }
  .lumi:not(.lumi--still) .lumi__sparks circle:nth-child(3) { animation-delay: -2.4s; }
}
@keyframes lumi-bob { 50% { transform: translateY(-3px); } }
@keyframes lumi-sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-2deg); } }
@keyframes lumi-breathe { 0%, 100% { transform: scale(.94); opacity: calc(var(--lumi-glow-a) * .75); } 50% { transform: scale(1.05); opacity: var(--lumi-glow-a); } }
@keyframes lumi-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
@keyframes lumi-turn { to { transform: rotate(360deg); } }
@keyframes lumi-spark { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-6px); opacity: 1; } }

/* The condensing moment: sparks gather, the flame flares, the form appears. */
.lumi-condense { position: relative; display: inline-grid; width: var(--size); height: var(--size); }
.lumi-condense > span { grid-area: 1 / 1; display: grid; place-items: center; }
.lumi-condense__to { opacity: 0; transform: scale(.6); }
.lumi-condense__sparks i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--lumi-glow); box-shadow: 0 0 10px 2px var(--lumi-glow); opacity: 0; transform: translate(var(--dx), var(--dy)); }
.lumi-condense__flash { width: 60%; height: 60%; margin: auto; border-radius: 50%; background: radial-gradient(circle, var(--lumi-core) 0, var(--lumi-glow) 35%, transparent 70%); opacity: 0; transform: scale(.2); }
.lumi-condense.is-on .lumi-condense__sparks i { animation: lumi-gather 760ms var(--d) cubic-bezier(.55, 0, .8, .2) forwards; }
.lumi-condense.is-on .lumi-condense__from { animation: lumi-draw-in 820ms ease-in forwards; }
.lumi-condense.is-on .lumi-condense__flash { animation: lumi-flash 620ms 780ms ease-out forwards; }
.lumi-condense.is-on .lumi-condense__to { animation: lumi-appear 560ms 900ms cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes lumi-gather { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: .9; transform: translate(0, 0) scale(.4); } }
@keyframes lumi-draw-in { 45% { transform: scale(1.08); filter: brightness(1.15); } 85% { transform: scale(.42); opacity: 1; filter: brightness(1.6); } 100% { transform: scale(.25); opacity: 0; filter: brightness(1.8); } }
@keyframes lumi-flash { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes lumi-appear { to { opacity: 1; transform: scale(1); } }

/* css/pages/home.css */
/* =============================================================
   HOME — the hundred doors, the invitation, the doors opening next, the close
   ============================================================= */

/* The realms' colours and the lamp are site tokens (tokens.css): the doors, Explore and the
   journeys share them. */
.home-atlas, .home-featured, .home-close, .home-hero, .home-invite-section, .home-behind, .home-station {
  --section-gap: clamp(96px, 12vh, 160px);
}

/* Titles break between a name and its place, never inside either. */
.t-name, .t-place { word-break: keep-all; }
.t-place { white-space: nowrap; }

/* Reveals (added by script only when motion is allowed, so nothing is ever left hidden) */
.will-reveal { opacity: 0; transform: translate3d(0, 24px, 0); }
.will-reveal.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }

/* --- The threshold: the story of the marks, between the opening and the doors --- */
.home-threshold { --p: 0; position: relative; height: 240vh; background: #07080b; color: var(--color-on-media); }
.home-threshold__stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.home-threshold__arch { grid-area: 1 / 1; position: relative; width: clamp(150px, 20vw, 280px); aspect-ratio: 3 / 4.2; border-radius: 999px 999px 0 0;
  border: 1.5px solid rgba(242, 196, 109, calc(.22 + var(--p) * .5)); border-bottom: 0;
  transform: translate3d(0, 6vh, 0) scale(calc(.72 + var(--p) * 1.5)); transform-origin: 50% 100%;
  box-shadow: 0 0 calc(30px + var(--p) * 110px) calc(var(--p) * 18px) rgba(242, 196, 109, calc(.06 + var(--p) * .2)); }
.home-threshold__arch i { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(70% 60% at 50% 100%, rgba(242, 196, 109, calc(.08 + var(--p) * .32)), rgba(242, 196, 109, 0) 72%); }
.home-threshold__beat { grid-area: 1 / 1; z-index: 1; max-width: 16em; padding-inline: 24px; text-align: center; font-family: var(--font-story); font-size: clamp(1.75rem, 4vw, 3.25rem); line-height: 1.4; letter-spacing: .02em; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .6); opacity: var(--o, 1); transform: translate3d(0, calc((1 - var(--o, 1)) * 18px), 0); }
:root:lang(en) .home-threshold__beat { letter-spacing: 0; }
/* it ends in the page's own ground, so the doors come out of the night */
.home-threshold::after { content: ""; position: absolute; inset: auto 0 0; height: 32vh; background: linear-gradient(to bottom, rgba(7, 8, 11, 0), var(--color-bg)); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .home-threshold { height: auto; }
  .home-threshold__stage { position: static; height: auto; padding-block: 120px 160px; gap: var(--space-6); }
  .home-threshold__beat { grid-area: auto; opacity: 1; transform: none; }
  .home-threshold__arch { display: none; }
}

/* --- The hundred doors --- */
.home-atlas { padding-block: var(--section-gap) calc(var(--section-gap) * .6); }
.home-atlas:focus { outline: none; }
.home-atlas__head { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(240px, 320px); gap: var(--space-6); align-items: end; }
.home-atlas__count { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-story); line-height: .86; color: var(--color-text); }
.home-atlas__count b { min-width: 2ch; font-size: clamp(4.5rem, 11vw, 8.75rem); font-weight: 700; letter-spacing: -.02em; }
.home-atlas__count span { font-size: clamp(1.25rem, 2.4vw, 2rem); color: var(--color-text-3); }
.home-atlas__intro { padding-bottom: 10px; }
.home-atlas__intro h2 { font-family: var(--font-story); font-size: clamp(1.625rem, 3vw, 2.5rem); line-height: 1.25; text-wrap: balance; }
.home-atlas__legend { margin-top: 10px; display: flex; align-items: center; gap: 10px; color: var(--color-text-2); font-size: var(--text-md); }
.home-atlas__legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--lamp-open); box-shadow: 0 0 0 3px color-mix(in oklab, var(--lamp-open) 22%, transparent), 0 0 14px 2px color-mix(in oklab, var(--lamp-open) 55%, transparent); }
.home-atlas__search { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 4px 4px 14px; margin-bottom: 10px; border-radius: 999px; border: 1px solid var(--color-line-strong); background: var(--color-surface); }
.home-atlas__search:focus-within { border-color: var(--color-focus); outline: 2px solid var(--color-focus); outline-offset: 3px; }
.home-atlas__search .icon { color: var(--color-text-3); }
.home-atlas__search input { flex: 1; min-width: 0; height: 34px; border: 0; outline: 0; background: transparent; color: var(--color-text); font-size: var(--text-base); text-overflow: ellipsis; }
.home-atlas__search input::placeholder { color: var(--color-text-3); }
.home-atlas__search .btn { border-radius: 999px; }

.home-atlas__filters { margin-top: var(--space-6); display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); padding-bottom: 4px; }
.home-atlas__filters::-webkit-scrollbar { display: none; }
/* Wide screens show every realm at once; narrower ones scroll the row */
@media (min-width: 1024px) { .home-atlas__filters { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; } }
/* room for a focus ring inside the scrolling row, and a focused chip is brought into view */
.home-atlas__filters { padding: 6px; margin-inline: -6px; margin-bottom: -6px; scroll-padding-inline: 24px; }
.home-atlas__chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--color-line-strong); background: transparent; color: var(--color-text-2); font-size: var(--text-sm); }
.home-atlas__chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--lamp, var(--color-text-2)); }
.home-atlas__chip[data-filter="now"] i { background: var(--lamp-open); box-shadow: 0 0 10px color-mix(in oklab, var(--lamp-open) 60%, transparent); }
.home-atlas__chip .num { color: var(--color-text-3); font-size: var(--text-xs); }
.home-atlas__chip:hover { border-color: var(--color-text-3); color: var(--color-text); }
.home-atlas__chip[aria-pressed="true"] { border-color: var(--color-text); color: var(--color-text); background: color-mix(in oklab, var(--lamp, var(--color-text)) 12%, transparent); }
.home-atlas__chip[aria-pressed="true"] .num { color: var(--color-text-2); }

.home-atlas__body { margin-top: var(--space-5); display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-7); align-items: start; }
.home-atlas__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px 10px; }

/* A door: an arch, its place in the realm's colour, its word at rest; a lit door is open now. */
.door { position: relative; isolation: isolate; aspect-ratio: 3 / 4; container-type: inline-size; --lamp: var(--realm-mirror-salt); }
.door:not(.is-found) { border-radius: 999px 999px 8px 8px; background: var(--color-surface-2); opacity: .45; }
.door:not(.is-found) .door__no { display: none; }
.door[data-realm="fire-stone"] { --lamp: var(--realm-fire-stone); }
.door[data-realm="sand-stars"] { --lamp: var(--realm-sand-stars); }
.door[data-realm="old-roads"] { --lamp: var(--realm-old-roads); }
.door[data-realm="ice-night"] { --lamp: var(--realm-ice-night); }
.door[data-realm="water-deep"] { --lamp: var(--realm-water-deep); }
.door[data-realm="mist-temple"] { --lamp: var(--realm-mist-temple); }
.door[data-realm="city-rules"] { --lamp: var(--realm-city-rules); }
.door__link {
  position: absolute; inset: 0; overflow: hidden; border-radius: 999px 999px 8px 8px;
  /* the number and the name are two rows in the flow, so a long name can never cover the number */
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 16% 4px 8px;
  /* every door is a window at night, in both themes: closed ones in one grey mist with their realm
     as a thin arch line, open ones in full colour with the lamp lit inside */
  background: #0f1115;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lamp) 42%, transparent);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), opacity .3s var(--ease-out);
}
.door__arch { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(1) brightness(.72) contrast(1.05); opacity: .5; transition: opacity .4s var(--ease-out), filter .4s var(--ease-out); }
.home-atlas__grid.is-near .door__arch { background-image: var(--thumb); }
/* shade under the number and under the name, so white text holds on any picture */
.door__link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 9, 12, .62) 0%, rgba(8, 9, 12, 0) 30%, rgba(8, 9, 12, 0) 44%, rgba(8, 9, 12, .9) 100%); }
.door__no { position: relative; z-index: 1; text-align: center; font-size: .75rem; letter-spacing: .06em; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.door__word {
  position: relative; z-index: 1; max-width: 100%; text-align: center; font-family: var(--font-ui); font-weight: 500;
  font-size: .75rem; line-height: 1.25; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
  overflow-wrap: normal; hyphens: manual; text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* English names run to two or three words; an arch narrower than about 84px cannot hold them at a
   readable size. There the tile carries the door's number as a plate, and the name is in the card
   beside it (hover, focus or tap) and in the door's label. */
:root:lang(en) .door__link { justify-content: flex-end; padding-bottom: 10px; }
:root:lang(en) .door__word { display: none; }
:root:lang(en) .door__no { font-family: var(--font-story); font-size: clamp(.875rem, 1vw, 1rem); font-weight: 700; letter-spacing: .04em; }
@container (min-width: 84px) {
  :root:lang(en) .door__link { justify-content: space-between; padding-bottom: 8px; }
  :root:lang(en) .door__word { display: -webkit-box; }
  :root:lang(en) .door__no { font-family: var(--font-ui); font-size: .75rem; font-weight: 400; letter-spacing: .06em; }
}
/* A lit door: full colour, a warm light low in the arch, a slow candle breath */
.door[data-open="true"] .door__arch { filter: none; opacity: .95; }
.door[data-open="true"] .door__link { box-shadow: inset 0 0 0 1.5px var(--lamp-open), inset 0 -28px 34px -16px color-mix(in oklab, var(--lamp-open) 75%, transparent), 0 0 26px -6px color-mix(in oklab, var(--lamp-open) 75%, transparent); }
.door[data-open="true"] .door__link::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 45% at 50% 100%, color-mix(in oklab, var(--lamp-open) 55%, transparent), transparent 70%); mix-blend-mode: screen; pointer-events: none; }
[data-theme="light"] .door[data-open="true"]::before { content: ""; position: absolute; inset: -16px -12px; z-index: -1; border-radius: 999px 999px 24px 24px; background: radial-gradient(closest-side, rgba(242, 196, 109, .55), rgba(242, 196, 109, 0)); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .door[data-open="true"] .door__link::before { animation: door-candle 4s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -370ms); }
}
@keyframes door-candle { 0% { opacity: .7; } 45% { opacity: 1; } 70% { opacity: .82; } 100% { opacity: .95; } }
.door.is-found:hover .door__link, .door.is-selected .door__link { transform: translateY(-4px); box-shadow: inset 0 0 0 2px var(--lamp), 0 16px 30px -18px rgba(0, 0, 0, .8); }
.door.is-found:not([data-open="true"]):is(:hover, .is-selected) .door__arch { filter: grayscale(.4) brightness(.9); opacity: .78; }
.door.is-found .door__link:active { transform: scale(.96); transition-duration: 90ms; }
.door.is-dim { opacity: .2; }
.door__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .home-atlas__grid.will-light .door.is-found { opacity: 0; transform: translate3d(0, 8px, 0); }
  .home-atlas__grid.will-light.is-lit .door.is-found { opacity: 1; transform: none; transition: opacity .5s var(--ease-out) calc(var(--i) * 12ms), transform .5s var(--ease-out) calc(var(--i) * 12ms); }
  .home-atlas__grid.will-light.is-lit .door.is-found.is-dim { opacity: .2; }
  .home-atlas__grid.is-lit .door[data-open="true"] .door__link { animation: door-flare 1.2s var(--ease-out) .8s both; }
}
@keyframes door-flare { 0% { box-shadow: inset 0 0 0 1px transparent; } 40% { box-shadow: inset 0 0 0 2px var(--lamp-open), 0 0 34px 6px color-mix(in oklab, var(--lamp-open) 80%, transparent); } }
.home-atlas__hint { margin-top: 10px; min-height: 1.4em; font-size: var(--text-xs); letter-spacing: .06em; color: var(--color-text-3); opacity: 0; transition: opacity var(--dur); }
.home-atlas__hint.is-shown { opacity: 1; }
.home-atlas__mist { margin-top: 6px; display: flex; align-items: center; gap: 14px; font-size: var(--text-sm); color: var(--color-text-2); }
.home-atlas__mist .num { color: var(--color-text-3); letter-spacing: .06em; }
.home-atlas__mist i { flex: 1; min-width: 0; height: 6px; display: flex; gap: 6px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); }
.home-atlas__mist b { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--color-line-strong); }

/* The chosen door */
.home-atlas__panel { position: sticky; top: calc(var(--nav-h) + var(--space-5)); }
.home-atlas__peek-close { display: none; }
.door-card { display: grid; gap: var(--space-4); --lamp: var(--realm-mirror-salt); }
.door-card__media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background-color: var(--color-surface-2); background-size: cover; background-position: center; box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .7); }
.door-card__media::before { content: ""; position: absolute; inset: -24px; background: inherit; filter: blur(18px); }
.door-card__layer { position: absolute; inset: 0; opacity: 0; transition: opacity .28s var(--ease-out); }
.door-card__layer.is-shown { opacity: 1; }
.door-card__layer.is-gone { opacity: 0; }
.door-card__layer img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.door-card:hover .door-card__layer img { transform: scale(1.03); }
.door-card__body { display: grid; gap: 8px; }
.door-card__meta { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); letter-spacing: .1em; color: var(--color-text-3); }
.door-card__meta i { width: 8px; height: 8px; border-radius: 50%; background: var(--lamp); }
.door-card__title { font-family: var(--font-story); font-size: var(--text-xl); line-height: 1.3; color: var(--color-text); }
.door-card__title .t-place { display: block; margin-top: 2px; font-family: var(--font-ui); font-weight: 500; font-size: var(--text-sm); letter-spacing: .06em; color: var(--color-text-2); }
.door-card__hook { color: var(--color-text-2); font-size: var(--text-base); line-height: 1.6; text-wrap: pretty; }
.door-card__role { font-family: var(--font-story); font-size: var(--text-base); line-height: 1.5; color: var(--color-text); }
.door-card__opens { display: grid; gap: 2px; font-size: var(--text-sm); color: var(--color-text-2); text-wrap: pretty; }
.door-card__opens b { font-weight: var(--weight-semibold); font-size: var(--text-xs); letter-spacing: .1em; color: var(--color-text-3); }
.door-card__clock { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--text-sm); color: var(--color-text-2); }
.door-card__clock.is-open span:last-child { color: var(--color-text); }
.door-card__needs { font-size: var(--text-sm); color: var(--color-text-3); font-style: italic; }
.door-card__needs::before { content: ""; display: inline-block; width: 12px; height: 1px; margin-right: 8px; vertical-align: middle; background: currentColor; opacity: .6; }
.door-card__clock.is-open span:last-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--lamp-open); box-shadow: 0 0 10px color-mix(in oklab, var(--lamp-open) 60%, transparent); }
.door-card__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--text-sm); color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 4px; }
.door-card:hover .door-card__go { text-decoration-color: currentColor; }

/* Tablets and phones: the card is a peek sheet that slides up when a door is tapped. */
@media (max-width: 960px) {
  .home-atlas__head { grid-template-columns: auto minmax(0, 1fr); }
  .home-atlas__search { grid-column: 1 / -1; margin-bottom: 0; }
  .home-atlas__body { grid-template-columns: minmax(0, 1fr); }
  .home-atlas__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .home-atlas__panel {
    position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); top: auto; z-index: 60;
    padding: 12px; border-radius: 18px; background: var(--color-surface); border: 1px solid var(--color-line-strong); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7);
    transform: translate3d(0, calc(100% + 32px), 0); visibility: hidden; transition: transform .28s var(--ease-out), visibility 0s linear .28s;
  }
  .home-atlas__panel.is-peek { transform: none; visibility: visible; transition: transform .28s var(--ease-out); }
  /* a handle to pull it down by, and a soft shade above it so it reads as a layer (taps still reach
     the doors, so another door simply takes its place) */
  .home-atlas__panel { padding-top: 22px; touch-action: pan-x; }
  .home-atlas__panel::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--color-line-strong); }
  .home-atlas__panel.is-peek::after { content: ""; position: absolute; left: -12px; right: -12px; bottom: calc(100% - 1px); height: 30vh; background: linear-gradient(to top, rgba(5, 6, 8, .32), rgba(5, 6, 8, 0)); pointer-events: none; }
  .home-atlas__peek-close { display: grid; place-items: center; position: absolute; top: 8px; right: 8px; z-index: 1; width: 36px; height: 36px; border-radius: 50%; color: var(--color-text-2); }
  .door-card { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding-right: 32px; }
  .door-card__media { border-radius: 10px; box-shadow: none; }
  .door-card__hook { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--text-sm); line-height: 1.5; }
  .door-card__opens { display: block; font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .door-card__opens b { display: inline; margin-right: 6px; }
  .door-card__title { font-size: var(--text-lg); }
  .door-card__go { display: inline-flex; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #f2c46d; color: #1d1405; text-decoration: none; font-weight: var(--weight-semibold); }
}
@media (pointer: coarse) {
  body[data-atlas-in-view] .ai-pet { opacity: 0; pointer-events: none; transform: translateY(16px); transition: opacity var(--dur), transform var(--dur); }
}
@media (max-width: 760px) {
  .home-atlas__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .home-atlas__filters { margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
  .home-atlas__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 8px; }
  .door__link { padding: 14% 3px 6px; }
  .door__word { font-size: .6875rem; }
  .door__no { font-size: .625rem; }
  :root:lang(en) .door__no { font-size: .8125rem; }
  .home-atlas__mist { flex-wrap: wrap; gap: 6px 12px; }
  .home-atlas__mist i { flex-basis: 100%; }
}

/* --- Behind a door: a few lines in its own voice --- */
.home-behind { padding-block: calc(var(--section-gap) * .7) calc(var(--section-gap) * .5); }
.home-behind__inner { display: grid; gap: var(--space-5); max-width: 52rem; }
.home-behind__text p { font-family: var(--font-story); font-size: clamp(1.375rem, 2.4vw, 2rem); line-height: 1.75; color: var(--color-text); text-wrap: pretty; }
:root:lang(en) .home-behind__text p { line-height: 1.5; }
.home-behind__door { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; color: var(--color-text-2); border-bottom: 1px solid var(--color-line-strong); padding-bottom: 6px; width: fit-content; transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.home-behind__door:hover { color: var(--color-text); border-color: currentColor; }
.home-behind__door .num { font-size: var(--text-xs); letter-spacing: .08em; color: var(--color-text-3); }
.home-behind__door b { font-family: var(--font-story); font-weight: 700; font-size: var(--text-lg); color: var(--color-text); }
.home-behind__door span:not(.num) { font-size: var(--text-sm); }

/* --- The Night Station: three tickets still hanging --- */
.home-station { padding-block: calc(var(--section-gap) * .5); border-top: 1px solid var(--color-line); }
.home-station__inner { display: grid; grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.home-station__text { display: grid; gap: var(--space-3); justify-items: start; }
.home-station__text h2 { font-family: var(--font-story); font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.25; }
.home-station__text p { color: var(--color-text-2); text-wrap: pretty; }
.home-station__racks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); min-height: 220px; }
.home-station__racks > li { min-width: 0; }
/* a ticket needs about 230px; narrower screens hang fewer of them */
@media (max-width: 1200px) {
  .home-station__racks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-station__racks > li:nth-child(n + 3) { display: none; }
}
@media (max-width: 960px) {
  .home-station__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}
@media (max-width: 600px) {
  .home-station__racks { grid-template-columns: minmax(0, 1fr); }
  .home-station__racks > li:nth-child(n + 2) { display: none; }
}

/* --- Invitation: find your type --- */
.home-invite-section { padding-block: calc(var(--section-gap) * .5); }
.home-invite { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; padding-block: var(--space-7); border-block: 1px solid var(--color-line); }
.home-invite__face { display: grid; filter: drop-shadow(0 0 22px rgba(242, 196, 109, .35)); }
.home-invite__text h2 { font-family: var(--font-story); font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.3; text-wrap: balance; }
.home-invite__text p { margin-top: 8px; color: var(--color-text-2); font-size: var(--text-md); max-width: 34em; text-wrap: pretty; }
.home-invite__text p.home-invite__lumi { margin-top: 12px; font-family: var(--font-story); font-size: var(--text-lg); color: var(--color-text); }
.home-invite__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* A returning traveller's doors, each with where it stands now */
.home-invite__doors { margin-top: var(--space-4); display: grid; gap: 2px; max-width: 40em; }
.home-invite__doors a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-line); color: var(--color-text-2); transition: color var(--dur) var(--ease-out); }
.home-invite__doors a:hover { color: var(--color-text); }
.home-invite__doors .num { font-size: var(--text-xs); letter-spacing: .08em; color: var(--color-text-3); }
.home-invite__doors b { font-family: var(--font-story); font-weight: 700; font-size: var(--text-lg); color: var(--color-text); }
.home-invite__doors span:last-child { font-size: var(--text-sm); text-align: right; }
.home-invite__doors a.is-open span:last-child { color: var(--color-text); }
.home-invite__doors a.is-open span:last-child::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--lamp-open); box-shadow: 0 0 8px color-mix(in oklab, var(--lamp-open) 60%, transparent); }
@media (max-width: 960px) {
  .home-invite { grid-template-columns: auto minmax(0, 1fr); }
  .home-invite__actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 760px) {
  .home-invite { gap: var(--space-4); padding-block: var(--space-6); }
  .home-invite__actions .btn { flex: 1 1 auto; }
}

/* --- Opening next --- */
.home-featured { padding-block: calc(var(--section-gap) * .5) var(--section-gap); }
.home-featured .section-head h2 { font-family: var(--font-story); font-size: clamp(1.625rem, 3vw, 2.5rem); font-weight: 700; }
.home-featured__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: minmax(320px, auto); gap: var(--space-5); }
.home-featured__grid .feature-card--lead { grid-row: span 2; }
/* the countdown is the card's own headline: when this door opens, on its clock */
.home-card__count { align-self: start; display: grid; gap: 2px; color: #f6f1e8; text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.home-card__count b { font-family: var(--font-story); font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.625rem); line-height: 1.2; font-variant-numeric: tabular-nums; }
.feature-card--lead .home-card__count b { font-size: clamp(1.625rem, 2.6vw, 2.25rem); }
.home-card__count.is-open b { color: #f7d48c; }
.home-card__no { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); letter-spacing: .08em; color: rgba(246, 241, 232, .78); }
.home-card__no i { width: 8px; height: 8px; border-radius: 50%; background: var(--lamp); }
.home-card__count.is-open .home-card__no i { background: var(--lamp-open, #f2c46d); box-shadow: 0 0 10px rgba(242, 196, 109, .7); }
/* small cards keep their line for a hover; the lead card always shows it */
@media (hover: hover) and (min-width: 961px) {
  .home-card:not(.feature-card--lead) .feature-card__hook { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease-out), opacity .3s var(--ease-out); }
  .home-card:not(.feature-card--lead):is(:hover, :focus-visible) .feature-card__hook { max-height: 6em; opacity: 1; }
}
.home-card__stamp { align-self: start; display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; padding: 5px 12px; border-radius: 999px; background: rgba(10, 11, 14, .6); color: #f6f1e8; font-size: var(--text-xs); letter-spacing: .04em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.home-card__stamp i { width: 8px; height: 8px; border-radius: 50%; background: var(--lamp); }
.home-card__stamp .num { color: rgba(246, 241, 232, .74); }
.home-card .feature-card__title { font-family: var(--font-story); font-weight: 700; font-size: var(--text-xl); line-height: 1.25; transition: transform .6s var(--ease-out); }
.home-card.feature-card--lead .feature-card__title { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
.home-card .feature-card__title .t-place { display: block; margin-top: 4px; font-family: var(--font-ui); font-weight: 500; font-size: max(.5em, .875rem); letter-spacing: .06em; opacity: .82; }
.home-card .feature-card__hook { margin-top: 6px; font-size: var(--text-sm); line-height: 1.55; color: rgba(246, 241, 232, .86); text-wrap: pretty; }
.home-card .feature-card__meta .nowrap { white-space: nowrap; }
.home-card img { transition: transform .6s var(--ease-out); }
.home-card:hover img, .home-card:focus-visible img { transform: scale(1.06); }
.home-card:hover .feature-card__title, .home-card:focus-visible .feature-card__title { transform: translateY(-4px); }
@media (prefers-reduced-motion: no-preference) {
  .home-featured__grid.will-reveal .feature-card { clip-path: inset(12% 0 0 0 round 16px); opacity: 0; }
  .home-featured__grid.will-reveal.is-in .feature-card { clip-path: inset(0 round 16px); opacity: 1; transition: clip-path .9s var(--ease-out) calc(var(--i) * 70ms), opacity .6s var(--ease-out) calc(var(--i) * 70ms); }
}
@media (max-width: 960px) {
  .home-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(260px, auto); }
  .home-featured__grid .feature-card--lead { grid-column: span 2; grid-row: auto; min-height: 400px; }
}
@media (max-width: 600px) {
  .home-featured__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80vw; grid-auto-rows: 440px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)); scroll-padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
  .home-featured__grid::-webkit-scrollbar { display: none; }
  .home-featured__grid .feature-card { scroll-snap-align: start; }
  .home-featured__grid .feature-card--lead { grid-column: auto; min-height: 0; }
}

/* --- The close: the line the journey began with, and the next door to open --- */
.home-close { padding-block: var(--section-gap) calc(var(--section-gap) * .7); border-top: 1px solid var(--color-line); }
.home-close__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-8); align-items: end; }
.home-close__quote { margin: 0; display: flex; gap: var(--space-5); align-items: flex-end; }
.home-close__quote blockquote { margin: 0; }
.home-close__quote blockquote p { font-family: var(--font-story); font-size: clamp(2.25rem, 4.6vw, 4.25rem); line-height: 1.25; color: var(--color-text); text-wrap: balance; }
.home-close__quote blockquote span { display: inline-block; }
:root:lang(zh-CN) .home-close__quote blockquote p { writing-mode: vertical-rl; letter-spacing: .2em; line-height: 1.7; }
:root:lang(zh-CN) .home-close__quote blockquote span { display: block; }
.home-close__quote figcaption { font-size: var(--text-xs); letter-spacing: .1em; color: var(--color-text-3); }
:root:lang(zh-CN) .home-close__quote figcaption { writing-mode: vertical-rl; }
.home-close__side { display: grid; gap: var(--space-4); padding-bottom: 10px; }
/* English sets the quote across the line, so its credit sits under it and the side column keeps a
   readable width instead of taking what is left. */
:root:lang(en) .home-close__inner { grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); }
:root:lang(en) .home-close__quote { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
@media (max-width: 960px) { :root:lang(en) .home-close__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }
:root:lang(en) .home-close__next a { display: block; }
:root:lang(en) .home-close__next a .num { display: block; margin-bottom: 8px; }
:root:lang(en) .home-close__next a .icon { display: inline-block; vertical-align: -1px; margin-left: 4px; }
.home-close__next a { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 10px; font-family: var(--font-story); font-size: clamp(1.25rem, 2vw, 1.625rem); color: var(--color-text); border-bottom: 1px solid var(--color-line-strong); padding-bottom: 6px; }
.home-close__next a .num { font-family: var(--font-ui); font-size: var(--text-sm); letter-spacing: .08em; color: var(--color-text-3); }
.home-close__next a:hover { border-color: currentColor; }
.home-close__credit { font-size: var(--text-sm); color: var(--color-text-3); }
body[data-page="home"] .site-footer__line { display: none; }
@media (max-width: 760px) {
  .home-close__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
:root:lang(zh-CN) .door-card__needs { font-style: normal; }

/* css/pages/explore.css */
/* =============================================================
   EXPLORE — results area
   ============================================================= */

.explore-results { padding-block: var(--space-5) var(--space-9); }
.explore-results__count { min-height: 1.5em; margin-bottom: var(--space-4); font-size: var(--text-sm); color: var(--color-text-3); }
.explore-more { display: flex; justify-content: center; margin-top: var(--space-6); }
.explore-more__end { font-size: var(--text-sm); color: var(--color-text-3); }

/* css/pages/scenes.css */
/* =============================================================
   SCENES — each journey as a scroll of scenes (web/js/scenes.js).
   A fixed backdrop (sky · motif · texture) walks the journey's lighting arc
   (--arc-h/--arc-s; lightness comes from the theme so text stays AA). Scenes
   reveal once (is-in, staggered by --i) and drift with their pass (--p).
   Only transform, opacity and filter animate.
   ============================================================= */

@property --arc-h { syntax: '<number>'; inherits: true; initial-value: 222; }
@property --arc-s { syntax: '<number>'; inherits: true; initial-value: 30; }

.scenes { --sky-l: 7%; --sky-l2: 12%; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); position: relative; isolation: isolate; transition: --arc-h 1.4s var(--ease-in-out), --arc-s 1.4s var(--ease-in-out); }
[data-theme="light"] .scenes { --sky-l: 95%; --sky-l2: 89%; }

.scenes__backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.scenes__sky { position: absolute; inset: 0; background:
  radial-gradient(120% 80% at 70% 0%, hsl(var(--arc-h) calc(var(--arc-s) * 1%) var(--sky-l2)) 0, transparent 70%),
  hsl(var(--arc-h) calc(var(--arc-s) * .8%) var(--sky-l)); }
.scenes__motif { position: absolute; inset: 0; }
.scenes__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scenes__texture { position: absolute; inset: 0; opacity: .5; mix-blend-mode: soft-light; background-size: 240px 240px; }
[data-theme="light"] .scenes__texture { opacity: .35; mix-blend-mode: multiply; }
.scenes .scenes__texture.scenes__texture--image { background-size: 480px auto; background-repeat: repeat; opacity: .11; }
[data-theme="light"] .scenes .scenes__texture.scenes__texture--image { opacity: .09; }

/* Textures: procedural grain, tinted per material */
.tex-salt .scenes__texture, .tex-ember .scenes__texture, .tex-stars .scenes__texture, .tex-sand .scenes__texture,
.tex-ink .scenes__texture, .tex-caustics .scenes__texture, .tex-snow .scenes__texture, .tex-dust .scenes__texture,
.tex-paper .scenes__texture, .tex-haze .scenes__texture, .tex-fog .scenes__texture {
  background-image: var(--grain);
}
.tex-salt .scenes__texture { background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.5) 0 1px, transparent 1.5px), radial-gradient(circle at 70% 80%, rgba(255,255,255,.35) 0 1px, transparent 1.5px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 37px 41px, 53px 47px, 240px 240px; }
.tex-ember .scenes__texture { opacity: .6; }
.tex-ink .scenes__texture { opacity: .65; }

/* --- A scene --- */
.scene { position: relative; min-height: 100svh; display: grid; align-items: center; padding-block: clamp(96px, 16vh, 180px); overflow: clip; }
.scene--chapter + .scene--chapter, .scene--prologue { min-height: 92svh; }
.scene__inner { position: relative; width: 100%; }
.scene__inner--narrow { max-width: 860px; }
.scene__inner--low { align-self: end; }
.scene__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.scene__grid--word { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.scene__artcol { display: grid; align-items: center; }
.scene__artcol > * { grid-area: 1 / 1; }
.scene__artcol .scene__art { position: relative; z-index: 1; }
.scene__frame--inset { justify-self: end; width: min(280px, 56%); aspect-ratio: 4 / 5; margin-right: 4%; }
.scene__grid--fork { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }

/* Type: one display size for who you are and the ending, one for chapter titles, prose tuned per language */
.scene__eyebrow, .scene__num { font-size: var(--text-xs); letter-spacing: .22em; color: var(--color-text-3); }
.scene__num { font-variant-numeric: tabular-nums; }
.scene__display { margin-top: 14px; font-family: var(--font-story); font-weight: 700; font-size: clamp(2.75rem, 8vw, 7rem); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
.scene__display--prose { font-size: clamp(1.625rem, 3.4vw, 2.75rem); font-weight: 400; line-height: 1.55; letter-spacing: 0; text-wrap: pretty; }
:lang(en) .scene__display { line-height: .98; }
:lang(en) .scene__display--prose { line-height: 1.35; }
.scene__title { margin-top: 12px; font-family: var(--font-story); font-weight: 700; font-size: clamp(2rem, 4.6vw, 3.75rem); line-height: 1.12; text-wrap: balance; }
.scene__lead { margin-top: var(--space-5); max-width: 34em; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.9; color: var(--color-text-2); text-wrap: pretty; }
.scene__prose { margin-top: var(--space-5); max-width: 32em; display: grid; gap: 1em; }
.scene__prose p { font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.95; color: var(--color-text-2); text-wrap: pretty; }
:lang(en) .scene__lead, :lang(en) .scene__prose p { line-height: 1.7; }
.scene__art { font-family: var(--font-story); font-weight: 700; font-size: clamp(5rem, 15vw, 13rem); line-height: .92; color: transparent; -webkit-text-stroke: 1.2px color-mix(in srgb, var(--accent) 70%, var(--color-text) 30%); text-wrap: balance; transform: translate3d(0, calc((var(--p, .5) - .5) * -60px), 0); }
@supports not (-webkit-text-stroke: 1px red) { .scene__art { color: color-mix(in srgb, var(--accent) 35%, transparent); } }

/* Media: framed (split), bleeding (full scene) and the hero; the cover is graded per scene when a journey has no image of its own */
.scene__media { position: relative; overflow: hidden; }
.scene__media img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, calc((var(--p, .5) - .5) * -8%), 0) scale(1.14); will-change: transform; }
/* Plates: until a scene has its own image it shows the journey's palette at that point of the
   arc (never the cover again). Four kinds echo four kinds of shot: a wide horizon, an atmosphere
   behind text, a lamp in the dark, a kept paper stub. Grain and a slow light make them material. */
.scene__plate { --h: var(--ph, var(--arc-h)); --s: calc(var(--ps, var(--arc-s)) * 1%); background-color: hsl(var(--h) var(--s) 10%); }
.scene__plate::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 240px 240px; opacity: .4; mix-blend-mode: soft-light; pointer-events: none; }
.plate__light { position: absolute; inset: -12%; background: radial-gradient(42% 30% at 50% 38%, hsl(var(--h) var(--s) 72% / .16) 0, transparent 70%); transform: translate3d(0, calc((var(--p, .5) - .5) * -12%), 0); will-change: transform; }
.scene__plate[data-plate="horizon"] { background:
  radial-gradient(70% 34% at 50% 62%, color-mix(in srgb, var(--accent) 34%, transparent) 0, transparent 72%),
  linear-gradient(180deg, hsl(var(--h) var(--s) 20%) 0%, hsl(var(--h) var(--s) 32%) 61.5%, hsl(var(--h) calc(var(--s) * .7) 11%) 62%, hsl(var(--h) calc(var(--s) * .6) 7%) 100%); }
.scene__plate[data-plate="horizon"]::before { content: ""; position: absolute; left: 0; right: 0; top: 62%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent) 30% 70%, transparent); }
[data-theme="light"] .scene__plate[data-plate="horizon"] { background:
  radial-gradient(70% 34% at 50% 62%, color-mix(in srgb, var(--accent) 40%, transparent) 0, transparent 72%),
  linear-gradient(180deg, hsl(var(--h) var(--s) 88%) 0%, hsl(var(--h) var(--s) 76%) 61.5%, hsl(var(--h) calc(var(--s) * .7) 60%) 62%, hsl(var(--h) calc(var(--s) * .6) 50%) 100%); }
.scene__plate[data-plate="field"] { background:
  radial-gradient(90% 70% at 80% 16%, hsl(var(--h) var(--s) 30%) 0, transparent 70%),
  radial-gradient(60% 50% at 10% 92%, color-mix(in srgb, var(--accent) 20%, transparent) 0, transparent 70%),
  hsl(var(--h) calc(var(--s) * .8) 8%); }
.scene__plate[data-plate="lamp"] { background:
  radial-gradient(circle at 50% 56%, color-mix(in srgb, var(--accent) 80%, #fff) 0 3%, color-mix(in srgb, var(--accent) 42%, transparent) 4.2%, transparent 36%),
  radial-gradient(80% 46% at 50% 100%, hsl(var(--h) var(--s) 18%) 0, transparent 72%),
  hsl(var(--h) calc(var(--s) * .7) 7%); }
.scene__plate[data-plate="stub"] { background: linear-gradient(165deg, hsl(var(--h) calc(var(--s) * .45) 90%) 0, hsl(var(--h) calc(var(--s) * .55) 79%) 100%); }
.scene__plate[data-plate="stub"]::before { content: ""; position: absolute; left: 14%; right: 14%; top: 26%; height: 1px; background: color-mix(in srgb, var(--accent) 70%, #000 10%); box-shadow: 0 10px 0 -0.5px hsl(var(--h) var(--s) 40% / .35), 0 20px 0 -0.5px hsl(var(--h) var(--s) 40% / .25); }
.scene__plate[data-plate="stub"]::after { opacity: .55; mix-blend-mode: multiply; }
.plate__no { position: absolute; left: 14%; top: 12%; font-size: 11px; letter-spacing: .14em; color: hsl(var(--h) calc(var(--s) * .5) 30%); }
.plate__stamp { position: absolute; right: 12%; bottom: 12%; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--accent) 75%, #6b2a1a); box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix(in srgb, var(--accent) 55%, transparent); opacity: .7; transform: rotate(-14deg); }
.scene__frame { margin: 0; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .7); }
.scene__frame .scene__media { height: 100%; }
.scene__frame--still { aspect-ratio: 1; }
.scene__media--bleed { position: absolute; inset: 0; }
.scene__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 7, 10, .9) 0%, rgba(6, 7, 10, .55) 40%, rgba(6, 7, 10, .1) 75%), linear-gradient(90deg, rgba(6, 7, 10, .6) 0%, transparent 60%); }
.scene--bleed + .scene, .scene--hero + .scene { margin-top: -1px; }
.on-media { color: var(--color-on-media); }
.on-media .scene__eyebrow, .on-media .scene__num { color: rgba(246, 241, 232, .74); }
.on-media .scene__prose p { color: rgba(246, 241, 232, .88); }

/* The opening: full bleed, title low, a scroll cue */
.scene--hero { min-height: 100svh; align-items: end; padding-block: calc(var(--nav-h) + var(--space-4) + 64px) clamp(48px, 10vh, 112px); background: #07080b; } /* top padding keeps a long title clear of the back/share bar */
.scene__media--hero img { transform: translate3d(0, calc(var(--p, .5) * 18%), 0) scale(calc(1.06 + var(--p, .5) * .1)); }
.scene__scrim--hero { background: linear-gradient(0deg, hsl(var(--arc-h) calc(var(--arc-s) * .8%) var(--sky-l)) 0%, rgba(6, 7, 10, .55) 22%, rgba(6, 7, 10, .2) 60%, rgba(6, 7, 10, .45) 100%), linear-gradient(90deg, rgba(6, 7, 10, .65) 0%, transparent 65%); }
.scene__inner--hero { display: grid; gap: var(--space-6); }
.scene__top { position: absolute; top: calc(var(--nav-h) + var(--space-4)); left: 0; right: 0; z-index: 1; }
.scene--hero .detail-hero__text { transform: translate3d(0, calc(var(--p, .5) * -60px), 0); }
.scene__cue { justify-self: start; display: inline-flex; align-items: center; gap: 12px; font-size: var(--text-sm); color: rgba(246, 241, 232, .8); }
.scene__cue span { width: 1px; height: 36px; background: linear-gradient(rgba(246, 241, 232, .9), transparent); }
@media (prefers-reduced-motion: no-preference) { .scene__cue span { animation: scene-cue 2.4s var(--ease-in-out) infinite; transform-origin: top; } }
@keyframes scene-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* The fork: choosing lights a small lamp */
.fork__lamp { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--color-text-3); transform: translateY(2px); transition: background-color var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur-slow) var(--ease-out); }
.fork__option[aria-pressed="true"] .fork__lamp { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 24px 4px color-mix(in srgb, var(--accent) 55%, transparent); }
.fork__option::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20px 50%, color-mix(in srgb, var(--accent) 40%, transparent) 0, transparent 60%); opacity: 0; pointer-events: none; }
.fork__option.is-lit::after { animation: fork-light 1.1s var(--ease-out); }
@keyframes fork-light { 0% { opacity: 0; transform: scaleX(.2); transform-origin: left; } 30% { opacity: 1; } 100% { opacity: 0; transform: scaleX(1.6); transform-origin: left; } }

/* The ending: a small, faded echo of the opening */
.scene__echo { margin: 0 0 var(--space-6); width: min(220px, 50vw); aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; transform: rotate(-3deg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6), 0 0 0 8px var(--color-surface); }
.scene__echo .scene__media { height: 100%; }
.scene__echo img { filter: grayscale(.6) sepia(.25) brightness(.95); transform: none; }

/* Reveal: hidden only once the engine is armed (JS running), shown once, staggered */
.is-armed .scene [data-reveal] { opacity: 0; transform: translate3d(0, 40px, 0); filter: blur(8px); transition: opacity var(--dur-scene) var(--ease-out), transform var(--dur-scene) var(--ease-out), filter var(--dur-scene) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.is-armed .scene.is-in [data-reveal] { opacity: 1; transform: none; filter: none; }
.is-armed .scene__frame[data-reveal] { clip-path: inset(12% 8% 12% 8% round 24px); transition-property: opacity, transform, filter, clip-path; }
.is-armed .scene.is-in .scene__frame[data-reveal] { clip-path: inset(0 round 24px); }
.is-armed .scene.is-in .scene__art[data-reveal] { transform: translate3d(0, calc((var(--p, .5) - .5) * -60px), 0); }
@media (prefers-reduced-motion: reduce) {
  .is-armed .scene [data-reveal] { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; }
  .scene__media img, .scene__media--hero img, .scene__art, .scene--hero .detail-hero__text, .plate__light { transform: none !important; }
}
@media print { .is-armed .scene [data-reveal] { opacity: 1; transform: none; filter: none; } .scenes__backdrop { display: none; } }

/* ---------- Motifs ---------- */

/* Mirror: sky above a rising horizon, the same sky reflected below */
.mirror { position: absolute; inset: 0; --horizon: 62%; --still: 0; --glitter: 0; }
.mirror__sky, .mirror__water { position: absolute; left: 0; right: 0; }
.mirror__sky { top: 0; height: var(--horizon); -webkit-mask-image: linear-gradient(0deg, #000, transparent 85%); mask-image: linear-gradient(0deg, #000, transparent 85%); }
.mirror__water { top: var(--horizon); bottom: 0; transform: scaleY(-1); transform-origin: top; filter: blur(calc((1 - var(--still)) * 6px)) saturate(1.1); opacity: calc((.1 + var(--still) * .3) * (.4 + var(--light) * .6)); -webkit-mask-image: linear-gradient(0deg, #000, transparent 90%); mask-image: linear-gradient(0deg, #000, transparent 90%); }
.mirror__line { position: absolute; left: 0; right: 0; top: var(--horizon); height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 80%, white), transparent); opacity: calc(.3 + var(--still) * .6); }
.mirror__glitter { position: absolute; left: 0; right: 0; top: var(--horizon); bottom: 0; opacity: var(--glitter); transition: opacity 1.2s var(--ease-out); }
.mirror__glitter i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff6e2; box-shadow: 0 0 6px 1px rgba(255, 236, 200, .8); }
@media (prefers-reduced-motion: no-preference) { .mirror__glitter i { animation: glint 2.6s var(--ease-in-out) var(--d) infinite; } }
@keyframes glint { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }
.mirror { --light: .8; }
.mirror__sky, .mirror__water { transition: opacity 1.2s var(--ease-out), filter 1.2s var(--ease-out); }
[data-theme="light"] .mirror__sky, [data-theme="light"] .mirror__water { opacity: .22; }
.mirror__sky, .mirror__water { background:
  radial-gradient(58% 10% at 28% 40%, hsl(var(--arc-h) calc(var(--arc-s) * 1%) 80% / .4) 0, transparent 70%),
  radial-gradient(44% 8% at 74% 54%, hsl(calc(var(--arc-h) + 24) calc(var(--arc-s) * 1%) 74% / .34) 0, transparent 70%),
  radial-gradient(72% 16% at 52% 84%, color-mix(in srgb, var(--accent) 46%, transparent) 0, transparent 72%),
  linear-gradient(180deg, hsl(var(--arc-h) calc(var(--arc-s) * .8%) 16%) 0%, hsl(var(--arc-h) calc(var(--arc-s) * 1%) 44%) 78%, color-mix(in srgb, var(--accent) 50%, hsl(var(--arc-h) 40% 62%)) 100%); }
.mirror__sky { opacity: calc(.3 + var(--light) * .4); }
.motif-mirror .scene--prologue .scene__display { -webkit-box-reflect: below -0.12em linear-gradient(transparent 55%, rgba(0, 0, 0, .22)); }

/* Descent: daylight drains, a headlamp follows the pointer, a depth gauge counts down */
.descent { position: absolute; inset: 0; --depth: 0; }
.descent__dark { position: absolute; inset: 0; background: #050302; opacity: calc(var(--depth) * .85); transition: opacity .6s linear; }
.descent__lamp { position: absolute; inset: 0; background: radial-gradient(circle at var(--lx, 50%) var(--ly, 45%), color-mix(in srgb, var(--accent) 22%, transparent) 0, transparent calc(14% + var(--lamp, 1) * 18%)); opacity: var(--depth); }
.descent__gauge { position: absolute; right: max(16px, 3vw); top: 50%; display: grid; justify-items: end; gap: 2px; transform: translateY(-50%); font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--accent) 70%, var(--color-text)); opacity: calc(.25 + var(--depth) * .75); }
.descent__gauge b { font-family: var(--font-story); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 400; }
.descent__gauge span { font-size: var(--text-xs); letter-spacing: .2em; }
.descent__gauge i { position: absolute; right: -10px; top: -120px; width: 1px; height: 240px; background: currentColor; transform-origin: top; opacity: .6; }
.motif-descent .scene__media img, .motif-descent .scene__plate { -webkit-mask-image: radial-gradient(circle at var(--lx, 50%) var(--ly, 45%), #000 0, #000 calc(18% + var(--lamp, 1) * 40%), rgba(0, 0, 0, .25) calc(30% + var(--lamp, 1) * 55%)); mask-image: radial-gradient(circle at var(--lx, 50%) var(--ly, 45%), #000 0, #000 calc(18% + var(--lamp, 1) * 40%), rgba(0, 0, 0, .25) calc(30% + var(--lamp, 1) * 55%)); }
.motif-descent.is-lights-out .scene[data-dark] .scene__media img, .motif-descent.is-lights-out .scene[data-dark] .scene__plate { -webkit-mask-image: radial-gradient(circle at var(--lx, 50%) var(--ly, 45%), #000 0, #000 12%, transparent 30%); mask-image: radial-gradient(circle at var(--lx, 50%) var(--ly, 45%), #000 0, #000 12%, transparent 30%); }
/* With no pointer to carry the lamp (touch, reduced motion) the dark scene keeps a wide pool of light */
.motif-descent.lamp-wide.is-lights-out .scene[data-dark] .scene__media img, .motif-descent.lamp-wide.is-lights-out .scene[data-dark] .scene__plate { -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, #000 28%, rgba(0, 0, 0, .22) 68%); mask-image: radial-gradient(circle at 50% 50%, #000 0, #000 28%, rgba(0, 0, 0, .22) 68%); }
[data-theme="light"] .descent__dark { opacity: calc(var(--depth) * .5); }
.descent.is-vast .descent__lamp { background: radial-gradient(ellipse 80% 70% at 50% 40%, color-mix(in srgb, var(--accent) 16%, transparent) 0, transparent 70%); }

/* Aurora: the canvas draws stars and curtains; the sky only needs to stay deep */
.motif-aurora .scenes__canvas { opacity: .95; }
[data-theme="light"] .motif-aurora .scenes__canvas { opacity: .7; }

/* Sky-rotate: drawn on the canvas */
[data-theme="light"] .motif-sky-rotate .scenes__canvas { opacity: .8; }

/* Mist: soft banks that drift sideways, thin out as you climb, part round a warm light */
.mist { position: absolute; inset: 0; --fog: .9; --glow: 0; --rise: 0vh; overflow: hidden; }
.mist__bank { position: absolute; left: -30%; width: 160%; height: 46vh; border-radius: 50%; background: radial-gradient(closest-side, rgba(225, 230, 235, .55), rgba(225, 230, 235, 0)); filter: blur(18px); opacity: var(--fog); transform: translate3d(0, var(--rise), 0); transition: opacity 1.6s var(--ease-in-out); }
.mist__bank--0 { top: 8%; }
.mist__bank--1 { top: 34%; height: 54vh; opacity: calc(var(--fog) * .8); }
.mist__bank--2 { top: 58%; }
.mist__bank--3 { top: 76%; height: 40vh; opacity: calc(var(--fog) * .7); }
.mist__light { position: absolute; left: 50%; top: 38%; width: 70vmin; height: 70vmin; margin: -35vmin; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), transparent); opacity: var(--glow); transition: opacity 1.6s var(--ease-in-out); }
[data-theme="light"] .mist__bank { background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); }
@media (prefers-reduced-motion: no-preference) {
  .mist__bank--0 { animation: mist-drift 46s linear infinite alternate; }
  .mist__bank--1 { animation: mist-drift 62s linear infinite alternate-reverse; }
  .mist__bank--2 { animation: mist-drift 54s linear infinite alternate; }
  .mist__bank--3 { animation: mist-drift 70s linear infinite alternate-reverse; }
}
@keyframes mist-drift { to { translate: 18% 0; } }

/* Tide: the water level rises with the page; caustics and light shafts below the surface */
.tide { position: absolute; inset: 0; --level: .1; --rays: .3; }
.tide__water { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform: translate3d(0, calc((1 - var(--level)) * 100%), 0); transition: transform 1.2s var(--ease-out); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent) 0, color-mix(in srgb, hsl(var(--arc-h) 60% 30%) 55%, transparent) 40%, hsl(var(--arc-h) 70% 12% / .8) 100%); }
[data-theme="light"] .tide__water { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 35%, transparent) 0, hsl(var(--arc-h) 60% 80% / .55) 45%, hsl(var(--arc-h) 60% 70% / .5) 100%); }
.tide__surface { position: absolute; left: 0; top: -20px; width: 200%; height: 40px; fill: color-mix(in srgb, var(--accent) 30%, transparent); }
.tide__caustics { position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(ellipse 30px 12px at 20% 30%, rgba(255,255,255,.5), transparent 70%), radial-gradient(ellipse 40px 14px at 65% 55%, rgba(255,255,255,.4), transparent 70%), radial-gradient(ellipse 24px 10px at 40% 80%, rgba(255,255,255,.45), transparent 70%); background-size: 180px 120px, 240px 160px, 140px 110px; mix-blend-mode: soft-light; }
.tide__rays { position: absolute; inset: 0 0 auto; height: 70%; opacity: calc(var(--rays) * .5); background: repeating-linear-gradient(100deg, rgba(255,255,255,.18) 0 2%, transparent 2% 9%); -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .tide__surface { animation: tide-wave 9s linear infinite; }
  .tide__caustics { animation: tide-caustics 7s ease-in-out infinite alternate; }
}
@keyframes tide-wave { to { transform: translateX(-50%); } }
@keyframes tide-caustics { to { background-position: 30px 12px, -40px 20px, 20px -16px; } }

/* Track: falling snow on the canvas; a sled track drawn down the page */
.track { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: color-mix(in srgb, var(--accent) 60%, var(--color-text) 20%); stroke-width: 1.5px; stroke-linecap: round; opacity: .55; --drawn: 0; }
.track path { vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--drawn)); }
[data-theme="light"] .track { stroke: color-mix(in srgb, var(--accent) 40%, var(--color-text) 50%); }

/* Map: contour lines, a route drawn as you go, milestones that light when passed */
.map { position: absolute; inset: 0; --drawn: 0; --contours: .6; }
.map__contours { position: absolute; inset: -10%; opacity: calc(var(--contours) * .35); background: repeating-radial-gradient(ellipse at 30% 40%, transparent 0 22px, color-mix(in srgb, var(--accent) 50%, transparent) 22px 23px), repeating-radial-gradient(ellipse at 75% 75%, transparent 0 30px, color-mix(in srgb, var(--accent) 35%, transparent) 30px 31px); transition: opacity 1.2s var(--ease-in-out); }
.map__route { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-linecap: round; }
.map__ghost { vector-effect: non-scaling-stroke; stroke: color-mix(in srgb, var(--color-text) 22%, transparent); stroke-width: 1px; }
.map__line { vector-effect: non-scaling-stroke; stroke: var(--accent); stroke-width: 2px; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--drawn)); }
.map__stop { position: absolute; width: 11px; height: 11px; margin: -5.5px; border-radius: 50%; background: var(--color-bg); border: 1.5px solid color-mix(in srgb, var(--color-text) 40%, transparent); transition: background-color .6s var(--ease-out), border-color .6s, box-shadow .6s; }
.map__stop.is-passed { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent) 50%, transparent); }

/* Rise: balloons climb with the scroll and catch the sun at the full moment */
.rise { position: absolute; inset: 0; overflow: hidden; --lift: 0; --sun: 0; }
.rise__sun { position: absolute; left: 50%; bottom: -30vmin; width: 90vmin; height: 90vmin; margin-left: -45vmin; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 70%, white 10%), transparent); opacity: calc(var(--sun) * .7); transition: opacity 1.4s var(--ease-in-out); }
.rise__b { position: absolute; left: var(--x); bottom: -12vh; width: var(--s); height: calc(var(--s) * 1.2); transform: translate3d(0, calc(var(--lift) * var(--speed) * -120vh + var(--delay) * -30vh), 0); }
.rise__b::before { content: ""; position: absolute; inset: 0 0 18%; border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%; background: radial-gradient(circle at 35% 30%, hsl(var(--h) 80% calc(55% + var(--sun) * 15%)), hsl(var(--h) 70% 32%)); box-shadow: 0 0 calc(var(--sun) * 24px) hsl(var(--h) 90% 60% / .5); }
.rise__b::after { content: ""; position: absolute; left: 38%; right: 38%; bottom: 0; height: 12%; border-radius: 2px; background: #4a3420; }
[data-theme="light"] .rise__b { opacity: .85; }

/* ---------- Layout on smaller screens ---------- */
@media (max-width: 960px) {
  .scene__grid, .scene__grid--word, .scene__grid--fork { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .scene__frame { max-width: 520px; }
}
@media (max-width: 760px) {
  .scene { min-height: auto; padding-block: 96px; }
  .scene--hero { min-height: 92svh; padding-block: calc(var(--nav-h) + 12px + 56px) 40px; }
  .scene--bleed { min-height: 88svh; }
  .scene__top { top: calc(var(--nav-h) + 12px); }
  .scene__frame { aspect-ratio: 4 / 3; }
  .scene__art { font-size: clamp(3.5rem, 22vw, 6rem); }
  .descent__gauge { right: 10px; top: auto; bottom: 90px; transform: none; }
  .descent__gauge i { display: none; }
  .motif-descent .scene__media img, .motif-descent .scene__plate { -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0, #000 calc(20% + var(--lamp, 1) * 40%), rgba(0, 0, 0, .3) 80%); mask-image: radial-gradient(circle at 50% 45%, #000 0, #000 calc(20% + var(--lamp, 1) * 40%), rgba(0, 0, 0, .3) 80%); }
}

/* css/pages/detail.css */
/* =============================================================
   DETAIL — the practical part after the scenes: clues, what is real, the
   "travel script ticket" and the booking bar. The scenes themselves live in
   pages/scenes.css.
   ============================================================= */

.detail-hero__top { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.detail-hero__back { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 8px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, .24); color: var(--color-on-media); font-size: var(--text-sm); background: rgba(6, 7, 10, .28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.detail-hero__back:hover { background: rgba(255, 255, 255, .12); }
.detail-hero__share { display: none; width: 34px; height: 34px; margin-left: auto; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .24); color: var(--color-on-media); background: rgba(6, 7, 10, .28); }
.detail-crumbs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: var(--text-sm); color: rgba(246, 241, 232, .78); }
.detail-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.detail-hero__no { font-size: var(--text-xs); letter-spacing: .2em; color: rgba(246, 241, 232, .8); }
.detail-hero__state.is-open { color: #f6f1e8; }
.detail-hero__state.is-open::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #f2c46d; box-shadow: 0 0 10px rgba(242, 196, 109, .6); vertical-align: 1px; }
.detail-hero__closed { margin-top: 10px; max-width: 34em; font-size: var(--text-sm); line-height: 1.6; color: rgba(246, 241, 232, .78); }
.detail-hero__title { margin-top: 12px; font-family: var(--font-story); font-weight: 700; font-size: clamp(2.75rem, 7.2vw, 6.5rem); line-height: 1.04; letter-spacing: -.01em; max-width: min(11em, 100%); text-wrap: balance; }
:lang(en) .detail-hero__title { line-height: .98; max-width: min(13em, 100%); overflow-wrap: anywhere; }
.detail-hero__title .nowrap { display: inline-block; max-width: 100%; } /* break between the parts, inside one only if it can't fit */
.detail-hero__dot { color: rgba(246, 241, 232, .55); font-weight: 400; }
.detail-hero__hook { margin-top: 18px; font-family: var(--font-story); font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.6; color: rgba(246, 241, 232, .92); max-width: 26em; text-wrap: pretty; }
.detail-hero__moods { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.detail-hero__moods .chip { height: 30px; font-size: var(--text-sm); background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: var(--color-on-media); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.detail-hero__facts { margin-top: var(--space-6); padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); display: flex; gap: var(--space-6); flex-wrap: wrap; font-size: var(--text-sm); }
.detail-hero__facts dt { color: rgba(246, 241, 232, .7); }
.detail-hero__facts dd { margin-top: 2px; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.detail-hero__opens dd { max-width: 20em; font-size: var(--text-md); line-height: 1.45; }
.detail-hero :focus-visible, .on-media :focus-visible { outline-color: #f2c46d; }
.detail-hero--loading { min-height: 88vh; display: grid; align-items: end; background: #07080b; }
.detail-hero--loading .skeleton { background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; }

.detail-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-8); padding-block: var(--space-8) var(--space-9); }
.detail-body::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: var(--color-bg); }
.clues { margin-top: var(--space-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.clue { padding: 14px 16px; border-radius: 12px; background: var(--color-surface); border: 1px solid var(--color-line); }
.clue h3 { font-size: var(--text-sm); margin-bottom: 6px; }
.clue p { margin: 0 !important; font-size: var(--text-base) !important; line-height: 1.6 !important; }

/* Authored entrances */
/* The one thing to do: no label, just a small lamp before the line */
.mission { position: relative; margin-top: var(--space-6) !important; max-width: 30em; padding-left: 30px; font-family: var(--font-story); font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.75; color: var(--color-text) !important; text-wrap: pretty; }
.mission::before { content: ""; position: absolute; left: 2px; top: .72em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent, var(--color-action)); box-shadow: 0 0 18px 5px color-mix(in srgb, var(--accent, var(--color-action)) 45%, transparent); }
.fork__options { margin-top: var(--space-4); display: grid; gap: 10px; max-width: 36em; }
.fork__option { position: relative; overflow: hidden; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: baseline; text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--color-line-strong); background: var(--color-surface); color: var(--color-text); font-family: var(--font-story); font-size: var(--text-md); line-height: 1.55; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.fork__option:hover { border-color: var(--color-text-3); }
.fork__option[aria-pressed="true"] { border-color: var(--color-action); box-shadow: inset 0 0 0 1px var(--color-action); background: var(--color-action-soft); }
.fork__keeps { min-height: 1.6em; margin-top: var(--space-4); font-family: var(--font-story); font-size: var(--text-md); color: var(--color-text); display: flex; align-items: center; gap: 10px; }
.fork__keeps:not(:empty)::before { content: ""; flex: none; width: 22px; height: 1px; background: var(--accent, var(--color-action)); }
.prep { padding-block: var(--space-5); border-top: 1px solid var(--color-line); }
.prep h2 { font-size: var(--text-sm); letter-spacing: .12em; color: var(--color-text-3); font-weight: var(--weight-semibold); }
.prep .clues { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-fine { margin-top: var(--space-2); font-size: var(--text-xs); letter-spacing: .04em; color: var(--color-text-3); }

.ticket { position: sticky; top: calc(var(--nav-h) + var(--space-5)); align-self: start; border-radius: var(--radius-sheet); background: var(--color-surface); border: 1px solid var(--color-line-strong); }
.ticket__top { padding: 22px 22px 18px; }
.ticket__label { font-size: var(--text-xs); color: var(--color-text-3); letter-spacing: .1em; }
.ticket__role { margin-top: 6px; font-family: var(--font-story); font-size: var(--text-lg); font-weight: 700; line-height: 1.45; }
.ticket__keeps { margin-top: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: var(--text-sm); }
.ticket__keeps span { color: var(--color-text-3); }
.ticket__keeps b { font-family: var(--font-story); font-weight: 400; font-size: var(--text-base); }
.ticket__keeps b.is-empty { color: var(--color-text-3); border-bottom: 1.5px dashed var(--color-line-strong); justify-self: start; }
.ticket__stats { margin-top: var(--space-4); display: grid; gap: 10px; }
.ticket__stat { display: grid; grid-template-columns: 72px minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--color-text-2); }
.ticket__stat .num { text-align: right; color: var(--color-text); }
.ticket__match { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-4); }
.ticket__match .tag-code { height: 26px; }
.ticket__perf { position: relative; height: 20px; }
.ticket__perf::before { content: ""; position: absolute; left: 16px; right: 16px; top: 50%; border-top: 1.5px dashed var(--color-line-strong); }
.ticket__perf::after { content: ""; position: absolute; inset: 0 -1px; background: radial-gradient(circle at 0 50%, var(--color-bg) 10px, transparent 10.5px), radial-gradient(circle at 100% 50%, var(--color-bg) 10px, transparent 10.5px); }
.ticket__bottom { padding: 14px 22px 22px; display: grid; gap: 12px; }
.ticket__price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ticket__price b { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.ticket__price b small { font-size: var(--text-base); font-weight: var(--weight-medium); }
.ticket__price span { font-size: var(--text-sm); color: var(--color-text-3); }
.ticket__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.ticket__actions .btn { min-width: 0; }
.ticket__note { font-size: var(--text-xs); color: var(--color-text-3); text-align: center; }


/* Booking bar: a floating pill on wide screens once the opening has scrolled away, a docked bar on phones */
.bookbar {
  position: fixed; left: 50%; bottom: 20px; z-index: var(--z-bookbar); display: flex; align-items: center; gap: 12px;
  width: min(460px, calc(100vw - 32px)); padding: 8px 8px 8px 18px; border-radius: var(--radius-pill);
  background: var(--color-nav-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--color-line-strong); box-shadow: var(--shadow-float);
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.bookbar.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.bookbar__price { display: grid; line-height: 1.25; margin-right: auto; }
.bookbar__price b { font-size: var(--text-md); }
.bookbar__price span { font-size: 11px; color: var(--color-text-3); }

@media (max-width: 960px) {
  .detail-body { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .ticket { position: static; }
}
@media (max-width: 760px) {
  .detail-crumbs { display: none; }
  .detail-hero__share { display: inline-grid; }
  .detail-hero__title { font-size: clamp(2.25rem, 11vw, 3.25rem); }
  .detail-hero__facts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-top: 20px; }
  .detail-hero__facts dd { font-size: var(--text-md); }
  .detail-hero__price { display: none; }
  .clues, .prep .clues { grid-template-columns: minmax(0, 1fr); }
  .detail-hero__opens { grid-column: 1 / -1; }
  .ticket__actions, .ticket__price { display: none; }
  .ticket__bottom { padding-top: 6px; }
  .bookbar {
    left: 0; right: 0; bottom: 0; width: auto; transform: none; opacity: 1; pointer-events: auto; border-radius: 0; box-shadow: none; border-width: 1px 0 0;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  }
  .bookbar.is-visible { transform: none; }
  .bookbar .btn { flex: 1; }
}

/* css/pages/space.css */
/* =============================================================
   FIND · GUIDE · SPACE — the core flow: recognise your type (cards or the
   guide's walk), then land in your own space.
   ============================================================= */

/* --- Find: sixteen quiet cards --- */
.find__head { padding-block: var(--space-7) var(--space-6); max-width: 40em; }
.find__head h1, .space__head h1 { margin-top: 8px; font-family: var(--font-story); font-size: clamp(1.875rem, 3.4vw, 2.75rem); line-height: 1.25; font-weight: 700; text-wrap: balance; }
.find__head > p:last-child { margin-top: 10px; color: var(--color-text-2); }
.find__groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.find__group { display: grid; gap: 10px; align-content: start; }
.find__group h2 { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-3); margin-bottom: 2px; }
.type-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; min-height: 76px; padding: 10px 14px 10px 10px; border-radius: var(--radius-card); border: 1px solid var(--color-line-strong); background: var(--color-surface); text-align: left; transition: border-color .2s, transform .2s, background-color .2s; }
.type-card__text { display: grid; gap: 2px; }
.type-card b { font-family: var(--font-story); font-size: var(--text-lg); line-height: 1.35; letter-spacing: .02em; text-wrap: balance; }
:root:lang(en) .type-card b { letter-spacing: 0; }
.type-card__text span { font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-2); text-wrap: pretty; }
.type-card__code { font-size: var(--text-xs); letter-spacing: .14em; color: var(--color-text-3); }
.type-card:hover .lumi { transform: translateY(-2px) rotate(-3deg); }
.type-card .lumi { transition: transform .25s ease; }
.type-card:hover { border-color: var(--color-text-3); transform: translateY(-1px); }
.type-card[aria-pressed="true"] { background: var(--color-action); border-color: transparent; color: var(--color-on-action); }
.type-card[aria-pressed="true"] :is(.type-card__text span, .type-card__code) { color: inherit; opacity: .8; }
.type-card[aria-busy="true"] { opacity: .6; }
.find__unsure { margin-block: var(--space-7) var(--space-9); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: 20px 24px; border-radius: var(--radius-sheet); border: 1px dashed var(--color-line-strong); }
.find__unsure h2 { font-size: var(--text-md); }
.find__unsure p { margin-top: 2px; color: var(--color-text-2); font-size: var(--text-base); }
.space__empty .lumi { margin-inline: auto; }

/* --- Guide: one scene at a time --- */
.guide__inner { max-width: 680px; padding-block: var(--space-7) var(--space-9); }
.guide__progress { margin-top: 14px; display: flex; gap: 6px; align-items: center; font-size: var(--text-sm); color: var(--color-text-3); }
.guide__progress b { width: 26px; height: 4px; border-radius: 2px; background: var(--color-line-strong); }
.guide__progress b.on { background: var(--color-action); }
.guide__progress span { margin-left: 6px; }
.guide__speaker { margin-top: var(--space-6); display: flex; align-items: center; gap: 12px; font-size: var(--text-sm); color: var(--color-text-2); }
.guide__face { display: grid; }
.guide__form { min-height: 168px; display: grid; justify-items: start; margin-bottom: var(--space-3); }
.guide__line { margin-top: var(--space-5); font-family: var(--font-story); font-weight: 400; font-size: clamp(1.25rem, 2.4vw, 1.625rem); line-height: 1.6; text-wrap: pretty; }
.guide__line:focus { outline: none; }
.guide__line--sm { font-size: var(--text-lg); color: var(--color-text-2); }
.guide__options { margin-top: var(--space-5); display: grid; gap: 10px; }
.guide__option { text-align: left; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--color-line-strong); background: var(--color-surface); font-family: var(--font-story); font-size: var(--text-md); line-height: 1.55; transition: border-color .2s, background-color .2s; }
.guide__option:hover { border-color: var(--color-action); background: var(--color-action-soft); }
.guide__foot { margin-top: var(--space-6); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.guide__foot .btn--quiet { padding-inline: 0; color: var(--color-text-2); }
.guide__actions { margin-top: var(--space-6); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.guide__reveal { margin-top: var(--space-5); }
.guide__reveal:focus { outline: none; }
.guide__reveal h1 { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; font-family: var(--font-story); }
.guide__reveal h1 b { font-size: clamp(2.25rem, 5vw, 3.5rem); letter-spacing: .02em; line-height: 1.15; text-wrap: balance; }
.guide__reveal h1 span { flex-basis: 100%; font-size: var(--text-lg); line-height: 1.6; color: var(--color-text-2); font-weight: 400; text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) {
  .guide__line, .guide__options, .guide__reveal { animation: guide-in .45s ease-out both; }
  .guide__options { animation-delay: .08s; }
  @keyframes guide-in { from { opacity: 0; transform: translateY(6px); } }
}

/* --- Space --- */
.space__head { padding-block: var(--space-7) var(--space-6); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-6); align-items: center; }
.space__head > * { grid-column: 2; }
.space__head > .space__form { grid-column: 1; grid-row: 1 / span 4; width: 128px; height: 128px; }
.space__head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.space__found { margin-top: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; font-size: var(--text-sm); color: var(--color-text-2); }
.space__meter { width: 160px; height: 4px; border-radius: 2px; background: var(--color-line-strong); overflow: hidden; }
.space__meter b { display: block; height: 100%; min-width: 2px; background: var(--color-action); }
.space__found .link-arrow { font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; }

.space__section { padding-block: var(--space-6); border-top: 1px solid var(--color-line); }
.space__compose { margin-block: var(--space-2) var(--space-6); display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding: 22px 24px; border-radius: var(--radius-sheet); background: var(--color-surface); border: 1px solid var(--color-line-strong); }
.space__compose h2 { font-family: var(--font-story); font-size: var(--text-xl); }
.space__compose p { margin-top: 4px; color: var(--color-text-2); font-size: var(--text-base); max-width: 40em; }
.space__keeps { display: grid; gap: 10px; }
.space__keeps li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--color-line-strong); }
.space__keeps b { font-family: var(--font-story); font-weight: 400; font-size: var(--text-md); }
.space__keeps a { font-size: var(--text-sm); color: var(--color-text-2); text-decoration: underline; text-underline-offset: 3px; }
.space__keeps .space__keeps-empty { display: block; color: var(--color-text-3); font-size: var(--text-base); }
.space__guest { margin-block: var(--space-4) var(--space-9); display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding: 22px 24px; border-radius: var(--radius-sheet); border: 1px solid var(--color-line-strong); }
.space__guest h2 { font-size: var(--text-md); }
.space__guest p { margin-top: 4px; color: var(--color-text-2); font-size: var(--text-base); }
.space__guest-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.space__empty { padding-block: var(--space-9); }

@media (max-width: 960px) {
  .find__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .find__head, .space__head { padding-block: var(--space-6) var(--space-5); }
  .find__groups { gap: var(--space-4) 12px; }
  .type-card { min-height: 64px; padding: 8px 10px 8px 6px; gap: 6px; }
  .type-card .lumi { width: 44px; height: 44px; }
  .type-card b { font-size: var(--text-lg); }
  .space__head { column-gap: var(--space-4); }
  .space__head > .space__form { width: 88px; height: 88px; }
  .find__unsure { grid-template-columns: auto minmax(0, 1fr); }
  .find__unsure .btn { grid-column: 1 / -1; }
  .guide__inner { padding-block: var(--space-6) var(--space-8); }
  .guide__actions .btn { flex: 1 1 100%; }
  .space__compose, .space__guest { flex-direction: column; align-items: stretch; }
  .space__compose .btn, .space__guest-actions .btn--primary { width: 100%; }
}

/* css/pages/compose.css */
/* =============================================================
   COMPOSE — "画一个自己的入口": torn paper slips, the lantern-frame ticket,
   kept tickets, the share view, and the invitation card on Explore.

   Paper is a light surface in both themes, so inside it the role tokens are
   re-pointed to ink (the same rule as the light theme: action becomes an ink
   button). Paper colours are scoped to the components that use them.
   ============================================================= */

.slip, .cticket, .compose__frame, .compose-invite__slips {
  --paper: #f4ecdc;
  --paper-ink: #2a2117;      /* 13.9:1 on paper */
  --paper-ink-2: #6a5c4b;    /*  5.5:1 on paper */
  --paper-line: rgba(60, 40, 10, .24);
  --seal: #a3302c;           /*  5.9:1 on paper */
}
[data-theme="light"] :is(.slip, .cticket, .compose__frame, .compose-invite__slips) { --paper: #fffaf0; }

.cticket, .compose__frame {
  --color-text: var(--paper-ink);
  --color-text-2: var(--paper-ink-2);
  --color-text-3: var(--paper-ink-2);
  --color-line: var(--paper-line);
  --color-line-strong: rgba(60, 40, 10, .38);
  --color-action: #1d1a14;
  --color-on-action: #fbe1a6;
  --color-action-hover: #34302a;
  --color-focus: #8a5a0f;
  color: var(--paper-ink);
}

/* Motion: one timing system for the game, built on the global --ease / --dur-* tokens.
   press → quick → base are feedback; flight (JS: Pages.Compose.MOTION), ink and stamp are the
   choreography. Only transform, opacity, filter, clip-path and background-size are animated, so
   nothing reflows mid-animation; everything stops under prefers-reduced-motion. */
.compose, .compose-shared, .compose-invite-wrap, .cticket {
  --m-press: 90ms;
  --m-quick: var(--dur-fast);
  --m-base: var(--dur);
  --m-ink: 640ms;
  --m-stamp: 460ms;
  --ease-out: var(--ease);
  --ease-in-out: cubic-bezier(.6, 0, .25, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- page ---------- */
.compose__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-6) var(--space-5); }
.compose__head h1 { font-family: var(--font-story); font-size: clamp(1.875rem, 1.25rem + 1.6vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: .02em; }
:lang(en) .compose__head h1 { letter-spacing: -.012em; }
.compose__head p { margin-top: 8px; color: var(--color-text-2); font-size: var(--text-base); line-height: 1.75; max-width: 36em; }
:lang(en) .compose__head p { line-height: 1.6; }
.compose__progress { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--color-text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.compose__bars { display: inline-flex; gap: 6px; }
.compose__bars b { position: relative; overflow: hidden; width: 22px; height: 4px; border-radius: 2px; background: var(--color-line-strong); }
.compose__bars b::after { content: ""; position: absolute; inset: 0; background: var(--color-action); transform: scaleX(0); transform-origin: left; }
.compose__bars b.on::after { transform: none; }
.compose__bars b.is-new::after { animation: fill 380ms var(--ease-out) var(--ink-delay, 0ms) backwards; }

.compose__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-6) 40px; align-items: start; padding-bottom: var(--space-7); }

/* ---------- tray ---------- */
.compose__grid > * { min-width: 0; }
.compose-tray { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.tray-group { min-width: 0; }
.tray-group h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: .14em; color: var(--color-text-3); }
.tray-group h2 span { letter-spacing: 0; font-weight: var(--weight-normal); color: var(--color-text-2); }
:lang(en) .tray-group h2 { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
:lang(en) .tray-group h2 span { font-size: var(--text-sm); text-transform: none; }
.slips { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px; margin: -4px; }

/* A slip is a button with the torn paper drawn underneath, so the focus ring is never clipped. */
.slip {
  position: relative; isolation: isolate; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: 46px; padding: 10px 16px 10px 14px; text-align: left;
  font-family: var(--font-story); font-size: 15px; line-height: 1.35; color: var(--paper-ink);
  transform: rotate(var(--r, 0deg)); transition: transform var(--m-base, 250ms) var(--ease-out, ease), opacity var(--m-base, 250ms), color var(--m-base, 250ms);
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .32));
  touch-action: manipulation; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.slip::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); border: 1.5px dashed transparent; border-radius: 2px;
  clip-path: polygon(0 5%, 6% 0, 40% 3%, 72% 0, 100% 5%, 98% 52%, 100% 95%, 66% 100%, 30% 97%, 0 100%, 2% 50%);
  transition: background-color var(--m-base, 250ms) var(--ease-out, ease), border-color var(--m-base, 250ms);
}
:lang(en) .slip { font-size: 15.5px; line-height: 1.3; }
.slip small { display: block; margin-top: 3px; font-family: var(--font-ui); font-size: 12px; line-height: 1.35; color: var(--paper-ink-2); }
:lang(en) .slip small { font-size: 11.5px; }
[data-theme="light"] .slip { filter: drop-shadow(0 3px 4px rgba(60, 40, 10, .16)) drop-shadow(0 0 1px rgba(60, 40, 10, .25)); }
button.slip { cursor: grab; }
/* Hover and keyboard focus lift the slip and straighten it a little; pressing gives it a quick squeeze. */
button.slip:hover, button.slip:focus-visible { transform: translateY(-3px) rotate(calc(var(--r, 0deg) * .3)); }
button.slip:active { transform: translateY(0) rotate(0deg) scale(.965); transition-duration: var(--m-press); }
.slip:focus-visible { outline-offset: 5px; border-radius: 3px; }
/* Placed: the paper has gone into the frame and leaves its outline behind. */
.slip[aria-pressed="true"] { color: var(--color-text-2); filter: none; transform: rotate(0deg); }
.slip[aria-pressed="true"]::before { background-color: transparent; clip-path: none; border-color: var(--color-action); border-radius: 4px; }
.slip[aria-pressed="true"] small { color: var(--color-text-3); }
button.slip[aria-pressed="true"]:hover, button.slip[aria-pressed="true"]:focus-visible { color: var(--color-text); transform: translateY(-1px); }
.slip.is-lifted { opacity: .4; }
.slip--ghost { position: fixed; left: 0; top: 0; z-index: var(--z-overlay); pointer-events: none; transition: none; will-change: transform; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .45)); }
.slip--flight { position: fixed; z-index: var(--z-overlay); margin: 0; pointer-events: none; transform-origin: 0 0; transition: none; will-change: transform, opacity; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .38)); }
body.is-dragging-slip, body.is-dragging-slip * { cursor: grabbing !important; user-select: none; }

/* ---------- the lantern frame ---------- */
.compose__frame {
  position: sticky; top: calc(var(--nav-h) + 20px); border-radius: 18px; background: var(--paper);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7), 0 0 0 1px var(--paper-line);
  transition: transform var(--m-base) var(--ease-out), outline-color var(--m-base);
  outline: 2px dashed transparent; outline-offset: 6px;
}
[data-theme="light"] .compose__frame { box-shadow: 0 24px 60px -30px rgba(20, 22, 28, .35), 0 0 0 1px var(--paper-line); }
.compose__frame.is-target { outline-color: var(--color-focus); }
.compose__frame.is-over { outline-style: solid; transform: scale(1.012); }
.compose__frame .cticket { box-shadow: none; border-radius: 18px 18px 0 0; }
.compose__foot { position: relative; padding: 18px 24px 22px; }
.compose__foot::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; border-top: 1.5px dashed var(--paper-line); }
.compose__foot::after { content: ""; position: absolute; left: -1px; right: -1px; top: -10px; height: 20px; background: radial-gradient(circle at 0 50%, var(--color-bg) 9px, transparent 9.5px), radial-gradient(circle at 100% 50%, var(--color-bg) 9px, transparent 9.5px); pointer-events: none; }
.compose__hint { font-size: var(--text-sm); line-height: 1.55; color: var(--paper-ink-2); }
.compose__actions { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.compose__actions .btn { min-height: 48px; min-width: 0; transition: background var(--m-quick), transform var(--m-quick) var(--ease-out); }
.compose__actions .btn:active:not(:disabled) { transform: scale(.98); transition-duration: var(--m-press); }
.compose__actions .icon-btn--square { width: 48px; height: 48px; transition: color var(--m-quick), border-color var(--m-quick), transform var(--m-quick) var(--ease-out); }
.compose__actions .icon-btn--square:hover:not(:disabled) { transform: translateY(-1px); }
.compose__actions .icon-btn--square:active:not(:disabled) { transform: scale(.94); transition-duration: var(--m-press); }
.compose__actions [data-copied="true"] { color: var(--color-ok); }

/* ---------- ticket (game frame, share view, kept list) ---------- */
.cticket { position: relative; overflow: hidden; border-radius: 18px; background: var(--paper); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .7), 0 0 0 1px var(--paper-line); }
.cticket__img { position: relative; aspect-ratio: 16 / 10; background: var(--cover) center 60% / cover; }
.cticket__img::after { content: ""; position: absolute; inset: 0 0 -2px; background: linear-gradient(0deg, var(--paper) 0, var(--paper) 3px, transparent 55%); }
.cticket__img--blank { background: none; display: grid; place-items: center; margin: 14px 14px 0; aspect-ratio: 16 / 9; border: 1.5px dashed var(--paper-line); border-radius: 12px; }
.cticket__img--blank::after { content: none; }
.cticket__img--blank[data-realm] { margin: 0; border: 0; border-radius: 0; aspect-ratio: 16 / 10; background: var(--realm-art); }
.cticket__img--blank[data-realm]::after { content: ""; }
.cticket__drop { max-width: 14em; padding: 0 16px; text-align: center; font-size: var(--text-sm); color: var(--paper-ink-2); }
/* Places that are not an entrance get a painted sky of their realm instead of a photo. */
[data-realm="city-rules"] { --realm-art:
  radial-gradient(circle at 18% 46%, #ffd98a 0 2px, rgba(242, 196, 109, .35) 3px, transparent 14px),
  radial-gradient(circle at 41% 40%, #ffd98a 0 2px, rgba(242, 196, 109, .3) 3px, transparent 12px),
  radial-gradient(circle at 63% 35%, #ffd98a 0 1.5px, rgba(242, 196, 109, .25) 2.5px, transparent 10px),
  radial-gradient(circle at 80% 31%, #ffd98a 0 1px, rgba(242, 196, 109, .2) 2px, transparent 8px),
  linear-gradient(180deg, #161a2b 0%, #2a2c42 58%, #4a3f45 100%); }
[data-realm="mirror-salt"] { --realm-art: linear-gradient(180deg, #cfd9e6, #f1e6d6 52%, #cdd8e5 53%, #eae2d4); }
[data-realm="fire-stone"] { --realm-art: radial-gradient(circle at 50% 80%, rgba(255, 140, 70, .6), transparent 40%), linear-gradient(180deg, #1c1714, #3a2a22); }
[data-realm="ice-night"] { --realm-art: radial-gradient(ellipse at 40% 30%, rgba(120, 230, 180, .45), transparent 50%), linear-gradient(180deg, #0c1622, #1d2a3a); }
[data-realm="sand-stars"] { --realm-art: radial-gradient(circle at 70% 20%, rgba(255, 255, 255, .5) 0 1px, transparent 2px), linear-gradient(180deg, #151a33, #6b4a3a 70%, #b9875a); }
[data-realm="mist-temple"] { --realm-art: linear-gradient(180deg, #d9dcd6, #a9b2ac 60%, #6f7c76); }
[data-realm="water-deep"] { --realm-art: linear-gradient(180deg, #2a4a5a, #0f2733); }
[data-realm="old-roads"] { --realm-art: linear-gradient(180deg, #c9b79a, #7d6a52); }

.cticket__body { position: relative; padding: 18px 24px 22px; }
/* Over a photo or a painted sky the text starts inside the fade. */
.cticket__img:not(.cticket__img--blank) ~ .cticket__body, .cticket__img--blank[data-realm] ~ .cticket__body { margin-top: -36px; padding-top: 0; }
.cticket__label { font-size: 11px; letter-spacing: .14em; color: var(--paper-ink-2); }
:lang(en) .cticket__label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
/* CJK sets loose and open; the Latin serif sets tighter with a touch of negative tracking. */
.cticket__title { margin-top: 6px; font-family: var(--font-story); font-size: var(--text-xl); line-height: 1.5; letter-spacing: .02em; font-weight: 700; text-wrap: pretty; }
:lang(en) .cticket__title { font-size: 1.3125rem; line-height: 1.32; letter-spacing: -.005em; }
.cticket__placeholder { color: var(--paper-ink-2); font-weight: 400; }
.cticket__story { margin-top: 8px; font-family: var(--font-story); font-size: var(--text-md); line-height: 1.75; }
:lang(en) .cticket__story { font-size: 1.0625rem; line-height: 1.5; font-style: italic; }
/* Ink: the phrase just placed comes up out of a blur, then a lantern-gold mark sweeps under it. */
.ink.is-new {
  background: linear-gradient(transparent 60%, rgba(242, 196, 109, .55) 60%) no-repeat 0 0 / 100% 100%;
  animation: ink-phrase var(--m-ink) var(--ease-out) var(--ink-delay, 0ms) backwards, ink-mark 560ms var(--ease-in-out) calc(var(--ink-delay, 0ms) + 140ms) backwards;
}
.cticket__lines { margin-top: 16px; display: grid; gap: 8px; }
.cline { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 14.5px; line-height: 1.5; }
.cline dt { font-size: 11px; letter-spacing: .1em; color: var(--paper-ink-2); }
:lang(en) .cline { grid-template-columns: 82px minmax(0, 1fr); font-size: 15px; line-height: 1.4; }
:lang(en) .cline dt { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.cline dd { font-family: var(--font-story); min-width: 0; }
.cline__blank { display: block; height: 1.15em; border-bottom: 1.5px dashed var(--paper-line); transform-origin: left; }
.cline.is-new dd { animation: ink-line var(--m-ink) var(--ease-out) var(--ink-delay, 0ms) backwards; }
.cline.is-cleared .cline__blank { animation: draw 420ms var(--ease-out) backwards; }
/* Taking a line back: a pen stroke draws through it on hover and focus. */
.cline__take {
  padding: 2px 0; text-align: left; font: inherit; line-height: inherit; border-radius: 3px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 0 1px;
  transition: background-size var(--m-base) var(--ease-out);
}
.cline__take:hover, .cline__take:focus-visible { background-size: 100% 1px; }
.cticket__link { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--paper-line); }
.cticket__link:hover { text-decoration-color: currentColor; }
.cticket__stamp {
  position: absolute; z-index: 2; right: 18px; top: 18px; width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; gap: 1px;
  border: 2px solid var(--seal); color: var(--seal); background: color-mix(in srgb, var(--paper) 90%, transparent);
  font-family: var(--font-story); font-size: 12px; line-height: 1.25; transform: rotate(-14deg);
}
.cticket__stamp span:last-child { font-family: var(--font-ui); font-size: 11px; letter-spacing: .06em; }
/* Keeping: the seal comes down with a little overshoot and leaves a ring of ink as it lands. */
.cticket__stamp.is-new { animation: stamp var(--m-stamp) var(--ease-spring) both; }
.cticket__stamp.is-new::after, .cticket.is-revealing .cticket__stamp::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--seal); opacity: 0;
  animation: ring 640ms var(--ease-out) 240ms;
}

/* The share view writes itself in for whoever opens it: title, story, each line, then the seal. */
.cticket.is-revealing .cticket__title { animation: ink-phrase 720ms var(--ease-out) 140ms backwards; }
.cticket.is-revealing .cticket__story { animation: ink-phrase 720ms var(--ease-out) 300ms backwards; }
.cticket.is-revealing .cline dd { animation: ink-line var(--m-ink) var(--ease-out) calc(420ms + var(--k, 0) * 90ms) backwards; }
.cticket.is-revealing .cticket__stamp { animation: stamp var(--m-stamp) var(--ease-spring) 1080ms both; }
.cticket.is-revealing .cticket__stamp::after { animation-delay: 1320ms; }

@keyframes ink-phrase { from { opacity: 0; filter: blur(4px); } 55% { opacity: 1; } to { opacity: 1; filter: none; } }
@keyframes ink-mark { from { background-size: 0 100%; } }
@keyframes ink-line {
  from { opacity: 0; filter: blur(3px); transform: translateX(-6px); clip-path: inset(-.4em 100% -.4em -.4em); }
  45% { opacity: 1; }
  to { opacity: 1; filter: none; transform: none; clip-path: inset(-.4em -.4em -.4em -.4em); }
}
@keyframes draw { from { transform: scaleX(0); } }
@keyframes fill { from { transform: scaleX(0); } }
@keyframes stamp { from { transform: rotate(-28deg) scale(2); opacity: 0; } 55% { opacity: 1; } }
@keyframes ring { from { transform: scale(1); opacity: .5; } to { transform: scale(1.55); opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes rise-frame { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes bump { 40% { transform: scale(1.3); color: var(--color-text); } }

/* Arriving: the heading and each pile rise in a short stagger, the frame settles last. */
.compose.is-entering .compose__head, .compose.is-entering .tray-group { animation: rise 520ms var(--ease-out) calc(60ms + var(--i, 0) * 55ms) backwards; }
.compose.is-entering .compose__frame { animation: rise-frame 680ms var(--ease-out) 160ms backwards; }
.compose-shared__ticket { animation: rise-frame 680ms var(--ease-out) backwards; }

/* Mini tickets in the kept list */
.cticket--mini { border-radius: 14px; box-shadow: 0 16px 40px -24px rgba(0, 0, 0, .7), 0 0 0 1px var(--paper-line); }
.cticket--mini .cticket__img { aspect-ratio: 16 / 6; }
.cticket--mini .cticket__img--blank:not([data-realm]) { display: none; }
.cticket--mini .cticket__body { padding: 14px 18px 18px; }
.cticket--mini .cticket__img:not(.cticket__img--blank) ~ .cticket__body, .cticket--mini .cticket__img--blank[data-realm] ~ .cticket__body { margin-top: -20px; padding-top: 0; }
.cticket--mini .cticket__title { font-size: var(--text-md); line-height: 1.5; }
:lang(en) .cticket--mini .cticket__title { font-size: 1.0625rem; line-height: 1.3; }
.cticket--mini .cticket__story { font-size: var(--text-sm); line-height: 1.6; }
.cticket--mini .cticket__stamp { width: 56px; height: 56px; right: 12px; top: 10px; font-size: 10px; }
.cticket--mini .cticket__stamp span:last-child { font-size: 9px; }

/* Phones: progress bar while the ticket is scrolled away (reuses the bookbar spacing for toasts and the guide). */
.compose-peek {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bookbar);
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--color-nav-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--color-line);
}
.compose-peek__btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 14px; border-radius: var(--radius-control); background: var(--color-surface); border: 1px solid var(--color-line-strong); text-align: left; }
.compose-peek__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-story); font-size: var(--text-base); }
.compose-peek__n { display: inline-block; font-size: var(--text-sm); color: var(--color-text-3); }
.compose-peek__n.is-bump { animation: bump 440ms var(--ease-spring) var(--ink-delay, 0ms); }
.compose-peek__go { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; }

/* ---------- kept tickets ---------- */
.compose-mine { padding-block: var(--space-6) var(--space-9); border-top: 1px solid var(--color-line); }
.compose-mine__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: var(--space-5); }
.compose-mine h2 { font-family: var(--font-story); font-size: var(--text-2xl); font-weight: 700; }
.compose-mine h2 .num { font-family: var(--font-ui); font-size: var(--text-base); font-weight: var(--weight-normal); color: var(--color-text-3); }
.compose-mine__note, .compose-mine__empty { font-size: var(--text-base); color: var(--color-text-2); }
.compose-mine__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); }
.kept { display: grid; gap: 10px; align-content: start; }
.kept .cticket { transition: transform var(--m-base) var(--ease-out), box-shadow var(--m-base); }
.kept:hover .cticket, .kept:focus-within .cticket { transform: translateY(-3px); box-shadow: 0 22px 46px -24px rgba(0, 0, 0, .75), 0 0 0 1px var(--paper-line); }
.kept.is-new { animation: rise 560ms var(--ease-out) 300ms backwards; }
.kept__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kept__actions .icon-btn { width: 36px; height: 36px; }
.kept__tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--radius-pill); border: 1px solid var(--color-line-strong); font-size: var(--text-xs); color: var(--color-text-2); }
.kept__tear[data-confirm="true"] { color: var(--color-danger); }

/* ---------- share view ---------- */
.compose-shared { max-width: 520px; padding-block: var(--space-6) var(--space-9); }
.compose-shared__head { margin-bottom: var(--space-5); }
.compose-shared__eyebrow { font-size: var(--text-xs); letter-spacing: .14em; color: var(--color-text-3); }
.compose-shared__head h1 { margin-top: 6px; font-family: var(--font-story); font-size: var(--text-2xl); font-weight: 700; }
.compose-shared__head p:last-child { margin-top: 6px; color: var(--color-text-2); font-size: var(--text-base); }
.compose-shared__actions { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cticket-skeleton { height: 560px; border-radius: 18px; }

/* ---------- invitation on Explore ---------- */
.compose-invite-wrap { margin-top: calc(-1 * var(--space-7)); padding-bottom: var(--space-8); }
.compose-invite {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-6);
  padding: 28px 32px; border-radius: var(--radius-sheet); background: var(--color-surface); border: 1px solid var(--color-line);
  transition: border-color var(--dur-fast);
}
.compose-invite:hover { border-color: var(--color-line-strong); }
.compose-invite__eyebrow { font-size: var(--text-xs); letter-spacing: .14em; color: var(--color-text-3); }
.compose-invite__title { margin-top: 6px; font-family: var(--font-story); font-size: var(--text-2xl); font-weight: 700; }
.compose-invite__lead { margin-top: 8px; max-width: 34em; color: var(--color-text-2); font-size: var(--text-base); line-height: 1.7; }
.compose-invite__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: var(--weight-semibold); }
.compose-invite:hover .compose-invite__cta { text-decoration: underline; text-underline-offset: 4px; }
.compose-invite__slips { display: grid; gap: 10px; justify-items: end; padding-right: 8px; }
.compose-invite__slips .slip { font-size: 14px; min-height: 40px; }
/* Hovering the invitation fans the slips out a little, like a hand going to the pile. */
.compose-invite:hover .compose-invite__slips .slip:nth-child(1), .compose-invite:focus-visible .compose-invite__slips .slip:nth-child(1) { transform: translate(-6px, -2px) rotate(-7deg); }
.compose-invite:hover .compose-invite__slips .slip:nth-child(2), .compose-invite:focus-visible .compose-invite__slips .slip:nth-child(2) { transform: translate(4px, 0) rotate(5deg); }
.compose-invite:hover .compose-invite__slips .slip:nth-child(3), .compose-invite:focus-visible .compose-invite__slips .slip:nth-child(3) { transform: translate(-2px, 2px) rotate(-3deg); }

@media (prefers-reduced-motion: reduce) {
  .ink.is-new, .cline.is-new dd, .cline.is-cleared .cline__blank, .compose__bars b.is-new::after, .compose-peek__n.is-bump,
  .cticket__stamp.is-new, .cticket__stamp.is-new::after, .cticket.is-revealing *, .cticket.is-revealing .cticket__stamp::after,
  .compose.is-entering *, .compose-shared__ticket, .kept.is-new { animation: none !important; }
  .slip, .slip::before, .compose__frame, .kept .cticket, .cline__take, .compose__actions .btn, .compose__actions .icon-btn--square { transition: none; }
  button.slip:hover, button.slip:focus-visible, button.slip:active, .compose-invite:hover .compose-invite__slips .slip { transform: rotate(var(--r, 0deg)); }
  button.slip[aria-pressed="true"]:hover, .kept:hover .cticket, .compose__actions .btn:active, .compose__actions .icon-btn--square:hover { transform: none; }
}

@media (max-width: 960px) {
  .compose__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-5) 24px; }
  .cticket__body { padding-inline: 20px; }
  .compose__foot { padding-inline: 20px; }
}

@media (max-width: 760px) {
  .compose__head { flex-direction: column; align-items: flex-start; padding-block: var(--space-5) var(--space-4); }
  .compose__head h1 { font-size: var(--text-2xl); }
  .compose__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .compose__frame { position: relative; top: 0; order: -1; }
  .cticket__img { aspect-ratio: 16 / 7; }
  .cticket__img--blank { aspect-ratio: 16 / 5; }
  .cticket__img--blank[data-realm] { aspect-ratio: 16 / 7; }
  .cticket__title { font-size: var(--text-lg); }
  .cticket__lines { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
  .cline, :lang(en) .cline { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* The sentence-like lines get the full width, so they never break off a single character. */
  .cline[data-group="ritual"], .cline[data-group="keepsake"] { grid-column: 1 / -1; }
  .compose-tray { gap: 16px; }
  .slips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 6px 16px 12px 4px; margin: -6px -16px -12px -4px;
    scroll-padding-inline: 4px; overscroll-behavior-x: contain;
  }
  .slips::-webkit-scrollbar { display: none; }
  .slip { flex: none; max-width: 78vw; }
  .compose-invite { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; gap: var(--space-4); }
  .compose-invite__slips { grid-auto-flow: column; justify-content: start; justify-items: start; padding: 4px 0 8px; overflow: hidden; mask-image: linear-gradient(90deg, #000 80%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); }
  .compose-invite__slips .slip { white-space: nowrap; }
  .compose-invite__title { font-size: var(--text-xl); }
}

/* css/components/road.css */
/* =============================================================
   THE TICKET ROAD — shared pieces: ticket stubs and their backs, postmarks,
   luggage tags, the lantern, the line by the door, the rubbing, and sheets.

   Paper is light in both themes (as in compose.css): inside it the role tokens
   point to ink. Night is the brand; light ("dawn mist") is the same station at
   opening time: no glow, ink instead of light. Only transform, opacity, filter
   and background-size animate; everything holds still under reduced motion.
   ============================================================= */

.stub, .ticket-open, .rubbing__stone, .lantern, .ltag, .postmark, .slipbox {
  --paper: #f4ecdc;
  --paper-2: #eadfc9;
  --paper-ink: #2a2117;
  --paper-ink-2: #6a5c4b;
  --paper-line: rgba(60, 40, 10, .24);
  --seal: #a3302c;
  --ash: #f2c46d;
}
[data-theme="light"] :is(.stub, .ticket-open, .rubbing__stone, .lantern, .ltag, .postmark, .slipbox) { --paper: #fffaf0; --paper-2: #f3ead8; }

/* Each realm has a lamp colour (platform signs, the band of a stub). */
[data-realm="mirror-salt"] { --realm-hue: #b9d3e8; }
[data-realm="fire-stone"]  { --realm-hue: #ff9a5c; }
[data-realm="ice-night"]   { --realm-hue: #7fe0bd; }
[data-realm="sand-stars"]  { --realm-hue: #e8b27a; }
[data-realm="mist-temple"] { --realm-hue: #c9d1c8; }
[data-realm="water-deep"]  { --realm-hue: #6fb7d6; }
[data-realm="city-rules"]  { --realm-hue: #f2c46d; }
[data-realm="old-roads"]   { --realm-hue: #d6b98c; }

/* ---------- postmarks and luggage tags ---------- */
.postmark {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 1px;
  min-width: 34px; height: 34px; padding: 0 6px; border-radius: 999px;
  border: 1.5px dashed color-mix(in srgb, var(--seal) 70%, transparent);
  color: var(--seal); font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: 31px;
  transform: rotate(-8deg); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.postmark:nth-child(2n) { transform: rotate(6deg); }
.postmark > span[aria-hidden] { font-family: var(--font-story); font-size: 12px; font-weight: 400; opacity: .85; }
.postmark--sm { min-width: 30px; height: 30px; line-height: 27px; font-size: 12px; }
.postmark--near { font-family: var(--font-ui); font-weight: 600; letter-spacing: .04em; color: var(--paper-ink-2); border-color: var(--paper-line); }

.ltag {
  position: relative; display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px 2px 18px;
  border-radius: 3px 8px 8px 3px; background: var(--paper-2); color: var(--paper-ink);
  font-size: 12px; line-height: 1.3; box-shadow: inset 0 0 0 1px var(--paper-line);
}
.ltag::before { content: ""; position: absolute; left: 7px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--color-bg, #0d0f13); box-shadow: inset 0 0 0 1px var(--paper-line); }
button.ltag { cursor: pointer; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast); }
button.ltag:hover { transform: translateY(-1px) rotate(-1deg); }
button.ltag[aria-pressed="true"] { background: var(--color-action); color: var(--color-on-action); box-shadow: none; }

/* ---------- the ticket stub ---------- */
.stub {
  --color-text: var(--paper-ink); --color-text-2: var(--paper-ink-2); --color-line: var(--paper-line); --color-focus: #8a5a0f;
  position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 220px;
  padding: 0; text-align: left; color: var(--paper-ink); background: var(--paper); border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 18px 40px -26px rgba(0, 0, 0, .8), 0 0 0 1px var(--paper-line);
  transition: transform var(--dur) var(--ease), opacity var(--dur), filter var(--dur), box-shadow var(--dur);
}
[data-theme="light"] .stub { box-shadow: 0 14px 34px -24px rgba(20, 22, 28, .4), 0 0 0 1px var(--paper-line); }
/* The sentence is the button; its hit area stretches over the whole stub. */
.stub:not(.stub--static) { cursor: pointer; }
.stub__open { all: unset; cursor: pointer; text-wrap: pretty; }
.stub__open::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.stub:not(.stub--static):hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .85), 0 0 0 1px var(--paper-line); }
.stub:has(.stub__open:focus-visible) { outline: 2px solid var(--color-action); outline-offset: 4px; }
.stub.is-dim { opacity: .28; filter: grayscale(.8); transform: scale(.98); }
.stub__band {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
  height: 54px; padding: 0 14px 8px; border-radius: 12px 12px 0 0; overflow: hidden;
  background: var(--realm-art, linear-gradient(180deg, #2a2f3a, #444b58)); color: var(--color-on-media);
  font-size: 12px; letter-spacing: .12em;
}
.stub__band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .64) 0, rgba(0, 0, 0, .3) 55%, rgba(0, 0, 0, .05)); z-index: 0; }
.stub__band > * { position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
/* The realm's sky strip; the gradient underneath shows until it arrives. */
/* picture is display: contents (global.css), so the img is the box. */
.stub__band .stub__art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stub__band source { display: none; } /* not a flex item: the labels keep to the band's edges */
/* Bright detail low in the strip (street-lamp reflections, a pale flagstone edge) gets a firmer scrim. */
.stub:is([data-realm="city-rules"], [data-realm="old-roads"]) .stub__band::after { background: linear-gradient(0deg, rgba(0, 0, 0, .78) 0, rgba(0, 0, 0, .42) 60%, rgba(0, 0, 0, .08)); }
/* Pale skies (salt, mist) carry ink instead of light. */
:is([data-realm="mirror-salt"], [data-realm="mist-temple"]) > .stub__band, .stub:is([data-realm="mirror-salt"], [data-realm="mist-temple"]) .stub__band { color: #22252b; }
.stub:is([data-realm="mirror-salt"], [data-realm="mist-temple"]) .stub__band::after { background: linear-gradient(0deg, rgba(255, 255, 255, .72) 0, rgba(255, 255, 255, .34) 60%, rgba(255, 255, 255, .06)); }
.stub:is([data-realm="mirror-salt"], [data-realm="mist-temple"]) .stub__band > * { text-shadow: none; }
.stub:is([data-realm="mirror-salt"], [data-realm="mist-temple"]) .stub__glow[data-lit="false"] { box-shadow: inset 0 0 0 1.5px rgba(34, 37, 43, .55); }
:lang(en) .stub__band { letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.stub__platform { font-weight: 700; }
.stub__body { display: grid; gap: 6px; padding: 14px 16px 12px; flex: 1; }
.stub__title { font-family: var(--font-story); font-size: 1.0625rem; font-weight: 700; line-height: 1.55; letter-spacing: .02em; text-wrap: pretty; }
:lang(en) .stub__title { font-size: 1.0625rem; line-height: 1.32; letter-spacing: 0; }
.stub__story { font-family: var(--font-story); font-size: var(--text-sm); line-height: 1.7; color: var(--paper-ink-2); }
:lang(en) .stub__story { font-style: italic; line-height: 1.45; }
.stub .ink { font-weight: inherit; }
.stub__perf { position: relative; height: 0; margin: 0 12px; border-top: 1.5px dashed var(--paper-line); }
.stub__perf::before, .stub__perf::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--station-bg, var(--color-bg)); }
.stub__perf::before { left: -21px; }
.stub__perf::after { right: -21px; }
.stub__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px 14px; font-size: 12px; color: var(--paper-ink-2); }
.stub__marks { display: inline-flex; align-items: center; gap: 4px; }
.stub__transfer { margin-left: 4px; padding: 2px 7px; border: 1.5px solid var(--seal); border-radius: 4px; color: var(--seal); font-size: 12px; font-weight: 700; letter-spacing: .14em; transform: rotate(-4deg); }
.stub__tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.stub__alias { margin-left: auto; font-size: 12px; letter-spacing: .02em; }
.stub__lit, .stub__now { width: 100%; font-size: 12px; }
.stub__now { color: var(--seal); font-weight: 700; letter-spacing: .08em; }
.stub__now::before { content: "● "; }
/* The work's light, as a little lamp on the band. */
.stub__glow {
  position: absolute; right: 12px; top: 12px; z-index: 2; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, #fff6dc 0, #ffd27e 45%, rgba(255, 190, 90, 0) 72%);
  box-shadow: 0 0 calc(4px + var(--glow) * 5px) calc(var(--glow) * 1px) rgba(255, 196, 100, calc(.15 + var(--glow) * .12));
  opacity: calc(.45 + var(--glow) * .11);
}
.stub__glow[data-lit="false"] { background: none; box-shadow: inset 0 0 0 1.5px rgba(246, 241, 232, .65); opacity: .8; }
[data-theme="light"] .stub__glow[data-lit="true"] { background: radial-gradient(circle, #e9852d 0, rgba(233, 133, 45, .55) 50%, transparent 75%); box-shadow: none; }

.stub--mini { min-height: 0; width: 200px; }
.stub--mini .stub__band { height: 40px; letter-spacing: .04em; text-transform: none; white-space: nowrap; }
.stub--mini .stub__platform { display: none; } /* a narrow stub keeps the realm; the station shows the platform */
.stub--mini .stub__realm { overflow: hidden; text-overflow: ellipsis; }
.stub--mini .stub__body { padding: 10px 12px 8px; }
.stub--mini .stub__title { font-size: var(--text-base); line-height: 1.5; }
:lang(en) .stub--mini .stub__title { font-size: .9375rem; line-height: 1.3; }
.stub--mini .stub__foot { padding: 8px 12px 10px; }
.stub--mini .stub__alias { width: 100%; margin-left: 0; }
.stub-skeleton { height: 230px; border-radius: 12px; }

/* ---------- the opened ticket (a sheet) ---------- */
.sheet.sheet--ticket { max-width: 920px; padding: 0; overflow: auto; background: transparent; box-shadow: none; }
.ticket-open { --color-text: var(--paper-ink); --color-text-2: var(--paper-ink-2); --color-line: var(--paper-line); --color-focus: #8a5a0f; perspective: 1400px; color: var(--paper-ink); }
.ticket-open__card { position: relative; }
.ticket-open__front { display: grid; place-items: center; min-height: 420px; padding: 24px; }
.ticket-open__front .stub { max-width: 380px; min-height: 280px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.ticket-open__back { display: none; background: var(--paper); border-radius: 18px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px var(--paper-line); }
.ticket-open.is-over .ticket-open__front { display: none; }
.ticket-open.is-over .ticket-open__back { display: block; }
.ticket-open:not(.is-over) .stub__hole .punch { animation: punch 380ms var(--ease) 120ms both; }
.stub__hole, .back__hole { position: absolute; right: 18px; top: 66px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--station-bg, #0d0f13); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); }
.back__hole { top: 22px; right: 70px; }
.punch { width: 18px; height: 18px; fill: var(--paper); }
[data-theme="light"] :is(.stub__hole, .back__hole) { background: #2a2f38; }
@keyframes punch { from { transform: scale(0); } 60% { transform: scale(1.2); } to { transform: scale(1); } }

.back__head { position: relative; padding: 26px 120px 18px 28px; border-bottom: 1.5px dashed var(--paper-line); }
.back__alias { font-size: 12px; letter-spacing: .1em; color: var(--paper-ink-2); }
.back__title { margin-top: 6px; font-family: var(--font-story); font-size: var(--text-xl); line-height: 1.5; font-weight: 700; text-wrap: pretty; }
:lang(en) .back__title { line-height: 1.3; }
.back__story { margin-top: 6px; font-family: var(--font-story); font-size: var(--text-md); line-height: 1.7; color: var(--paper-ink-2); }
.back__close { position: absolute; right: 16px; top: 16px; color: var(--paper-ink); }
.back__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0; }
.back__doors { padding: 22px 28px; border-right: 1.5px dashed var(--paper-line); }
.back__doors h3, .lantern legend, .lantern__flags summary { font-size: 12px; letter-spacing: .14em; color: var(--paper-ink-2); font-weight: 600; }
:lang(en) .back__doors h3 { letter-spacing: .1em; text-transform: uppercase; }
.back__doors ul { margin-top: 12px; display: grid; gap: 12px; }
.back__doors li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.back__doors li b { display: block; font-size: var(--text-sm); }
.back__doors li small { display: block; font-size: 12px; color: var(--paper-ink-2); }
.back__doors .link { font-size: var(--text-sm); color: var(--paper-ink); text-decoration-color: var(--paper-line); }
.back__near { margin-top: 10px; font-size: var(--text-sm); color: var(--paper-ink-2); }
.back__tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.back__lamp { padding: 18px 22px 22px; }
.back__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 16px 28px 22px; border-top: 1.5px dashed var(--paper-line); }
.back__foot .btn--primary { --color-action: #1d1a14; --color-on-action: #fbe1a6; --color-action-hover: #34302a; }
.back__foot .btn--quiet { color: var(--paper-ink-2); }
.back__foot .btn--quiet:first-of-type { margin-left: auto; }

/* ---------- the lantern ---------- */
.lantern { --color-text: var(--color-text); position: relative; display: grid; gap: 18px; }
.lantern__sky { position: relative; height: 168px; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 90% at 50% 110%, #1f2433 0, #0b0d14 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
[data-theme="light"] .lantern__sky { background: linear-gradient(180deg, #f1ece2, #e8e0d0); box-shadow: inset 0 0 0 1px rgba(60, 40, 10, .14); }
.lantern--compact .lantern__sky { height: 128px; }
.lantern__cluster { position: absolute; inset: 0; }
.lantern__cluster i {
  position: absolute; left: var(--x); top: var(--y); width: calc(7px * var(--s)); height: calc(9px * var(--s)); border-radius: 45% 45% 40% 40%;
  background: radial-gradient(circle at 50% 60%, #fff4d6 0, #ffc96b 45%, rgba(240, 138, 60, .0) 75%);
  box-shadow: 0 0 calc(6px + var(--glow) * 4px) rgba(255, 196, 100, calc(.18 + var(--glow) * .1));
  opacity: calc(.35 + var(--glow) * .12);
  animation: flicker 3.2s ease-in-out var(--d) infinite alternate;
}
.lantern__cluster[data-full="false"] i { opacity: .28; box-shadow: none; }
[data-theme="light"] .lantern__cluster i { background: radial-gradient(circle, rgba(214, 107, 34, .75) 0, rgba(214, 107, 34, .25) 55%, transparent 72%); box-shadow: none; filter: blur(.4px); animation: none; }
@keyframes flicker { from { transform: translateY(0) scale(1); } to { transform: translateY(-3px) scale(1.06); } }
.lantern__shade {
  position: absolute; inset: 0; border-radius: inherit;
  background:
    repeating-linear-gradient(97deg, rgba(120, 96, 60, .07) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(13deg, rgba(120, 96, 60, .05) 0 1px, transparent 1px 13px),
    linear-gradient(180deg, rgba(244, 236, 220, .84), rgba(233, 223, 203, .9));
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.lantern__sky.is-open .lantern__shade { display: none; }
.lantern__verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: -6px; font-size: var(--text-sm); color: var(--color-text-2); }
.lantern__verdict b { color: var(--color-text); font-weight: 600; }
.lantern__verdict.is-quiet { color: var(--color-text-3); }
.lantern__stamp { padding: 2px 8px; border: 1.5px solid var(--seal); border-radius: 4px; color: var(--seal); font-family: var(--font-story); font-size: 12.5px; transform: rotate(-2deg); }
/* On the night page (not on paper) the seal is a warm coral that reads on the dark. */
:root:not([data-theme="light"]) .road-end__lamp .lantern__stamp { color: #ff9f8c; border-color: #ff9f8c; }
.lantern__hang { display: grid; justify-items: center; gap: 10px; }
.lantern__body { position: relative; display: grid; justify-items: center; width: 96px; }
.lantern__cap, .lantern__foot { width: 40px; height: 9px; border-radius: 3px; background: #3b2a1a; }
.lantern__foot { width: 32px; height: 7px; }
.lantern__paper {
  position: relative; width: 84px; height: 100px; margin: -1px 0; border-radius: 42% 42% 40% 40% / 50% 50% 45% 45%;
  background:
    repeating-linear-gradient(90deg, rgba(90, 50, 20, .14) 0 1.5px, transparent 1.5px 14px),
    radial-gradient(circle at 50% 62%, rgba(255, 214, 140, calc(var(--flame) * .95)) 0, rgba(255, 170, 90, calc(var(--flame) * .5)) 38%, transparent 70%),
    #e7d6b8;
  box-shadow: 0 0 calc(var(--flame) * 70px) calc(var(--flame) * 8px) rgba(255, 190, 100, calc(var(--flame) * .45)), inset 0 -10px 18px rgba(80, 40, 10, .18);
  transition: box-shadow 420ms var(--ease), background 420ms var(--ease);
}
[data-theme="light"] .lantern__paper { box-shadow: 0 10px 24px -12px rgba(60, 40, 10, .35), inset 0 -10px 18px rgba(80, 40, 10, .14); }
.lantern__flame {
  position: absolute; left: 50%; bottom: 26px; width: 14px; height: 22px; margin-left: -7px; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff7e0 0, #ffd27e 45%, #f08a3c 80%);
  transform-origin: 50% 100%; transform: scaleY(calc(.15 + var(--flame) * 1.1)) scaleX(calc(.4 + var(--flame) * .6)); opacity: calc(.15 + var(--flame) * .85);
  transition: transform 320ms var(--ease), opacity 320ms;
}
.lantern__ghost { position: fixed; z-index: var(--z-overlay); width: 28px; height: 34px; border-radius: 45%; pointer-events: none; background: radial-gradient(circle at 50% 60%, #fff4d6 0, #ffc96b 45%, rgba(240, 138, 60, .3) 75%); box-shadow: 0 0 30px 8px rgba(255, 196, 100, .45); }
[data-theme="light"] .lantern__ghost { background: radial-gradient(circle, #e9852d 0, rgba(233, 133, 45, .4) 60%, transparent 75%); box-shadow: none; }
.lantern__cords { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 520px; }
.cord { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; touch-action: none; cursor: ns-resize; user-select: none; -webkit-user-select: none; }
.cord__string { width: 1.5px; height: calc(26px + var(--pull) * 12px); background: linear-gradient(var(--color-line-strong), var(--color-text-3)); transition: height 220ms var(--ease); }
.cord__bead {
  width: 26px; height: 26px; margin-top: -2px; border-radius: 50%; cursor: grab;
  background: radial-gradient(circle at 35% 30%, #fff1cf, #d9a650 55%, #8c5d1c);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35), 0 0 calc(var(--pull) * 4px) rgba(255, 196, 100, calc(var(--pull) * .12));
}
.cord__bead:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.cord__bead[aria-disabled="true"] { filter: grayscale(.8); opacity: .5; cursor: default; }
.cord__label { margin-top: 4px; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); text-align: center; }
.cord__level { font-size: 12px; color: var(--color-text-3); min-height: 1.4em; }
.cord__q { font-size: 12px; line-height: 1.45; color: var(--color-text-3); text-align: center; max-width: 13em; }
.lantern--compact .cord__q { display: none; }
.lantern__dwell { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-text-3); }
.lantern__dwell svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.lantern__dwell circle { fill: none; stroke: var(--color-action); stroke-width: 3; stroke-dasharray: 100.5; stroke-dashoffset: 100.5; animation: dwell var(--dwell, 8s) linear forwards; }
@keyframes dwell { to { stroke-dashoffset: 0; } }
.lantern.is-dwelling :is(.cord__string, .cord__bead) { opacity: .5; }
.lantern__stamps { border: 0; padding: 0; margin: 0; min-width: 0; }
.stamps { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.stamp {
  padding: 6px 10px; border: 1.5px solid var(--color-line-strong); border-radius: 6px; font-family: var(--font-story); font-size: var(--text-sm); color: var(--color-text-2);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast);
}
.stamp:hover { color: var(--color-text); border-color: var(--color-text-3); }
.stamp[aria-pressed="true"] { border-color: var(--seal); background: var(--seal); color: #fff4ec; transform: rotate(-3deg); }
:root:not([data-theme="light"]) .stamp[aria-pressed="true"] { background: #c4433c; border-color: #c4433c; }
.lantern__flags summary { cursor: pointer; width: fit-content; }
.lantern__flags p { margin-top: 6px; font-size: 12px; color: var(--color-text-3); }
.flags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.flag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--color-text-2); }
.flag input { accent-color: var(--color-action); width: 16px; height: 16px; }
.lantern__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.lantern__release[aria-disabled="true"] { opacity: .5; }
.lantern__status { font-size: var(--text-sm); color: var(--color-text-2); }
.lantern__own { font-size: var(--text-sm); color: var(--color-text-2); }
/* Inside the ticket's paper back, the lantern's UI is ink on paper. */
.ticket-open .lantern { --color-text: var(--paper-ink); --color-text-2: var(--paper-ink-2); --color-text-3: var(--paper-ink-2); --color-line: var(--paper-line); --color-line-strong: rgba(60, 40, 10, .38); --color-action: #1d1a14; --color-on-action: #fbe1a6; --color-focus: #8a5a0f; }
.ticket-open .stamp[aria-pressed="true"] { background: var(--seal); border-color: var(--seal); }
.ticket-open .lantern__stamp { color: var(--seal); border-color: var(--seal); }

/* ---------- the line by the door ---------- */
.rack { position: relative; }
/* The line scrolls sideways when the column is narrower than its tickets. */
.rack__line { position: relative; height: 330px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: thin; }
.rack.is-empty .rack__line { height: 120px; }
.rack__thread { position: absolute; left: 0; top: 0; width: max(100%, calc(var(--n, 3) * 186px + 24px)); height: 80px; overflow: visible; }
.rack__thread path { fill: none; stroke: var(--color-text-3); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.rack__tickets { position: absolute; top: 0; bottom: 0; left: 0; width: max(100%, calc(var(--n, 3) * 186px + 24px)); --sway: 0deg; }
.rack__item { position: absolute; left: calc(var(--x) * 1%); top: calc(10px + var(--sag) * 1px); transform: translateX(-50%) rotate(calc(var(--sway) * (1 + var(--i) * .12) + (var(--i) - 2.5) * .7deg)); transform-origin: 50% 0; will-change: transform; }
.rack__peg { position: absolute; left: 50%; top: -6px; z-index: 3; width: 10px; height: 26px; margin-left: -5px; border-radius: 2px; background: linear-gradient(90deg, #8a6236, #c49260 50%, #8a6236); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
.rack__item .stub { margin-top: 10px; }
.rack__item { scroll-snap-align: center; }
.rack__item .stub--mini { width: 168px; }
.rack__empty { position: absolute; left: 0; right: 0; top: 64px; text-align: center; font-size: var(--text-sm); color: var(--color-text-2); }
.rack__more { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: var(--text-sm); }

/* ---------- the rubbing ---------- */
.rubbing { display: grid; gap: 16px; }
.rubbing__stone { position: relative; min-height: 280px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; border-radius: 14px; overflow: hidden; isolation: isolate; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8), 0 0 0 1px var(--paper-line); }
/* What the rubbing brings out: dust over the raised stone, the engraving left paper-pale.
   Night: lamp ash, a dark gold. Dawn: charcoal. */
.rubbing__relief {
  --dust: #2b2723; --mark: #f8f2e4;
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 28px 20px; text-align: center;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .05), transparent 40%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 6px),
    var(--dust);
  color: var(--mark);
}
:root:not([data-theme="light"]) .rubbing__relief { --dust: #4a3c22; --mark: #f3e6c4; background: radial-gradient(circle at 30% 20%, rgba(242, 196, 109, .22), transparent 55%), repeating-linear-gradient(115deg, rgba(242, 196, 109, .06) 0 2px, transparent 2px 6px), var(--dust); }
/* The carved stone under the dust: a greyscale texture, tinted by the dust colour of the theme. */
.rubbing__relief .rubbing__texture { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; opacity: .6; }
:root:not([data-theme="light"]) .rubbing__relief .rubbing__texture { mix-blend-mode: soft-light; opacity: .85; }
.rubbing__relief > :not(picture) { position: relative; z-index: 1; }
.rubbing__no { font-family: var(--font-story); font-size: clamp(3rem, 2rem + 4vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: .02em; text-shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 -1px 0 rgba(255, 255, 255, .08); }
.rubbing__no span { font-size: .45em; margin-right: 4px; vertical-align: .6em; opacity: .8; }
.rubbing__line { font-family: var(--font-story); font-size: var(--text-md); letter-spacing: .3em; opacity: .9; }
:lang(en) .rubbing__line { letter-spacing: .08em; font-style: italic; }
.rubbing__slips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.rslip { display: grid; gap: 2px; min-width: 7em; max-width: 15em; padding: 8px 12px; border: 1.5px solid currentColor; border-radius: 3px; text-align: left; }
.rslip__g { font-size: 12px; letter-spacing: .14em; opacity: .75; }
.rslip__t { font-family: var(--font-story); font-size: var(--text-sm); line-height: 1.45; }
.rslip--empty { border-style: dashed; opacity: .75; }
.rslip--empty .link { color: inherit; }
.rslip--flight { position: fixed; z-index: var(--z-overlay); margin: 0; pointer-events: none; color: var(--paper-ink); background: var(--paper); border-color: var(--paper-line); box-shadow: 0 14px 24px -10px rgba(0, 0, 0, .5); }
.rubbing__paper { position: absolute; inset: 0; z-index: 2; cursor: crosshair; border-radius: inherit; transform-origin: 50% 0; }
.rubbing.is-done .rubbing__paper { pointer-events: none; }
.rubbing__controls { display: flex; align-items: center; gap: 12px; }
.rubbing__hold { position: relative; overflow: hidden; }
.rubbing__meter { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.rubbing__meter b { display: block; height: 100%; background: var(--color-action); transform: scaleX(0); transform-origin: left; }
.rubbing__box { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.slipbox { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 10px; color: var(--paper-ink); background: linear-gradient(180deg, #c9a273, #a87d4e); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 8px 18px -10px rgba(0, 0, 0, .6); text-decoration: none; }
.slipbox__lid { width: 22px; height: 16px; border-radius: 2px; background: var(--paper); box-shadow: 0 -3px 0 #8a6236 inset; }
.slipbox__label { font-size: var(--text-sm); font-weight: 600; color: #2a1d12; }
.slipbox__n { min-width: 24px; padding: 1px 6px; border-radius: 999px; background: #2a1d12; color: #f8ecd2; font-size: 12px; text-align: center; }
.rubbing__box.is-full .slipbox { animation: box-bump 520ms var(--ease) 1; }
@keyframes box-bump { 40% { transform: translateY(2px) scale(.97); } 70% { transform: translateY(-2px); } }
.rubbing.is-settled .rubbing__compose { animation: none; }

/* ---------- the end of an entrance ---------- */
.road-end { display: grid; gap: var(--space-7); padding-block: var(--space-6) var(--space-7); }
.road-end__rub, .road-end__lamp { width: 100%; max-width: 820px; margin-inline: auto; }
.road-end__lamp {
  position: relative; display: grid; gap: 16px; padding: var(--space-6) clamp(16px, 4vw, 48px);
  border-radius: 24px; background: radial-gradient(120% 80% at 50% 0%, rgba(242, 196, 109, .07), transparent 60%), var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-line);
}
:root:not([data-theme="light"]) .road-end__lamp { background: radial-gradient(120% 70% at 50% 0%, rgba(242, 196, 109, .08), transparent 60%), #08090d; }
.road-end__lamp .lantern { max-width: 640px; width: 100%; margin-inline: auto; }

/* ---------- sheets ---------- */
.road-sheet { display: grid; gap: 14px; }
.road-sheet h2 { font-family: var(--font-story); font-size: var(--text-xl); font-weight: 700; }
.road-sheet__lead { font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-2); }
.road-sheet__who { font-family: var(--font-story); font-size: var(--text-md); }
.road-sheet__choices { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; }
.road-choice { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-control); box-shadow: inset 0 0 0 1px var(--color-line); cursor: pointer; }
.road-choice:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--color-action); background: var(--color-action-soft); }
.road-choice input { accent-color: var(--color-action); width: 18px; height: 18px; }
.road-sheet__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.tag-picker { display: grid; gap: 12px; }
.tag-picker__kind { font-size: 12px; letter-spacing: .14em; color: var(--color-text-3); font-weight: 600; }
.tag-picker__row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ledger__glow { width: 64px; height: 64px; margin-inline: auto; border-radius: 50%; background: radial-gradient(circle, #fff4d6 0, #ffc96b 40%, transparent 70%); opacity: calc(.3 + var(--glow) * .14); box-shadow: 0 0 calc(var(--glow) * 10px) rgba(255, 196, 100, .4); }
.ledger__axes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ledger__axis h3, .ledger__cols h3 { font-size: var(--text-sm); font-weight: 600; }
.ledger__bars { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 4px; height: 90px; margin-top: 8px; }
.ledger__bars li { position: relative; height: calc(8px + var(--h) * 70px); border-radius: 3px 3px 0 0; background: var(--color-action); opacity: calc(.35 + var(--h) * .65); }
.ledger__bars b { position: absolute; left: 0; right: 0; top: -18px; font-size: 12px; text-align: center; color: var(--color-text-2); font-weight: 500; }
.ledger__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ledger__list { margin-top: 8px; display: grid; gap: 6px; }
.ledger__list li { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-sm); }
.ledger__none { margin-top: 8px; font-size: var(--text-sm); color: var(--color-text-3); }

/* ---------- compose: outlines, postmarks, the station state ---------- */
.slip-outline {
  position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 46px; padding: 6px 12px; flex: none;
  border: 1.5px dashed var(--color-line-strong); border-radius: 3px; color: var(--color-text-3);
  font-family: var(--font-mono); font-size: 12px; transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease);
}
.slip-outline:hover, .slip-outline[aria-expanded="true"] { color: var(--color-text); border-color: var(--color-text-2); transform: translateY(-1px); }
.slip-outline:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.outlines__more { align-self: center; font-size: 12px; color: var(--color-text-3); white-space: nowrap; }
.outline-pop { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; border-radius: var(--radius-control); background: var(--color-surface-2); font-size: var(--text-sm); color: var(--color-text-2); }
.outline-pop a { font-weight: 600; }
.slip__borrowed { display: block; margin-top: 3px; font-family: var(--font-ui); font-size: 12px; letter-spacing: .1em; color: var(--seal, #a3302c); }
.cline__mark { margin-left: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--seal); vertical-align: 1px; white-space: nowrap; }
.cticket__transfer { position: absolute; left: 18px; top: 14px; z-index: 2; padding: 3px 9px; border: 1.5px solid var(--seal); border-radius: 4px; background: rgba(255, 250, 240, .86); color: var(--seal); font-size: 12px; font-weight: 700; letter-spacing: .16em; transform: rotate(-5deg); }
.compose__posted { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--text-sm); color: var(--paper-ink-2, var(--color-text-2)); }
.compose__posted .tagline { padding: 2px 8px; border-radius: 999px; background: rgba(163, 48, 44, .1); color: var(--seal, #a3302c); font-weight: 600; }
.kept__tag--posted { background: var(--color-action-soft); color: var(--color-text); }

/* ---------- the station staff (admin) ---------- */
.admin-panel--road { margin-bottom: var(--space-5); }
.admin-road__lead { margin: 4px 0 14px; font-size: var(--text-sm); color: var(--color-text-2); }
.admin-road { display: grid; gap: 14px; }
.admin-road__item { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--color-line); }
.admin-road__status { font-size: var(--text-sm); font-weight: 600; }
.admin-road__status.is-hidden { color: var(--color-danger); }
.admin-road__reasons { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--text-sm); color: var(--color-text-2); }
.admin-road__actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.admin-road__empty { font-size: var(--text-sm); color: var(--color-text-3); }

@media (max-width: 760px) {
  .admin-road__item { grid-template-columns: minmax(0, 1fr); }
  .back__grid { grid-template-columns: minmax(0, 1fr); }
  .back__doors { border-right: 0; border-bottom: 1.5px dashed var(--paper-line); padding: 18px 20px; }
  .back__head { padding: 22px 70px 16px 20px; }
  .back__hole { right: 64px; top: 18px; }
  .back__lamp { padding: 16px 18px 20px; }
  .back__foot { padding: 14px 20px 20px; }
  .back__foot .btn--primary { width: 100%; justify-content: center; }
  .back__foot .btn--quiet:first-of-type { margin-left: 0; }
  .ticket-open__front .stub { max-width: 300px; }
  .rack__line { height: 300px; }
  .lantern__cords { gap: 6px; }
  .ledger__axes, .ledger__cols { grid-template-columns: 1fr; }
  .rubbing__stone { min-height: 300px; }
  .road-end { gap: var(--space-7); }
}

@media (prefers-reduced-motion: reduce) {
  .stub, .cord__string, .lantern__paper, .lantern__flame, .slip-outline { transition: none; }
  .lantern__cluster i, .rubbing__box.is-full .slipbox, .lantern__dwell circle { animation: none; }
  .lantern__dwell circle { stroke-dashoffset: 0; }
  .stub:not(.stub--static):hover { transform: none; }
}

/* css/pages/station.css */
/* =============================================================
   THE NIGHT STATION — #/station. A night hall in the dark theme; the same hall
   at opening time in the light one. The hall's light follows the hour on the
   station clock (data-hour), so dragging the hand sweeps the whole room.
   ============================================================= */

.station { --station-bg: var(--color-bg); --hall-a: #0e1422; --hall-b: #05070b; --hall-glow: rgba(242, 196, 109, .16); background: var(--station-bg); }
[data-theme="light"] .station { --hall-a: #e9edf1; --hall-b: #f3f3f1; --hall-glow: rgba(214, 150, 60, .14); }
/* The hour colours the hall. */
.station[data-hour="predawn"]   { --hall-a: #0d1a33; --hall-glow: rgba(120, 170, 255, .2); }
.station[data-hour="dawn"]      { --hall-a: #2a1a2e; --hall-glow: rgba(255, 160, 150, .2); }
.station[data-hour="morning"]   { --hall-a: #1b2433; --hall-glow: rgba(240, 220, 170, .16); }
.station[data-hour="noon"]      { --hall-a: #212634; --hall-glow: rgba(255, 245, 210, .2); }
.station[data-hour="afternoon"] { --hall-a: #261f1a; --hall-glow: rgba(255, 196, 120, .18); }
.station[data-hour="dusk"]      { --hall-a: #2d1a14; --hall-glow: rgba(255, 140, 70, .22); }
.station[data-hour="blue-hour"] { --hall-a: #101a3a; --hall-glow: rgba(110, 140, 255, .24); }
.station[data-hour="night"]     { --hall-a: #0b1020; --hall-glow: rgba(242, 196, 109, .16); }
.station[data-hour="midnight"]  { --hall-a: #05070f; --hall-glow: rgba(180, 160, 255, .12); }
[data-theme="light"] .station[data-hour="predawn"]   { --hall-a: #dfe7f5; }
[data-theme="light"] .station[data-hour="dawn"]      { --hall-a: #f4e2e0; }
[data-theme="light"] .station[data-hour="morning"]   { --hall-a: #eef0ea; }
[data-theme="light"] .station[data-hour="noon"]      { --hall-a: #f6f4ea; }
[data-theme="light"] .station[data-hour="afternoon"] { --hall-a: #f4ecdf; }
[data-theme="light"] .station[data-hour="dusk"]      { --hall-a: #f4e1d2; }
[data-theme="light"] .station[data-hour="blue-hour"] { --hall-a: #dfe3f4; }
[data-theme="light"] .station[data-hour="night"]     { --hall-a: #e4e6ee; }
[data-theme="light"] .station[data-hour="midnight"]  { --hall-a: #dcdde6; }

.station__hall {
  position: relative; overflow: hidden; padding: calc(var(--space-7) + 8px) 0 var(--space-6);
  background: radial-gradient(70% 120% at 50% -10%, var(--hall-glow), transparent 60%), linear-gradient(180deg, var(--hall-a), var(--hall-b) 92%);
  transition: background 700ms var(--ease);
}
.station__hall::after { /* the hall's ceiling lamps */
  content: ""; position: absolute; inset: 0 0 auto; height: 140px; pointer-events: none;
  background: radial-gradient(4px 4px at 12% 40%, rgba(255, 220, 160, .7), transparent 60%), radial-gradient(4px 4px at 31% 30%, rgba(255, 220, 160, .55), transparent 60%),
    radial-gradient(4px 4px at 50% 36%, rgba(255, 220, 160, .7), transparent 60%), radial-gradient(4px 4px at 69% 30%, rgba(255, 220, 160, .55), transparent 60%), radial-gradient(4px 4px at 88% 40%, rgba(255, 220, 160, .7), transparent 60%);
}
[data-theme="light"] .station__hall::after { opacity: .25; }
.station__hall-inner { position: relative; z-index: 1; display: grid; justify-items: start; gap: 12px; }
/* The night concourse sits under the hall's light: the hour still tints the room, the title side
   stays dark enough to read, and the picture fades into the page below. */
.station__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.station__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; }
.station__art::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 120% at 50% -10%, var(--hall-glow), transparent 60%),
    linear-gradient(90deg, rgba(5, 7, 11, .9) 0, rgba(5, 7, 11, .62) 42%, rgba(5, 7, 11, .18) 78%, rgba(5, 7, 11, .1)),
    linear-gradient(0deg, var(--station-bg) 0, transparent 38%);
}
.station__art:empty { display: none; }
.station__title { font-family: var(--font-story); font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem); font-weight: 700; line-height: 1.05; letter-spacing: .04em; color: var(--color-text); }
:lang(en) .station__title { letter-spacing: -.015em; }
.station__lead { max-width: 30em; font-family: var(--font-story); font-size: var(--text-lg); line-height: 1.6; color: var(--color-text-2); }
:lang(en) .station__lead { font-style: italic; }

/* Split-flap clock: the station's time and hour bucket, flipping in on arrival. */
.flapboard { display: inline-flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 10px; background: #0a0b0e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 10px 30px -14px rgba(0, 0, 0, .8); perspective: 400px; }
.flapboard__time, .flapboard__hour { display: inline-flex; align-items: center; gap: 4px; }
.flap { position: relative; display: inline-grid; place-items: center; min-width: 30px; height: 40px; padding: 0 6px; border-radius: 4px; background: linear-gradient(180deg, #23262e 0 49%, #1a1c22 51% 100%); color: #f6efe0; font-family: var(--font-mono); font-size: 24px; font-weight: 700; line-height: 1; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .6); }
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .7); }
.flap > span { display: block; animation: flap-in 560ms cubic-bezier(.3, .0, .2, 1) calc(var(--k) * 90ms + 120ms) both; transform-origin: 50% 50%; }
.flap--word { min-width: 0; padding: 0 12px; font-family: var(--font-ui); font-size: 17px; letter-spacing: .1em; color: #f2c46d; }
.flapboard__colon { color: #f6efe0; font-family: var(--font-mono); font-size: 22px; font-style: normal; animation: colon 2s steps(1) infinite; }
@keyframes flap-in { from { transform: rotateX(-90deg); opacity: 0; } 60% { transform: rotateX(12deg); opacity: 1; } to { transform: none; } }
@keyframes colon { 50% { opacity: .2; } }

/* ---------- platforms ---------- */
.station__platforms { position: sticky; top: var(--nav-h); z-index: var(--z-sticky); padding: 10px 0; background: color-mix(in srgb, var(--station-bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-line); }
.platforms { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.platforms::-webkit-scrollbar { display: none; }
.platform {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px 8px 12px; white-space: nowrap;
  border-radius: 8px; background: var(--color-surface); color: var(--color-text-2); box-shadow: inset 0 0 0 1px var(--color-line);
  font-size: var(--text-sm); transition: color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
}
.platform:hover { color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-line-strong); }
.platform[aria-pressed="true"] { color: var(--color-text); background: var(--color-surface-2); box-shadow: inset 0 0 0 1.5px var(--realm-hue, var(--color-action)); }
.platform__lamp { width: 9px; height: 9px; border-radius: 50%; background: var(--realm-hue, var(--color-action)); opacity: .45; transition: opacity var(--dur-fast), box-shadow var(--dur-fast); }
.platform[aria-pressed="true"] .platform__lamp { opacity: 1; box-shadow: 0 0 10px 2px color-mix(in srgb, var(--realm-hue, var(--color-action)) 70%, transparent); }
[data-theme="light"] .platform__lamp { opacity: .8; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.platform__no { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--color-text-3); }
.platform--all .platform__lamp { background: var(--color-action); }

/* ---------- the bar: enquiries, order, timetable ---------- */
.station__body { padding-bottom: var(--space-8); }
.station__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 12px 16px; padding-block: var(--space-5) var(--space-4); }
.enquiry__label { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: .16em; color: var(--color-text-3); font-weight: 600; }
:lang(en) .enquiry__label { letter-spacing: .12em; text-transform: uppercase; }
.enquiry__field { display: flex; gap: 8px; }
.enquiry__input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-line-strong); font-size: var(--text-base); }
.enquiry__input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.enquiry__field .btn { height: 44px; }
.sortboard { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: #0a0b0e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
[data-theme="light"] .sortboard { background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-line); }
.sortboard__opt { min-height: 38px; padding: 0 14px; border-radius: 7px; font-size: var(--text-sm); color: rgba(246, 239, 224, .7); transition: background-color var(--dur-fast), color var(--dur-fast); }
[data-theme="light"] .sortboard__opt { color: var(--color-text-2); }
.sortboard__opt[aria-checked="true"] { background: linear-gradient(180deg, #2a2d35 0 49%, #22252c 51%); color: #f2c46d; font-weight: 600; }
[data-theme="light"] .sortboard__opt[aria-checked="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.sortboard__opt:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.station__tt-btn { height: 44px; }
.station__tt-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--color-action); }

/* ---------- the timetable ---------- */
.timetable { margin-bottom: var(--space-5); padding: var(--space-5); border-radius: 18px; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-line); }
.timetable__grid { display: grid; grid-template-columns: 290px minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-5) var(--space-6); }
.tt-block h3 { margin-bottom: 10px; font-size: 12px; letter-spacing: .16em; color: var(--color-text-3); font-weight: 600; }
:lang(en) .tt-block h3 { letter-spacing: .12em; text-transform: uppercase; }
.tt-block h3 + .ring + h3 { margin-top: 18px; }
.ring { display: flex; flex-wrap: wrap; gap: 6px; }
.ring__s[aria-pressed="true"] { background: var(--color-action); color: var(--color-on-action); border-color: transparent; }
.destination select { width: 100%; }
.luggage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.luggage + .luggage { margin-top: 12px; }
.luggage__kind { width: 100%; font-size: 12px; color: var(--color-text-2); }
.timetable__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: var(--space-4); }

/* The station clock: nine hours around a dial. Drag the hand, tap an hour, or use the keys. */
.clock { --size: 232px; position: relative; width: var(--size); height: var(--size); margin: 6px 22px; touch-action: none; }
.clock__face { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.clock__rim { fill: #0a0b0e; stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
[data-theme="light"] .clock__rim { fill: #f7f5f0; stroke: rgba(20, 22, 28, .14); }
.clock__arc { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .06); transition: fill var(--dur) var(--ease); }
[data-theme="light"] .clock__arc { fill: rgba(20, 22, 28, .04); stroke: rgba(20, 22, 28, .06); }
.clock__arc.is-on { fill: color-mix(in srgb, #f2c46d 55%, transparent); }
[data-theme="light"] .clock__arc.is-on { fill: rgba(26, 28, 33, .78); }
.clock__hand { stroke: #f2c46d; stroke-width: 3; stroke-linecap: round; transform: rotate(var(--hand)); transition: transform 380ms cubic-bezier(.34, 1.56, .64, 1), opacity var(--dur); }
[data-theme="light"] .clock__hand { stroke: #1a1c21; }
.clock[data-any="true"] .clock__hand { opacity: .25; }
.clock__pin { fill: #f2c46d; }
[data-theme="light"] .clock__pin { fill: #1a1c21; }
.clock__hours { position: absolute; inset: 0; pointer-events: none; }
.clock__h {
  position: absolute; left: 50%; top: 50%; width: 64px; margin: -10px 0 0 -32px; pointer-events: auto;
  transform: rotate(var(--a)) translateY(calc(var(--size) * -.5 - 18px)) rotate(calc(var(--a) * -1));
  font-size: 12px; line-height: 20px; text-align: center; color: var(--color-text-3); white-space: nowrap;
}
.clock__h[aria-pressed="true"] { color: var(--color-text); font-weight: 600; }
.clock__dial {
  position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%;
  display: grid; place-items: center; padding: 8px; text-align: center; font-size: 12.5px; line-height: 1.3; color: var(--color-text);
  background: radial-gradient(circle, var(--color-surface-2), var(--color-surface)); box-shadow: 0 0 0 1px var(--color-line-strong);
}
.clock__dial:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.tt-clock { padding: 18px 10px 0; }

/* ---------- the racks ---------- */
.racks { position: relative; }
.racks__carriage { margin-bottom: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--color-text-3); }
.racks__carriage:focus { outline: none; }
.racks__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px 22px; }
.racks__grid li { position: relative; animation: rack-in 520ms var(--ease) calc(min(var(--i), 12) * 40ms) both; }
.racks__grid li::after { content: ""; position: absolute; left: -11px; right: -11px; bottom: -15px; height: 1px; background: var(--color-line); }
@keyframes rack-in { from { opacity: 0; transform: translateY(10px); } }
.racks__none { padding: var(--space-8) 0; }
.trains { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: var(--space-7); }
.trains__next { min-width: 180px; justify-content: center; }
.trains__last { font-size: var(--text-sm); color: var(--color-text-3); }

@media (max-width: 1080px) {
  .timetable__grid { grid-template-columns: 290px minmax(0, 1fr); }
  .tt-tags { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .station__hall { padding: var(--space-6) 0 var(--space-5); }
  .station__art img { object-position: 50% 40%; }
  .station__art::after { background: radial-gradient(90% 80% at 50% -10%, var(--hall-glow), transparent 60%), linear-gradient(0deg, var(--station-bg) 0, rgba(5, 7, 11, .7) 45%, rgba(5, 7, 11, .45)); }
  .flap { min-width: 24px; height: 34px; font-size: 20px; }
  .flap--word { font-size: 15px; }
  .station__bar { grid-template-columns: minmax(0, 1fr) auto; }
  .enquiry { grid-column: 1 / -1; }
  .sortboard { overflow-x: auto; max-width: 100%; }
  .sortboard__opt { padding: 0 10px; white-space: nowrap; }
  .timetable { padding: var(--space-4); }
  .timetable__grid { grid-template-columns: minmax(0, 1fr); }
  .tt-clock { justify-self: center; }
  .clock { --size: 220px; }
  .racks__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .flap > span, .racks__grid li, .flapboard__colon { animation: none; }
  .station__hall, .clock__hand, .clock__arc { transition: none; }
}

/* css/pages/auth.css */
/* =============================================================
   AUTH — split layout: peach-blossom art + Tao Yuanming on the left,
   the form on the right. Single column on phones.
   ============================================================= */

.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding-top: var(--nav-h); }
.auth__art { position: relative; overflow: hidden; color: var(--color-on-media); background: #07080b; }
.auth__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.auth__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 7, 10, .9), rgba(6, 7, 10, .2) 60%); }
.auth--admin .auth__art img { filter: grayscale(.6) brightness(.7); }
.auth__quote { position: absolute; left: var(--space-7); right: var(--space-7); bottom: var(--space-7); z-index: 1; }
.auth__quote p { font-family: var(--font-story); font-size: var(--text-2xl); line-height: 1.5; font-weight: 700; max-width: 18em; }
:lang(en) .auth__quote p { font-size: var(--text-xl); }
.auth__quote span { display: block; margin-top: 12px; font-size: var(--text-sm); color: rgba(246, 241, 232, .7); }

.auth__panel { display: grid; place-items: center; padding: var(--space-7) max(var(--space-5), env(safe-area-inset-right, 0px)) var(--space-7) var(--space-5); }
.auth-form { width: min(400px, 100%); display: grid; gap: 18px; }
.auth-kicker { font-size: var(--text-xs); letter-spacing: .14em; color: var(--color-text-3); margin-bottom: 6px; }
.auth-title { font-size: var(--text-2xl); }
.auth-sub { margin-top: 6px; color: var(--color-text-2); font-size: var(--text-base); }
.auth-switch { text-align: center; font-size: var(--text-base); color: var(--color-text-2); }
.auth-captcha { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 2px 0 10px; border-radius: 8px; background: var(--color-surface-2); font-size: var(--text-base); font-weight: var(--weight-semibold); letter-spacing: .04em; white-space: nowrap; }
.input--select { position: relative; }
.input--select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--color-text-3); border-bottom: 1.5px solid var(--color-text-3); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.input--select select option { background: var(--color-surface); color: var(--color-text); }
.auth-avatar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.auth-avatar__preview { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--color-surface-2); color: var(--color-text-3); border: 1px solid var(--color-line); }
.auth-avatar__preview img { width: 100%; height: 100%; object-fit: cover; }
.auth-avatar:has(input:focus-visible) .btn { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.auth-avatar .btn { cursor: pointer; }

@media (max-width: 860px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth__art { display: none; }
  .auth__panel { place-items: start center; padding-block: var(--space-6) var(--space-7); padding-inline: max(var(--space-4), env(safe-area-inset-left, 0px)) max(var(--space-4), env(safe-area-inset-right, 0px)); }
}

/* css/pages/profile.css */
/* =============================================================
   PROFILE ("我的") — identity + wallet, tabs, lists
   ============================================================= */

.profile-head { padding-block: var(--space-6) var(--space-5); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--space-5); align-items: center; }
.profile-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.profile-id__avatar { width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover; background: var(--color-surface-2); border: 1px solid var(--color-line-strong); }
.profile-id > div { min-width: 0; }
.profile-name { font-size: var(--text-2xl); overflow-wrap: anywhere; }
.profile-email { color: var(--color-text-3); font-size: var(--text-base); overflow-wrap: anywhere; }
.profile-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.profile-wallet { padding: 18px 20px; border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--color-line); display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: center; }
.profile-wallet__k { font-size: var(--text-xs); color: var(--color-text-3); }
.profile-wallet__v { font-size: var(--text-xl); font-weight: var(--weight-bold); }

.profile-panel { padding-block: var(--space-5) var(--space-9); }
.profile-list { display: grid; gap: 12px; }
.profile-row--skeleton { height: 92px; }
.profile-order { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px; border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--color-line); }
.profile-order img, .profile-order__ph { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--color-surface-2); display: block; }
.profile-order__main { min-width: 0; }
.profile-order__main b { font-size: var(--text-md); }
.profile-order__main a:hover { text-decoration: underline; text-underline-offset: 3px; }
.profile-order__main p { margin-top: 2px; font-size: var(--text-sm); color: var(--color-text-3); overflow-wrap: anywhere; }
.profile-order__side { display: grid; gap: 6px; justify-items: end; text-align: right; }
.profile-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--color-text-2); white-space: nowrap; }
.profile-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok); }
.profile-order-status--cancelled::before, .profile-order-status--refunded::before { background: var(--color-text-3); }

.profile-txns ul { display: grid; }
.profile-txn-head, .profile-txn-row { display: grid; grid-template-columns: 110px 1fr 1fr 1.4fr; gap: 12px; align-items: center; padding: 12px 4px; }
.profile-txn-head { font-size: var(--text-xs); letter-spacing: .08em; color: var(--color-text-3); border-bottom: 1px solid var(--color-line); }
.profile-txn-row { border-bottom: 1px solid var(--color-line); font-size: var(--text-base); }
.profile-txn-type { justify-self: start; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); background: var(--color-surface-2); color: var(--color-text-2); }
.profile-txn-type--bonus { background: color-mix(in srgb, var(--color-ok) 14%, transparent); color: var(--color-ok); }
.profile-txn-amount.is-plus { color: var(--color-ok); font-weight: var(--weight-semibold); }
.profile-txn-amount.is-minus { color: var(--color-text); font-weight: var(--weight-semibold); }
.profile-txn-balance, .profile-txn-date { color: var(--color-text-2); }

.persona { display: grid; gap: var(--space-5); }
.persona__intro { color: var(--color-text-2); max-width: 40em; }
.persona__saved { width: fit-content; }
.persona__groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.persona__group h3 { font-size: var(--text-sm); color: var(--color-text-3); font-weight: var(--weight-semibold); margin-bottom: 10px; }
.persona__codes { display: grid; gap: 8px; }
.persona__code { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: var(--radius-control); border: 1px solid var(--color-line-strong); background: var(--color-surface); text-align: left; }
.persona__code b { letter-spacing: .08em; }
.persona__code span { font-size: var(--text-sm); color: var(--color-text-3); }
.persona__code:hover { border-color: var(--color-text-3); }
.persona__code[aria-pressed="true"] { background: var(--color-action); border-color: transparent; color: var(--color-on-action); }
.persona__code[aria-pressed="true"] span { color: inherit; opacity: .8; }
.persona__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.persona__links .btn--quiet { padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.persona__result { border-top: 1px solid var(--color-line); padding-top: var(--space-5); display: grid; gap: 8px; }
.persona__result h3 { font-family: var(--font-story); font-size: var(--text-2xl); }
.persona__result p { color: var(--color-text-2); }
.persona__result h4 { margin-top: var(--space-4); font-size: var(--text-md); }
.persona__picks { margin-top: 8px; }

@media (max-width: 960px) {
  .profile-head { grid-template-columns: minmax(0, 1fr); }
  .persona__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .profile-name { font-size: var(--text-xl); }
  .profile-id__avatar { width: 56px; height: 56px; }
  .profile-order { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
  .profile-order img, .profile-order__ph { width: 52px; height: 52px; }
  .profile-order__side { grid-column: 2; grid-auto-flow: column; justify-content: space-between; justify-items: start; align-items: center; text-align: left; }
  .profile-txn-head { display: none; }
  .profile-txn-row { grid-template-columns: auto 1fr; grid-template-areas: "type amount" "date balance"; row-gap: 4px; }
  .profile-txn-type { grid-area: type; }
  .profile-txn-amount { grid-area: amount; justify-self: end; }
  .profile-txn-date { grid-area: date; font-size: var(--text-sm); }
  .profile-txn-balance { grid-area: balance; justify-self: end; font-size: var(--text-sm); }
  .persona__groups { gap: var(--space-4); }
}

/* css/pages/recharge.css */
/* =============================================================
   RECHARGE — tier radio group, live summary
   ============================================================= */

.recharge__inner { max-width: 560px; padding-block: var(--space-6) var(--space-9); display: grid; gap: 18px; }
.recharge-title { font-size: var(--text-2xl); }
.recharge-sub { margin-top: 6px; color: var(--color-text-2); font-size: var(--text-base); }
.recharge-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.recharge-tier { position: relative; display: grid; gap: 2px; min-height: 76px; padding: 14px; border-radius: 12px; border: 1px solid var(--color-line-strong); background: var(--color-surface); text-align: left; transition: border-color var(--dur-fast); }
.recharge-tier.skeleton { border-color: transparent; }
.recharge-tier:hover { border-color: var(--color-text-3); }
.recharge-tier b { font-size: var(--text-lg); }
.recharge-tier span { font-size: var(--text-xs); color: var(--color-text-3); }
.recharge-tier[aria-checked="true"] { border: 2px solid var(--color-action); padding: 13px; }
[data-theme="light"] .recharge-tier[aria-checked="true"] { border-color: var(--color-text); }
.recharge-tier[aria-checked="true"] span { color: var(--color-ok); }
.recharge-tier--custom[aria-checked="true"] span { color: var(--color-text-3); }
.recharge-tier__tag { position: absolute; top: -9px; right: 10px; height: 18px; padding: 0 7px; border-radius: 9px; display: inline-grid; place-items: center; font-style: normal; font-size: 11px; font-weight: var(--weight-bold); background: var(--color-action); color: var(--color-on-action); }
.recharge-lines { padding: 14px 16px; border-radius: 12px; background: var(--color-surface-2); }
.recharge-back { display: flex; justify-content: center; }

@media (max-width: 480px) {
  .recharge-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* css/pages/admin.css */
/* ADMIN — metrics + distribution panels */
.admin .container { padding-block: var(--space-6) var(--space-9); }
.admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.admin-head__kicker { font-size: var(--text-xs); letter-spacing: .14em; color: var(--color-text-3); }
.admin-head h1 { margin-top: 6px; font-size: var(--text-3xl); }
.admin-head__actions { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-3); }
.admin-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.admin-metric { padding: 16px 18px; border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--color-line); min-width: 0; }
.admin-metric p { font-size: var(--text-sm); color: var(--color-text-3); }
.admin-metric b { display: block; margin-top: 6px; font-size: clamp(1rem, 2.2vw, var(--text-xl)); font-weight: var(--weight-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-panels { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.admin-panel { padding: 18px; border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--color-line); min-width: 0; }
.admin-panel h2 { font-size: var(--text-md); margin-bottom: 14px; }
.admin-list { display: grid; gap: 12px; font-size: var(--text-sm); color: var(--color-text-2); }
.admin-bar { display: grid; gap: 6px; }
.admin-bar__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; }
.admin-bar__top span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); }
.admin-bar__top em { font-style: normal; color: var(--color-text-3); white-space: nowrap; }
.admin-empty { color: var(--color-text-3); }
.admin-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.admin-tile { padding: 8px; border-radius: 8px; background: var(--color-surface-2); display: grid; gap: 4px; }
.admin-tile b { font-size: var(--text-sm); letter-spacing: .06em; color: var(--color-text); }
.admin-tile span { font-size: var(--text-xs); color: var(--color-text-3); }
.admin-tile .bar { height: 4px; background: var(--color-line); }
.admin-tile--wide { grid-column: span 2; }
.admin-users { display: grid; gap: 10px; }
.admin-users li { display: flex; justify-content: space-between; gap: 10px; }
.admin-users span { min-width: 0; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-users em { font-style: normal; color: var(--color-text-3); white-space: nowrap; }
.admin-panel--funnel { grid-column: 1 / -1; }
.admin-panel--funnel .admin-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 16px; }
@media (max-width: 1080px) { .admin-panel--funnel .admin-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .admin-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .admin-head h1 { font-size: var(--text-2xl); }
  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-panels { grid-template-columns: minmax(0, 1fr); }
  .admin-panel--funnel .admin-list { grid-template-columns: minmax(0, 1fr); }
  .admin-users li { flex-direction: column; gap: 2px; }
}

/* css/pages/about.css */
/* ABOUT */
.about .container { padding-block: var(--space-8) var(--space-9); }
.about-kicker { font-size: var(--text-xs); letter-spacing: .14em; color: var(--color-text-3); }
.about-head h1 { margin-top: 12px; font-family: var(--font-story); font-weight: 700; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.2; max-width: 16em; }
.about-lead { margin-top: 18px; max-width: 36em; font-size: var(--text-lg); color: var(--color-text-2); }
.about-grid { margin-top: var(--space-7); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); border-top: 1px solid var(--color-line); padding-top: var(--space-5); }
.about-grid h2, .about-stack h2 { font-size: var(--text-md); }
.about-grid p, .about-stack p { margin-top: 8px; color: var(--color-text-2); font-size: var(--text-base); line-height: 1.75; }
.about-stack { margin-top: var(--space-7); padding: var(--space-5); border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--color-line); display: grid; gap: 4px; max-width: 760px; }
.about-stack .link-arrow { margin-top: 10px; }
@media (max-width: 760px) { .about-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }

/* The colophon: how it is made, quietly at the end */
.about-colophon { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--color-line); display: grid; gap: 10px; max-width: 44em; font-size: var(--text-sm); color: var(--color-text-3); line-height: 1.7; }
.about-colophon b { color: var(--color-text-2); font-weight: var(--weight-semibold); margin-right: 6px; }

/* css/pages/error.css */
/* ERROR / 404 */
.error-page .container { padding-block: var(--space-7) var(--space-9); }
.error-code { font-family: var(--font-story); font-size: clamp(3.5rem, 10vw, 6rem); font-weight: 700; line-height: 1; color: var(--color-text-3); letter-spacing: .04em; }
.error-title { font-size: var(--text-2xl); }
.error-suggest { margin-top: var(--space-6); }
.error-suggest h2 { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.detail-notfound .error-code { margin-bottom: 4px; }