/* ==========================================================================
   Submission Requirements — Chinese Language Festival
   ========================================================================== */

.submission-page{background:linear-gradient(180deg,var(--cream) 0%,#fffaf1 46%,#f8efe2 100%)}
.submission-page .writing-hero{
  background:
    radial-gradient(circle at 88% 15%,rgba(233,170,87,.28),transparent 24%),
    radial-gradient(circle at 13% 88%,rgba(217,73,118,.18),transparent 31%),
    linear-gradient(135deg,#1d5149 0%,#143a34 52%,#08231f 100%);
}
.submission-page .writing-hero::after{
  content:"要";right:-.035em;top:51%;font-size:clamp(270px,37vw,540px);
  color:rgba(255,255,255,.032);
}
.submission-page .writing-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.15;
  background-image:url("../img/design/patterns/fret-teal.svg");background-size:480px 160px;
  -webkit-mask-image:linear-gradient(115deg,transparent 5%,#000 32%,#000 74%,transparent 100%);
  mask-image:linear-gradient(115deg,transparent 5%,#000 32%,#000 74%,transparent 100%);
  animation:submissionPattern 62s linear infinite;
}
.submission-page .writing-hero__eyebrow{color:#f2c87d}
.submission-page .writing-hero__lead{max-width:64ch}
.submission-hero__panel{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.065));
}
.submission-hero__panel::after{
  content:"禮";position:absolute;right:-.04em;bottom:-.27em;pointer-events:none;
  color:rgba(255,255,255,.045);font-family:Georgia,"Songti TC","Noto Serif TC",serif;
  font-size:156px;line-height:1;font-weight:700;
}
.submission-hero__panel .writing-hero__numbers{position:relative;z-index:1}
.submission-hero__panel .writing-hero__number{position:relative}
.submission-hero__panel .writing-hero__number strong{background-size:100% 100%}
.submission-hero__panel-note{
  position:relative;z-index:1;display:flex;align-items:flex-start;gap:10px;
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.13);
  color:rgba(251,245,234,.64);font-size:12.5px;line-height:1.65;
}
.submission-hero__panel-note::before{
  content:"✦";flex:0 0 auto;color:#f2c87d;font-size:14px;line-height:1.45;
}

.submission-section{padding-top:clamp(72px,9vw,126px)}
.submission-section__head{max-width:900px}
.submission-section__head h2{text-wrap:balance}
.submission-section__head > p:last-child{max-width:70ch;margin-top:18px;color:var(--muted);font-size:clamp(15px,1.55vw,18px)}
.submission-rules{
  display:grid;grid-template-columns:1fr;gap:16px;margin-top:clamp(38px,5vw,60px);
}
@media(min-width:820px){.submission-rules{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media(min-width:1120px){.submission-rules{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.submission-rule{
  --rule-accent:#337f79;--rule-soft:#e9f3f0;
  position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-start;gap:17px;
  min-width:0;min-height:164px;padding:24px 24px 23px;
  border:1px solid rgba(83,119,111,.16);border-radius:24px;
  background:rgba(255,255,255,.91);box-shadow:0 24px 64px -48px rgba(11,28,27,.8);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .35s var(--ease-soft),background .35s var(--ease-soft);
}
.submission-rule:nth-child(4n+1){--rule-accent:#d94976;--rule-soft:#fdebf1}
.submission-rule:nth-child(4n+2){--rule-accent:#337f79;--rule-soft:#e7f2ef}
.submission-rule:nth-child(4n+3){--rule-accent:#c58a43;--rule-soft:#fbf1df}
.submission-rule:nth-child(4n+4){--rule-accent:#735c91;--rule-soft:#f0ecf6}
.submission-rule::before{
  content:"";position:absolute;inset:0 auto 0 0;width:5px;
  background:linear-gradient(180deg,var(--rule-accent),color-mix(in srgb,var(--rule-accent) 42%,#ffffff));
}
.submission-rule::after{
  content:attr(data-mark);position:absolute;right:13px;bottom:-22px;z-index:-1;pointer-events:none;
  color:var(--rule-accent);opacity:.055;font-family:Georgia,"Songti TC","Noto Serif TC",serif;
  font-size:76px;line-height:1;font-weight:700;transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.submission-rule:hover{
  transform:translateY(-6px);border-color:color-mix(in srgb,var(--rule-accent) 38%,transparent);
  background:#fff;box-shadow:0 34px 78px -48px color-mix(in srgb,var(--rule-accent) 48%,#17332f);
}
.submission-rule:hover::after{opacity:.1;transform:translate(-4px,-4px) scale(1.04)}
.submission-rule__num{
  display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:15px;
  border:1px solid color-mix(in srgb,var(--rule-accent) 26%,#ffffff);
  background:var(--rule-soft);color:var(--rule-accent);
  font-family:Georgia,"Songti TC","Noto Serif TC",serif;font-size:17px;font-weight:760;line-height:1;
  box-shadow:0 10px 24px -18px color-mix(in srgb,var(--rule-accent) 70%,transparent);
}
.submission-rule__body{position:relative;z-index:1;min-width:0;padding-top:2px}
.submission-rule__text{
  color:#243b37;font-size:15.4px;font-weight:570;line-height:1.76;letter-spacing:-.004em;
}
.submission-rule:first-child,.submission-rule:last-child{grid-column:1/-1}
.submission-rule:first-child .submission-rule__text,.submission-rule:last-child .submission-rule__text{max-width:96ch}
html.lang-en .submission-rule__text{font-size:15.6px;line-height:1.72;letter-spacing:-.008em}
html.lang-en .submission-rule__num{font-family:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,sans-serif;font-size:15px}

.submission-note{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  margin-top:28px;padding:22px 24px;border:1px solid rgba(83,119,111,.16);border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(247,237,223,.82));
  box-shadow:0 24px 60px -48px rgba(11,28,27,.82);
}
.submission-note__icon{
  display:grid;place-items:center;width:46px;height:46px;border-radius:15px;
  background:var(--ink);color:#f1c779;font-size:18px;font-weight:800;
  box-shadow:0 14px 30px -20px rgba(11,28,27,.95);
}
.submission-note h3{font-size:17px;font-weight:740;color:var(--ink)}
.submission-note p{margin-top:5px;color:var(--muted);font-size:13.5px;line-height:1.68}
.submission-note__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}
.submission-note__actions .btn{padding:10px 17px;font-size:13.5px}

@keyframes submissionPattern{
  from{background-position:0 0}
  to{background-position:260px 130px}
}
@media(max-width:819px){
  .submission-rule{min-height:0;padding:21px 20px 21px 22px;border-radius:20px}
  .submission-rule:first-child,.submission-rule:last-child{grid-column:auto}
  .submission-rule__num{width:40px;height:40px;border-radius:13px;font-size:15px}
  .submission-rule__text{font-size:14.8px;line-height:1.7}
  html.lang-en .submission-rule__text{font-size:15px}
  .submission-note{grid-template-columns:1fr;padding:19px}
  .submission-note__actions .btn{width:100%}
}
@media(max-width:520px){
  .submission-rule{gap:13px;padding:18px 16px 18px 18px}
  .submission-rule::before{width:4px}
  .submission-rule__num{width:36px;height:36px;border-radius:12px;font-size:14px}
  .submission-rule__text{font-size:14.2px;line-height:1.68}
  html.lang-en .submission-rule__text{font-size:14.3px;line-height:1.68}
}
@media(prefers-reduced-motion:reduce){
  .submission-page .writing-hero::before{animation:none!important}
  .submission-rule,.submission-rule::after{transition:none!important}
  .submission-rule:hover{transform:none}
}