@layer base, layout, components;

@layer base {
  :root {
    --font-latin: Inter, "Segoe UI", Arial, sans-serif;
    --font-cjk-body: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
    --font-cjk-heading: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
    --font-body: var(--font-latin), var(--font-cjk-body);
    --font-heading: var(--font-latin), var(--font-cjk-heading);
    --font-ui: var(--font-latin), var(--font-cjk-body);
    --paper: #f7f8f4;
    --paper-deep: #e9ede4;
    --ink: #111614;
    --muted: #65706c;
    --rule: #d6ded5;
    --accent: #167a4f;
    --accent-blue: #1f9dd8;
    --accent-warm: #d59b1a;
    --kicker: #167a4f;
    --status: #167a4f;
    --surface: #ffffff;
    --surface-soft: #f2f5ef;
    --surface-muted: #e7ece4;
    --surface-glass: rgba(255, 255, 255, .72);
    --line-soft: rgba(17, 22, 20, .08);
    --shadow-soft: 0 16px 44px rgba(17, 22, 20, .1);
    --inverse: #111614;
    --inverse-ink: #f7f8f4;
    --shell-max: 78rem;
  }

  html {
    background:
      linear-gradient(180deg, rgba(22, 122, 79, .08), rgba(247, 248, 244, 0) 22rem),
      var(--paper);
  }

  body {
    position: relative;
    padding: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: 0;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(90deg, transparent 0 7.5rem, rgba(31, 157, 216, .055) 7.5rem 7.56rem, transparent 7.56rem 15rem),
      linear-gradient(180deg, transparent 0 8rem, rgba(213, 155, 26, .045) 8rem 8.06rem, transparent 8.06rem 16rem);
    pointer-events: none;
  }

  a {
    color: var(--accent);
    text-decoration-color: rgba(22, 122, 79, .38);
    text-underline-offset: 4px;
  }

  h1,
  h2,
  h3 {
    color: var(--ink);
    font-family: var(--font-heading);
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  code,
  pre,
  input,
  textarea,
  button,
  .section-nav,
  .edition-line,
  .post-meta,
  .kicker,
  .tag-list,
  .post-list time,
  .right-rail,
  .site-footer {
    font-family: var(--font-ui);
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 3px;
  }
}

@layer layout {
  .matchday-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "header header"
      "nav nav"
      "main side"
      "footer footer";
    gap: 0 2rem;
    width: min(100% - 2rem, var(--shell-max));
    max-width: var(--shell-max);
    min-height: 100vh;
    margin: 0 auto;
    border: 0;
    background: transparent;
  }

  .matchday-main {
    grid-area: main;
    min-width: 0;
    padding: 3rem 0 5rem;
  }

  .matchday-rail {
    grid-area: side;
    min-width: 0;
    padding: 3rem 0 5rem;
    border: 0;
    background: transparent;
  }

  .matchday-footer {
    grid-area: footer;
  }

  @media (max-width: 960px) {
    .matchday-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "header"
        "nav"
        "main"
        "side"
        "footer";
      width: min(100% - 1.5rem, 44rem);
      gap: 0;
    }

    .matchday-main {
      padding: 2.2rem 0 3rem;
    }

    .matchday-rail {
      padding: 0 0 3rem;
    }
  }
}

@layer components {
  .matchday-hero {
    grid-area: header;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr);
    gap: 2rem;
    align-items: center;
    min-height: 28rem;
    padding: 4rem 0 2rem;
  }

  .matchday-hero__copy {
    display: grid;
    gap: .95rem;
    align-content: center;
  }

  .matchday-kicker,
  .kicker {
    margin: 0;
    color: var(--kicker);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .matchday-brand,
  .matchday-brand:visited {
    color: var(--ink);
    font-size: 4.6rem;
    font-weight: 850;
    line-height: .96;
    text-decoration: none;
    overflow-wrap: anywhere;
  }

  .matchday-brand:hover {
    color: var(--accent);
  }

  .matchday-edition {
    max-width: 34rem;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
  }

  .matchday-hero__signals {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .35rem;
  }

  .matchday-hero__signals span {
    display: inline-flex;
    gap: .42rem;
    align-items: baseline;
    min-height: 2.2rem;
    padding: .38rem .7rem;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--surface-glass);
    color: var(--muted);
    font-size: .82rem;
    font-weight: 750;
  }

  .matchday-hero__signals strong {
    color: var(--ink);
    font-size: 1.05rem;
  }

  .matchday-hero__visual {
    position: relative;
    isolation: isolate;
    min-height: 18rem;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid rgba(17, 22, 20, .12);
    border-radius: 8px;
    background:
      linear-gradient(135deg, rgba(31, 157, 216, .18), rgba(22, 122, 79, .1)),
      #eef4ed;
    box-shadow: var(--shadow-soft);
  }

  .matchday-hero__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .28) 1px, transparent 1px),
      linear-gradient(180deg, rgba(255, 255, 255, .2) 1px, transparent 1px);
    background-size: 2.8rem 2.8rem;
    opacity: .32;
    pointer-events: none;
  }

  .matchday-hero__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .matchday-hero__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(17, 22, 20, .12));
    z-index: 2;
    pointer-events: none;
  }

  .matchday-pitch {
    position: absolute;
    inset: 1.25rem;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 6px;
    background:
      linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, .9) calc(50% - 1px), rgba(255, 255, 255, .9) calc(50% + 1px), transparent calc(50% + 1px)),
      repeating-linear-gradient(90deg, rgba(22, 122, 79, .98) 0 4.2rem, rgba(34, 146, 91, .98) 4.2rem 8.4rem);
  }

  .matchday-pitch::after {
    content: "";
    position: absolute;
    top: 30%;
    left: 30%;
    width: 42%;
    height: 38%;
    border-top: 2px solid rgba(255, 255, 255, .58);
    border-right: 2px solid rgba(255, 255, 255, .58);
    transform: skewX(-18deg);
  }

  .matchday-pitch__circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6.5rem;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .matchday-pitch__box {
    position: absolute;
    top: 29%;
    width: 4.4rem;
    height: 42%;
    border: 2px solid rgba(255, 255, 255, .9);
  }

  .matchday-pitch__box--left {
    left: -2px;
    border-left: 0;
  }

  .matchday-pitch__box--right {
    right: -2px;
    border-right: 0;
  }

  .matchday-pitch__dot {
    position: absolute;
    width: .75rem;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, .95);
    border-radius: 50%;
    background: var(--accent-warm);
    box-shadow: 0 0 0 .35rem rgba(213, 155, 26, .2);
  }

  .matchday-pitch__dot--one {
    top: 28%;
    left: 29%;
  }

  .matchday-pitch__dot--two {
    right: 27%;
    bottom: 29%;
  }

  .matchday-pitch__dot--three {
    top: 47%;
    left: 57%;
    background: var(--accent-blue);
    box-shadow: 0 0 0 .35rem rgba(31, 157, 216, .2);
  }

  .matchday-nav {
    grid-area: nav;
    position: sticky;
    top: .75rem;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.2rem;
    align-items: center;
    justify-content: flex-start;
    min-height: 3.4rem;
    padding: .7rem 0;
    border: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: rgba(247, 248, 244, .88);
    backdrop-filter: blur(16px);
    box-shadow: none;
    font-size: .9rem;
    text-transform: none;
  }

  .matchday-nav a {
    color: var(--ink);
    font-weight: 750;
    text-decoration: none;
  }

  .matchday-nav a:hover,
  .matchday-nav a:focus-visible {
    color: var(--accent);
    text-decoration: underline;
  }

  .matchday-home {
    display: grid;
    gap: 2rem;
  }

  .matchday-home__intro {
    display: grid;
    gap: .65rem;
    max-width: 42rem;
  }

  .matchday-home__intro h1 {
    margin: 0;
    font-size: 2.4rem;
  }

  .matchday-update-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .matchday-update-card {
    position: relative;
    display: grid;
    gap: .85rem;
    min-width: 0;
    min-height: 15rem;
    padding: 1.1rem;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--surface-glass);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }

  .matchday-update-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 8px 0 0 8px;
    background: var(--accent);
    opacity: .72;
  }

  .matchday-update-card:hover,
  .matchday-update-card:focus-within {
    border-color: rgba(22, 122, 79, .38);
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
  }

  .matchday-update-card--lead {
    grid-column: 1 / -1;
    min-height: 19rem;
    padding: 1.5rem;
    background:
      linear-gradient(135deg, rgba(22, 122, 79, .12), rgba(31, 157, 216, .08)),
      rgba(255, 255, 255, .82);
  }

  .matchday-update-card--lead::before {
    background: linear-gradient(180deg, var(--accent), var(--accent-blue));
  }

  .matchday-update-card__meta,
  .post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .85rem;
    align-items: center;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.4;
  }

  .matchday-update-card__meta time,
  .post-list time {
    color: var(--accent);
    font-weight: 800;
  }

  .matchday-update-card h2 {
    margin: 0;
    font-size: 1.45rem;
  }

  .matchday-update-card--lead h2 {
    max-width: 42rem;
    font-size: 2rem;
  }

  .matchday-update-card h2 a,
  .article-header h1 a,
  .post-list-title {
    color: inherit;
    text-decoration: none;
  }

  .matchday-update-card h2 a:hover,
  .post-list-title:hover {
    color: var(--accent);
    text-decoration: underline;
  }

  .matchday-update-card p {
    max-width: 42rem;
    margin: 0;
    color: #3f4b47;
  }

  .matchday-update-card__tags a,
  .post-meta a,
  .post-list-tags a {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    border-radius: 8px;
    padding: .12rem .45rem;
    background: rgba(22, 122, 79, .08);
    color: var(--accent);
    font-weight: 750;
    text-decoration: none;
  }

  .matchday-update-card__tags a:hover,
  .post-meta a:hover,
  .post-list-tags a:hover {
    background: rgba(31, 157, 216, .12);
    color: #12668d;
  }

  .matchday-empty {
    display: grid;
    gap: .75rem;
    padding: 1.5rem;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--surface);
  }

  .matchday-empty h2,
  .matchday-empty p {
    margin: 0;
  }

  .page-header,
  .article-header {
    display: grid;
    gap: .8rem;
    margin-bottom: 2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--rule);
  }

  .article-header__top {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
  }

  .page-header h1,
  .article-header h1 {
    max-width: 50rem;
    margin: 0;
    font-size: 2.7rem;
  }

  .article-body {
    max-width: 48rem;
    color: #27302d;
    font-size: 1.03rem;
    line-height: 1.82;
  }

  .article-body h1,
  .article-body h2,
  .article-body h3,
  .article-body h4,
  .article-body h5,
  .article-body h6 {
    margin-top: 2.2rem;
    color: var(--ink);
    font-family: var(--font-heading);
    line-height: 1.18;
  }

  .article-body p {
    margin: 0 0 1rem;
  }

  .article-body ul,
  .article-body ol {
    padding-left: 1.35rem;
  }

  .article-body li + li {
    margin-top: .28rem;
  }

  .article-body a {
    font-weight: 700;
  }

  .article-body pre {
    overflow: auto;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: #101614;
    color: #edf7ef;
  }

  .article-body code {
    border-radius: 5px;
    background: rgba(22, 122, 79, .1);
    color: #0d5f3b;
  }

  .article-body pre code {
    background: transparent;
    color: inherit;
  }

  .article-body blockquote {
    margin-inline: 0;
    border-left: 3px solid var(--accent-blue);
    padding-left: 1rem;
    color: #3f4b47;
  }

  .article-body .article-figure img,
  .article-body img {
    border-radius: 8px;
  }

  .article-body .article-figure img {
    width: min(100%, 42rem);
    box-shadow: var(--shadow-soft);
  }

  .article-body .article-figure figcaption {
    max-width: 42rem;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.45;
  }

  .article-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
  }

  .article-body th,
  .article-body td {
    border-bottom: 1px solid var(--rule);
    padding: .55rem .7rem;
    text-align: left;
  }

  .article-body th {
    color: var(--ink);
    font-weight: 800;
  }

  .article-body hr {
    height: 1px;
    margin: 2rem 0;
    border: 0;
    background: var(--rule);
  }

  .matchday-post-list,
  .post-list,
  .dense-list {
    display: grid;
    gap: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .post-list li,
  .dense-list li {
    display: grid;
    gap: .45rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
  }

  .post-list li:hover,
  .dense-list li:hover {
    border-color: rgba(22, 122, 79, .34);
  }

  .post-list-title,
  .dense-list a {
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 800;
  }

  .post-list-summary,
  .post-list-tags,
  .dense-list span,
  .dense-list em {
    color: var(--muted);
    font-size: .95rem;
    font-style: normal;
  }

  .matchday-rail-section {
    display: grid;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--surface-glass);
    font-size: .9rem;
  }

  .matchday-rail-section h2 {
    margin: 0;
    color: var(--ink);
    font-size: .82rem;
    font-weight: 850;
    text-transform: uppercase;
  }

  .matchday-rail-section > a,
  .matchday-tag-list a {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding-block: .45rem;
    border-bottom: 1px solid rgba(214, 222, 213, .8);
    color: #26302c;
    text-decoration: none;
  }

  .matchday-tag-list {
    display: grid;
    gap: 0;
  }

  .matchday-rail-section > a:last-child,
  .matchday-tag-list a:last-child {
    border-bottom: 0;
  }

  .matchday-rail-section a:hover {
    color: var(--accent);
  }

  .matchday-metric-list {
    display: grid;
    gap: .5rem;
  }

  .matchday-metric-list span {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: baseline;
    color: var(--muted);
  }

  .matchday-metric-list strong {
    color: var(--ink);
    font-size: 1.45rem;
  }

  .matchday-rail-empty {
    display: block;
    padding-block: .35rem;
    color: var(--muted);
  }

  .search-box {
    gap: .55rem;
    margin-bottom: 1.25rem;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 750;
  }

  .search-box input {
    min-height: 3rem;
    border-color: var(--rule);
    border-radius: 8px;
    background: var(--surface-glass);
    color: var(--ink);
  }

  .site-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
  }

  .site-pagination__pages {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
  }

  .site-pagination__link,
  .site-pagination__page {
    min-width: 2.2rem;
    min-height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: .3rem .7rem;
    color: var(--ink);
    background: var(--surface-glass);
    font-weight: 750;
    text-decoration: none;
  }

  .site-pagination__page.is-current {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
  }

  .site-pagination__link.is-disabled {
    opacity: .44;
    pointer-events: none;
  }

  .comments-section,
  .comment-form {
    display: grid;
    gap: 1rem;
    max-width: 48rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--rule);
  }

  .comments-section__head,
  .comment-card,
  .comment-card__reply {
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--surface-glass);
  }

  .comments-section__head {
    display: flex;
    justify-content: space-between;
    padding: .85rem 1rem;
  }

  .comments-section__head h2 {
    margin: 0;
    font-size: 1.2rem;
  }

  .comment-list {
    display: grid;
    gap: .75rem;
  }

  .comment-card {
    padding: 1rem;
  }

  .comment-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    color: var(--muted);
    font-size: .85rem;
  }

  .comment-card__body {
    margin-bottom: 0;
  }

  .comment-card__reply {
    margin-top: .75rem;
    padding: .75rem;
    background: var(--surface-soft);
  }

  .ui-button,
  .ui-button:visited,
  .ui-status,
  .ui-input,
  .ui-textarea {
    border-color: var(--rule);
    border-radius: 8px;
    font-family: var(--font-ui);
  }

  .ui-button--primary {
    background: var(--accent);
    color: #fff;
  }

  .ui-button--ghost {
    background: var(--surface-soft);
  }

  .matchday-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0 2rem;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-size: .85rem;
  }

  .site-footer__meta,
  .site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
  }

  .site-footer__brand {
    color: var(--ink);
    font-weight: 850;
    text-decoration: none;
  }

  .site-footer__nav a {
    color: var(--muted);
    text-decoration: none;
  }

  .site-footer__nav a:hover {
    color: var(--accent);
  }

  @media (max-width: 960px) {
    .matchday-hero {
      grid-template-columns: 1fr;
      min-height: 0;
      padding: 2.4rem 0 1.5rem;
    }

    .matchday-brand {
      font-size: 3.2rem;
    }

    .matchday-hero__visual {
      min-height: 14rem;
    }

    .matchday-nav {
      top: 0;
      overflow-x: auto;
      flex-wrap: nowrap;
      padding: .75rem 0;
      scrollbar-width: thin;
    }

    .matchday-update-grid {
      grid-template-columns: 1fr;
    }

    .matchday-update-card--lead {
      min-height: 16rem;
      padding: 1.1rem;
    }

    .matchday-update-card--lead h2,
    .matchday-home__intro h1,
    .page-header h1,
    .article-header h1 {
      font-size: 2rem;
    }
  }

  @media (max-width: 560px) {
    .matchday-shell {
      width: min(100% - 1rem, 34rem);
    }

    .matchday-brand {
      font-size: 2.45rem;
    }

    .matchday-hero__visual {
      min-height: 12rem;
    }

    .matchday-pitch {
      inset: .75rem;
    }

    .matchday-pitch__circle {
      width: 4.5rem;
    }

    .matchday-pitch__box {
      width: 3.2rem;
    }

    .site-pagination {
      justify-content: flex-start;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .matchday-update-card {
      transition: none;
    }

    .matchday-update-card:hover,
    .matchday-update-card:focus-within {
      transform: none;
    }
  }
}