.home-page {
  display:grid;
  gap:9px;
  padding:0 var(--page-padding) 12px;
  outline:none
}

.match-feature {
  position:relative;
  isolation:isolate;
  z-index:3;
  padding:9px 10px 10px;
  background:var(--grain),var(--ink)
}

.match-feature::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:url('../../assets/textures/street-impact-next-match.webp') center/cover no-repeat;
  opacity:.55;
  pointer-events:none
}

.competition {
  font-size:14px;
  font-weight:700;
  font-style:italic;
  white-space:nowrap
}

.competition b {
  font-style:normal;
  font-size:12px
}

.match-link {
  display:block;
  width:100%;
  text-align:left;
  padding:0
}

.match-teams {
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:102px;
  padding:6px 19px 3px 15px
}

.team-logo {
  width:83px;
  height:90px;
  object-fit:contain
}

.team-logo--nanterre {
  width:99px;
  height:85px
}

.versus {
  font-family:var(--display);
  font-weight:400;
  font-size:62px;
  line-height:1;
  color:var(--yellow);
  transform:rotate(-2deg)
}

.match-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px
}

.match-foot>span:first-child {
  min-width:0
}

.match-date {
  display:block;
  font-size:clamp(25px,7.65vw,33px);
  line-height:1.23;
  white-space:nowrap;
  color:var(--yellow);
  letter-spacing:-.3px
}

.match-venue {
  display:block;
  font-size:13px;
  text-transform:uppercase;
  line-height:1.25;
  margin-top:2px
}

.match-foot .arrow-button {
  width:44px;
  height:44px
}

.summary-grid {
  display:grid;
  grid-template-columns:1.27fr 1fr;
  gap:7px
}

.result-card,.standing-card {
  display:flex;
  flex-direction:column;
  text-align:left;
  min-width:0;
  height:clamp(204px,53cqw,250px)
}

.standing-card {
  align-items:flex-start;
  padding:9px 11px 8px
}

.card-kicker {
  font-size:18px;
  line-height:1.15;
  white-space:nowrap
}

.result-card {
  container:result / inline-size;
  padding:0;
  border:1px solid var(--ink-deep);
  overflow:hidden
}

.result-banner {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:7px 8px;
  background:var(--grain),var(--ink-deep);
  color:var(--paper)
}

.result-heading {
  font-size:clamp(12px,7.7cqw,19px);
  line-height:1.5;
  white-space:nowrap
}

.result-outcome {
  display:flex;
  align-items:center;
  gap:5px;
  align-self:flex-end;
  color:var(--yellow);
  text-transform:uppercase;
  font-size:clamp(11px,5.8cqw,13px);
  font-weight:600;
  line-height:1
}

.result-outcome>b {
  display:grid;
  place-items:center;
  width:17px;
  height:17px;
  border-radius:3px;
  background:var(--yellow);
  color:var(--ink-deep);
  font-family:var(--display);
  font-size:12px;
  font-weight:400;
  line-height:1
}

.result-outcome>b>span {
  transform:translateY(-.5px)
}

.result-teams {
  display:grid;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
  align-items:center;
  gap:5px;
  padding:8px 7px 0
}

.result-team {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0
}

.result-team img {
  width:clamp(44px,30cqw,72px);
  height:clamp(44px,30cqw,72px);
  object-fit:contain;
  flex:none
}

.result-team-divider {
  height:clamp(36px,24cqw,58px);
  background:#001b2e40
}

.result-score {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  text-align:center;
  flex:1;
  margin:0 7px 8px;
  font-size:clamp(50px,41cqw,110px);
  font-variant-numeric:tabular-nums;
  line-height:1;
  letter-spacing:-.035em;
  white-space:nowrap
}

.result-score>span {
  min-width:0
}

.result-score .score-divider {
  font-size:.56em;
  letter-spacing:0;
  padding:0 .02em;
  transform:translateY(-.025em)
}

.result-score--long {
  font-size:clamp(34px,29cqw,105px)
}

@container result (min-width:180px) {
  .result-banner {
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:5px;
    padding:10px 8px
  }
  .result-heading {
    font-size:clamp(12px,6.5cqw,20px)
  }
  .result-outcome {
    align-self:center;
    font-size:clamp(11px,5cqw,14px)
  }
}

.standing-numbers {
  display:flex;
  align-items:baseline;
  flex:none;
  gap:5px;
  margin:auto 0;
  padding-top:1px;
  max-width:100%
}

.standing-numbers>strong {
  display:flex;
  align-items:flex-start;
  gap:4px;
  font-size:89px;
  letter-spacing:-3px;
  line-height:1
}

.standing-numbers sup {
  font-size:30px;
  letter-spacing:0;
  margin-top:8px;
  line-height:1;
  text-transform:none
}

.standing-numbers>span {
  font-size:27px;
  letter-spacing:-1px
}

.standing-record {
  font-size:20px;
  line-height:1.15
}

.album-section {
  padding:0 7px 5px
}

.album-section .section-topline {
  padding:0 1px 2px
}

.album-link {
  display:block;
  text-align:left;
  width:100%;
  padding:0
}

.album-image {
  display:block;
  position:relative;
  overflow:hidden;
  height:112px;
  border-radius:2px
}

.album-image>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 32%;
  transition:transform .5s var(--ease)
}

.album-image::after {
  content:"";
  position:absolute;
  inset:50% 0 0;
  background:linear-gradient(transparent,#00152566);
  pointer-events:none
}

.photo-count {
  position:absolute;
  z-index:1;
  bottom:5px;
  left:5px;
  padding:2px 5px 3px;
  background:var(--yellow);
  color:var(--ink);
  font-size:13px;
  line-height:1;
  border-radius:1px
}

.album-foot {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding-top:3px
}

.album-foot strong {
  font-size:17px;
  line-height:1.05
}

.album-action {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  white-space:nowrap
}

.album-action .arrow-button {
  width:30px;
  height:30px
}

.album-action .arrow-button .icon {
  width:23px;
  height:23px;
  stroke-width:2.3
}

.section-title {
  font-size:18px;
  margin:0 1px 5px
}

.today-grid {
  display:grid;
  flex:1;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px
}

.today-card {
  --impact-surface:var(--paper);
  --impact-ink:var(--ink-deep);
  --impact-decor:var(--ink-deep);
  --status-surface:var(--yellow);
  --status-ink:var(--ink-deep);
  --arrow-surface:var(--yellow);
  --arrow-ink:var(--ink-deep);
  container:daily / inline-size;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  min-height:196px;
  padding:13px 8px 10px;
  border:1px solid #ffffff25;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--grain),var(--impact-surface);
  color:var(--impact-ink)
}

.today-card--pack {
  --impact-surface:var(--ink-deep);
  --impact-ink:var(--paper);
  --impact-decor:var(--yellow)
}

.today-card--predictions {
  --impact-surface:var(--yellow);
  --status-surface:var(--ink-deep);
  --status-ink:var(--paper);
  --arrow-surface:var(--ink-deep);
  --arrow-ink:var(--yellow)
}

.today-card::before {
  content:"";
  position:absolute;
  inset:0;
  background:var(--impact-decor);
  -webkit-mask:url('../../assets/textures/impact-corners.svg') center / 100% 100% no-repeat;
  mask:url('../../assets/textures/impact-corners.svg') center / 100% 100% no-repeat;
  opacity:.85;
  pointer-events:none
}

.today-watermark {
  position:absolute;
  top:7px;
  right:-24px;
  width:clamp(100px,120cqw,190px);
  height:clamp(100px,120cqw,190px);
  opacity:.12;
  transform:rotate(19deg);
  pointer-events:none
}

.today-watermark .icon {
  width:100%;
  height:100%
}

.today-icon,.today-label,.today-status,.today-arrow {
  position:relative;
  z-index:1
}

.today-icon {
  display:block;
  margin:4px 0 5px;
  transform:rotate(-7deg)
}

.today-icon .icon {
  width:clamp(43px,54cqw,76px);
  height:clamp(43px,54cqw,76px)
}

.today-card--pack .today-icon {
  color:var(--yellow)
}

.today-label {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:calc(clamp(49px,59.4cqw,76px) + 6px);
  padding-bottom:6px;
  max-width:100%;
  font-size:clamp(18px,22cqw,28px);
  line-height:1.35;
  letter-spacing:-.3px
}

.today-card--predictions .today-label {
  font-size:clamp(13px,15.2cqw,22px)
}

.today-status {
  display:flex;
  align-items:center;
  isolation:isolate;
  width:100%;
  min-height:34px;
  margin-top:auto;
  padding:5px 7px;
  color:var(--status-ink);
  font-size:clamp(13px,14cqw,18px);
  font-weight:600;
  line-height:1.1;
  text-wrap:pretty
}

.today-status::before {
  content:"";
  position:absolute;
  inset:0 -2px;
  z-index:-1;
  background:var(--status-surface);
  -webkit-mask:url('../../assets/textures/impact-brush.svg') center / 100% 100% no-repeat;
  mask:url('../../assets/textures/impact-brush.svg') center / 100% 100% no-repeat
}

.today-arrow {
  display:grid;
  place-items:center;
  align-self:flex-end;
  flex:none;
  width:29px;
  height:29px;
  margin-top:7px;
  border-radius:50%;
  background:var(--arrow-surface);
  color:var(--arrow-ink);
  transition:transform .18s var(--ease)
}

.today-arrow .icon {
  width:21px;
  height:21px;
  stroke-width:2.7
}

@media(hover:hover) {
  .today-card:hover .today-arrow {
    transform:translateX(2px)
  }
}

@media(max-width:359px) {
  :root {
    --page-padding:10px
  }
  .match-date {
    font-size:23px
  }
  .match-venue {
    font-size:12px
  }
  .match-teams {
    padding-left:8px;
    padding-right:8px
  }
  .card-kicker {
    font-size:16px
  }
  .standing-card {
    padding-left:9px;
    padding-right:8px
  }
  .standing-numbers>strong {
    font-size:76px;
    letter-spacing:-2px;
    gap:3px
  }
  .standing-numbers>span {
    font-size:23px
  }
  .standing-numbers sup {
    font-size:25px
  }
  .album-action {
    gap:4px;
    font-size:12px
  }
  .standing-record {
    font-size:18px
  }
}

@container app (min-width:480px) and (max-width:899px) {
  .result-card,.standing-card {
    height:268px
  }
  .home-page {
    max-width:600px;
    margin:auto
  }
  .match-teams {
    height:130px;
    justify-content:space-evenly
  }
  .team-logo {
    height:105px;
    width:110px
  }
  .team-logo--nanterre {
    width:120px
  }
  .match-date {
    font-size:38px
  }
  .summary-grid {
    grid-template-columns:1.3fr 1fr
  }
  .album-image {
    height:190px
  }
}

@container app (min-width:900px) {
  .result-card {
    height:100%
  }
  .home-page {
    grid-template-columns:1.2fr 1fr;
    gap:14px;
    padding:0 32px 22px
  }
  .match-feature {
    grid-column:1;
    grid-row:1;
    padding:15px 17px
  }
  .section-topline h2,.section-title {
    font-size:23px
  }
  .competition {
    font-size:19px
  }
  .competition b {
    font-size:16px
  }
  .match-teams {
    height:148px;
    padding:12px 30px 6px
  }
  .team-logo {
    width:116px;
    height:122px
  }
  .team-logo--nanterre {
    width:132px;
    height:112px
  }
  .versus {
    font-size:80px
  }
  .match-date {
    font-size:clamp(27px,3.3vw,38px)
  }
  .match-venue {
    font-size:15px
  }
  .match-foot .arrow-button {
    width:48px;
    height:48px
  }
  .summary-grid {
    grid-column:2;
    grid-row:1;
    gap:10px;
    grid-template-columns:1fr 1fr
  }
  .standing-card {
    height:100%;
    padding:17px 13px 15px
  }
  .card-kicker {
    font-size:20px;
    white-space:normal
  }
  .standing-numbers>strong {
    font-size:clamp(88px,10vw,110px)
  }
  .standing-numbers sup {
    font-size:34px
  }
  .standing-numbers>span {
    font-size:29px
  }
  .standing-record {
    font-size:25px
  }
  .album-section {
    grid-column:1;
    grid-row:2;
    padding:5px 10px 9px
  }
  .album-image {
    height:205px
  }
  .album-section .section-topline {
    padding-bottom:5px
  }
  .text-link {
    font-size:16px
  }
  .album-foot strong {
    font-size:22px
  }
  .album-action {
    font-size:16px
  }
  .album-action .arrow-button {
    width:36px;
    height:36px
  }
  .today-section {
    grid-column:2;
    grid-row:2;
    display:flex;
    flex-direction:column
  }
}