/* Map of this file, in order: 1 tokens and fonts; 2 base, buttons and header; 3 the KV; 4 the floating button and backgrounds;
   5 the sections (intro, theme, how to join, awards, gallery, footer); 6 the dialogs and the lightbox; 7 the hummingbird;
   8 line breaking;
   9 transitions (iris, lightbox, menus, reveals); 10 "The design": colours, type and decoration, section by section, then
   the entry form, the lightbox, the iris, reduced motion, zh-TW and ja.
   Layout and motion come first; the design layer at the end overrides them where both apply. The page-body tokens (--ink,
   --text, --display, --gold and the rest) are declared again in the design layer's token block, on main, the floating button,
   the footer, the dialogs and the iris, so editing the :root tokens below changes the header and the KV only. */
:root {
  --blue: #1976d2;
  --ink: #1d2433;
  --text: #4b5361;
  --muted: #7c8494;
  --line: #e3e7ee;
  --paper: #f6f4ef;
  --gold: #c9a24a;
  --gold-deep: #a8822f;
  --font: "Outfit", "Noto Sans TC Subset", "Noto Sans TC", "Noto Sans", "Noto Sans CJK TC", Arial, sans-serif;
  --wrap: 1240px;
  --gutter: 16px;
  /* The KV's height on wide screens: one shape on every screen (814 px at 1920 wide), so the photo crops the same; a short
     window caps it to keep 80 px of the next section in view */
  --hero-h: min(calc(100vw * .424), calc(100vh - 62px - 80px));
  /* --t is the KV title size, and every measure of the wide-screen KV layout is a multiple of it. It follows the screen under
     the header, down to 4:3, not the KV's height, so the title keeps its size in the shorter KV. */
  --t: min(clamp(64px, 10vw, 196px), calc(min(100vw * 3 / 4, 100vh - 62px) * .28));
  --kv-glow: #9a7bff;
  --vf-grad: linear-gradient(to bottom right, #ff02cb, #ff324b, #ff8a02);   /* the KV focus frame: the brand gradient */
  --btn-outline: rgba(110, 0, 70, .75);                                     /* the button label's dark outline */
  --btn-outline-soft: rgba(110, 0, 70, .4);
}
/* Self-hosted faces, each subset to the site's zh-TW copy (OFL, licence beside each file in assets/fonts/). The KV pair matches
   the KV type: a rounded heavy Hei beside Poppins, a heavy print Hei beside Anton. */
@font-face { font-family: "KV Round TW"; src: url("../fonts/kv/gensenrounded2tw-700.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "KV Heavy TW"; src: url("../fonts/kv/gensekigothic2tw-900.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
/* Noto Sans TC and JP subset to the copy (docs/technical.md "Fonts and licences"). Each family name ends in "Subset" and sits before
   the Google family in the stacks: the Google family, loaded after the first paint, sets only what a subset lacks, such as
   a winner's name. The rules between the two markers are generated. */
/* noto:begin */
@font-face { font-family: "Noto Sans TC Subset"; src: url("../fonts/noto/notosanstc-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+a0, U+2014, U+2060, U+3001-3002, U+300c-300d, U+4e00, U+4e09-4e0b, U+4e0d, U+4e14, U+4e16, U+4e26, U+4e3b, U+4e4b, U+4e86, U+4e88, U+4e8b, U+4e9b, U+4ea4, U+4ea6, U+4eba, U+4ed6, U+4ee3, U+4ee5, U+4ef6, U+4efb, U+4f4d, U+4f55, U+4f5c, U+4f60, U+4f7f, U+4f86, U+4f9b, U+4f9d, U+4fb5, U+4fdd, U+4fee, U+500b, U+5011-5012, U+503c, U+504f, U+505c, U+50b3, U+50c5, U+50cf, U+50f9, U+5132, U+5143, U+5149, U+514c-514d, U+5165, U+5167-5169, U+516c, U+5176, U+518d, U+51e1, U+51fa, U+5206, U+5225, U+5229, U+5230, U+5247, U+525b, U+5275, U+529b, U+529f-52a0, U+52a9, U+52d5, U+52d9, U+5317, U+5340, U+5347, U+534a, U+5354, U+5361, U+5373, U+539a, U+539f, U+53bb, U+53c3, U+53ca, U+53cd, U+53d6-53d7, U+53e2, U+53e5-53e6, U+53ea, U+53ef-53f0, U+540c-540d, U+5411, U+544a, U+54c1, U+554f, U+5584, U+55ae, U+5668, U+56b4, U+56de, U+56fa, U+570b, U+5716, U+5718, U+5728, U+5730, U+5740, U+5747, U+57ce, U+57f7, U+5831, U+586b, U+5916, U+591a, U+5927, U+5929, U+5931, U+5947, U+597d, U+5982, U+59cb, U+59d3, U+5a01, U+5a92, U+5b50, U+5b57-5b58, U+5b83, U+5b88, U+5b8c, U+5b98, U+5b9a, U+5ba3, U+5bb9, U+5bc4, U+5bcc, U+5be6, U+5be9, U+5beb, U+5c04, U+5c07-5c08, U+5c0b, U+5c0d, U+5c0f, U+5c31, U+5c55, U+5c64, U+5c6c, U+5cb8, U+5de5, U+5df2, U+5e02-5e03, U+5e33, U+5e38, U+5e45, U+5e73-5e74, U+5e7e, U+5eca, U+5efa, U+5f0f, U+5f71, U+5f85, U+5f8c, U+5f97, U+5f9e, U+5fb5, U+5fc3, U+5fc5, U+6027, U+60a8, U+60c5, U+610f, U+611b, U+614b, U+6167, U+61c9, U+6210-6211, U+6216, U+622a, U+6240, U+624d, U+6280, U+6295, U+6298, U+62cd, U+62d2, U+62d6, U+6349, U+6355, U+6388, U+6392, U+6398, U+63a5, U+63a9, U+63cf-63d0, U+63db, U+641c, U+646f, U+64c7, U+64da, U+651d, U+6536, U+6539, U+653e-653f, U+6545, U+6557-6558, U+6563, U+6574, U+6599, U+65b9, U+65bc, U+660e, U+6620, U+662f, U+6642, U+665a, U+6668, U+667a, U+66ab, U+66f3-66f4, U+66ff-6700, U+6703, U+6708-6709, U+670d, U+671f, U+672a, U+6790, U+6797, U+679c, U+67e5, U+6838, U+683c, U+6848, U+689d, U+68c4, U+68ee, U+6a5f, U+6a94, U+6aa2, U+6b04, U+6b0a, U+6b21, U+6b32, U+6b3a, U+6b3e, U+6b62-6b64, U+6bcf, U+6c42, U+6c7a, U+6c92, U+6cc1, U+6cd5, U+6d3b, U+6d41, U+6d88-6d89, U+6dcc, U+6e05, U+6e56, U+6feb, U+700f, U+70ba, U+7121, U+7136, U+7167, U+7247, U+7269, U+7279, U+72af, U+734e, U+7368, U+7372, U+73fe, U+7403, U+7406, U+751f, U+7522, U+7526, U+7528, U+7531, U+754c, U+7559, U+756b, U+767b-767c, U+7684, U+7686, U+76ee, U+76f8, U+770b, U+771f, U+773c, U+77a5, U+77e5, U+786c, U+789f, U+78ba, U+78bc, U+793a, U+793e, U+7981, U+79ae, U+79c1, U+79cb, U+7a3f, U+7a7a, U+7a97, U+7acb, U+7ad9, U+7b2c, U+7b49, U+7b56, U+7ba1, U+7bc0, U+7d30, U+7d42, U+7d50, U+7d55, U+7d93, U+7db2, U+7dda, U+7de8, U+7f8e, U+7fa4, U+8000, U+8005, U+800c, U+806f, U+8072, U+80cc, U+80fd, U+81ea, U+8207, U+821e, U+822c, U+82b1, U+82e5, U+8457, U+8490, U+85cf, U+85dd, U+8655, U+865f, U+884c, U+8853, U+8868, U+88ab, U+88dc, U+88e1, U+88fd, U+8981, U+8986, U+898b, U+898f, U+8996, U+89ba, U+89bd, U+89c0, U+89d2, U+89e3, U+8a0a, U+8a18, U+8a2d, U+8a34, U+8a50, U+8a55, U+8a66, U+8a71-8a73, U+8a8d, U+8aa0, U+8aaa, U+8acb, U+8ad6, U+8b10, U+8b1d, U+8b49, U+8b77, U+8b80, U+8b8a, U+8b93, U+8c50, U+8cac, U+8cc7, U+8cea, U+8cfd, U+8d0a, U+8d0f, U+8d77, U+8d85, U+8def, U+8f09, U+8f2f, U+8f38, U+8f49, U+8fa6, U+8ff0, U+9001, U+900f, U+9019-901a, U+9023, U+9031-9032, U+904b, U+904e, U+9053, U+9055, U+9069, U+9075, U+9078, U+9080, U+908a, U+90e8, U+90f5, U+90fd, U+9192, U+91cd-91cf, U+91d1, U+92b7, U+9396, U+93e1, U+9589, U+958b, U+9593, U+95b1, U+95dc, U+9644, U+9650, U+969b, U+96b1, U+96c6, U+96f2, U+96fb, U+9700, U+9727, U+975c, U+975e, U+9762, U+9801, U+9805, U+9808, U+982d, U+984c, U+9a57, U+9a5a, U+9ad8, U+9d3b, U+9ede, U+ff01, U+ff08-ff09, U+ff0c, U+ff0f, U+ff1a, U+ff5c; }
@font-face { font-family: "Noto Sans TC Subset"; src: url("../fonts/noto/notosanstc-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+a0, U+2014, U+2060, U+3001-3002, U+300c-300d, U+4e00, U+4e09-4e0b, U+4e0d, U+4e14, U+4e16, U+4e26, U+4e3b, U+4e4b, U+4e86, U+4e88, U+4e8b, U+4e9b, U+4ea4, U+4ea6, U+4eba, U+4ed6, U+4ee3, U+4ee5, U+4ef6, U+4efb, U+4f4d, U+4f55, U+4f5c, U+4f60, U+4f7f, U+4f86, U+4f9b, U+4f9d, U+4fb5, U+4fdd, U+4fee, U+500b, U+5011-5012, U+503c, U+504f, U+505c, U+50b3, U+50c5, U+50cf, U+50f9, U+5132, U+5143, U+5149, U+514c-514d, U+5165, U+5167-5169, U+516c, U+5176, U+518d, U+51e1, U+51fa, U+5206, U+5225, U+5229, U+5230, U+5247, U+525b, U+5275, U+529b, U+529f-52a0, U+52a9, U+52d5, U+52d9, U+5317, U+5340, U+5347, U+534a, U+5354, U+5361, U+5373, U+539a, U+539f, U+53bb, U+53c3, U+53ca, U+53cd, U+53d6-53d7, U+53e2, U+53e5-53e6, U+53ea, U+53ef-53f0, U+540c-540d, U+5411, U+544a, U+54c1, U+554f, U+5584, U+55ae, U+5668, U+56b4, U+56de, U+56fa, U+570b, U+5716, U+5718, U+5728, U+5730, U+5740, U+5747, U+57ce, U+57f7, U+5831, U+586b, U+5916, U+591a, U+5927, U+5929, U+5931, U+5947, U+597d, U+5982, U+59cb, U+59d3, U+5a01, U+5a92, U+5b50, U+5b57-5b58, U+5b83, U+5b88, U+5b8c, U+5b98, U+5b9a, U+5ba3, U+5bb9, U+5bc4, U+5bcc, U+5be6, U+5be9, U+5beb, U+5c04, U+5c07-5c08, U+5c0b, U+5c0d, U+5c0f, U+5c31, U+5c55, U+5c64, U+5c6c, U+5cb8, U+5de5, U+5df2, U+5e02-5e03, U+5e33, U+5e38, U+5e45, U+5e73-5e74, U+5e7e, U+5eca, U+5efa, U+5f0f, U+5f71, U+5f85, U+5f8c, U+5f97, U+5f9e, U+5fb5, U+5fc3, U+5fc5, U+6027, U+60a8, U+60c5, U+610f, U+611b, U+614b, U+6167, U+61c9, U+6210-6211, U+6216, U+622a, U+6240, U+624d, U+6280, U+6295, U+6298, U+62cd, U+62d2, U+62d6, U+6349, U+6355, U+6388, U+6392, U+6398, U+63a5, U+63a9, U+63cf-63d0, U+63db, U+641c, U+646f, U+64c7, U+64da, U+651d, U+6536, U+6539, U+653e-653f, U+6545, U+6557-6558, U+6563, U+6574, U+6599, U+65b9, U+65bc, U+660e, U+6620, U+662f, U+6642, U+665a, U+6668, U+667a, U+66ab, U+66f3-66f4, U+66ff-6700, U+6703, U+6708-6709, U+670d, U+671f, U+672a, U+6790, U+6797, U+679c, U+67e5, U+6838, U+683c, U+6848, U+689d, U+68c4, U+68ee, U+6a5f, U+6a94, U+6aa2, U+6b04, U+6b0a, U+6b21, U+6b32, U+6b3a, U+6b3e, U+6b62-6b64, U+6bcf, U+6c42, U+6c7a, U+6c92, U+6cc1, U+6cd5, U+6d3b, U+6d41, U+6d88-6d89, U+6dcc, U+6e05, U+6e56, U+6feb, U+700f, U+70ba, U+7121, U+7136, U+7167, U+7247, U+7269, U+7279, U+72af, U+734e, U+7368, U+7372, U+73fe, U+7403, U+7406, U+751f, U+7522, U+7526, U+7528, U+7531, U+754c, U+7559, U+756b, U+767b-767c, U+7684, U+7686, U+76ee, U+76f8, U+770b, U+771f, U+773c, U+77a5, U+77e5, U+786c, U+789f, U+78ba, U+78bc, U+793a, U+793e, U+7981, U+79ae, U+79c1, U+79cb, U+7a3f, U+7a7a, U+7a97, U+7acb, U+7ad9, U+7b2c, U+7b49, U+7b56, U+7ba1, U+7bc0, U+7d30, U+7d42, U+7d50, U+7d55, U+7d93, U+7db2, U+7dda, U+7de8, U+7f8e, U+7fa4, U+8000, U+8005, U+800c, U+806f, U+8072, U+80cc, U+80fd, U+81ea, U+8207, U+821e, U+822c, U+82b1, U+82e5, U+8457, U+8490, U+85cf, U+85dd, U+8655, U+865f, U+884c, U+8853, U+8868, U+88ab, U+88dc, U+88e1, U+88fd, U+8981, U+8986, U+898b, U+898f, U+8996, U+89ba, U+89bd, U+89c0, U+89d2, U+89e3, U+8a0a, U+8a18, U+8a2d, U+8a34, U+8a50, U+8a55, U+8a66, U+8a71-8a73, U+8a8d, U+8aa0, U+8aaa, U+8acb, U+8ad6, U+8b10, U+8b1d, U+8b49, U+8b77, U+8b80, U+8b8a, U+8b93, U+8c50, U+8cac, U+8cc7, U+8cea, U+8cfd, U+8d0a, U+8d0f, U+8d77, U+8d85, U+8def, U+8f09, U+8f2f, U+8f38, U+8f49, U+8fa6, U+8ff0, U+9001, U+900f, U+9019-901a, U+9023, U+9031-9032, U+904b, U+904e, U+9053, U+9055, U+9069, U+9075, U+9078, U+9080, U+908a, U+90e8, U+90f5, U+90fd, U+9192, U+91cd-91cf, U+91d1, U+92b7, U+9396, U+93e1, U+9589, U+958b, U+9593, U+95b1, U+95dc, U+9644, U+9650, U+969b, U+96b1, U+96c6, U+96f2, U+96fb, U+9700, U+9727, U+975c, U+975e, U+9762, U+9801, U+9805, U+9808, U+982d, U+984c, U+9a57, U+9a5a, U+9ad8, U+9d3b, U+9ede, U+ff01, U+ff08-ff09, U+ff0c, U+ff0f, U+ff1a, U+ff5c; }
@font-face { font-family: "Noto Sans TC Subset"; src: url("../fonts/noto/notosanstc-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+a0, U+2014, U+2060, U+3001-3002, U+300c-300d, U+4e00, U+4e09-4e0b, U+4e0d, U+4e14, U+4e16, U+4e26, U+4e3b, U+4e4b, U+4e86, U+4e88, U+4e8b, U+4e9b, U+4ea4, U+4ea6, U+4eba, U+4ed6, U+4ee3, U+4ee5, U+4ef6, U+4efb, U+4f4d, U+4f55, U+4f5c, U+4f60, U+4f7f, U+4f86, U+4f9b, U+4f9d, U+4fb5, U+4fdd, U+4fee, U+500b, U+5011-5012, U+503c, U+504f, U+505c, U+50b3, U+50c5, U+50cf, U+50f9, U+5132, U+5143, U+5149, U+514c-514d, U+5165, U+5167-5169, U+516c, U+5176, U+518d, U+51e1, U+51fa, U+5206, U+5225, U+5229, U+5230, U+5247, U+525b, U+5275, U+529b, U+529f-52a0, U+52a9, U+52d5, U+52d9, U+5317, U+5340, U+5347, U+534a, U+5354, U+5361, U+5373, U+539a, U+539f, U+53bb, U+53c3, U+53ca, U+53cd, U+53d6-53d7, U+53e2, U+53e5-53e6, U+53ea, U+53ef-53f0, U+540c-540d, U+5411, U+544a, U+54c1, U+554f, U+5584, U+55ae, U+5668, U+56b4, U+56de, U+56fa, U+570b, U+5716, U+5718, U+5728, U+5730, U+5740, U+5747, U+57ce, U+57f7, U+5831, U+586b, U+5916, U+591a, U+5927, U+5929, U+5931, U+5947, U+597d, U+5982, U+59cb, U+59d3, U+5a01, U+5a92, U+5b50, U+5b57-5b58, U+5b83, U+5b88, U+5b8c, U+5b98, U+5b9a, U+5ba3, U+5bb9, U+5bc4, U+5bcc, U+5be6, U+5be9, U+5beb, U+5c04, U+5c07-5c08, U+5c0b, U+5c0d, U+5c0f, U+5c31, U+5c55, U+5c64, U+5c6c, U+5cb8, U+5de5, U+5df2, U+5e02-5e03, U+5e33, U+5e38, U+5e45, U+5e73-5e74, U+5e7e, U+5eca, U+5efa, U+5f0f, U+5f71, U+5f85, U+5f8c, U+5f97, U+5f9e, U+5fb5, U+5fc3, U+5fc5, U+6027, U+60a8, U+60c5, U+610f, U+611b, U+614b, U+6167, U+61c9, U+6210-6211, U+6216, U+622a, U+6240, U+624d, U+6280, U+6295, U+6298, U+62cd, U+62d2, U+62d6, U+6349, U+6355, U+6388, U+6392, U+6398, U+63a5, U+63a9, U+63cf-63d0, U+63db, U+641c, U+646f, U+64c7, U+64da, U+651d, U+6536, U+6539, U+653e-653f, U+6545, U+6557-6558, U+6563, U+6574, U+6599, U+65b9, U+65bc, U+660e, U+6620, U+662f, U+6642, U+665a, U+6668, U+667a, U+66ab, U+66f3-66f4, U+66ff-6700, U+6703, U+6708-6709, U+670d, U+671f, U+672a, U+6790, U+6797, U+679c, U+67e5, U+6838, U+683c, U+6848, U+689d, U+68c4, U+68ee, U+6a5f, U+6a94, U+6aa2, U+6b04, U+6b0a, U+6b21, U+6b32, U+6b3a, U+6b3e, U+6b62-6b64, U+6bcf, U+6c42, U+6c7a, U+6c92, U+6cc1, U+6cd5, U+6d3b, U+6d41, U+6d88-6d89, U+6dcc, U+6e05, U+6e56, U+6feb, U+700f, U+70ba, U+7121, U+7136, U+7167, U+7247, U+7269, U+7279, U+72af, U+734e, U+7368, U+7372, U+73fe, U+7403, U+7406, U+751f, U+7522, U+7526, U+7528, U+7531, U+754c, U+7559, U+756b, U+767b-767c, U+7684, U+7686, U+76ee, U+76f8, U+770b, U+771f, U+773c, U+77a5, U+77e5, U+786c, U+789f, U+78ba, U+78bc, U+793a, U+793e, U+7981, U+79ae, U+79c1, U+79cb, U+7a3f, U+7a7a, U+7a97, U+7acb, U+7ad9, U+7b2c, U+7b49, U+7b56, U+7ba1, U+7bc0, U+7d30, U+7d42, U+7d50, U+7d55, U+7d93, U+7db2, U+7dda, U+7de8, U+7f8e, U+7fa4, U+8000, U+8005, U+800c, U+806f, U+8072, U+80cc, U+80fd, U+81ea, U+8207, U+821e, U+822c, U+82b1, U+82e5, U+8457, U+8490, U+85cf, U+85dd, U+8655, U+865f, U+884c, U+8853, U+8868, U+88ab, U+88dc, U+88e1, U+88fd, U+8981, U+8986, U+898b, U+898f, U+8996, U+89ba, U+89bd, U+89c0, U+89d2, U+89e3, U+8a0a, U+8a18, U+8a2d, U+8a34, U+8a50, U+8a55, U+8a66, U+8a71-8a73, U+8a8d, U+8aa0, U+8aaa, U+8acb, U+8ad6, U+8b10, U+8b1d, U+8b49, U+8b77, U+8b80, U+8b8a, U+8b93, U+8c50, U+8cac, U+8cc7, U+8cea, U+8cfd, U+8d0a, U+8d0f, U+8d77, U+8d85, U+8def, U+8f09, U+8f2f, U+8f38, U+8f49, U+8fa6, U+8ff0, U+9001, U+900f, U+9019-901a, U+9023, U+9031-9032, U+904b, U+904e, U+9053, U+9055, U+9069, U+9075, U+9078, U+9080, U+908a, U+90e8, U+90f5, U+90fd, U+9192, U+91cd-91cf, U+91d1, U+92b7, U+9396, U+93e1, U+9589, U+958b, U+9593, U+95b1, U+95dc, U+9644, U+9650, U+969b, U+96b1, U+96c6, U+96f2, U+96fb, U+9700, U+9727, U+975c, U+975e, U+9762, U+9801, U+9805, U+9808, U+982d, U+984c, U+9a57, U+9a5a, U+9ad8, U+9d3b, U+9ede, U+ff01, U+ff08-ff09, U+ff0c, U+ff0f, U+ff1a, U+ff5c; }
@font-face { font-family: "Noto Sans TC Subset"; src: url("../fonts/noto/notosanstc-400-menu.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+4e2d, U+5cf0, U+5f35, U+6587, U+65e5, U+672c, U+7e41, U+8a9e, U+9ad4; }
@font-face { font-family: "Noto Sans TC Subset"; src: url("../fonts/noto/notosanstc-500-menu.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+4e2d, U+5cf0, U+5f35, U+6587, U+65e5, U+672c, U+7e41, U+8a9e, U+9ad4; }
@font-face { font-family: "Noto Sans TC Subset"; src: url("../fonts/noto/notosanstc-700-menu.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+4e2d, U+5cf0, U+5f35, U+6587, U+65e5, U+672c, U+7e41, U+8a9e, U+9ad4; }
@font-face { font-family: "Noto Sans JP Subset"; src: url("../fonts/noto/notosansjp-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Sans JP Subset"; src: url("../fonts/noto/notosansjp-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Noto Sans JP Subset"; src: url("../fonts/noto/notosansjp-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Noto Sans JP Subset"; src: url("../fonts/noto/notosansjp-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
/* noto:end */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font); line-height: 1.6; color: var(--text); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h2, h3 { color: var(--ink); line-height: 1.15; margin: 0 0 .5em; font-weight: 600; }
h2 { font-family: var(--display); letter-spacing: .02em; }
h3 { font-size: 20px; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 768px) { :root { --gutter: 40px; } }

.display-sm { font-family: var(--display); font-size: clamp(24px, 3vw, 32px); letter-spacing: .02em; }
.lead { font-size: 19px; color: var(--ink); max-width: 60ch; }
.note { font-size: 15px; }
.text-link:hover { text-decoration: none; }

/* The frame: a positioned box. In the modals its ::before is the top bar (see the entry form rules below); the other corners are hidden */
.frame { position: relative; }
.frame::before, .frame::after {
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
  border-color: var(--gold); border-style: solid; border-width: 0;
}
.frame::before { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.frame::after { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 30px;
  font: inherit; font-weight: 500; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid transparent; cursor: pointer; border-radius: 2px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* The entry button (.btn-brand): the SVG symbol #brand-btn in index.html is its bevelled face, the label is live text */
.btn-brand {
  position: relative; isolation: isolate; background: none; border: 0;
  transition: transform .18s ease, color .18s ease;
}
.btn-brand .btn-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; transition: filter .18s ease; }
.btn-brand > span { position: relative; }
.btn-brand::after {
  content: ""; position: absolute; left: 25%; right: 25%; bottom: -4px; height: 8px; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(253, 252, 234, .75), rgba(247, 236, 208, 0) 70%);
  transition: opacity .18s ease, transform .18s ease;
}
.btn-brand:hover, .btn-brand:focus-visible { transform: translateY(-1px); }
.btn-brand:hover .btn-bg, .btn-brand:focus-visible .btn-bg { filter: drop-shadow(0 4px 5px rgba(11, 26, 51, .38)) brightness(1.035); }
.btn-brand:hover::after { transform: scaleX(1.1); }
.btn-brand:active { transform: translateY(0); }
.gb-sheen { opacity: 0; transform: skewX(-22deg); }
@media (prefers-reduced-motion: no-preference) {
  .btn-brand:hover .gb-sheen, .btn-brand:focus-visible .gb-sheen { animation: sheen .9s cubic-bezier(.4, 0, .2, 1) forwards; }
  @keyframes sheen { 0% { transform: skewX(-22deg) translateX(0); opacity: 1; } 100% { transform: skewX(-22deg) translateX(680px); opacity: 1; } }
}
.btn-lg { min-height: 42px; padding: 0 48px; font-size: 16px; }

.btn-ghost { background: transparent; }

/* Header, after the 2025 event site: the logo on its own white bar above the KV, 62 px on wide screens and 68 px on phones,
   with the blue wordmark and ink links. The links, focus ring and language menu use the brand palette (the design rules
   below); the header sits outside its tokens, so the colours are spelled out. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  background: #fff; border-bottom: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease;
}
.header-row { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
@media (min-width: 701px) { .header-row { min-height: 62px; } }
.logo { display: flex; align-items: center; min-height: 44px; }
.logo .wordmark { width: 122px; height: 17px; }
.site-header:not(.solid) .nav-list > li > a:hover, .site-header:not(.solid) .lang-btn:hover { color: var(--gold); }
.menu-btn { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer; }
.menu-btn span { display: block; height: 2px; background: var(--ink); }
.site-nav { display: none; }
.site-nav.open { display: block; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list > li > a, .lang-btn {
  display: flex; align-items: center; min-height: 48px; padding: 0 14px;
  color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: .02em;
  background: none; border: 0; font-family: inherit; cursor: pointer;
}
.lang { position: relative; }
.lang-btn::after { content: ""; width: 7px; height: 7px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.lang-menu { list-style: none; margin: 0; padding: 0; display: none; }
.lang.open .lang-menu { display: block; }
.lang-menu button { display: block; width: 100%; min-height: 44px; padding: 0 16px; text-align: left; font: inherit; color: var(--text); background: none; border: 0; cursor: pointer; }
.lang-menu button:hover, .lang-menu button[aria-selected="true"] { color: var(--gold-deep); }
@media (max-width: 1023px) {
  .site-nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); }
  .nav-list > li { border-top: 1px solid var(--line); }
  .nav-list > li > a, .lang-btn { padding: 0 var(--gutter); }
  .lang-menu { background: var(--paper); }
}
@media (min-width: 1024px) {
  .menu-btn { display: none; }
  .site-nav { display: block; }
  .nav-list { display: flex; align-items: center; gap: 4px; }
  .lang-menu { position: absolute; right: 0; top: 100%; min-width: 160px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(11, 26, 51, .1); }
}
@media (max-width: 700px) {
  .site-header.solid { background: rgba(255, 255, 255, .96); }
  .site-header:not(.solid) .nav-list > li > a, .site-header:not(.solid) .lang-btn { color: #fff; }
}

/* ---- The KV: the photo with a large white title and its subtitle inside a focus frame, the logo
   hummingbird beside it, and no button on the KV (the entry button lives in the join section). The type follows the 2025
   event site: a script lead-in leaning into a condensed display word in translucent white, a glowing uppercase subtitle.
   The copy is live text over the photo; it stays English in every language. ---- */
.hero { position: relative; overflow: hidden; }
/* The KV is --hero-h tall, the photo cut to fill it. Until the photo arrives
   the KV shows itself in 32 x 18 pixels, stretched: the sky and the trees in place of a white band. */
.hero picture { display: block; position: relative; width: 100%; height: var(--hero-h); overflow: hidden; background: url("data:image/webp;base64,UklGRjABAABXRUJQVlA4ICQBAADwBgCdASogABIAPtFUo0uoJKMhsAgBABoJbACdMoMYPZKGi2wF2efsyObmfcBIaG5Z3JyM5YOWFYO+jdGG+c4AAO/+aMDzRuWmy0V8qVJsW/J+Tks3LcPiOmCFd3+lG578OPkmvt0l9PBo9hLZ0WpH4Cy7TQXgWSFCh/yoNoM19AmLHUiwMFg8QdJOsFTIIh3QBSb/Y2GtX+C7n3SMMZ111zzT6cHfHfheYe9ThNLIzpwps77/wmpD0bPaFs+RsPZEPkK36py/bSufxKvhevzKYJDD6kscPye73Yr1cFCzOvY32u/WpySWbh+v3VTCKN0p/4JLZnkYAhKJ/jlGDDGyWmJEzOWb3i/o26TVRKuvaaJhMvkXyFpqlHnFZoC8I70LsIAA") center / cover; }
@media (max-width: 700px) and (orientation: portrait) { .hero picture { background-image: url("data:image/webp;base64,UklGRrYAAABXRUJQVlA4IKoAAACwBACdASoKABYAPtFUo0uoJKMhsAgBABoJbACdMoMYOGAAbFV+SL+ayUfqTtMAAP4ViZ1H0zlda9I3az6efuhO8KeCMWSLhXD5q4+AnILj3IxzZr9xqvzZ27WnYf83NexO6vtUF+K04syOywNCXeZAXKe2b3VmOSa9kVQaLQAsoJ470ttCCu062l56BVvNnjqSl5GYGsbXViHijKVk8sSdeGuZ5oJtEwDAAA=="); } }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 701px) { .hero { margin-top: 62px; } }
@media (max-width: 700px) {
  .hero { padding-top: 68px; }
  .hero picture { height: calc((100svh - 68px) * .8); min-height: 360px; }   /* 80 % of the screen under the header; the floor keeps the lockup clear of the trees */
  .btn-lg { padding: 0 32px; font-size: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero picture { animation: settle 1.2s ease-out both; }
  @keyframes settle { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
}
/* The KV holds still until little of it is left on screen, then dissolves into the lake blue the intro starts with */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero { background: oklch(.885 .065 237); }
    .hero picture { animation: kv-dissolve linear both; animation-timeline: --kv; animation-range: exit 90% exit 100%; }   /* from 10 % of the KV left on screen to none */
    @keyframes kv-dissolve { to { opacity: 0; } }
  }
  /* view() would bind to the nearest scroll container, and overflow: hidden makes .hero one; a named timeline on the
     section resolves against the viewport instead */
  .hero { view-timeline: --kv block; }
}

/* Copy: centred in the sky, inside the focus frame */
.hero-copy { position: absolute; left: 50%; right: auto; width: max-content; text-align: center; color: #fff; pointer-events: none; z-index: 1; }
.hud-frame { display: block; position: absolute; inset: 0; pointer-events: none; }
.hud-frame i { position: absolute; width: clamp(18px, 2.3vw, 44px); height: clamp(18px, 2.3vw, 44px); border: 0 solid transparent; border-image: var(--vf-grad) 1; }
.hud-frame i:nth-child(1) { top: 0; left: 0; border-width: 5px 0 0 5px; }
.hud-frame i:nth-child(2) { top: 0; right: 0; border-width: 5px 5px 0 0; }
.hud-frame i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 5px 5px; }
.hud-frame i:nth-child(4) { bottom: 0; right: 0; border-width: 0 5px 5px 0; }
.hero-title { position: relative; display: flex; align-items: flex-end; justify-content: center; margin: 0; padding: 0; font: 400 var(--t)/.92 Anton, "KV Heavy TW", sans-serif; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.hero-title .t-word { overflow-wrap: normal; }
.hero-title .t-lead { position: relative; z-index: 1; margin: 0 -.12em .1em 0; font: 400 .42em/1 Yellowtail, cursive; letter-spacing: 0; text-transform: none; transform: rotate(-6deg); }
/* The title's halo: white letters with three layered violet glows and a faint dark drop. "Explore the" and WONDERS share one
   glow size: its radii are .12, .3 and .7 of the "Explore the" size (.42 of the title), so on WONDERS they are .05, .126 and
   .294em. The subtitle keeps a smaller glow. */
.hero-title .t-word { color: rgba(255, 255, 255, .9); text-shadow: 0 0 .05em var(--kv-glow), 0 0 .126em var(--kv-glow), 0 0 .294em color-mix(in srgb, var(--kv-glow) 80%, transparent), 0 .017em .034em rgba(10, 30, 80, .35); }
.hero-title .t-lead { color: #fff; text-shadow: 0 0 .12em var(--kv-glow), 0 0 .3em var(--kv-glow), 0 0 .7em color-mix(in srgb, var(--kv-glow) 80%, transparent), 0 .04em .08em rgba(10, 30, 80, .35); }
.hero-slogan, .hero-date {
  width: fit-content; font: 600 clamp(14px, 1.8vw, 34px)/1.25 Poppins, "KV Round TW", sans-serif;
  color: #fff; text-shadow: 0 0 .2em color-mix(in srgb, var(--kv-glow) 90%, transparent), 0 0 .5em var(--kv-glow), 0 0 1em color-mix(in srgb, var(--kv-glow) 70%, transparent), 0 .05em .1em rgba(10, 30, 80, .35);
}
.hero-slogan { margin: .45em auto 0; letter-spacing: .05em; text-transform: uppercase; }
/* The contest line under the subtitle: mixed case, one line */
.hero-date { margin: 1.1em auto 0; letter-spacing: .03em; white-space: nowrap; }
.hero-date .sep { margin: 0 .4em; opacity: .7; font-weight: 400; }

/* The bird faces the title. On phones it hovers above the focus frame (these rules); on wide screens it sits inside the frame's top-left corner (the min-width: 701px block below) */
.hero .hero-bird { position: absolute; inset: auto; left: 2%; bottom: calc(100% + 2px); z-index: 1; width: clamp(70px, 8vw, 154px); height: auto; object-fit: contain; transform: none; }   /* resets `.hero img`, the photo's own rule */
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-bird { animation: kv-hover 2.8s ease-in-out infinite alternate; }
  @keyframes kv-hover { from { translate: 0 0; rotate: 0deg; } to { translate: 0 -8px; rotate: -1.5deg; } }
}

/* Wide screens: the focus frame wraps the lockup, .5t above the title and .35t below the last line, centred on the O of
   WONDERS; the bird inside the frame's top-left corner, not above it as on phones. Everything in the lockup scales with the
   title size --t, measured once in Anton and Yellowtail: the O is 2.525t from the copy's left edge, and the frame is 6.228t
   wide (the O to the lockup's far edge, 2.764t, plus .35t, twice). The photo sits lower than centred, so the contest line
   stays above the tree tops and the lake keeps its reflection. */
@media (min-width: 701px) {
  .hero img { object-position: 50% 30%; }
  .hero picture { background-position: 50% 30%; }   /* the placeholder crops as the photo does, so the tree line holds still when it loads */
  .hero-copy { top: calc(var(--hero-h) * .05 + var(--t) * .5); padding: 0; transform: translateX(calc(var(--t) * -2.525)); }
  .hero-slogan { font-size: calc(var(--t) * .21); }
  .hero-date { font-size: calc(var(--t) * .18); }
  .hud-frame { inset: calc(var(--t) * -.5) auto calc(var(--t) * -.35) calc(var(--t) * -.589); width: calc(var(--t) * 6.228); }
  .hero .hero-bird { width: calc(var(--t) * .96); left: calc(var(--t) * -.409); top: calc(var(--t) * -.4); bottom: auto; }
}
@media (max-width: 700px) {
  .hero-copy { top: calc(68px + 14svh); padding: 14px 20px; max-width: calc(100vw - 32px); transform: translateX(-50%); }
  .hero-title { font-size: 56px; text-wrap: balance; }   /* "Explore the" and WONDERS on one line at 375 px */
  .hero-slogan { font-size: 13px; }
  .hero-date { font-size: min(12px, 3.1vw); letter-spacing: 0; }   /* one line inside the frame down to 320 px */
  .hero .hero-bird { width: 84px; left: 4%; bottom: calc(100% + 2px); }
  .hud-frame i:nth-child(1) { border-width: 4px 0 0 4px; }
  .hud-frame i:nth-child(2) { border-width: 4px 4px 0 0; }
  .hud-frame i:nth-child(3) { border-width: 0 0 4px 4px; }
  .hud-frame i:nth-child(4) { border-width: 0 4px 4px 0; }
}

/* Floating entry button: fixed at the bottom once the KV has scrolled away, docked under the gallery at the end (script.js) */
.float-cta { position: fixed; left: 0; right: 0; bottom: 16px; z-index: 15; display: flex; justify-content: center; pointer-events: none; }
.float-cta .btn { pointer-events: auto; }
@media (max-width: 700px) { .float-cta .btn { min-height: 42px; padding: 0 32px; font-size: 14px; } }
.float-cta[hidden] { display: none; }
.join-cta { margin-top: 32px; }
@media (max-width: 899px) { .join-cta { display: flex; justify-content: center; } }   /* one column on phones and tablets: the entry button centres */
.cta-dock { display: flex; justify-content: center; align-items: center; min-height: 56px; margin-top: 44px; }
.cta-dock .btn { pointer-events: auto; }
/* script.js sets html[data-phase] at the deadline: the entry button no longer docks under the gallery. With the winners
   shown, the floating button is a link to them, and the KV date line links to them too */
html[data-phase] .cta-dock, html[data-phase="winners"] .float-cta .js-open-form { display: none; }
.float-winners:hover { text-decoration: none; }
.hero-date a { color: inherit; pointer-events: auto; text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .2em; }
@media (prefers-reduced-motion: no-preference) {
  .float-cta { animation: rise .25s ease-out both; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* Background device: paper grain on the light sections; .room-dark only positions its section */
.grain { position: relative; }
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .15 0 0 0 0 .25 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain > .wrap { position: relative; }
.room-dark { position: relative; overflow: hidden; }
.room-dark > .wrap { position: relative; }

/* Intro */
.section { padding: 72px 0; }
@media (min-width: 900px) { .section { padding: 104px 0; } }
.intro .wrap { display: grid; gap: 28px; }
.intro-p { font-size: 19px; color: var(--ink); margin: 0; }
/* Wide: the heading shows on the first screen under the KV, so less room above it; the paragraph's first line starts level
   with the heading's */
@media (min-width: 900px) { .intro { padding-top: 56px; } .intro .wrap { grid-template-columns: 7fr 5fr; align-items: start; gap: 80px; } }

/* Theme band */
.theme-band { padding: 64px 0 72px; }
.theme-band h3 { font-family: var(--display); display: inline-block; }
.pillars { margin: 0; display: grid; gap: 32px; }
@media (min-width: 800px) { .pillars { grid-template-columns: repeat(2, 1fr); gap: 48px; } }   /* What to Submit, Your Vision */
.pillars div { padding-top: 20px; }
.pillars dt { margin-bottom: 8px; }
.pillars dd { margin: 0; }

/* How to join */
.join-grid { display: grid; gap: 48px; }
@media (min-width: 900px) { .join-grid { grid-template-columns: 7fr 5fr; gap: 96px; align-items: start; } }
.steps { counter-reset: step; list-style: none; margin: 8px 0 20px; padding: 0; }
.steps li { position: relative; padding: 18px 0 18px 64px; border-top: 1px solid var(--line); }
.steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 16px;
  font-size: 26px; line-height: 1.2;
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.dates-box { padding: 32px 28px; }
.dates { margin: 0 0 20px; }
.dates-links { display: grid; gap: 10px; margin: 0; }
.dates dt { font-weight: 600; padding-top: 14px; border-top: 1px solid rgba(29, 36, 51, .12); font-size: 15px; letter-spacing: .02em; }
.dates dd { margin: 2px 0 14px; }

/* Awards */
.tiers { list-style: none; padding: 0; gap: 24px; }
@media (min-width: 700px) { .tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }
.tier-name { display: block; margin-bottom: 8px; }
.tier-prize { display: block; }

/* Gallery */
.gallery-head { display: grid; gap: 8px 48px; margin-bottom: 40px; }
@media (min-width: 900px) { .gallery-head { grid-template-columns: auto 1fr; } .gallery-head p { max-width: 52ch; } }
.mosaic { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) {
  .mosaic { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .mosaic li:first-child { grid-column: span 2; grid-row: span 2; }
  .mosaic li:nth-child(2) { grid-column: span 2; }
  .mosaic li:nth-child(2) img { aspect-ratio: 2 / 1; object-position: 50% 35%; }
}
.mosaic figure { margin: 0; position: relative; }
.mosaic a { display: block; position: relative; }
.mosaic img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.mosaic figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 12px;
  color: #fff; font-size: 14px; line-height: 1.35; pointer-events: none;
}
.mosaic .award { display: block; }
.mosaic .who { color: rgba(255, 255, 255, .85); }
/* Tier mark: viewfinder brackets in the medal colour, faint at rest, full on hover. A full metal border would fight the photograph. */
.mosaic li { --tier: rgba(255, 255, 255, .7); }
.mosaic a::before, .mosaic a::after, .mosaic figure::before, .mosaic figure::after {
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border: 0 solid var(--tier); opacity: .45; transition: opacity .2s ease;
}
.mosaic a::before { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; }
.mosaic a::after { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; }
.mosaic figure::before { left: 10px; border-bottom-width: 2px; border-left-width: 2px; z-index: 1; }
.mosaic figure::after { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; z-index: 1; }
.mosaic li:hover a::before, .mosaic li:hover a::after, .mosaic li:hover figure::before, .mosaic li:hover figure::after,
.mosaic li:focus-within a::before, .mosaic li:focus-within a::after, .mosaic li:focus-within figure::before, .mosaic li:focus-within figure::after { opacity: 1; }

/* Footer, after the 2025 event site */
.site-footer { font-size: 14px; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 26px; padding-bottom: 26px; }
/* Wide: one row. The links and the icons keep their width; when the row runs short (a longer language, the cookie link)
   the copyright line wraps instead of the icons dropping to a row of their own */
@media (min-width: 1200px) { .footer-row { flex-wrap: nowrap; } .footer-row .copy { min-width: 0; } .footer-row :is(.legal, .social) { flex: none; } }
.site-footer p { margin: 0; }
.legal [aria-hidden="true"] { margin: 0 8px; opacity: .5; }
.legal a { white-space: nowrap; }   /* a link name never splits; with the no-break space in index.html its bar stays behind it */
.social { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; }
.social img { width: 26px; height: 26px; border-radius: 5px; }

/* Dialogs: the entry form, the terms and the lightbox. Their colours are in the design rules below. */
dialog { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; color: inherit; }
.modal { width: min(100% - 32px, 760px); max-height: calc(100svh - 32px); overflow-y: auto; overscroll-behavior: contain; }   /* taller than the screen: scroll inside the frame */
.modal > * {
  position: relative; padding: 36px 24px;
  /* Body: a lit top edge and a dark bottom edge give it a thickness; a contact shadow sits under it and an ambient one further out */
  outline-offset: -12px;   /* mat line, like a mounted print; an outline scrolls with the form where a pseudo-element would not */
}
@media (min-width: 700px) { .modal > * { padding: 48px 56px; outline-offset: -16px; } }
.modal .frame::before, .modal .frame::after { width: 36px; height: 36px; }
.modal h2 { padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
/* The Contest Rules dialog (#terms): the entry modal's frame, a numbered list of clauses */
.terms-sub { margin: 14px 0 0; font-weight: 600; letter-spacing: .04em; }
.terms-list { margin: 22px 0 0; padding-left: 1.5em; display: grid; gap: 12px; font-size: 15px; line-height: 1.65; }
.terms-list li::marker { font-weight: 800; }
.terms-list strong { font-weight: 800; font-size: 1.08em; }
.close { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; z-index: 1; }
.entry h2 { margin-bottom: 26px; }
.fields { display: grid; gap: 18px; }
@media (min-width: 700px) { .fields { grid-template-columns: 1fr 1fr; } .field-wide { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: 7px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.field input:not([type="checkbox"]):not(.file-input), .field select, .field textarea {
  font: inherit; font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none;
  min-height: 46px; padding: 10px 14px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
/* The description grows with its text (script.js) between 4 and 12 lines, then scrolls. The em pair is for browsers without
   the lh unit (Safari before 16.4), at the 1.6 line height. */
.field textarea { resize: none; overflow-y: auto; min-height: calc(6.4em + 22px); max-height: min(50svh, calc(19.2em + 22px)); min-height: calc(4lh + 22px); max-height: min(50svh, calc(12lh + 22px)); }
.combo { position: relative; }
/* The social account: the platform list beside the account box on a full-width row. A phone gives the list half the
   row, so "Instagram" and the longest prompt (es, pt "Plataforma") still show whole at 360px; a list with nothing picked
   reads as a placeholder */
.social-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
@media (min-width: 700px) { .social-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; } }
.social-row select:invalid { color: var(--muted); }
.social-row option { color: var(--ink); }
.combo-list {
  position: absolute; left: 0; right: 0; top: calc(100% - 4px); z-index: 2; max-height: 220px; overflow-y: auto;
  margin: 0; padding: 4px 0; list-style: none; border: 1px solid #e3dccb; border-radius: 2px;
  font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none;
}
.combo-list li { padding: 9px 14px; cursor: pointer; }
.combo-list li:hover, .combo-list li[aria-selected="true"] { background: #f1e6c8; }
.combo-list mark { background: none; font-weight: 600; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 1px 3px rgba(11, 26, 51, .16), 0 0 0 3px rgba(201, 162, 74, .28); }
.field.invalid input, .field.invalid select, .field.invalid textarea, .field.invalid .file-zone { border-color: #ff8a80; }
.err { display: none; color: #ffb4ab; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.field.invalid .err { display: block; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-zone {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 10px 10px 10px 14px;
  cursor: pointer;
  font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.file-zone:hover, .file-zone.drag { background: rgba(201, 162, 74, .1); border-color: var(--gold); }
.file-input:focus-visible + .file-zone { outline: 2px solid var(--gold); outline-offset: 3px; }
.file-zone.has-file .file-name { font-weight: 500; }
.file-btn { flex: none; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .35); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.check { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.check a { border-bottom: 1px solid rgba(201, 162, 74, .5); }
.check input { width: 20px; height: 20px; margin: calc((1lh - 20px) / 2) 0 0; font: inherit; }   /* level with the first line: font: inherit gives 1lh the label's line height */
.check > span { flex: 1 1 0; min-width: 0; }   /* a long agreement wraps beside its box, not under it */
.check .err { flex-basis: 100%; }
.form-error { display: none; color: #ffb4ab; font-size: 15px; margin: 16px 0 0; }
.form-error.show { display: block; }
.actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 30px; }
/* reCAPTCHA's fixed corner badge would cover the floating CTA on phones; Google allows hiding it while the form shows its notice */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-note { margin: 18px 0 0; font-size: 14px; text-align: right; color: var(--muted); }
.recaptcha-note a { color: inherit; text-decoration: underline; }
.done { text-align: center; }
.done p { max-width: 44ch; margin: 0 auto 24px; }

.lightbox { width: min(100% - 32px, 900px); }
.lightbox figure { margin: 0; padding: 18px; }
.lightbox img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; }
.lightbox figcaption { padding: 14px 4px 0; font-size: 15px; }
.lightbox .close { top: -46px; right: 0; }

/* Hummingbird: perches on landmarks, flies between them on scroll */
.bird { position: fixed; left: 0; top: 0; width: 120px; height: 89px; z-index: 14; pointer-events: none; opacity: 0; transition: opacity .5s ease; will-change: transform; --flap: 5.6s; --tilt: 0deg; --rest-wing: 0; }
.bird.on { opacity: .96; }
.bird.off { opacity: 0; }
.bird-svg { width: 100%; height: 100%; overflow: visible; transform: rotate(var(--tilt)); transform-origin: 55% 60%; filter: drop-shadow(0 3px 5px rgba(11, 26, 51, .16)); }
.bird-glide, .bird-wing-idle, .bird-wing-far-idle, .bird-tail-idle, .bird-stars > g { transform-box: view-box; animation-duration: var(--flap); animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.bird-glide { animation-name: bird-breathe; }
.bird-wing, .bird-wing-idle { transform-origin: 308px 395px; }
.bird-wing-idle { animation-name: bird-tip-flex; animation-duration: calc(var(--flap) * .5); }
.bird-wing-far, .bird-wing-far-idle { transform-origin: 337px 370px; }
.bird-wing-far-idle { animation-name: bird-far-flex; }
.bird-tail, .bird-tail-idle { transform-origin: 252px 383px; }
.bird-tail-idle { animation-name: bird-tail-lag; animation-duration: calc(var(--flap) * 1.25); animation-delay: -.8s; }
.bird-stars > g { animation-name: bird-star-drift; }
@keyframes bird-breathe {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(-2px); }
}
@keyframes bird-tip-flex {
  0%, 100% { transform: rotate(calc(4deg * var(--rest-wing))) scaleY(1); }
  50% { transform: rotate(calc(.6deg - 8.6deg * var(--rest-wing))) scaleY(.99); }
}
@keyframes bird-far-flex {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-.5deg); }
}
@keyframes bird-tail-lag {
  0%, 100% { transform: rotate(.5deg) scaleY(1); }
  35% { transform: rotate(3.5deg) scaleY(1.03); }
  80% { transform: rotate(-3.5deg) scaleY(.98); }
}
@keyframes bird-star-drift {
  0%, 100% { transform: translate(0, 0); opacity: .92; }
  55% { transform: translate(-4px, 1px); opacity: .75; }
}
.bird-wind { opacity: 0; }
.bird-gust { fill: url(#bird-air); animation: bird-air-drift calc(var(--flap) * .5) linear infinite; }
.bird-gust-delayed { animation-delay: calc(var(--flap) * -.25); }
@keyframes bird-air-drift {
  0% { transform: translateX(28px); opacity: 0; }
  20%, 55% { opacity: .85; }
  100% { transform: translateX(-76px); opacity: 0; }
}
@media (max-width: 899px) { .bird { width: 84px; height: 62px; } }   /* phones: the same bird, seven tenths the size */
@media (prefers-reduced-motion: reduce) { .bird { display: none; } }

/* Line breaking: balanced headings, orphan-free paragraphs, no breaks inside names, dates and labels; strict rules for Chinese */
h2, h3, .display, .display-sm, .tier-name, .pillars dt, .gallery-head h2 { text-wrap: balance; }
p, dd, li, figcaption, .note, .lead, .intro-p, .err, .form-error { text-wrap: pretty; }
.nav-list > li > a, .lang-btn, .tier-prize, .dates dt, .mosaic .award, .file-btn, .btn { white-space: nowrap; }
.tier-prize { white-space: normal; }
.mosaic .who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.dates dd { hyphens: none; }
.intro-p { max-width: 46ch; }
@media (max-width: 700px) { .display { max-width: none; } }
html[lang="zh-TW"], html[lang="ja"] { line-break: strict; word-break: normal; overflow-wrap: anywhere; }
html[lang="zh-TW"] h2, html[lang="zh-TW"] h3 { letter-spacing: .06em; }
html[lang="zh-TW"] .btn, html[lang="zh-TW"] .field { letter-spacing: .08em; }
html[lang="zh-TW"] .intro-p { max-width: 36em; text-align: justify; text-justify: inter-character; }

/* ---- Transitions. The mechanism is GlideCN's (glidecn.vercel.app): freeze the old frame while the new one mounts, then
   animate compositor properties only (clip-path, transform, opacity). Written here as a plain overlay, the View Transitions API and
   scroll-driven animations instead of React. Every block is gated on prefers-reduced-motion. ---- */

/* 1. Language swap: a lens iris, the textbook kind. Six straight-edged blades pivot on the rim; open, each edge is
   tangent to the ring, and one 90-degree turn of all six lays the edges through the centre. The aperture is the hexagon
   those edges leave, turning as it shrinks, and each edge runs on from a vertex of the hole to the rim as a seam. A
   flare fires at the pinhole, the blades overshoot shut and snap back to it, hold there for a beat while the text swaps, then open again.
   script.js builds the overlay once (irisOverlay), sizes it past the viewport diagonal and drives the blades per frame (setIris). */
.iris { position: fixed; inset: 0; z-index: 200; display: none; pointer-events: none; }
.iris.on { display: block; }
.iris svg { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.iris .rim { fill: none; stroke-width: 3; }
.iris .seam { stroke-width: 2; }
.iris .flare { transform-box: view-box; transform-origin: 500px 500px; opacity: 0; }
.iris .lip { stroke-width: 1.5; }   /* light catching the blade edges round the hole */

/* 2. Lightbox: a circle that grows from the thumbnail that was clicked. script.js sets --ox/--oy in dialog coordinates.
   Fill mode "backwards" drops the clip once the circle has covered the box, so the close button outside it is never clipped. */
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: portal-in .5s cubic-bezier(.22, 1, .36, 1) backwards; }
  .lightbox[open]::backdrop { animation: fade-in .3s ease-out both; }
  @keyframes portal-in { from { clip-path: circle(0 at var(--ox, 50%) var(--oy, 50%)); } to { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); } }
  @keyframes fade-in { from { opacity: 0; } }
}

/* 3. Menus: mask reveal. Open in 160ms with the items following 20ms apart, close in 100ms flat. */
@media (prefers-reduced-motion: no-preference) {
  .lang-menu { clip-path: inset(0 0 100% 0); opacity: 0; transition: clip-path .1s ease-in, opacity .1s ease-in, display .1s allow-discrete; }
  .lang.open .lang-menu { clip-path: inset(0); opacity: 1; transition-duration: .16s; transition-timing-function: cubic-bezier(.22, 1, .36, 1); }
  .lang.snap .lang-menu { transition: none; }
  @starting-style { .lang.open .lang-menu { clip-path: inset(0 0 100% 0); opacity: 0; } }
  .lang.open .lang-menu li { animation: menu-item .2s cubic-bezier(.22, 1, .36, 1) both; }
  .lang.open .lang-menu li:nth-child(2) { animation-delay: 20ms; }
  .lang.open .lang-menu li:nth-child(3) { animation-delay: 40ms; }
  .lang.open .lang-menu li:nth-child(4) { animation-delay: 60ms; }
  .lang.open .lang-menu li:nth-child(5) { animation-delay: 80ms; }
  @keyframes menu-item { from { opacity: 0; transform: translateY(4px); } }
  @media (max-width: 1023px) {
    .site-nav { clip-path: inset(0 0 100% 0); opacity: 0; transition: clip-path .1s ease-in, opacity .1s ease-in, display .1s allow-discrete; }
    .site-nav.open { clip-path: inset(0); opacity: 1; transition-duration: .16s; transition-timing-function: cubic-bezier(.22, 1, .36, 1); }
    @starting-style { .site-nav.open { clip-path: inset(0 0 100% 0); opacity: 0; } }
  }
}

/* 4. Reveals: the section stays put, its content comes in. Each element rises 14px and fades, a photograph settles
   like a print. script.js adds .reveal, sets --d for the
   stagger, and flips .in once the element enters the viewport. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s ease-out var(--d, 0s), transform .5s cubic-bezier(.22, 1, .36, 1) var(--d, 0s); }
  .reveal.in { opacity: 1; transform: none; }
  .mosaic .reveal { transform: translateY(16px) scale(.94); }
}

/* ==== The design: the ADATA Brand Applications palette ====
   The rules above set the layout and the motion; the rules below set the colours, the type and the decoration, and win
   over the rules above where both apply.
   The grounds: Tiffany blue under the KV through the theme, then white for how to join, the awards in the whole gradient, the
   photographs on white and a light grey footer. One graphic marks the theme and the gallery: the sun, in the whole
   gradient, on a lit horizon. Besides the awards ground, the gradient appears only where light would: the call to action
   (the light source), the sun and lit edges. Titles are large and bold in the brand red #ff324b.
   Every gradient runs from #ff02cb to #ff8a02 at an angle between 90deg and 180deg (top left to bottom right), chosen so the
   whole run shows inside its shape. The KV is styled above; nothing here touches it. */

/* Tokens live on the page body parts, not on :root, so the shared white header and the KV keep their own */
:is(main, .float-cta, .site-footer, dialog, .iris) {
  --g1: #ff02cb; --g2: #ff324b; --g3: #ff8a02;
  --accent: #00e6cd;
  --grad: linear-gradient(to bottom right, var(--g1), var(--g2), var(--g3));
  --grad-line: linear-gradient(100deg, var(--g1), var(--g2), var(--g3));   /* thin strips: left to right, a touch downward */
  /* The Tiffany-to-white join, after the 2025 site's mist: the theme band eases into the white below over this depth (a colour
     hint at 38% gives the fast-then-slow curve measured on its btm.png). */
  --blend: clamp(96px, 10vw, 140px);
  --title: #ff324b;          /* the brand red: titles, large and bold only (3.6:1 on white, 3.2:1 on the palest grounds) */
  --ink: #2a2027;            /* warm near-neutral ink: body text */
  --text: #2a2027;
  --muted: #6c5a64;
  --line: rgba(42, 32, 39, .14);
  --edge: #8f7d88;           /* input and ghost-button borders on light */
  /* The grounds: Tiffany blue under the KV and the theme, then white, and a light grey footer; the KV's foliage gold
     (OKLCH hue 82) is left for the paper and list hovers. The brand-red titles keep 3:1 or better on all of them except the Tiffany (2.9:1). */
  --tiffany: #00fffc;              /* the intro and the theme */
  --sun: #ffffff;                  /* how to join */
  --noon-warm: oklch(.965 .045 82); /* the paper, list hovers */
  --footer: #efefef;
  --mount: #f6e8e1;          /* behind a print while it loads */
  --sheet: #fffdfa;
  --err: #b0123c;
  --display: var(--font);   /* one face for every text: headings, buttons and labels set in Outfit as the copy does */
  --gold: var(--ink);        /* focus rings: ink, every room is light */
  --gold-deep: var(--ink);
  --paper: var(--noon-warm);
  color: var(--text);
  caret-color: var(--ink);
}
body { background: #f5f9fd; }
:is(main, .float-cta, .site-footer, dialog) ::selection { background: #00e6cd; color: #2a2027; }
:is(h2, h3, .display, .display-sm) { font-family: var(--display); font-weight: 700; letter-spacing: -.015em; color: var(--title); }
.grain::before { opacity: .2; }

/* ---- Titles: bigger, bold, berry on light ---- */
h2 { font-size: clamp(34px, 4.3vw, 60px); line-height: 1.05; }
.display { font-size: clamp(44px, 6.4vw, 92px); font-weight: 800; letter-spacing: -.03em; line-height: 1; max-width: 10em; }

/* ---- Buttons: the light source. The bevelled button (#brand-btn in index.html) on the whole gradient in the
   guide's direction; the label is large text (19px bold) with a berry shadow; the drop shadow is berry too. ---- */
.btn-brand {
  min-height: 54px; padding: 0 80px; color: #fff;
  font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: .005em; text-transform: none;
  text-shadow: 0 1px 2px rgba(90, 8, 60, .5), 0 0 8px rgba(90, 8, 60, .28);
}
.btn-brand .btn-bg { filter: drop-shadow(0 3px 4px rgba(120, 10, 80, .3)); }
.btn-brand:is(:hover, :focus-visible) .btn-bg { filter: drop-shadow(0 5px 8px rgba(120, 10, 80, .38)) brightness(1.035); }
.btn-brand::after { display: none; }   /* no glow under the button */
/* White on this gradient peaks at 3.6:1, so the label keeps out of the bevel's top highlight: it sits 2px low */
.btn-brand > span { top: 2px; }
.float-cta .btn { min-height: 54px; padding: 0 80px; font-size: 19px; }
.btn-ghost { font-family: var(--display); font-size: 18px; font-weight: 600; text-transform: none; letter-spacing: .01em; border-radius: 3px; color: var(--ink); border-color: var(--edge); }
.btn-ghost:hover { border-color: var(--ink); }
@media (max-width: 700px) {
  /* The screen is too narrow for the wide side padding; a taller bevel keeps the label in the gradient's middle band instead */
  :is(.btn-brand, .btn-lg, .float-cta .btn) { min-height: 56px; padding: 0 50px; font-size: 19px; letter-spacing: -.01em; }
  .btn-brand > span { top: 1px; }
}

/* ---- The intro: Tiffany blue under the KV ---- */
.intro { background: var(--tiffany); }
.intro-p, .lead { color: var(--ink); }
/* The dark text, sized for reading. Outfit's x-height is only .47 of its size, so 21 px reads like a
   19 px Noto Sans or Arial: running text gets 21 px (x-height 10 px), the theme text and rank prizes 20 px, secondary text
   18 to 19 px (x-height 8.5 px or more).
   Outfit 400 is thin on the pale grounds, so running text sets in 500; bold (700) and labels (600) keep the steps above it,
   and the white text on photos stays 400.
   Phones are read nearer, so they keep 19 px running text, above the 16 px floor. The nav stays at 16 px, its row is full. */
body { font-size: 21px; font-weight: 500; }
:is(.intro-p, .lead) { font-size: 23px; }
.pillars dd { font-size: 20px; }
:is(.dates dt, .site-footer) { font-size: 18px; }
:is(.note, .prize-show figcaption) { font-size: 19px; }
.tier-prize { font-size: 20px; }
:is(.nav-list > li > a, .lang-btn) { font-size: 16px; }
.lang-menu button { font-size: 18px; }
.mosaic .who { font-weight: 400; }
.field { font-size: 15px; }
:is(.field input:not([type="checkbox"]):not(.file-input), .field select, .field textarea) { font-size: 19px; }
:is(.combo-list, .file-name, .check, .terms-list, .lightbox figcaption) { font-size: 19px; }
:is(.field input:not([type="checkbox"]):not(.file-input), .field select, .field textarea, .combo-list, .file-name, .check) { font-weight: 500; }
.file-btn { font-size: 17px; }
@media (max-width: 700px) {
  body { font-size: 19px; }
  :is(.intro-p, .lead) { font-size: 21px; }
  :is(.pillars dd, .tier-prize, .terms-list, .check) { font-size: 19px; }
  :is(.note, .prize-show figcaption, .field input:not([type="checkbox"]):not(.file-input), .field select, .field textarea) { font-size: 18px; }
}

/* ---- The theme: the intro's Tiffany blue carries on and eases into white above its bottom edge, so how to join
   starts on white, and so does the bird perched on it (on phones it reaches 5 px up into the band; 16 px stay white) ---- */
.theme-band { background: linear-gradient(to bottom, var(--tiffany) calc(100% - var(--blend) - 16px), calc(100% - var(--blend) * .62 - 16px), var(--sun) calc(100% - 16px)); color: var(--text); }
/* Each ground starts in the colour above it, so it overlaps the one above by 1 px: scaled down (a zoomed browser, a framed
   preview) the two edges would each half-cover their shared row and let the page background through as a line */
:is(.theme-band, #join) { margin-top: -1px; }
.theme-band h3 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; padding: 0; margin: 0 0 22px; }   /* the descenders clear the horizon */
.theme-band h3::before, .theme-band h3::after { display: none; }
/* The sun, in the whole gradient, at the right end of a lit horizon: the theme heading sits just above the horizon,
   and the heading's words keep clear of the sun (on a phone the heading takes the full width and the sun sits under it, as
   under the gallery heading) */
:is(.theme-band, .gallery-head) { --sun-w: 190px; }
:is(.pillars, .gallery-head) { position: relative; }
:is(.pillars, .gallery-head)::before, :is(.pillars, .gallery-head)::after { content: ""; position: absolute; pointer-events: none; }
:is(.pillars, .gallery-head)::before { left: 0; right: 0; height: 3px; background: var(--grad-line); }
:is(.pillars, .gallery-head)::after { width: var(--sun-w); height: calc(var(--sun-w) / 2); border-radius: var(--sun-w) var(--sun-w) 0 0; background: var(--grad); }
.theme-band h3 { max-width: calc(100% - var(--sun-w) - 8px); }
.pillars { padding-top: 48px; }
.pillars::before { top: 0; }
.pillars::after { right: 0; bottom: 100%; }
.gallery-head { padding-bottom: 118px; }
.gallery-head::before { bottom: 0; }
.gallery-head::after { right: 0; bottom: 3px; }
@media (max-width: 700px) {
  :is(.theme-band, .gallery-head) { --sun-w: 124px; }
  .theme-band h3 { max-width: none; margin-bottom: 78px; }
  .gallery-head { padding-bottom: 78px; }
}
.pillars div { border-top: 1px solid var(--line); }
.pillars dt { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--title); }
.pillars dd { color: var(--text); }

/* ---- How to join: white ---- */
#join { background: var(--sun); }
.steps li { border-color: var(--line); color: var(--text); }
.steps li b { color: var(--ink); font-weight: 600; }
.steps li::before { font-family: var(--display); font-weight: 800; color: var(--title); letter-spacing: -.02em; }
.note { color: var(--muted); }
/* Key dates: framed in the brand red on the white ground */
.dates-box { background: var(--sun); border: 2px solid var(--title); border-radius: 2px; }
.dates-box h3 { font-size: 26px; }
.dates dt { display: flex; align-items: center; gap: 10px; color: var(--ink); border-top-color: var(--line); }
.dates dt::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px rgba(42, 32, 39, .18); }
.dates dd { color: var(--text); padding-left: 17px; }
.text-link { color: var(--ink); font-weight: 600; border-bottom: 2px solid; border-image: var(--grad-line) 1; padding-bottom: 2px; transition: color .15s ease; }
.text-link:hover { color: var(--title); }

/* ---- Golden hour: the awards, on the B2C brand gradient. The heading and the lead are white, both large
   type on the gradient; each prize is a white print with its medal edge. ---- */
.awards-section { background: var(--grad); border-top: 0; }
#awards h2 { color: #fff; }   /* white on the gradient */
.awards-section .lead { max-width: none; margin: 0; color: var(--ink); font-weight: 500; text-align: left; text-wrap: balance; }   /* even lines on wide screens */
@media (max-width: 700px) { .awards-section .lead { text-wrap: pretty; } }   /* 7 lines at 375 px, past balance's 6-line limit; pretty keeps a word off the last line alone */
/* zh-TW and ja fill each line as prose; zh-TW binds only its units (外接式固態硬碟, 500 美元, 禮物卡) with word joiners in the copy */
:is(:lang(zh-TW), :lang(ja)) .awards-section .lead { text-wrap: pretty; }
@media (min-width: 701px) { .lead .clause { display: block; } }   /* zh-TW: the second clause starts its own line; phones run on */
/* One white print on the gradient holds everything but the heading: no body text sits on the magenta. The pictures show the
   prizes once, at their true relative size (an ID-1 card is 85.6 mm wide; the URBAN TAPSAFE is 68.68 mm, .802 of it;
   .790 of --card, the width the card's own 1000 px stand for),
   ADATA's SSD in front; the ranks are a list, the gift card value set large. */
.prize-sheet { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 30px; padding: 84px 22px 26px;   /* the top 84 px hold the perched bird (bird.js) above the lead */ background: var(--sheet); border-radius: 3px; box-shadow: 0 30px 60px -34px rgba(80, 0, 40, .6); }
.prize-show { display: block; margin: 0; }
.prize-pics { --card: 58%; position: relative; display: block; aspect-ratio: 2 / 1; }
.prize-pics img { position: absolute; height: auto; }
.prize-pics .pic-card { right: 2.35%; top: 0; width: calc(var(--card) * 1.057); filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .3)); }
/* The card image is turned 7 degrees ahead of time, at four times the size and then averaged down, so its edges are smooth in
   every browser; a CSS rotate of a bitmap leaves them stepped on some GPUs. The width and offsets put the card exactly where the
   unturned 1016 px image sat when rotated about its centre. */
.prize-pics .pic-ssd { left: 10%; bottom: 8%; width: calc(var(--card) * .790); filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .32)); }
.prize-show figcaption { display: grid; gap: 6px; margin-top: 14px; line-height: 1.45; color: var(--text); }
.prize-show figcaption span { display: block; text-wrap: balance; }
.prize-show b { color: var(--ink); font-weight: 600; }
.tiers { display: block; margin: 0; }
.tier { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.tier:first-child { border-top: 0; padding-top: 0; }
/* Each rank wears its medal: a brand ribbon over a metal disc, drawn as SVG; the Merit Award's is a light tint of the brand magenta, with an open star */
.tier::before { content: ""; grid-row: 1; width: 28px; height: 35px; background: var(--medal) center / contain no-repeat; filter: drop-shadow(0 2px 2px rgba(60, 20, 40, .28)); }
.tier-gold { --medal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40'%3E%3Cdefs%3E%3CradialGradient id='m' cx='35%25' cy='30%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23fff4c2'/%3E%3Cstop offset='.55' stop-color='%23e2b23c'/%3E%3Cstop offset='1' stop-color='%239c6c14'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M6 0h7.5l5 14H11z' fill='%23ff02cb'/%3E%3Cpath d='M26 0h-7.5l-5 14H21z' fill='%23ff8a02'/%3E%3Ccircle cx='16' cy='26.5' r='12.5' fill='url%28%23m%29'/%3E%3Ccircle cx='16' cy='26.5' r='9.5' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='1.2'/%3E%3Cpath d='M16 20.6l1.8 3.7 4 .6-2.9 2.8.7 4-3.6-1.9-3.6 1.9.7-4-2.9-2.8 4-.6z' fill='%23fff' fill-opacity='.8'/%3E%3C/svg%3E"); }
.tier-silver { --medal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40'%3E%3Cdefs%3E%3CradialGradient id='m' cx='35%25' cy='30%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.55' stop-color='%23c4ccd4'/%3E%3Cstop offset='1' stop-color='%2376808b'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M6 0h7.5l5 14H11z' fill='%23ff02cb'/%3E%3Cpath d='M26 0h-7.5l-5 14H21z' fill='%23ff8a02'/%3E%3Ccircle cx='16' cy='26.5' r='12.5' fill='url%28%23m%29'/%3E%3Ccircle cx='16' cy='26.5' r='9.5' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='1.2'/%3E%3Cpath d='M16 20.6l1.8 3.7 4 .6-2.9 2.8.7 4-3.6-1.9-3.6 1.9.7-4-2.9-2.8 4-.6z' fill='%23fff' fill-opacity='.8'/%3E%3C/svg%3E"); }
.tier-bronze { --medal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40'%3E%3Cdefs%3E%3CradialGradient id='m' cx='35%25' cy='30%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23ffe2c6'/%3E%3Cstop offset='.55' stop-color='%23c98346'/%3E%3Cstop offset='1' stop-color='%2383461c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M6 0h7.5l5 14H11z' fill='%23ff02cb'/%3E%3Cpath d='M26 0h-7.5l-5 14H21z' fill='%23ff8a02'/%3E%3Ccircle cx='16' cy='26.5' r='12.5' fill='url%28%23m%29'/%3E%3Ccircle cx='16' cy='26.5' r='9.5' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='1.2'/%3E%3Cpath d='M16 20.6l1.8 3.7 4 .6-2.9 2.8.7 4-3.6-1.9-3.6 1.9.7-4-2.9-2.8 4-.6z' fill='%23fff' fill-opacity='.8'/%3E%3C/svg%3E"); }
.tier-hm { --medal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40'%3E%3Cdefs%3E%3CradialGradient id='m' cx='35%25' cy='30%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23ffeefa'/%3E%3Cstop offset='.55' stop-color='%23ff8ae3'/%3E%3Cstop offset='1' stop-color='%23d23aa6'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M6 0h7.5l5 14H11z' fill='%23ff02cb'/%3E%3Cpath d='M26 0h-7.5l-5 14H21z' fill='%23ff8a02'/%3E%3Ccircle cx='16' cy='26.5' r='12.5' fill='url%28%23m%29'/%3E%3Ccircle cx='16' cy='26.5' r='9.5' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='1.2'/%3E%3Cpath d='M16 20.6l1.8 3.7 4 .6-2.9 2.8.7 4-3.6-1.9-3.6 1.9.7-4-2.9-2.8 4-.6z' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tier-name { grid-column: 2; margin: 0; font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.15; color: var(--title); letter-spacing: -.015em; white-space: normal; }
.tier-prize { grid-column: 2; margin-top: 4px; color: var(--text); line-height: 1.45; }
.tier-prize .amt { font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
/* Wide: the pictures at the left, the ranks at the right, each rank on one row with its value at the far end */
@media (min-width: 900px) {
  .prize-sheet { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "lead lead" "show tiers"; column-gap: 56px; row-gap: 28px; padding: 40px 48px 44px; }
  .prize-sheet > .lead { grid-area: lead; padding-right: 140px; }   /* the bird perches at the right of the lead */
  .prize-show { grid-area: show; align-self: center; }
  .tiers { grid-area: tiers; align-self: center; }
  .tier { grid-template-columns: 28px minmax(min-content, 1fr) auto; padding: 20px 0; }   /* the name column never narrower than its longest unbreakable run */
  .tier-name { font-size: 28px; }
  .tier-prize { grid-column: 3; margin: 0; text-align: right; }
  .tier-prize .amt { font-size: 28px; }
}

/* ---- The gallery: prints on white; a lit edge runs under a photograph on hover ---- */
.gallery-section { background: var(--sun); color: var(--text); }
.gallery-head p { color: var(--text); max-width: none; }   /* every language breaks after the first sentence (<br>); 52ch had wrapped it early */
/* Last year's theme stays whole on one line: after the lead-in where it fits, else on a line of its own, shrunk on a phone to
   the line's width. --theme-em is the theme's width in ems (Outfit; zh-TW counts its 「」). */
.gallery-head .theme-name { --theme-em: 19.2; display: inline-block; white-space: nowrap; font-size: min(1em, calc((100vw - 34px) / var(--theme-em))); }
:lang(zh-TW) .gallery-head .theme-name { --theme-em: 19.8; }
@media (min-width: 900px) { .gallery-head { align-items: end; align-items: last baseline; } .gallery-head p { margin: 0; } }   /* the note's last line sits on the heading's baseline */
.mosaic img { background: var(--mount); }
.mosaic figcaption { background: linear-gradient(to top, rgba(42, 32, 39, .72), rgba(42, 32, 39, 0)); }
.mosaic li.t-gold { --tier: #e6c26e; }
.mosaic li.t-silver { --tier: #d8dee4; }
.mosaic li.t-bronze { --tier: #e3a674; }
.mosaic li.t-hm { --tier: rgba(255, 255, 255, .82); }
.mosaic .award { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .01em; text-transform: none; }
.mosaic li:first-child .award { font-size: 19px; }
/* The ranks on the prints, written as in the awards list and struck in the medals' metals: a light face with a darker band
   across its middle, lifted off the photograph by a close shadow */
.mosaic li { --metal: linear-gradient(180deg, #fff, #f1f1f1 44%, #c9c9c9 56%, #fff); }
.mosaic li.t-gold { --metal: linear-gradient(180deg, #fff4c2, #f0c95a 44%, #b7861f 56%, #ffe08a); }
.mosaic li.t-silver { --metal: linear-gradient(180deg, #ffffff, #dfe5ea 44%, #9aa4ae 56%, #f2f5f8); }
.mosaic li.t-bronze { --metal: linear-gradient(180deg, #ffe7d0, #e3a06a 44%, #a8602c 56%, #f6c79c); }
.mosaic li.t-hm { --metal: linear-gradient(180deg, #fff0fb, #ff9be6 44%, #e04fb6 56%, #ffd0f2); }   /* a light brand magenta, as its medal */
.mosaic .award { background: var(--metal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; width: fit-content; filter: drop-shadow(0 1px 1px rgba(20, 8, 14, .7)) drop-shadow(0 0 6px rgba(20, 8, 14, .35)); }
.mosaic a::before, .mosaic a::after { display: none; }
/* On hover a lit edge runs along the bottom from the left and along the top from the right */
.mosaic figure::before, .mosaic figure::after {
  top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 3px; border: 0; z-index: 1;
  background: var(--grad-line); opacity: 0; transform: scaleX(.2); transform-origin: 0 50%;
  transition: opacity .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.mosaic figure::before { top: 0; bottom: auto; transform-origin: 100% 50%; }
.mosaic li:is(:hover, :focus-within) figure::before,
.mosaic li:is(:hover, :focus-within) figure::after { opacity: 1; transform: none; }
/* The layout and motion section lists ".mosaic .reveal" after ".reveal.in", so a revealed print stays at 94%; here it settles to full size */
@media (prefers-reduced-motion: no-preference) { .mosaic .reveal.in { transform: none; } }

/* ---- Footer ---- */
.site-footer { position: relative; background: var(--footer); border-top: 0; color: var(--muted); }
/* The header sits outside the design tokens, so its links, focus ring and language menu are set here in the brand palette:
   ink text (brand red is 3.6:1 on white, short of 4.5:1 for this size), a brand-red underline on hover, and the chosen
   language marked by a gradient bar with a pale rose hover ground. */
.site-header { --gold: #2a2027; --gold-deep: #2a2027; }
.nav-list > li > a:hover { color: #2a2027; text-decoration: underline 2px #ff324b; text-underline-offset: 6px; }
.lang-menu button:hover { color: #2a2027; background: #fff0f3; }
.lang-menu button[aria-selected="true"] { color: #2a2027; font-weight: 600; background: linear-gradient(#ff02cb, #ff324b, #ff8a02) 0 0 / 3px 100% no-repeat; }
.lang-menu button[aria-selected="true"]:hover { background: linear-gradient(#ff02cb, #ff324b, #ff8a02) 0 0 / 3px 100% no-repeat, #fff0f3; }
/* The brand gradient as a thin strip where the header meets the KV (this rule) and where the page meets the footer (.site-footer::before) */
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: -1; height: 4px; background: linear-gradient(100deg, #ff02cb, #ff324b, #ff8a02); pointer-events: none; }   /* under the language menu and the phone menu, over the header's own ground */
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad-line); }
.site-footer a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--edge); text-underline-offset: 4px; }
.site-footer a:hover { text-decoration-color: var(--ink); }
.site-footer .social a { text-decoration: none; }
.site-footer .cc-open { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--edge); text-underline-offset: 4px; }
.site-footer .cc-open:hover { text-decoration-color: var(--ink); }
/* The cookie banner and preferences (vanilla-cookieconsent, appended to <body>, so outside the page-body tokens): the page's
   ink on its sheet, a deeper brand red for the buttons (white on #ff324b is 3.6:1, on #d81f3c 5.0:1) */
#cc-main {
  --cc-font-family: var(--font);
  --cc-bg: #fffdfa; --cc-primary-color: #2a2027; --cc-secondary-color: #6c5a64; --cc-link-color: #2a2027;
  --cc-btn-primary-bg: #d81f3c; --cc-btn-primary-border-color: #d81f3c; --cc-btn-primary-color: #fff;
  --cc-btn-primary-hover-bg: #b0123c; --cc-btn-primary-hover-border-color: #b0123c; --cc-btn-primary-hover-color: #fff;
  --cc-btn-secondary-bg: #fffdfa; --cc-btn-secondary-border-color: #8f7d88; --cc-btn-secondary-color: #2a2027;
  --cc-btn-secondary-hover-bg: #f6e8e1; --cc-btn-secondary-hover-border-color: #2a2027; --cc-btn-secondary-hover-color: #2a2027;
  --cc-toggle-on-bg: #d81f3c; --cc-separator-border-color: rgba(42, 32, 39, .14);
  --cc-cookie-category-block-bg: #f6e8e1; --cc-cookie-category-block-hover-bg: #f1ddd3;
}

/* ---- Entry form: a sunlit sheet over a warm haze, lit along its top edge. The fields light up
   (a gradient border) when they take focus. ---- */
dialog::backdrop { background: rgba(255, 238, 228, .8); backdrop-filter: blur(6px); }
.modal > * {
  color: var(--text); background: var(--sheet); border: 0; border-radius: 3px; outline: 0;
  box-shadow: 0 2px 6px rgba(120, 40, 60, .12), 0 30px 80px -10px rgba(120, 40, 60, .3);
}
.modal .frame::before { top: 0; left: 0; right: 0; width: auto; height: 5px; border: 0; background: var(--grad-line); border-radius: 3px 3px 0 0; transform: none; }
.modal .frame::after { display: none; }
.modal h2 { font-size: clamp(28px, 3vw, 38px); border-bottom-color: var(--line); }
.close { color: var(--muted); }
.close:hover { color: var(--ink); }
.field { color: var(--ink); }
.field input:not([type="checkbox"]):not(.file-input), .field select, .field textarea {
  color: var(--ink); background: #fff; border: 1px solid var(--edge); border-radius: 3px; box-shadow: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
/* The focus and error states name the fields as the rule above does, so they outrank it (they lost to it, and the focus
   gradient border never showed) */
.field :is(input:not([type="checkbox"]):not(.file-input), select, textarea):focus {
  border: 2px solid transparent; padding: 9px 13px;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
  box-shadow: 0 0 0 4px rgba(42, 32, 39, .08);
}
.field.invalid :is(input:not([type="checkbox"]):not(.file-input), select, textarea, .file-zone) { border-color: var(--err); }
:is(.err, .form-error) { color: var(--err); }
.combo-list { background: #fff; border-color: rgba(42, 32, 39, .16); box-shadow: 0 12px 28px rgba(120, 40, 60, .18); color: var(--ink); }
.combo-list li:is(:hover, [aria-selected="true"]) { background: var(--noon-warm); }
.combo-list mark { color: var(--ink); text-decoration: underline 2px var(--accent); text-underline-offset: 3px; }
.file-zone { border: 1px dashed var(--edge); border-radius: 3px; background: transparent; color: var(--text); }
.file-zone:is(:hover, .drag) { border-color: var(--ink); background: rgba(42, 32, 39, .04); }
.file-input:focus-visible + .file-zone { outline-color: var(--ink); }
.file-zone.has-file { color: var(--ink); }
.file-btn { color: var(--ink); border-color: var(--ink); border-radius: 3px; font-weight: 600; }
/* The entry form on phones: one screen on a 390 x 844 phone and larger, as the larger type made it 196 px taller. The type stays;
   the spacing tightens, the upload hint takes 17 px (two lines beside Browse) and the description box starts at three lines. Inputs stay
   47 px tall (touch) and 18 px text (iOS zooms below 16 px). */
@media (max-width: 700px) {
  .modal { width: calc(100% - 20px); max-height: calc(100svh - 20px); }
  #entry > .entry { padding: 22px 18px; }
  #entry h2 { margin-bottom: 14px; padding-bottom: 10px; }
  #entry .fields { gap: 12px; }
  #entry .field { gap: 4px; }
  #entry :is(.field input:not([type="checkbox"]):not(.file-input), .field select, .field textarea) { padding-block: 8px; }
  #entry :is(.field input:not([type="checkbox"]):not(.file-input), .field select, .field textarea):focus { padding-block: 7px; }   /* the 2 px focus border, same outer size */
  #entry .field textarea { min-height: calc(4.8em + 18px); max-height: min(50svh, calc(19.2em + 18px)); min-height: calc(3lh + 18px); max-height: min(50svh, calc(12lh + 18px)); }
  #entry .file-zone { padding-block: 8px; }
  #entry .file-name { font-size: 17px; }
  #entry .actions { margin-top: 18px; }
}
.check { color: var(--text); }
.check a { color: var(--ink); font-weight: 600; border: 0; text-decoration: underline 1.5px; text-decoration-color: var(--edge); text-underline-offset: 4px; }
.check a:hover { color: var(--title); text-decoration-color: var(--title); }
.check input { accent-color: var(--title); }

/* Lightbox: the print on a white mount over the warm haze */
.lightbox figure { background: #fff; box-shadow: 0 30px 80px -10px rgba(120, 40, 60, .3); }
.lightbox figcaption { color: var(--ink); }
.lightbox .close { color: var(--ink); }
.lightbox figure::before, .lightbox figure::after { display: none; }

/* Language iris: blades of the gradient (#iris-fill in script.js reads --g1..--g3), white seams */
.iris :is(.barrel, .blade) { fill: url(#iris-fill); }
.iris .rim { stroke: rgba(255, 255, 255, .35); }
.iris .seam { stroke: rgba(255, 255, 255, .55); }
.iris .lip { stroke: rgba(255, 255, 255, .45); }

/* Reduced motion: the lit edges and the button still change, they just do not move */
@media (prefers-reduced-motion: reduce) {
  .btn-brand, .btn-brand:is(:hover, :focus-visible) { transform: none; transition: none; }
  .mosaic figure::before, .mosaic figure::after { transform: none; transition: none; }
}

/* Short zh-TW blocks break at punctuation, spaces and <wbr> only, never inside a word ("選出|的作品"), and balance their lines
   so none ends with a stray word or two; a run too long for the line still breaks (overflow-wrap). Words that must stay together
   (ADATA Instagram) carry no-break spaces in the copy. */
:lang(zh-TW) :is(h2, h3, dt, .tier-name, .gallery-head p, .pillars dd, .dates dd, .note, .steps li span, .prize-show figcaption span, .file-name) { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
/* The zh-TW intro paragraph starts each sentence on a new line (script.js info.p); it breaks between any two characters, as
   Chinese setting does, justified to both edges with the last line of each sentence ragged (W3C clreq 6.2) */
.intro-p .sentence { display: block; }
/* Traditional Chinese headings and buttons: a little open tracking */
:lang(zh-TW) :is(h2, h3, .display, .display-sm, .tier-name, .pillars dt, .steps li::before) { letter-spacing: .04em; font-weight: 700; }
:lang(zh-TW) .tiers .tier-name { letter-spacing: -.015em; word-break: normal; overflow-wrap: normal; }   /* the rank names stay English in zh-TW; the tracking and the breaking above are for Chinese and would split an English rank name on laptops */
:lang(zh-TW) .display { font-size: clamp(38px, 5.4vw, 76px); line-height: 1.16; max-width: 12em; }
/* The intro heading's second line (都訴說著一個故事) is 632 px at 76 px, 2 px over its column: it takes 40 px of the 80 px gap */
@media (min-width: 900px) { :lang(zh-TW) .intro .display { margin-right: -40px; } }
:lang(zh-TW) h2 { line-height: 1.18; }
:lang(zh-TW) :is(h2, h3, .display) { word-break: keep-all; }   /* break at the punctuation, not inside a phrase */
:lang(zh-TW) :is(.btn-brand, .btn-ghost) { letter-spacing: .08em; }
/* Japanese: Noto Sans JP, so kanji take their Japanese forms; headings break between phrases (auto-phrase), never inside one */
:root:lang(ja) { --font: "Outfit", "Noto Sans JP Subset", "Noto Sans JP", "Noto Sans", Arial, sans-serif; }
:lang(ja) .display { font-size: clamp(36px, 4.8vw, 68px); line-height: 1.2; }
:lang(ja) :is(h2, h3, .display) { word-break: auto-phrase; }

/* Button labels: white on the light end of the gradient is 2.1 to 3.0:1, so the label keeps a thin dark outline in the brand
   palette; the white edge then reads against the outline at 7:1 or better anywhere on the bevel. */
.btn.btn-brand { color: #fff; }
.btn.btn-brand > span { -webkit-text-stroke: 2px var(--btn-outline); paint-order: stroke fill; text-shadow: 0 1px 3px var(--btn-outline-soft); }

/* After the entry deadline script.js marks every entry button aria-disabled: it stays in place, dimmed, and opens nothing */
.js-open-form[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.js-open-form[aria-disabled="true"] .btn-bg, .js-open-form[aria-disabled="true"] .gb-sheen { filter: none; animation: none; }