@charset "UTF-8";
/*
Theme Name: u18cc2026
Description: Theme for All-Japan High School NANDEMO-ARI Creative Award 2026
Author: thirozumi
Author URI:
Version: 1.0
License: GNU/GPL Version 2 or later.
License URI: http://www.gnu.org/licenses/gpl.html
Tags:
Text Domain: u18cc2026
*/

/* =========================================================================
   Custom Properties
   ========================================================================= */
:root {
  --brand-primary: #00BEFF;
  --brand-secondary: #FF0000;
  --text-light: #fff;
  --text-dark: #000;
  --text-default: var(--text-dark);

  --prize-gold: #af9500;
  --prize-silver: #808080;
  --prize-bronze: #6a3805;

  --font-family-default: dnp-shuei-gothic-gin-std, Roboto, sans-serif;
  --font-family-bold: var(--font-family-default);
  --font-weight-default: 400;
  --font-weight-bold: 600;

  --font-size-ultra: 4rem;
  --font-size-max: 2.8rem;
  --font-size-huge: 2.4rem;
  --font-size-xl: 2rem;
  --font-size-lg: 1.8rem;
  --font-size-md: 1.6rem;
  --font-size-sm: 1.4rem;
  --font-size-xs: 1.2rem;
  --font-size-tiny: 1rem;
}

/* =========================================================================
   Reset (minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css)
   ========================================================================= */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend,
textarea, pre, iframe, hr,
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
ul { list-style: none; }
button, input, select, textarea { margin: 0; }
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
img, video { height: auto; max-width: 100%; }
iframe { border: 0; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
td:not([align]), th:not([align]) { text-align: left; }

/* =========================================================================
   Scaffolding
   ========================================================================= */
html, body { height: 100%; }

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-size: var(--font-size-md);
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-default);
  line-height: 1.75;
  color: var(--text-default);
  font-feature-settings: "palt" 0;
  font-kerning: normal;
}

a {
  color: var(--brand-primary);
  &:hover { text-decoration: none; }
}

b, strong {
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-bold);
}

h1, h2, h3, h4, h5, h6 {
  font-feature-settings: "palt" 1;
  font-kerning: auto;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-bold);
  line-height: 1.4;
  margin: 2em 0 1em;
  & small { font-size: 70%; }
}

h1 { font-size: var(--font-size-huge); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }

h4, h5, h6 {
  margin: 1.5em 0 0.7em;
  font-size: var(--font-size-md);
}

p, ul, ol, dl, iframe, figure, table, form { margin: 0 0 1em; }
ol { padding-left: 1.5em; }
ul { list-style: none; }

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* =========================================================================
   Utilities
   ========================================================================= */
.text__small { font-size: var(--font-size-sm); line-height: 1.6; }
.text__center { text-align: center; }
.v__loose { margin-top: 2em; margin-bottom: 2em; }
.v__cozy { margin-top: 1.5em; margin-bottom: 1.5em; }
.v__tighten { margin-top: 0.5em; margin-bottom: 0.5em; }
.v__gapless { margin-top: 0; margin-bottom: 0; }

.no_posts { margin: 0 10px; }

.show__portrait { display: block; }
.show__landscape { display: none; }
@media (min-width: 992px) {
  .show__portrait { display: none; }
  .show__landscape { display: block; }
}

/* =========================================================================
   Layout
   ========================================================================= */
body {
  display: flex;
  flex-direction: column;  
  padding-top: 64px;
  @media (min-width: 992px) {
    padding-top: 0;
  }
  &.home {
    padding-top: 0;
    background-color: var(--brand-secondary);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 0;
    color: var(--text-light);
    & a { color: var(--text-light); }
  }
}

body.single-movies main {
  min-height: calc((100vh - 64px) - 28.125vw);
  @media (min-width: 992px) {
    min-height: calc((100vh - 48px) - 28.125vw);
  }
}

header {
  background-color: var(--brand-secondary);

  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;

  & *[class^="button"] {
    display: none;
    body.home & { display: flex; }
    position: absolute;
    bottom: 0;
    z-index: 3;
  }

  & img {
    &.logo__mobile {
      display: block;
      width: 176px;
      height: 44px;
    }
    &.logo__desktop {
      display: none;
    }
  }

  @media (min-width: 992px) {
    z-index: 1;
    width: 50%;
    height: 100%;

    & *[class^="button"] {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      left: 20px;
      bottom: 20px;
      width: 120px;
      height: 120px;
      padding: 0;
      font-size: var(--font-size-md);
      line-height: 1.4;
      & span { display: block; }
    }

    & img {
      margin: 0 auto;
      max-width: 1024px;
      padding: 60px;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: 50% 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;

      &.logo__mobile { display: none; }
      &.logo__desktop { display: block; }
    }
  }

  body.home & {
    position: relative;
    height: auto;
    padding: 68px 8px 96px;

    & img {
      &.logo__mobile { display: none; }
      &.logo__desktop { display: block; }
    }

    @media (min-width: 992px) {
      position: fixed;
      height: 100%;
      padding: 0;
    }
  }
}

@media (min-width: 992px) {
  .poster, .pagination, main, footer {
    width: 50%;
    margin-left: 50%;
  }
}

.poster {
  position: relative;
  aspect-ratio: 16 / 9;
  & > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  & > img { object-fit: cover; }
}

main {
  flex: 1;
}

main, footer {
  padding-left: 20px;
  padding-right: 20px;
  @media (min-width: 992px) {
    padding-left: 60px;
    padding-right: 60px;
  }
}

footer {
  margin-top: 4em;
  text-align: center;
  & .container {
    padding-top: 15px;
    padding-bottom: 15px;
    @media (min-width: 992px) {
      padding-top: 20px;
      padding-bottom: 20px;
    }
  }
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 576px;
  @media (min-width: 992px) {
    max-width: 1024px;
  }
  & a { word-break: break-all; }
}

/* =========================================================================
   Buttons
   ========================================================================= */
.button {
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-bold);
  display: inline-block;
  padding: 0.25em 1.5em;
  border-radius: 99px;
  text-decoration: none;
  border: 1px solid var(--brand-primary);
  background: #fff;
  color: var(--brand-primary);

  & + .button {
    margin-top: 1em;
    @media (min-width: 992px) {
      margin-left: 10px;
    }
  }
  .home & { border-color: #fff; }
}

.button__inactive { opacity: 0.8; }

.button__sm {
  font-size: var(--font-size-sm);
  padding: 0.1em 1.25em;
  &.button__down:after,
  &.button__up:after {
    width: 9px;
    height: 5px;
  }
}

.button__lg {
  font-size: var(--font-size-lg);
  padding: 0.5em 2em;
}

.button__down,
.button__up {
  &:after {
    vertical-align: middle;
    margin-left: 0.5em;
    margin-right: -0.5em;
    display: inline-block;
    content: "";
    width: 16px;
    height: 8px;
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
  }
}

.button__down:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%228%22%20viewBox%3D%220%200%2014%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.203%200.329588C12.401%200.109862%2012.6484%200%2012.9453%200C13.2422%200%2013.4897%200.109862%2013.6876%200.329588C13.8855%200.529339%2013.9895%200.774031%2013.9994%201.06367C14.0093%201.35331%2013.9053%201.598%2013.6876%201.79775L7.74938%207.67041C7.55144%207.89014%207.30401%208%207.0071%208C6.71019%208%206.46276%207.89014%206.26482%207.67041L0.326602%201.79775C0.108867%201.598%200%201.35331%200%201.06367C0%200.774031%200.108867%200.529339%200.326602%200.329588C0.524544%200.109862%200.771968%200%201.06888%200C1.36579%200%201.61322%200.109862%201.81116%200.329588L7.0071%205.1236L12.203%200.329588Z%22%20fill%3D%22%2300ee00%22%2F%3E%3C%2Fsvg%3E");
}

.button__up:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%228%22%20viewBox%3D%220%200%2014%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.79696%207.67041C1.59902%207.89014%201.35159%208%201.05468%208C0.757767%208%200.510344%207.89014%200.312402%207.67041C0.11446%207.47066%200.0105426%207.22597%200.000645596%206.93633C-0.00925139%206.64669%200.0946655%206.402%200.312402%206.20225L6.25062%200.329589C6.44856%200.109863%206.69599%208.05244e-07%206.9929%207.79287e-07C7.28981%207.5333e-07%207.53723%200.109863%207.73518%200.329589L13.6734%206.20225C13.8911%206.402%2014%206.64669%2014%206.93633C14%207.22597%2013.8911%207.47066%2013.6734%207.67041C13.4755%207.89014%2013.228%208%2012.9311%208C12.6342%208%2012.3868%207.89014%2012.1888%207.67041L6.9929%202.87641L1.79696%207.67041Z%22%20fill%3D%22%2300ee00%22%2F%3E%3C%2Fsvg%3E");
}

.button__topics {
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-bold);
  display: inline-block;
  font-size: var(--font-size-lg);
  padding: 0.7em 3em;
  border-radius: 99px;
  text-decoration: none;
  background: var(--brand-primary);
  color: var(--text-light);
  .home & { color: var(--text-light); }
}

a.button {
  &:hover {
    border: 1px solid var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
  }
  .home & {
    border: 1px solid #fff;
    background: #fff;
    color: var(--brand-primary);
    &:hover {
      border: 1px solid var(--brand-primary);
      background: var(--brand-primary);
      color: #fff;
    }
  }
}

a.button__inverted {
  .home & {
    color: #fff;
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    &:hover {
      border-color: #fff;
      background: #fff;
      color: var(--brand-primary);
    }
  }
}

a.button__down:hover:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%228%22%20viewBox%3D%220%200%2014%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.203%200.329588C12.401%200.109862%2012.6484%200%2012.9453%200C13.2422%200%2013.4897%200.109862%2013.6876%200.329588C13.8855%200.529339%2013.9895%200.774031%2013.9994%201.06367C14.0093%201.35331%2013.9053%201.598%2013.6876%201.79775L7.74938%207.67041C7.55144%207.89014%207.30401%208%207.0071%208C6.71019%208%206.46276%207.89014%206.26482%207.67041L0.326602%201.79775C0.108867%201.598%200%201.35331%200%201.06367C0%200.774031%200.108867%200.529339%200.326602%200.329588C0.524544%200.109862%200.771968%200%201.06888%200C1.36579%200%201.61322%200.109862%201.81116%200.329588L7.0071%205.1236L12.203%200.329588Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");
}

a.button__up:hover:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%228%22%20viewBox%3D%220%200%2014%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.79696%207.67041C1.59902%207.89014%201.35159%208%201.05468%208C0.757767%208%200.510344%207.89014%200.312402%207.67041C0.11446%207.47066%200.0105426%207.22597%200.000645596%206.93633C-0.00925139%206.64669%200.0946655%206.402%200.312402%206.20225L6.25062%200.329589C6.44856%200.109863%206.69599%208.05244e-07%206.9929%207.79287e-07C7.28981%207.5333e-07%207.53723%200.109863%207.73518%200.329589L13.6734%206.20225C13.8911%206.402%2014%206.64669%2014%206.93633C14%207.22597%2013.8911%207.47066%2013.6734%207.67041C13.4755%207.89014%2013.228%208%2012.9311%208C12.6342%208%2012.3868%207.89014%2012.1888%207.67041L6.9929%202.87641L1.79696%207.67041Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");
}

.link__pages {
  margin: 2em 0 0;
  text-align: center;
  & .post-page-numbers {
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 38px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 0.1em;
    background: #fff;
    color: var(--brand-primary);
  }
  & a.post-page-numbers {
    text-decoration: none;
    border: 1px solid var(--brand-primary);
    &:hover {
      border-color: #fff;
      background-color: var(--brand-primary);
      color: #fff;
    }
  }
  & span.post-page-numbers {
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-bold);
    border: 1px solid #fff;
  }
}

.view-more-button { border: none; }

/* =========================================================================
   Lists
   ========================================================================= */
.list__default > li {
  position: relative;
  padding-left: 1em;
  &:before {
    content: "\2022";
    display: inline;
    position: absolute;
    left: 0;
  }
}

.list__astarisk > li {
  position: relative;
  padding-left: 1em;
  &:before {
    content: "＊";
    display: inline;
    position: absolute;
    left: 0;
  }
}

.list__footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1;
  gap: 1rem 2rem;
  & > li {
    & > a,
    & > span {
      text-decoration: none;
      display: block;
      & path {
        fill: var(--brand-primary);
        body.home & { fill: var(--text-light); }
      }
      & rect {
        stroke: var(--brand-primary);
        body.home & { stroke: var(--text-light); }
      }
    }
  }
}

.text__info {
  text-align: center;
  padding: 1em;
  border: 2px solid var(--brand-primary);
  .home & { border-color: #fff; }
}

.dl__schedule {
  position: relative;
  & > dt {
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-bold);
    width: 33.3%;
    height: 25%;
    position: absolute;
    left: 0;
    border-top: 1px solid var(--brand-primary);
    &:nth-of-type(1) { top: 12.5%; }
    &:nth-of-type(2) { top: 37.5%; }
    &:nth-of-type(3) {
      top: 62.5%;
      border-bottom: 1px solid var(--brand-primary);
    }
  }
  & > dd {
    border-left: 1px solid var(--brand-primary);
    margin-left: 33.3%;
    padding: 1em 0 0 20px;
    & > dl {
      margin: 0;
      font-weight: var(--font-weight-bold);
      & > dt { font-size: var(--font-size-sm); }
      & > dd { color: var(--brand-primary); }
    }
    & > p {
      font-size: var(--font-size-xs);
      margin: 0;
      padding: 0 0 1em;
    }
  }
}

/* =========================================================================
   Headings
   ========================================================================= */
.page__header {
  transform: scale(0.95, 1);
  transform-origin: top left;
  width: calc(100% / 0.95);
  scroll-margin-top: 64px;
  margin-top: 64px;
  margin-bottom: 1em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--brand-primary);
  font-size: var(--font-size-max);
  .home & { border-color: #fff; }
  .poster + main & { margin-top: 40px; }
}

.heading__prize {
  border-top: 1px solid var(--brand-primary);
  border-bottom: 1px solid var(--brand-primary);
  padding: 0.5em 0;
  margin-top: 3em;
  margin-bottom: 1.5em;
  position: relative;
  .home & { border-color: #fff; }
}

.heading__prize__title {
  text-align: center;
  margin: 0;
}

.heading__prize__badge {
  color: var(--brand-primary);
  font-size: 1rem;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 84 81"><path fill="%23FFFFFF" d="M0.0014888 34.6707C-0.0846631 41.1553 3.57679 48.8503 8.74591 53.7353C7.49671 60.5657 8.91821 68.6065 12.5797 73.7077L19.1703 74.0536L21.6256 80.1923C27.7424 82.0079 35.9268 80.6678 42.0006 77.1229C48.0743 80.6678 56.2587 82.0079 62.3755 80.1923L64.8308 74.0536L71.4214 73.7077C75.0829 68.6065 76.5044 60.5225 75.2552 53.7353C80.4243 48.8503 84.0427 41.1553 83.9996 34.6707L78.7874 30.6071L80.252 24.1658C76.4613 19.4104 69.4399 15.9088 62.7632 15.0874C60.0063 8.47315 54.0618 2.33444 47.902 0.129691L42.3021 3.63135L36.7884 0C30.4562 2.11829 24.2102 8.34345 21.4102 15.0442C14.6473 15.8223 7.53978 19.324 3.70602 24.1225L5.1706 30.5638L0.0014888 34.6707Z" /></svg>') no-repeat center center;
  white-space: no-wrap;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 84px;
  height: 81px;
  & span {
    display: block;
    letter-spacing: normal;
    line-height: 1.33;
  }
  & strong { font-size: 1.8rem; }
  & em {
    font-style: normal;
    font-weight: bold;
  }
}

h3 + .heading__prize__badge {
  width: 63px;
  height: 61px;
  right: 10px;
}

.heading__catch {
  transform: scale(0.95, 1);
  transform-origin: top left;
  display: inline-block;
  font-size: var(--font-size-max);
  line-height: 1;
  margin-bottom: 1em;
  background: var(--brand-primary);
  color: var(--text-dark);
  @media (min-width: 992px) {
    font-size: var(--font-size-ultra);
  }
  .page__header + & { margin-top: .5em; }
  .home & {
    background: var(--text-light);
    color: var(--text-dark);
  }
}

.heading__section {
  border-bottom: 1px solid var(--brand-primary);
  padding-bottom: .5em;
}

.movie__header {
  margin: 1em 0;
  line-height: 1;
  @media (min-width: 992px) {
    margin: 2em 0 1em;
  }
  & a { text-decoration: none; }
  & + * { margin-top: 0; }
  & + h1,
  & + h2,
  & + h3,
  & + h4,
  & + h5,
  & + h6 {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--brand-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.125em;
    text-decoration-skip-ink: none;
  }
}

.movie__title {
  display: inline;
  position: relative;
  margin-left: 2px;
  margin-right: 2px;
  padding: 2px;
  z-index: 1;
  background: var(--brand-primary);
  color: var(--text-light);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-size: var(--font-size-huge);
  font-weight: var(--font-weight-bold);
  overflow: hidden;
  box-shadow: 2px 0 0 var(--brand-primary), -2px 0 0 var(--brand-primary);
  line-height: 1.1;
  .windows & { line-height: 1.4; }
  @media (min-width: 992px) {
    font-size: var(--font-size-max);
  }
}

.movie__team {
  display: inline-block;
  background: var(--text-dark);
  color: var(--text-light);
  margin-left: 2px;
  margin-right: 2px;
  padding: 2px;
  max-width: 100%;
  position: relative;
  z-index: 1;
  font-size: var(--font-size-xs);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 2px 0 0 var(--text-dark), -2px 0 0 var(--text-dark);
  line-height: 1;
  @media (min-width: 992px) {
    font-size: var(--font-size-sm);
  }
  .movie__header & {
    margin-top: .5em;
    overflow: auto;
    text-overflow: clip;
    line-height: 1.3;
    white-space: normal;
  }
}

/* =========================================================================
   Navigation
   ========================================================================= */
.dl__credit {
  position: absolute;
  width: 100%;
  max-width: 640px;
  font-size: var(--font-size-tiny);
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0;
  line-height: 1.4;
  @media (min-width: 992px) {
    padding-left: 40px;
    padding-right: 40px;
  }
  & dt, & dd { display: inline; }
  & dt {
    margin-right: 0.5em;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-bold);
  }
  & dd { margin-right: 1em; }
}

.menu__container {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 640px;
  transform: translate(-50%, -50%);
  top: 45%;
  left: 50%;
  padding: 20px;
  @media (min-width: 992px) {
    left: 25%;
    padding: 30px;
  }
  & .menu {
    margin-top: 1em;
    text-align: center;
    font-size: var(--font-size-huge);
    & a { text-decoration: none; }
  }
}

.nav__primary {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--brand-secondary);
  color: var(--text-light);
  z-index: 11;
  display: none;
  & a {
    color: var(--text-light);
    .home & { color: var(--text-light); }
  }
  @media (min-width: 992px) {
    width: 50%;
  }
}

.nav__primary--open { display: block; }

.icon__menu {
  cursor: pointer;
  position: fixed;
  z-index: 22;
  width: 44px;
  height: 44px;
  top: 8px;
  right: 8px;
  border: none;
  overflow: hidden;
  text-indent: 100%;
  font-size: 0;
  white-space: nowrap;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50%;
  background-image: url(./assets/images/icon__menu__inverted.svg);
  &:focus { outline: none; }
  @media (min-width: 992px) {
    width: 60px;
    height: 60px;
    top: 0;
    left: 0;
    background-color: #fff;
    background-size: 44px;
  }
}

.icon__menu--open {
  background-image: url(./assets/images/icon__menu__inverted--expanded.svg);
}

.menu__result {
  margin: 2em 0;
  position: relative;
  display: flex;
  justify-content: center;
  &:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 1px solid var(--brand-primary);
    z-index: -1;
  }
  & > li {
    margin: 0 10px;
    & > a,
    & > span {
      display: inline-block;
      border: 1px solid var(--brand-primary);
      border-radius: 99px;
      line-height: 1;
      padding: 0.5em 1em;
      text-decoration: none;
      @media (min-width: 992px) {
        padding: 0.5em 2em;
      }
    }
    & > a {
      background: #fff;
      color: var(--brand-primary);
      &:hover {
        background: var(--brand-primary);
        color: #fff;
      }
    }
    & > span {
      background: var(--brand-primary);
      color: #fff;
    }
  }
}

.pagination {
  margin-top: 2em;
  position: -webkit-sticky;
  position: sticky;
  bottom: 20px;
  & a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: .5em;
    width: 60px;
    height: 60px;
    background: var(--text-light);
    border: 1px solid var(--brand-primary);
    border-radius: 50%;
    & img { vertical-align: bottom; }
    &:hover img { opacity: 0.5; }
  }
}

.pagination__container {
  display: flex;
  justify-content: center;
}

.pagination__prev {
  position: absolute;
  right: 50%;
  transform: translateX(-48px);
}

.pagination__next {
  position: absolute;
  left: 50%;
  transform: translateX(48px);
}

.movies__navigation {
  margin-top: 2em;
  text-align: center;
}

/* =========================================================================
   Components
   ========================================================================= */
.partner__items,
.partner__items .wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
/* Lazy Blocks wraps each block in its own div (e.g. .wp-block-lazyblock-partner)
   that sits between .partner__items (or its inner-container) and .partner__item,
   so we apply column widths to the wrapper rather than .partner__item itself.
   `is-layout-flow` neutralizes flex children, so we restore `display: block`. */
.partner__items > [class*="wp-block-lazyblock-"],
.partner__items .wp-block-group__inner-container > [class*="wp-block-lazyblock-"] {
  display: block;
  width: 100%;
  @media (min-width: 992px) {
    width: calc((100% - 2rem) / 2);
  }
}

.archive__items .wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
}
.archive__items .archive__item {
  width: 50%;
}

.dl__app__flow {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid var(--brand-primary);
  .home & { border-color: #fff; }
  & > dt {
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-bold);
    font-size: var(--font-size-lg);
    line-height: 1.6;
    margin-bottom: 0.5em;
  }
  & > dd {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    position: relative;
    padding-left: 1em;
    &:before {
      content: "\2022";
      display: inline;
      position: absolute;
      left: 0;
    }
  }
}

.well {
  display: block;
  padding: 20px;
  margin: 2em 0;
  background: rgba(255, 0, 0, 0.1);
  &:before, &:after {
    content: "";
    display: block;
    clear: both;
  }
  & h3 {
    margin: 0 0 1em;
    padding: 0 0 0.4em;
    border-bottom: 1px solid var(--brand-primary);
    font-size: var(--font-size-xl);
  }
  & h4 { font-size: var(--font-size-md); }
  & .apply__date {
    font-size: var(--font-size-xl);
    color: var(--brand-primary);
  }
  .home & {
    background: #fff;
    color: var(--text-dark);
    & a {
      color: var(--brand-primary);
      text-decoration: none;
    }
  }
}

.judge__item {
  margin: 1em 0;
}

.judge__item__profile {
  display: flex;
}

.judge__item__profile__portrait {
  width: 120px;
  aspect-ratio: 1 / 1;
  margin: 0 20px 0 0;
  @media (min-width: 992px) {
    width: 160px;
    margin: 0 40px 0 0;
  }
  & > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.judge__item__profile__summary {
  flex: 1;
  margin: 0;
  & dt {
    font-size: var(--font-size-xs);
    & strong, & small { display: block; }
    & small {
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-bold);
      font-family: var(--font-family-bold);
    }
    & strong { font-size: var(--font-size-xl); }
  }
  & dd {
    font-size: var(--font-size-sm);
    margin-top: 1em;
  }
}

.judge__item__control {
  display: flex;
  justify-content: center;
  margin: 1em 0 0;
  & > li {
    margin-right: 10px;
    &:last-child { margin-right: 0; }
    &.active a { cursor: default; }
  }
}

.judge__item__content {
  margin: 1.5em 0 3em;
  font-size: var(--font-size-sm);
}

.judge__item__content__message,
.judge__item__content__profile {
  background: rgba(255, 0, 0, 0.1);
  padding: 2em 2em 1em;
  border-radius: 40px;
  border-top-left-radius: 8px;
}

.partner__item {
  margin-bottom: 1em;
  width: 100%;
}

.partner__item__poster {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  & > img {
    display: block;
    max-width: 160px;
    max-height: 97px;
  }
}

.partner__item__poster__cover {
  border: 1px solid var(--brand-primary);
  aspect-ratio: 16 / 9;
  & > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.partner__item__name {
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-bold);
  font-size: var(--font-size-lg);
}

.partner__item__content {
  font-size: var(--font-size-sm);
}

.tabs__control,
.toggle__control {
  & > li {
    & > a {
      white-space: nowrap;
      &:after {
        margin-left: 0.5em;
        margin-right: -0.5em;
        display: inline-block;
        content: "\2B";
      }
    }
    &.active > a {
      background: var(--brand-primary);
      color: #fff;
      &:after { content: "\2212"; }
    }
  }
}

.tabs__content,
.toggle__content {
  display: none;
  &.active { display: block; }
}

.wp-block-separator {
  margin: 3em 0;
  border-width: 0;
  border-top: 1px solid var(--brand-primary);
  .home & { border-top-color: #fff; }
}

.comments { display: none; }

.comment {
  margin: 1em 0;
  display: flex;
  flex-direction: column;
  &:nth-child(even) .comment__author > p {
    flex-direction: row-reverse;
  }
}

.comment__bubble {
  background: rgba(255, 0, 0, 0.1);
  border-radius: 10px;
  padding: 1.5em 1.5em 0.5em;
  font-size: 1.4rem;
}

.comment__author {
  margin-top: 0.75em;
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 3.2rem;
  & > p {
    display: flex;
    flex-direction: row;
  }
  & img {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    margin: 0 0.75em;
  }
}

.leads { margin-bottom: 76px; }

.lead {
  transform: scale(0.95, 1);
  transform-origin: top left;
  width: calc(100% / 0.95);
  font-weight: var(--font-weight-bold);
  @media (min-width: 992px) {
    font-size: var(--font-size-lg);
  }
}

.wp-embed-aspect-16-9 {
  margin: 1.5em 0;
  & .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    & iframe {
      position: absolute;
      inset: 0;
      width: 100% !important;
      height: 100% !important;
    }
  }
}

.alignright {
  float: right;
  margin: 0 0 1em 1em;
}

/* =========================================================================
   Cards
   ========================================================================= */
.card__container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
  & .card__square {
    width: calc(50% - 20px);
    margin: 0 10px 20px;
    aspect-ratio: 1/1;
  }
}

.card__square {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  & > [class^='label'] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    pointer-events: none;
  }
  & > a:hover .card__square__img {
    filter: none;
    transform: scale(1.01);
  }
  &.gold {
    width: calc(100% - 20px);
    aspect-ratio: 16 / 9;
    & .movie__title {
      font-size: var(--font-size-huge);
      @media (min-width: 992px) {
        font-size: var(--font-size-max);
      }
    }
    & .movie__team {
      font-size: var(--font-size-sm);
      @media (min-width: 992px) {
        font-size: var(--font-size-md);
      }
    }
  }
}

.card__square__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  transition: all .1s linear;
  filter: grayscale(100%);
}

.card__square__info {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: calc(100% - 20px);
  z-index: 1;
  line-height: 1;
  & .movie__title {
    font-size: var(--font-size-xl);
    @media (min-width: 992px) {
      font-size: var(--font-size-huge);
    }
  }
}

.card__swiper {
  cursor: pointer;
  &:hover .card__square__img {
    filter: none;
    transform: scale(1.01);
  }
}

/* =========================================================================
   Modal
   ========================================================================= */
.modal {
  position: fixed;
  top: 40px;
  height: 100%;
  z-index: 99;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  left: 0;
  width: 100%;
  transition: all .25s ease-out;
  @media (min-width: 992px) {
    left: 50%;
    width: 50%;
  }
  &.is-show {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    top: 0;
  }
  & .movie__content {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px;
    @media (min-width: 992px) {
      padding: 0 40px;
    }
  }
  & .movie__header:hover { opacity: .8; }
  & .movie__title {
    background: var(--text-light);
    color: var(--brand-primary);
    font-weight: var(--font-weight-bold);
  }
  & .movie__video {
    position: relative;
    aspect-ratio: 16 / 9;
    & > * {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
  }
  & .movie__poster {
    position: relative;
    aspect-ratio: 16 / 9;
    & iframe, & img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      object-fit: cover;
    }
  }
}

.modal__nav {
  position: absolute;
  width: 100%;
  bottom: 20px;
  display: flex;
  justify-content: center;
  z-index: 2;
  & > * { margin: 0 8px; }
}

.modal__fg {
  position: absolute;
  width: 100%;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.modal__bg {
  position: absolute;
  background: var(--brand-primary);
  width: 100%;
  height: 100vh;
  z-index: 1;
}

/* =========================================================================
   Labels (prize)
   ========================================================================= */
.label,
.label__gold,
.label__silver,
.label__bronze {
  pointer-events: none;
  display: inline-block;
  padding: 4px;
  border-radius: 4px;
  line-height: 1;
  background: var(--text-light);
  margin-bottom: .5em;
  font-size: var(--font-size-lg);
  color: var(--text-light);
}

.label__gold { background: var(--prize-gold); }
.label__silver { background: var(--prize-silver); }
.label__bronze { background: var(--prize-bronze); }

*[class^=card] .label { margin-bottom: 0; }

/* =========================================================================
   Prize comment
   ========================================================================= */
.prize__comment {
  margin: 0 0 2em;
  display: flex;
  flex-direction: column;
  @media (min-width: 992px) {
    flex-direction: row-reverse;
    align-items: flex-end;
  }
}

.prize__comment__message {
  background: rgba(255, 0, 0, 0.1);
  padding: 1.5em 1.5em .5em;
  border-radius: 24px;
  border-bottom-left-radius: 8px;
  margin: 0 0 .5em 40px;
  font-size: var(--font-size-sm);
  @media (min-width: 992px) {
    margin: 0;
    flex: 1;
    align-self: stretch;
  }
}

.prize__comment__judge {
  display: flex;
  align-items: center;
  margin: 0;
  & > dt {
    margin-right: .5em;
    & > img {
      max-width: 40px;
      border-radius: 50%;
      border: 2px solid var(--brand-primary);
    }
    @media (min-width: 992px) {
      margin-right: 0;
      & > img {
        margin-bottom: .5em;
        max-width: 60px;
      }
    }
  }
  & > dd {
    flex: 1;
    font-weight: bold;
    font-size: var(--font-size-sm);
    line-height: 1.3;
  }
  @media (min-width: 992px) {
    flex-direction: column;
    align-items: center;
    width: 15%;
    margin: 0 2.5%;
    text-align: center;
  }
}

/* =========================================================================
   Alert
   ========================================================================= */
.alert {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  color: #fff;
  text-align: center;
  background-color: #00ee00;
  & p { margin: 0; }
  & a {
    display: block;
    color: #fff;
    text-decoration: underline;
  }
  @media (min-width: 992px) {
    position: fixed;
    width: 50%;
    & a { display: inline; }
  }
}

/* =========================================================================
   Swiper button (theme override of swiper-bundle)
   ========================================================================= */
.swiper-button {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0.5em;
  width: 60px;
  height: 60px;
  background: var(--text-light);
  border: 1px solid var(--brand-primary);
  border-radius: 50%;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  & img {
    vertical-align: bottom;
    user-select: none;
  }
  &:hover img { opacity: 0.5; }
}

/* =========================================================================
   Result
   ========================================================================= */
.result__title {
  display: inline-block;
  background: var(--text-light);
  color: var(--brand-primary);
  font-size: var(--font-size-max);
  padding: .1em;
  line-height: 1;
}

.result__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 3em 0 1.5em;
  padding: 0 0 .7em;
  border-bottom: 1px solid var(--text-light);
  & > h2 {
    margin: 0;
    padding: .2em;
    background: var(--text-light);
    color: var(--text-dark);
    font-size: var(--font-size-huge);
    line-height: 1;
    & > small {
      font-size: var(--font-size-sm);
      &:before {
        content: ':';
        display: inline-block;
      }
    }
  }
  & > p {
    margin: 0;
    padding: .2em;
    background: var(--text-dark);
    font-size: var(--font-size-xs);
    line-height: 1;
    color: var(--text-light);
    & > strong {
      color: var(--brand-primary);
      font-size: var(--font-size-huge);
    }
  }
}

.result__footer {
  margin-top: 2em;
  text-align: center;
}