@layer base, theme, layout, components, utilities;

@layer theme {
  :root {
    --bg: #f4f1ea;
    --surface: #ffffff;
    --surface-muted: #f0f0f0;
    --ink: #222222;
    --ink-deep: #111111;
    --muted: #666666;
    --line: #111111;
    --line-strong: #111111;
    --accent-gold: #f5b935;
    --accent-coral: #fa5d29;
    --dark-card: #1b1b1b;
    --dark-card-surface: #252525;
    --font-display: "Syne", "Plus Jakarta Sans", system-ui, sans-serif;
    --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    --font-serif: "Instrument Serif", Georgia, serif;
    --max-w: 1440px;
    --radius-sm: 6px;
    --radius-md: 16px;
    --radius-lg: 20px;
  }
}

@layer base {
  html {
    box-sizing: border-box;
    background-color: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(34, 34, 34, 0.12);
  }

  @media (pointer: fine) {
    html {
      overscroll-behavior: none;
    }
  }

  body, div, header, main, footer, section, article, aside, nav,
  h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dt, dd,
  table, thead, tbody, tr, th, td, a, span, code, img {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    background-color: var(--bg);
    color: var(--ink);
    overflow-x: hidden;
  }

  img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  :where(h1, h2, h3) {
    scroll-margin-block-start: 5.5rem;
    text-wrap: balance;
    color: var(--ink-deep);
  }

  h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.5rem, 6.2vw, 5.75rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
    margin-block: 0 0.75rem;
  }

  h2 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(1.85rem, 3.2vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-block: 0 0.5rem;
  }

  h3 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.12rem;
    line-height: 1.35;
    letter-spacing: -0.015em;
    margin-block: 0 0.35rem;
  }

  p {
    margin-block: 0 1.1rem;
    text-wrap: pretty;
  }

  a {
    color: var(--ink-deep);
    text-underline-offset: 4px;
    touch-action: manipulation;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.25s ease;
  }

  :where(a:any-link, button, [tabindex="0"]):focus-visible {
    outline: 3px solid var(--accent-coral);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition: none !important;
      animation: none !important;
    }
  }
}

@layer utilities {
  .visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }

  .skip-link {
    position: fixed;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    z-index: 100;
    background: var(--ink-deep);
    color: var(--surface);
    padding: 0.65rem 1.15rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius-sm);
  }

  .num {
    font-variant-numeric: tabular-nums;
  }
}

@layer layout {
  .wrap {
    max-inline-size: var(--max-w);
    margin-inline: auto;
    padding-inline: max(1.5rem, env(safe-area-inset-left)) max(1.5rem, env(safe-area-inset-right));
  }

  /* Awwwards-Style Top Bar */
  .site-header {
    background: rgba(248, 248, 248, 0.92);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--line);
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
  }

  .header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: 4.5rem;
    gap: 1.25rem;
  }

  .brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--ink-deep);
    min-block-size: 2.75rem;
  }

  .w-monogram {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.55rem;
    letter-spacing: -0.05em;
    line-height: 1;
  }

  .brand-divider {
    inline-size: 1px;
    block-size: 1.15rem;
    background: var(--line-strong);
  }

  .wordmark-text {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.02em;
  }

  /* Center Search Pill */
  .header-search-pill {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.45rem 1.15rem;
    min-block-size: 2.75rem;
    flex: 0 1 19rem;
    color: var(--muted);
    font-size: 0.85rem;
    text-decoration: none;
  }

  .header-search-pill:hover {
    border-color: var(--ink-deep);
    color: var(--ink-deep);
  }

  @media (max-width: 920px) {
    .header-search-pill {
      display: none;
    }
  }

  .search-icon {
    display: block;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    flex: none;
    color: var(--ink-deep);
  }

  .site-header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
  }

  .site-header nav a {
    color: var(--ink-deep);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    min-block-size: 2.5rem;
    padding-inline: 0.45rem;
    display: inline-flex;
    align-items: center;
  }

  .site-header nav a:hover,
  .site-header nav a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  .nav-submit-btn {
    background: var(--ink-deep) !important;
    color: var(--surface) !important;
    padding-inline: 1rem !important;
    border-radius: var(--radius-sm);
    text-decoration: none !important;
    font-weight: 700 !important;
  }

  .nav-submit-btn:hover {
    background: #383838 !important;
  }

  main.wrap {
    padding-block: 2.5rem 5rem;
  }

  .site-footer {
    border-block-start: 1px solid var(--line);
    background: var(--surface);
    padding-block: 3.5rem 2.5rem;
    color: var(--muted);
    font-size: 0.88rem;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 2rem;
    padding-block-end: 2.5rem;
    border-block-end: 1px dotted var(--line-strong);
  }

  @media (max-width: 780px) {
    .footer-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .footer-col h3 {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    margin-block-end: 0.75rem;
  }

  .footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
  }

  .footer-col a {
    text-decoration: none;
    color: var(--ink-deep);
    font-weight: 600;
  }

  .footer-col a:hover {
    text-decoration: underline;
  }

  .footer-bottom {
    padding-block-start: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.82rem;
  }
}

@layer components {
  /* 1. SOTD Centerpiece Hero */
  .sotd-section {
    margin-block-end: 5.5rem;
  }

  .sotd-header {
    text-align: center;
    margin-block-end: 2rem;
  }

  .sotd-meta-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    font-size: 0.82rem;
    color: var(--muted);
    margin-block-end: 0.65rem;
    font-variant-numeric: tabular-nums;
  }

  .sotd-score-pill {
    border: 1px solid var(--line-strong);
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    font-weight: 700;
    color: var(--ink-deep);
    background: var(--surface);
  }

  .sotd-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.6rem, 7.2vw, 6.4rem);
    line-height: 0.94;
    letter-spacing: -0.045em;
    margin-block: 0.1rem 0.85rem;
    color: var(--ink-deep);
  }

  .sotd-creators {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.88rem;
    font-weight: 600;
  }

  .creator-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    color: var(--ink-deep);
  }

  .creator-avatar {
    inline-size: 1.55rem;
    block-size: 1.55rem;
    border-radius: 50%;
    background: var(--ink-deep);
    color: var(--surface);
    font-size: 0.68rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .badge-pro {
    font-size: 0.65rem;
    font-weight: 800;
    background: var(--ink-deep);
    color: var(--surface);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
  }

  .sotd-showcase-frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--ink-deep);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
    border: 1px solid var(--line);
  }

  .sotd-showcase-frame img {
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .sotd-showcase-frame:hover img {
    transform: none;
  }

  .sotd-overlay-bar {
    position: absolute;
    inset-block-end: 1.25rem;
    inset-inline: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    pointer-events: none;
  }

  .sotd-visit-btn {
    pointer-events: auto;
    background: var(--surface);
    color: var(--ink-deep);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0.65rem 1.2rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }

  .sotd-visit-btn:hover {
    background: var(--accent-gold);
    color: var(--ink-deep);
  }

  .sotd-tech-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .sotd-tech-badges span {
    background: rgba(17, 17, 17, 0.82);
    backdrop-filter: blur(8px);
    color: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.35rem 0.7rem;
    border-radius: 4px;
    font-size: 0.76rem;
    font-weight: 600;
  }

  /* 2. Centered Display Section Headers (NOMINEES, W.CREATORS) */
  .aww-block {
    margin-block-end: 5.5rem;
  }

  .center-display-header {
    text-align: center;
    margin-block-end: 2.5rem;
  }

  .tiny-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--muted);
    margin-block-end: 0.35rem;
    display: block;
  }

  .display-banner-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.4rem, 6vw, 5.2rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--ink-deep);
    margin-block: 0.1rem 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .star-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.2rem;
    block-size: 2.2rem;
    border-radius: 50%;
    background: var(--accent-gold);
    color: var(--ink-deep);
    font-size: 1.15rem;
    vertical-align: middle;
  }

  .center-sub {
    color: var(--muted);
    font-size: 0.92rem;
    margin: 0;
  }

  /* Left-Aligned Section Header ("Recent Sites of the Day", "Explore these popular posts") */
  .left-section-header {
    margin-block-end: 2rem;
  }

  .left-section-header h2 {
    max-inline-size: 22ch;
  }

  /* 3-Column & 2-Column Showcase Card Grids */
  .cards-grid-3 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem 1.75rem;
  }

  @media (max-width: 1024px) {
    .cards-grid-3 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 640px) {
    .cards-grid-3 {
      grid-template-columns: 1fr;
    }
  }

  .cards-grid-2 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  @media (max-width: 780px) {
    .cards-grid-2 {
      grid-template-columns: 1fr;
    }
  }

  /* Individual Showcase Card */
  .site-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .card-thumb-link {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    position: relative;
  }

  .card-thumb-link img {
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .card-thumb-link:hover img {
    transform: none;
  }

  .card-caption-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.88rem;
  }

  .card-title-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .card-site-title {
    font-weight: 700;
    color: var(--ink-deep);
    text-decoration: none;
    font-size: 0.94rem;
  }

  .card-site-title:hover {
    text-decoration: underline;
  }

  .card-by {
    color: var(--muted);
    font-size: 0.82rem;
  }

  .card-tag-pill {
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid var(--line-strong);
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    color: var(--ink-deep);
    background: var(--surface);
    font-variant-numeric: tabular-nums;
  }

  /* White Feature Cards ("Learn from the best in the industry", "Popular posts", "Curated marketplace") */
  .white-feature-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .white-feature-card .thumb-wrap {
    display: block;
    overflow: hidden;
    background: var(--surface-muted);
    border-block-end: 1px solid var(--line);
  }

  .white-feature-card .thumb-wrap img {
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    transition: transform 0.45s ease;
  }

  .white-feature-card:hover .thumb-wrap img {
    transform: none;
  }

  .white-card-body {
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
  }

  .white-card-title {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.32;
    margin: 0;
  }

  .white-card-title a {
    text-decoration: none;
    color: var(--ink-deep);
  }

  .white-card-title a:hover {
    text-decoration: underline;
  }

  .white-card-desc {
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.5;
    margin: 0;
  }

  .white-card-meta {
    margin-block-start: auto;
    padding-block-start: 0.85rem;
    border-block-start: 1px solid var(--surface-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }

  .accent-bar-yellow {
    display: inline-block;
    inline-size: 2.2rem;
    block-size: 3px;
    background: var(--accent-gold);
    margin-block-start: 0.25rem;
  }

  /* W.CREATORS Dark Feature Cards + Directory Table */
  .dark-creator-card {
    background: var(--dark-card);
    color: var(--surface);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .dark-creator-card > h3 { color: var(--surface); font-size: 1.5rem; margin: 0; }
  .dark-creator-card > p { color: #cccccc; max-inline-size: 55ch; margin: 0; }
  .dark-creator-card > a { color: var(--surface); align-self: flex-start; min-block-size: 2.75rem; display: inline-flex; align-items: center; font-size: 0.9rem; }

  .dark-card-top {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: center;
  }

  .dark-Preview-img {
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    max-inline-size: 15rem;
    margin-inline-start: auto;
  }

  .dark-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  }

  .dark-card-bottom h3 {
    color: var(--surface);
    font-size: 1.45rem;
    margin: 0.15rem 0;
  }

  .dark-card-bottom a {
    color: var(--surface);
    text-decoration: none;
  }

  .dark-score-box {
    border: 1px solid rgba(255, 255, 255, 0.28);
    padding: 0.35rem 0.65rem;
    border-radius: 4px;
    text-align: center;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
  }

  .dark-score-box strong {
    display: block;
    font-size: 1rem;
  }

  /* Directory Table under W.CREATORS */
  .creators-table {
    margin-block-start: 2rem;
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
  }

  .creators-table th {
    text-align: start;
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 600;
    padding: 0.75rem 0.5rem;
    border-block-end: 1px dotted var(--line-strong);
  }

  .creators-table td {
    padding: 1rem 0.5rem;
    border-block-end: 1px dotted var(--line-strong);
    vertical-align: middle;
  }

  .table-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ink-deep);
    padding: 0.35rem 0.85rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--ink-deep);
    background: var(--surface);
  }

  .table-view-btn:hover {
    background: var(--ink-deep);
    color: var(--surface);
  }

  @media (max-width: 720px) {
    .creators-table .hide-mobile {
      display: none;
    }
  }

  /* Section Bottom Callout Row ("Check out all submitted websites -> View Nominees") */
  .section-bottom-cta {
    margin-block-start: 2.25rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--muted);
  }

  .section-bottom-cta a {
    font-weight: 700;
    color: var(--ink-deep);
    margin-inline-start: 0.45rem;
  }

  /* Bottom Dual Dark Banner Cards */
  .dual-cta-banners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    margin-block-start: 2rem;
  }

  @media (max-width: 780px) {
    .dual-cta-banners {
      grid-template-columns: 1fr;
    }
  }

  .dark-cta-banner {
    background: linear-gradient(135deg, #1b1b1b 0%, #2b2b2b 100%);
    color: var(--surface);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 3.5vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    min-block-size: 16rem;
  }

  .dark-cta-banner h3 {
    color: var(--surface);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.15;
    max-inline-size: 18ch;
    margin: 0.25rem 0 0;
  }

  .outline-light-btn {
    align-self: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: var(--surface);
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.86rem;
    text-decoration: none;
  }

  .outline-light-btn:hover {
    background: var(--surface);
    color: var(--ink-deep);
  }

  /* Subpages (Services, Blog, Articles) */
  .page-banner {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 3.5vw, 3rem);
    margin-block-end: 2.5rem;
  }

  .kicker {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    margin-block-end: 0.5rem;
  }

  .lead {
    font-size: 1.12rem;
    color: var(--muted);
    max-inline-size: 62ch;
    margin-block-end: 1.5rem;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    padding: 0.6rem 1.25rem;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: 1px solid var(--ink-deep);
  }

  .btn-primary {
    background: var(--ink-deep);
    color: var(--surface);
  }

  .btn-primary:hover {
    background: #333333;
    color: var(--surface);
  }

  .btn-secondary {
    background: var(--surface);
    color: var(--ink-deep);
  }

  .btn-secondary:hover {
    background: var(--surface-muted);
  }

  .methodology-sequence {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-variant-numeric: tabular-nums;
  }

  .methodology-sequence > li:not(:last-child) {
    border-block-end: 1px solid var(--line);
  }

  .method-step {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 1.5rem;
    padding: 2rem;
  }

  @media (max-width: 640px) {
    .method-step {
      grid-template-columns: 1fr;
      gap: 0.5rem;
      padding: 1.5rem;
    }
  }

  .step-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--ink-deep);
  }

  .method-body h2 {
    font-size: 1.5rem;
    margin-block: 0 0.35rem;
  }

  .method-subtitle {
    font-weight: 600;
    color: var(--ink-deep);
    margin-block-end: 0.75rem;
  }

  .deliverables {
    margin-block-start: 0.85rem;
    padding-block-start: 0.85rem;
    border-block-start: 1px dotted var(--line-strong);
    font-size: 0.88rem;
    color: var(--muted);
  }

  /* Article Reading Sheet */
  .article-sheet {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 4vw, 3.5rem);
  }

  .article-header {
    border-block-end: 1px solid var(--line);
    padding-block-end: 1.5rem;
    margin-block-end: 2rem;
  }

  .article-header h1 {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: clamp(1.95rem, 3.6vw, 2.85rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
  }

  .back-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    margin-block-end: 0.5rem;
    color: var(--muted);
  }

  .prose {
    max-inline-size: 66ch;
    font-size: 1.05rem;
  }

  .prose h2 {
    font-size: 1.55rem;
    margin-block: 2rem 0.65rem;
  }

  .prose :where(ul, ol) {
    padding-inline-start: 1.4rem;
    margin-block: 0 1.35rem;
    font-variant-numeric: tabular-nums;
  }

  .prose li {
    margin-block-end: 0.5rem;
  }

  .prose figure {
    margin-block: 1.85rem;
    margin-inline: 0;
    padding: 1.25rem 1.5rem;
    border-inline-start: 4px solid var(--accent-gold);
    background: var(--bg);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }

  .prose blockquote {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.4rem;
    line-height: 1.35;
    color: var(--ink-deep);
  }

  .prose figcaption {
    margin-block-start: 0.5rem;
    font-size: 0.85rem;
    color: var(--muted);
  }

  .prose code {
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 0.12rem 0.38rem;
    border-radius: 4px;
    font-size: 0.88em;
  }

  .article-footer {
    margin-block-start: 2.75rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
}

@layer components {
  /* === REMAKE 2026-10-23: light, pushed harder === */
  .site-header{border-block-end:2px solid var(--ink-deep)}
  .left-section-header h2{font-family:var(--font-sans);font-weight:700;letter-spacing:-.03em;font-size:clamp(1.6rem,1rem + 1.5vw,2.5rem);line-height:1.15;max-inline-size:28ch}
  .left-section-header,.center-display-header{border-block-end:2px solid var(--ink-deep);padding-block-end:1.25rem}
  .site-card .card-thumb-link,.white-feature-card,.dark-creator-card,.page-banner,.article-sheet,.methodology-sequence{border:1.5px solid var(--ink-deep)}
  .white-feature-card,.dark-creator-card{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
  .white-feature-card:hover,.site-card:hover .card-thumb-link{transform:translateY(-4px);box-shadow:6px 6px 0 var(--ink-deep)}
  .dark-creator-card:hover{box-shadow:6px 6px 0 var(--accent-gold)}
  .sotd-showcase-frame{border:2px solid var(--ink-deep);box-shadow:10px 10px 0 var(--ink-deep)}
  .card-tag-pill,.badge-pro{border:1.5px solid var(--ink-deep);border-radius:999px;text-transform:uppercase;letter-spacing:.06em}
  .badge-pro{background:var(--accent-gold);color:var(--ink-deep)}
  .table-view-btn,.btn,.outline-light-btn{border-radius:999px;border-width:1.5px}
  .btn-primary:hover,.table-view-btn:hover{box-shadow:4px 4px 0 var(--accent-gold)}
  .marquee{background:var(--ink-deep);color:#f4f1ea;overflow:hidden;white-space:nowrap;padding:.7rem 0;border-block:2px solid var(--ink-deep);margin-block-end:2rem}
  .marquee-track{display:inline-flex;animation:rc-m 24s linear infinite}
  .marquee span{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:.8rem;letter-spacing:.02em;padding:0 1.1rem}
  .marquee b{color:var(--accent-gold)}
  @keyframes rc-m{to{transform:translateX(-50%)}}
  .vote-btn{margin-block-start:.6rem;width:100%;padding:.6rem;border:1.5px solid var(--ink-deep);border-radius:999px;background:var(--surface);font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
  .vote-btn.liked{background:var(--accent-gold)}
  .live-search{display:flex;align-items:center;gap:.6rem;background:var(--surface);border:1.5px solid var(--ink-deep);border-radius:999px;padding:.45rem 1rem;flex:0 1 28rem}
  .live-search input{border:0;outline:0;background:transparent;width:100%;font:inherit;font-size:.85rem}
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
  .reveal.in{opacity:1;transform:none}
  .toast{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,1rem);background:var(--ink-deep);color:#fff;padding:.7rem 1.1rem;border-radius:999px;font-size:.78rem;font-weight:700;opacity:0;pointer-events:none;transition:.3s;z-index:99}
  .toast.show{opacity:1;transform:translate(-50%,0)}
  @media(prefers-reduced-motion:reduce){.marquee-track{animation:none}.reveal{opacity:1;transform:none}}

  /* Keep the display identity while allowing long words and labels to fit. */
  .sotd-title { font-family: var(--font-sans); font-size: clamp(1.6rem, 1rem + 2vw, 2.75rem); line-height: 1.1; }
  .display-banner-title {
    display: block;
    font-family: var(--font-sans);
    font-size: clamp(1.6rem, 1rem + 2vw, 3rem);
    line-height: 1.15;
  }
  .star-badge { flex-shrink: 0; }
  .left-section-header h2 { line-height: 1.05; }
  :where(main, section)[id] { scroll-margin-block-start: 6rem; }
  .header-row { flex-wrap: wrap; }
  .brand-lockup { flex-shrink: 0; }
  .wordmark-text > span { display: block; font-size: 0.8rem; }
  .site-header nav a { white-space: nowrap; }
  .header-search-pill { min-inline-size: 0; }
  .cards-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-title-group, .dark-card-bottom > div { min-inline-size: 0; }
  .card-tag-pill, .creator-avatar, .dark-score-box { flex-shrink: 0; }
  .card-tag-pill { white-space: nowrap; }
  .white-card-meta { gap: 0.75rem; flex-wrap: wrap; }
  .creators-table { overflow-wrap: anywhere; }
  .table-view-btn { min-block-size: 2.75rem; }

  @media (max-width: 1200px) {
    .header-search-pill { display: none; }
  }
  @media (max-width: 1024px) {
    .cards-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 780px) {
    .cards-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .site-header { position: static; }
    .header-row { padding-block: 0.75rem; gap: 0.5rem; }
    .site-header nav { inline-size: 100%; }
    .site-header nav ul { gap: 0.25rem 0.5rem; }
    .site-header nav a { min-block-size: 2.75rem; font-size: 0.8rem; }
    :where(main, section)[id] { scroll-margin-block-start: 1rem; }
    .sotd-overlay-bar {
      position: static;
      padding: 1rem;
      gap: 1rem;
    }
    .sotd-tech-badges span { font-size: 0.7rem; }
  }
  @media (max-width: 640px) {
    .wrap { padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right)); }
    main.wrap { padding-block: 1.75rem 3rem; }
    .cards-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .aww-block { margin-block-end: 3.5rem; }
    .creator-chip { flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
    .creator-chip > span:not(.creator-avatar, .badge-pro) { flex-basis: 75%; }
    .sotd-creators { gap: 0.75rem; }
    .sotd-showcase-frame { box-shadow: 5px 5px 0 var(--ink-deep); }
    .left-section-header h2 { font-size: clamp(1.6rem, 1rem + 3vw, 2.2rem); max-inline-size: 100%; }
    .page-banner { padding: 1.25rem; }
    .page-banner h1 { font-family: var(--font-sans); font-size: clamp(1.65rem, 1rem + 3vw, 2.5rem); line-height: 1.1; overflow-wrap: anywhere; }
    .article-sheet { padding: 1.25rem; }
    .article-header h1 { font-size: 1.75rem; overflow-wrap: anywhere; }
    .dark-creator-card { padding: 1.25rem; }
    .dark-card-bottom { flex-wrap: wrap; }
    .dark-cta-banner { padding: 1.5rem; }
    .creators-table { table-layout: fixed; }
    .creators-table th:first-child { inline-size: 42%; }
    .creators-table .badge-pro { display: inline-block; margin-block-start: 0.35rem; font-size: 0.6rem; white-space: nowrap; }
    .table-view-btn { padding: 0.5rem; text-align: start; }
    .footer-grid { gap: 1.5rem; }
    .footer-grid > :first-child { grid-column: 1 / -1; }
  }
}

@layer components {
  .showcase-intro {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: end;
    gap: 2rem 4rem;
    padding-block: 0.5rem 3rem;
    margin-block-end: 2.5rem;
    border-block-end: 2px solid var(--ink-deep);
  }
  .showcase-intro h1 {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 1rem + 3vw, 4.25rem);
    line-height: 1.08;
    max-inline-size: 20ch;
    margin: 0;
  }
  .showcase-intro-copy p { max-inline-size: 50ch; color: var(--muted); }
  .sotd-header { text-align: start; margin-block-end: 1.5rem; }
  .sotd-title .card-site-title { font: inherit; color: inherit; }
  .prose table { inline-size: 100%; border-collapse: collapse; margin-block: 1.5rem; font-size: 0.92rem; }
  .prose th, .prose td { text-align: start; padding: 0.75rem 0.6rem; border-block-end: 1px dotted var(--line-strong); vertical-align: top; }
  .prose th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-block-end: 1.5px solid var(--ink-deep); }
  .sotd-meta-row { justify-content: flex-start; margin-block-end: 0.65rem; }
  .featured-role { max-inline-size: 65ch; color: var(--muted); margin: 0; }
  .project-preview-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.75rem;
    border-block-end: 1px solid var(--line);
  }
  .project-preview-label span { font-size: 0.6rem; white-space: nowrap; }
  .sotd-overlay-bar { position: static; padding: 1rem; background: var(--surface); }
  .sotd-visit-btn { box-shadow: none; border: 1px solid var(--line); }
  .sotd-tech-badges span { background: transparent; color: var(--muted); border: 0; backdrop-filter: none; }
  .project-role { color: var(--muted); font-size: 0.8rem; margin: 0; }
  .project-live-link { align-self: flex-start; display: inline-flex; align-items: center; min-block-size: 2.75rem; font-size: 0.85rem; font-weight: 700; }
  .center-display-header { text-align: start; }
  @media (max-width: 780px) {
    .showcase-intro { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-block-end: 2rem; }
    .showcase-intro h1 { max-inline-size: 22ch; }
  }
}