/*
  1. Variables
  2. Reset
  3. Base
  4. Typography
  5. Accessibility
  6. Containers
  7. Frame Rail Header
  8. Mobile Navigation
  9. Frame Zero Hero
  10. Snapshot Cut
  11. Matchframe Shared Rules
  12. Diagonal Matchframe
  13. Floodlight Matchframe
  14. Horizon Matchframe
  15. Time Cut
  16. Six Team Field
  17. Information Sections
  18. Fixture Sequence
  19. Matchframe Guide
  20. About
  21. Contact Form
  22. Legal Pages
  23. Cookie Banner
  24. Cookie Preferences
  25. Final Frame Footer
  26. Animations
  27. Reduced Motion
  28. 1200px Media Query
  29. 768px Media Query
*/

/* --- 1. Variables --- */
:root {
  --color-primary-bg: #F1F2EC; /* Chalk White */
  --color-secondary-bg: #091A17; /* Pitch Ink */
  --color-deep-surface: #15362E; /* Stadium Green */
  --color-light-surface: #E7E5DA; /* Bone */
  
  --color-primary-accent: #C8F135; /* Electric Lime */
  --color-secondary-accent: #F26B5B; /* Coral Signal */
  --color-technical-blue: #4D7CFE; /* Technical Blue */
  
  --color-dark-text: #10211D;
  --color-light-text: #F7F8F2;
  --color-muted-text: #718078;
  
  --color-hairline-dark: rgba(9, 26, 23, 0.16);
  --color-hairline-light: rgba(255, 255, 255, 0.16);

  --font-display: 'Oswald', 'Impact', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-tech: 'JetBrains Mono', 'Courier New', monospace;

  --transition-fast: 0.2s ease;
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --header-height: 80px;
}

/* --- 2. Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html { scroll-behavior: smooth; }
body {
  background-color: var(--color-primary-bg);
  color: var(--color-dark-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
button { background: none; border: none; cursor: pointer; font: inherit; }

/* --- 3. Base --- */
body { font-family: var(--font-body); line-height: 1.6; }
.theme-dark { background-color: var(--color-secondary-bg); color: var(--color-light-text); }
.theme-light { background-color: var(--color-primary-bg); color: var(--color-dark-text); }
.theme-bone { background-color: var(--color-light-surface); color: var(--color-dark-text); }
.theme-stadium { background-color: var(--color-deep-surface); color: var(--color-light-text); }

/* --- 4. Typography --- */
h1, h2, h3, h4, .display-text { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; line-height: 1.1; }
.tech-text { font-family: var(--font-tech); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.text-accent-lime { color: var(--color-primary-accent); }
.text-accent-coral { color: var(--color-secondary-accent); }
.text-accent-blue { color: var(--color-technical-blue); }
.text-muted { color: var(--color-muted-text); }
p { margin-bottom: 1.5rem; font-size: 1.125rem; }

/* --- 5. Accessibility --- */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
:focus-visible { outline: 2px solid var(--color-primary-accent); outline-offset: 4px; }
.skip-link { position: absolute; top: -100px; left: 0; background: var(--color-primary-accent); color: var(--color-secondary-bg); padding: 1rem; z-index: 1000; transition: top 0.2s; }
.skip-link:focus { top: 0; }

/* --- 6. Containers --- */
.container { max-width: 1440px; margin: 0 auto; padding: 0 4vw; }
.section-pad { padding: 8vw 0; }
.grid { display: grid; }
.flex { display: flex; }

/* --- 7. Frame Rail Header --- */
.frame-rail {
  position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height);
  z-index: 900; transition: background-color var(--transition-smooth), border-bottom var(--transition-smooth);
  display: flex; align-items: center; justify-content: space-between; padding: 0 4vw;
  border-bottom: 1px solid transparent;
}
.frame-rail.scrolled {
  background-color: var(--color-secondary-bg); border-bottom: 1px solid var(--color-hairline-light);
  color: var(--color-light-text);
}
.frame-rail .brand { font-family: var(--font-display); font-size: 1.5rem; position: relative; }
.frame-rail .brand::after {
  content: ''; position: absolute; bottom: -8px; left: 0; width: 40px; height: 2px;
  background-color: var(--color-primary-accent);
}
.desktop-nav { display: flex; gap: 2.5rem; font-family: var(--font-body); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
.desktop-nav a:hover { color: var(--color-primary-accent); }
.header-marker { font-family: var(--font-tech); font-size: 0.875rem; }
.menu-trigger { display: none; font-family: var(--font-tech); text-transform: uppercase; color: inherit; font-size: 0.875rem; }

/* --- 8. Mobile Navigation --- */
.mobile-nav-panel {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
  background-color: var(--color-secondary-bg); color: var(--color-light-text);
  z-index: 950; transform: translateY(-100%); transition: transform var(--transition-smooth);
  display: flex; flex-direction: column; justify-content: center; padding: 4vw;
}
.mobile-nav-panel.open { transform: translateY(0); }
.mobile-nav-panel .close-menu { position: absolute; top: 25px; right: 4vw; color: var(--color-light-text); font-family: var(--font-tech); font-size: 1rem; }
.mobile-nav-list { display: flex; flex-direction: column; gap: 2rem; font-family: var(--font-display); font-size: 3rem; }
.mobile-nav-list a:hover { color: var(--color-primary-accent); }

/* --- 9. Frame Zero Hero --- */
.hero-frame-zero {
  position: relative; height: 100vh; width: 100%; overflow: hidden; background-color: var(--color-secondary-bg); color: var(--color-light-text);
}
.hero-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; mix-blend-mode: luminosity; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(9,26,23,0.9) 0%, rgba(9,26,23,0.4) 50%, rgba(9,26,23,0.8) 100%); }
.hero-content {
  position: relative; height: 100%; display: grid; grid-template-columns: 100px 1fr 200px; grid-template-rows: 1fr auto;
  padding: calc(var(--header-height) + 2vw) 4vw 4vw 4vw;
}
.hero-left-label { writing-mode: vertical-lr; transform: rotate(180deg); font-family: var(--font-tech); font-size: 0.875rem; color: var(--color-primary-accent); display: flex; align-items: center; gap: 1rem; }
.hero-center { align-self: center; }
.hero-center h1 { font-size: clamp(4rem, 8vw, 10rem); margin-bottom: 1.5rem; letter-spacing: -0.02em; }
.hero-center p { font-size: 1.25rem; max-width: 400px; color: var(--color-light-surface); }
.hero-ctas { margin-top: 3rem; display: flex; gap: 1.5rem; align-items: center; }
.btn-primary { display: inline-block; padding: 1rem 2rem; background-color: var(--color-primary-accent); color: var(--color-secondary-bg); font-family: var(--font-tech); text-transform: uppercase; font-weight: 700; transition: background-color var(--transition-fast); }
.btn-primary:hover { background-color: #fff; }
.btn-secondary { font-family: var(--font-tech); text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 0.25rem; }
.hero-right-number { align-self: center; justify-self: end; font-family: var(--font-tech); font-size: clamp(8rem, 15vw, 20rem); color: rgba(255,255,255,0.05); line-height: 0.8; }
.hero-bottom-ticker { grid-column: 1 / -1; align-self: end; border-top: 1px solid var(--color-hairline-light); padding-top: 1.5rem; display: flex; justify-content: space-between; font-family: var(--font-tech); font-size: 0.875rem; color: var(--color-muted-text); }

/* --- 10. Snapshot Cut --- */
.snapshot-cut { border-bottom: 1px solid var(--color-hairline-dark); }
.snapshot-bar { display: flex; justify-content: space-between; align-items: center; padding: 2rem 0; font-family: var(--font-tech); font-size: 0.875rem; text-transform: uppercase; flex-wrap: wrap; gap: 2rem; }

/* --- 11. Matchframe Shared Rules --- */
.matchframe-section { padding-bottom: 8vw; }
.matchframe-block { position: relative; margin-bottom: 12vw; width: 100%; min-height: 80vh; display: flex; align-items: center; }
.mf-team-name { font-family: var(--font-display); font-size: clamp(2.8rem, 5.5vw, 6.5rem); line-height: 0.9; text-transform: uppercase; z-index: 10; position: relative; }
.mf-meta { font-family: var(--font-tech); display: flex; flex-direction: column; gap: 0.5rem; z-index: 10; position: relative; }
.mf-stage { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
.mf-date { font-family: var(--font-tech); font-size: clamp(1.125rem, 1.5vw, 1.375rem); }
.mf-time { font-family: var(--font-tech); font-size: clamp(3.5rem, 7vw, 7.5rem); line-height: 1; }
.mf-image-wrap { position: absolute; z-index: 1; overflow: hidden; }
.mf-image { width: 100%; height: 100%; object-fit: cover; }
.mf-flag { width: 48px; height: auto; margin-top: 1rem; }

/* --- 12. Diagonal Matchframe (Spain vs Belgium) --- */
.mf-diagonal { background-color: var(--color-secondary-bg); color: var(--color-light-text); justify-content: center; overflow: hidden;}
.mf-diagonal .mf-image-wrap { inset: 0; clip-path: polygon(0 0, 70% 0, 30% 100%, 0 100%); opacity: 0.5; }
.mf-diagonal .content-grid { position: relative; z-index: 10; width: 100%; max-width: 1440px; padding: 0 4vw; display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: center; }
.mf-diag-left { align-self: start; padding-top: 10vh; }
.mf-diag-right { align-self: end; padding-bottom: 10vh; text-align: right; display: flex; flex-direction: column; align-items: flex-end;}
.mf-diag-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-tech); font-size: clamp(1rem, 1.5vw, 1.6rem); color: var(--color-secondary-accent); }
.mf-diagonal .mf-time { color: var(--color-secondary-accent); }

/* --- 13. Floodlight Matchframe (Norway vs England) --- */
.mf-floodlight { background-color: var(--color-primary-bg); color: var(--color-dark-text); align-items: stretch; }
.mf-flood-grid { width: 100%; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 40%; }
.mf-flood-content { padding: 4vw; display: flex; flex-direction: column; justify-content: center; position: relative; border-right: 2px solid var(--color-technical-blue); }
.mf-flood-bg-num { position: absolute; top: 50%; left: 4vw; transform: translateY(-50%); font-family: var(--font-tech); font-size: 30vw; color: var(--color-hairline-dark); z-index: 0; line-height: 0.7; pointer-events: none; }
.mf-floodlight .mf-team-name { margin-bottom: 1rem; }
.mf-floodlight .mf-meta { margin-top: auto; padding-top: 4rem; border-top: 1px solid var(--color-hairline-dark); }
.mf-floodlight .mf-time { color: var(--color-technical-blue); }
.mf-flood-image-wrap { position: relative; width: 100%; height: 100%; }

/* --- 14. Horizon Matchframe (Argentina vs Switzerland) --- */
.mf-horizon { background-color: var(--color-deep-surface); color: var(--color-light-text); display: flex; flex-direction: column; padding-top: 8vw; }
.mf-horiz-container { max-width: 1440px; width: 100%; margin-inline: auto; padding-inline: clamp(24px, 5vw, 80px); position: relative; z-index: 10; }
.mf-horiz-stage { font-family: var(--font-tech); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2rem; color: var(--color-muted-text); }
.mf-horiz-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: center; margin-bottom: 2rem; }
.mf-team-left { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); text-align: left; }
.mf-team-right { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); text-align: right; justify-content: flex-end; }
.mf-vs { font-family: var(--font-tech); font-size: clamp(1rem, 1.5vw, 1.6rem); color: var(--color-primary-accent); text-align: center; }
.mf-flag-inline { width: clamp(40px, 5vw, 64px); height: auto; object-fit: contain; }
.mf-horizon .mf-image-wrap { position: relative; width: 100%; height: 45vh; z-index: 1; margin: 2vw 0; overflow: hidden; }
.mf-horiz-rail { max-width: 1440px; width: 100%; margin-inline: auto; padding-inline: clamp(24px, 5vw, 80px); display: flex; justify-content: space-between; align-items: flex-end; position: relative; z-index: 10; padding-bottom: 4vw; }
.mf-horizon .mf-time { color: var(--color-primary-accent); }

/* --- 15. Time Cut --- */
.time-cut { border-top: 1px solid var(--color-hairline-dark); border-bottom: 1px solid var(--color-hairline-dark); }
.time-cut-title { font-size: 2rem; margin-bottom: 4rem; }
.time-chronology { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; }
.time-marker { border-left: 2px solid var(--color-dark-text); padding-left: 2rem; position: relative; }
.time-marker::before { content: ''; position: absolute; left: -6px; top: 0; width: 10px; height: 10px; background-color: var(--color-primary-accent); border-radius: 50%; }
.tm-date { font-family: var(--font-tech); font-size: 1rem; color: var(--color-muted-text); margin-bottom: 0.5rem; display: block; }
.tm-time { font-family: var(--font-tech); font-size: 3rem; line-height: 1; margin-bottom: 1rem; display: block; }
.tm-fixture { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; }

/* --- 16. Six Team Field --- */
.six-teams { overflow: hidden; background-color: var(--color-light-surface); }
.six-title { text-align: center; font-size: 1.5rem; margin-bottom: 4rem; color: var(--color-muted-text); }
.six-field { position: relative; height: 60vh; width: 100%; }
.six-field span { position: absolute; font-family: var(--font-display); text-transform: uppercase; line-height: 0.9; color: var(--color-dark-text); }
.sf-spain { top: 10%; left: 5%; font-size: 8vw; }
.sf-belgium { bottom: 15%; right: 5%; font-size: 6vw; writing-mode: vertical-rl; }
.sf-norway { top: 40%; left: 40%; font-size: 10vw; color: transparent; -webkit-text-stroke: 2px var(--color-dark-text); }
.sf-england { top: 5%; right: 20%; font-size: 5vw; }
.sf-argentina { bottom: 5%; left: 10%; font-size: 7vw; }
.sf-switzerland { top: 60%; right: 30%; font-size: 4vw; }
.pitch-lines { position: absolute; inset: 0; border: 2px solid var(--color-hairline-dark); margin: 4vw; pointer-events: none; }
.pitch-lines::after { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background-color: var(--color-hairline-dark); transform: translateX(-50%); }
.pitch-circle { position: absolute; top: 50%; left: 50%; width: 20vw; height: 20vw; border: 2px solid var(--color-hairline-dark); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }

/* --- 17. Information Sections --- */
.info-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; }
.info-panel { padding: 4vw; background-color: var(--color-primary-bg); border: 1px solid var(--color-hairline-dark); }
.info-panel h3 { font-size: 2rem; margin-bottom: 2rem; }
.info-list { font-family: var(--font-tech); display: flex; flex-direction: column; gap: 1rem; }
.info-list li { padding-bottom: 1rem; border-bottom: 1px solid var(--color-hairline-dark); display: flex; align-items: flex-start; gap: 1rem; }
.info-list li::before { content: '→'; color: var(--color-primary-accent); }
.editorial-note { text-align: center; max-width: 800px; margin: 0 auto; padding: 4vw; font-family: var(--font-tech); color: var(--color-muted-text); }

/* --- 18. Fixture Sequence (fixtures.html) --- */
.page-header { padding: calc(var(--header-height) + 8vw) 4vw 4vw 4vw; background-color: var(--color-secondary-bg); color: var(--color-light-text); }
.page-title { font-size: clamp(3rem, 6vw, 6rem); margin-bottom: 1rem; }
.page-desc { font-family: var(--font-tech); color: var(--color-primary-accent); font-size: 1.25rem; }
.seq-wrap { background-color: var(--color-primary-bg); padding: 8vw 4vw; }
.seq-fixture { margin-bottom: 12vw; border: 1px solid var(--color-hairline-dark); background: var(--color-light-surface); }
.seq-1 { display: grid; grid-template-columns: 60% 40%; }
.seq-1-img { height: 60vh; object-fit: cover; }
.seq-1-content { padding: 4vw; display: flex; flex-direction: column; justify-content: space-between; }
.seq-2 { display: grid; grid-template-columns: 30% 40% 30%; text-align: center; background: var(--color-secondary-bg); color: var(--color-light-text); }
.seq-2-col { padding: 4vw; display: flex; flex-direction: column; justify-content: center; }
.seq-2-img { height: 50vh; object-fit: cover; width: 100%; border-left: 1px solid var(--color-hairline-light); border-right: 1px solid var(--color-hairline-light); }
.seq-3 { background: var(--color-deep-surface); color: var(--color-light-text); display: flex; flex-direction: column; padding: 4vw 0; border: 1px solid var(--color-hairline-dark); }
.seq-3-img { width: 100%; height: 45vh; object-fit: cover; margin: 2vw 0; opacity: 0.7; }

/* --- 19. Matchframe Guide --- */
.guide-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: start; }
.guide-visual { position: sticky; top: calc(var(--header-height) + 4vw); background: var(--color-secondary-bg); padding: 4vw; color: var(--color-light-text); }
.gv-mockup { border: 1px solid var(--color-hairline-light); padding: 2rem; position: relative; }
.gv-point { position: absolute; width: 30px; height: 30px; background: var(--color-primary-accent); color: var(--color-secondary-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-tech); font-weight: bold; font-size: 0.875rem; }
.gp-1 { top: -15px; left: -15px; }
.gp-2 { top: 40%; left: 20%; }
.gp-3 { bottom: 20%; right: 10%; }
.gp-4 { bottom: -15px; right: -15px; }
.gp-5 { top: -15px; right: -15px; background: var(--color-secondary-accent); }
.guide-text h2 { margin-bottom: 2rem; font-size: 2.5rem; }
.guide-list { display: flex; flex-direction: column; gap: 3rem; }
.guide-item h3 { font-family: var(--font-tech); font-size: 1.25rem; margin-bottom: 1rem; color: var(--color-primary-accent); display: flex; gap: 1rem; }
.guide-item p { margin-bottom: 0; }
.guide-note { margin-top: 4rem; padding: 2rem; background: var(--color-light-surface); border-left: 4px solid var(--color-secondary-accent); font-family: var(--font-tech); }

/* --- 20. About --- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; padding: 8vw 0; }
.about-content h2 { font-size: 3rem; margin-bottom: 2rem; }
.about-image img { width: 100%; height: auto; border-radius: 2px; }

/* --- 21. Contact Form --- */
.contact-wrap { max-width: 800px; margin: 0 auto; padding: 8vw 0; }
.contact-form { display: flex; flex-direction: column; gap: 2rem; background: var(--color-light-surface); padding: 4vw; border: 1px solid var(--color-hairline-dark); }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group label { font-family: var(--font-tech); font-size: 0.875rem; text-transform: uppercase; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 1rem; border: 1px solid var(--color-hairline-dark); background: var(--color-primary-bg); font-family: var(--font-body); font-size: 1rem; transition: border-color var(--transition-fast); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-technical-blue); }
.form-group textarea { resize: vertical; min-height: 150px; }
.form-message { padding: 1rem; background: var(--color-deep-surface); color: var(--color-primary-accent); font-family: var(--font-tech); font-size: 0.875rem; display: none; }

/* --- 22. Legal Pages --- */
.legal-content { max-width: 800px; margin: 0 auto; padding: 8vw 0; }
.legal-content h2 { font-size: 2rem; margin-top: 3rem; margin-bottom: 1.5rem; }
.legal-content p, .legal-content li { margin-bottom: 1rem; color: var(--color-muted-text); }
.legal-content ul { padding-left: 2rem; list-style: disc; margin-bottom: 2rem; }

/* --- 23. Cookie Banner --- */
.cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--color-secondary-bg); color: var(--color-light-text); z-index: 1000; padding: 2vw 4vw; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; border-top: 1px solid var(--color-hairline-light); transform: translateY(100%); transition: transform var(--transition-smooth); }
.cookie-banner.visible { transform: translateY(0); }
.cb-text p { margin: 0; font-size: 0.875rem; max-width: 600px; }
.cb-text a { color: var(--color-primary-accent); text-decoration: underline; }
.cb-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-cb { padding: 0.75rem 1.5rem; font-family: var(--font-tech); text-transform: uppercase; font-size: 0.75rem; cursor: pointer; border: 1px solid transparent; }
.btn-cb-accept { background: var(--color-primary-accent); color: var(--color-secondary-bg); font-weight: bold; }
.btn-cb-reject { background: transparent; color: var(--color-light-text); border-color: var(--color-hairline-light); }
.btn-cb-manage { background: transparent; color: var(--color-muted-text); text-decoration: underline; }

/* --- 24. Cookie Preferences --- */
.cookie-pref-panel { position: fixed; inset: 0; background: rgba(9,26,23,0.9); z-index: 1050; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); padding: 4vw; }
.cookie-pref-panel.open { opacity: 1; pointer-events: auto; }
.cp-content { background: var(--color-primary-bg); color: var(--color-dark-text); padding: 4vw; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; position: relative; }
.cp-close { position: absolute; top: 1.5rem; right: 1.5rem; font-family: var(--font-tech); font-size: 1.5rem; line-height: 1; }
.cp-content h2 { margin-bottom: 2rem; font-size: 2rem; }
.cp-option { border-top: 1px solid var(--color-hairline-dark); padding: 1.5rem 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.cp-opt-text h3 { font-family: var(--font-tech); font-size: 1rem; margin-bottom: 0.5rem; }
.cp-opt-text p { font-size: 0.875rem; color: var(--color-muted-text); margin: 0; }
.cp-toggle { font-family: var(--font-tech); font-size: 0.75rem; padding: 0.5rem 1rem; background: var(--color-light-surface); }
.cp-toggle.active-lock { opacity: 0.5; pointer-events: none; }
.cp-save { margin-top: 2rem; width: 100%; text-align: center; }

/* --- 25. Final Frame Footer --- */
.final-frame { background: var(--color-secondary-bg); color: var(--color-light-text); padding: 8vw 4vw 4vw 4vw; border-top: 4px solid var(--color-primary-accent); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4vw; margin-bottom: 8vw; }
.footer-brand { font-family: var(--font-display); font-size: 2rem; margin-bottom: 1rem; }
.footer-brand span { color: var(--color-primary-accent); }
.footer-nav { display: flex; flex-direction: column; gap: 1rem; font-family: var(--font-tech); text-transform: uppercase; font-size: 0.875rem; }
.footer-nav a:hover { color: var(--color-primary-accent); }
.footer-bottom { border-top: 1px solid var(--color-hairline-light); padding-top: 2rem; font-family: var(--font-tech); font-size: 0.75rem; color: var(--color-muted-text); display: flex; flex-direction: column; gap: 0.5rem; }

/* --- 26. Animations --- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* --- 27. Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* --- 28. 1200px Media Query --- */
@media (max-width: 1200px) {
  .hero-center h1 { font-size: clamp(3.5rem, 6vw, 7rem); }
  .mf-team-name { font-size: clamp(2.2rem, 6vw, 4.5rem); }
  .mf-time { font-size: clamp(3rem, 8vw, 5.5rem); }
}

/* --- 29. 768px Media Query --- */
@media (max-width: 768px) {
  .desktop-nav, .header-marker { display: none; }
  .menu-trigger { display: block; }
  .hero-content { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .hero-left-label { writing-mode: horizontal-tb; transform: none; margin-bottom: 2rem; justify-content: flex-start; }
  .hero-right-number { display: none; }
  .hero-bottom-ticker { flex-direction: column; gap: 0.5rem; align-items: center; text-align: center; }
  
  .mf-team-name { font-size: clamp(1.8rem, 10vw, 3.2rem); }
  .mf-time { font-size: clamp(2.5rem, 14vw, 4.5rem); }
  
  .mf-diagonal .content-grid { grid-template-columns: 1fr; text-align: center; padding-top: 4vw; padding-bottom: 4vw; gap: 10vw; }
  .mf-diagonal .mf-image-wrap { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); }
  .mf-diag-right { text-align: center; align-items: center; }
  .mf-diag-vs { position: relative; left: auto; top: auto; transform: none; margin: 2rem 0; }
  
  .mf-flood-grid { grid-template-columns: 1fr; }
  .mf-flood-content { border-right: none; border-bottom: 2px solid var(--color-technical-blue); padding: 8vw 4vw; }
  .mf-flood-image-wrap { height: 40vh; }
  
  .mf-horiz-teams { grid-template-columns: 1fr; gap: 1.5rem; justify-items: center; }
  .mf-team-left { flex-direction: column; text-align: center; width: 100%; justify-content: center; }
  .mf-team-right { flex-direction: column-reverse; text-align: center; width: 100%; justify-content: center; }
  .mf-horiz-rail { flex-direction: column; align-items: center; gap: 1rem; padding-bottom: 8vw; }
  .seq-3-img { height: 30vh; }
  
  .time-chronology { grid-template-columns: 1fr; gap: 2rem; }
  .six-field span { position: relative; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; display: block; font-size: 2.5rem !important; margin-bottom: 1rem; text-align: center; writing-mode: horizontal-tb; color: var(--color-dark-text) !important; -webkit-text-stroke: 0 !important; }
  .six-field { height: auto; padding: 4vw; }
  .pitch-lines, .pitch-circle { display: none; }
  
  .info-panels { grid-template-columns: 1fr; }
  
  .seq-1, .seq-2 { grid-template-columns: 1fr; }
  .seq-1-img, .seq-2-img { height: 40vh; border: none; }
  
  .guide-layout, .about-grid { grid-template-columns: 1fr; }
  .guide-visual { position: relative; top: 0; margin-bottom: 4vw; }
  
  .footer-grid { grid-template-columns: 1fr; }
}

/* --- 30. 480px Media Query --- */
@media (max-width: 480px) {
  .btn-primary { width: 100%; text-align: center; }
  .hero-ctas { flex-direction: column; width: 100%; align-items: stretch; }
  .btn-secondary { text-align: center; }
  .cb-actions { flex-direction: column; width: 100%; }
  .btn-cb { width: 100%; }
}
/* ENDFILE */

<!-- FILE: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>World Cup 2026 Quarter-Final Matchframe | pixeldeckscot</title>
  <meta name="description" content="A fixed editorial matchframe for three supplied World Cup 2026 quarter-final fixtures featuring Spain, Belgium, Norway, England, Argentina and Switzerland.">
  <link rel="stylesheet" href="style.css?v=b9169140">
  <script src="main.js?v=6aef5954" defer></script>
</head>
<body>
  <a href="#main-content" class="skip-link">Skip to content</a>

  <!-- SECTION 1: Frame Rail Header -->
  <header class="frame-rail">
    <a href="./" class="brand">pixeldeckscot</a>
    <nav class="desktop-nav" aria-label="Main Navigation">
      <a href="./">Matchframe</a>
      <a href="fixtures.html">Fixtures</a>
      <a href="matchframe-guide.html">Frame Guide</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
    <div class="header-marker">QF / 03</div>
    <button class="menu-trigger" aria-expanded="false" aria-controls="mobile-nav">Menu</button>
  </header>

  <!-- Mobile Navigation Panel -->
  <div class="mobile-nav-panel" id="mobile-nav">
    <button class="close-menu" aria-label="Close menu">Close [ESC]</button>
    <nav class="mobile-nav-list">
      <a href="./">Matchframe</a>
      <a href="fixtures.html">Fixtures</a>
      <a href="matchframe-guide.html">Frame Guide</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
  </div>

  <main id="main-content">
    <!-- SECTION 2: Frame Zero Hero -->
    <section class="hero-frame-zero">
      <img src="images/matchframe-hero.webp" alt="Cinematic football stadium at night seen through bold architectural foreground framing" class="hero-image">
      <div class="hero-overlay"></div>
      
      <div class="hero-content">
        <div class="hero-left-label">
          <span>QUARTER-FINALS</span>
          <span>STATIC SNAPSHOT</span>
        </div>
        
        <div class="hero-center reveal">
          <h1>THREE FIXTURES.<br>THREE FRAMES.</h1>
          <p>A fixed editorial view of three supplied quarter-final fixtures.</p>
          <div class="hero-ctas">
            <a href="#matchframes" class="btn-primary">Open the Matchframe</a>
            <a href="fixtures.html" class="btn-secondary">View Fixtures</a>
          </div>
          <div class="tech-text" style="margin-top: 1.5rem; font-size: 0.75rem; color: var(--color-secondary-accent);">
            NO LIVE SCORE FEED / NO PREDICTIONS
          </div>
        </div>
        
        <div class="hero-right-number">03</div>
        
        <div class="hero-bottom-ticker">
          <span>ESP / BEL</span>
          <span>NOR / ENG</span>
          <span>ARG / SUI</span>
        </div>
      </div>
    </section>

    <!-- SECTION 3: Snapshot Cut -->
    <section class="snapshot-cut container">
      <div class="snapshot-bar reveal">
        <span>QUARTER-FINALS</span>
        <span>03 FIXTURES</span>
        <span>06 TEAMS</span>
        <span class="text-accent-coral">STATIC DATA</span>
      </div>
    </section>

    <!-- SECTION 4: Three Matchframes -->
    <section id="matchframes" class="matchframe-section">
      
      <!-- MATCHFRAME 01 - DIAGONAL CUT -->
      <article class="matchframe-block mf-diagonal reveal">
        <div class="mf-image-wrap">
          <img src="images/spain-belgium-frame.webp" alt="Cinematic football tunnel and pitch environment with diagonal architectural frame" class="mf-image">
        </div>
        <div class="content-grid">
          <div class="mf-diag-left">
            <h2 class="mf-team-name">Spain</h2>
            <img src="images/flags/spain.svg" alt="Flag of Spain" class="mf-flag" style="margin-top: 0; margin-bottom: 2rem;">
            <div class="mf-meta">
              <span class="mf-stage">Quarter-final</span>
              <span class="mf-date">Tomorrow</span>
            </div>
          </div>
          <div class="mf-diag-vs">VS</div>
          <div class="mf-diag-right">
            <div class="mf-meta text-right">
              <span class="mf-time">21:00</span>
            </div>
            <img src="images/flags/belgium.svg" alt="Flag of Belgium" class="mf-flag">
            <h2 class="mf-team-name">Belgium</h2>
          </div>
        </div>
      </article>

      <!-- MATCHFRAME 02 - FLOODLIGHT COLUMN -->
      <article class="matchframe-block mf-floodlight reveal">
        <div class="mf-flood-grid">
          <div class="mf-flood-content">
            <div class="mf-flood-bg-num">02</div>
            <img src="images/flags/norway.svg" alt="Flag of Norway" class="mf-flag" style="position: relative; z-index: 10; margin-bottom: 1rem;">
            <h2 class="mf-team-name">Norway</h2>
            <div class="tech-text text-accent-blue" style="font-size: 2rem; margin-bottom: 1rem; position: relative; z-index: 10;">VS</div>
            <h2 class="mf-team-name">England</h2>
            <img src="images/flags/england.svg" alt="Flag of England" class="mf-flag" style="position: relative; z-index: 10;">
            
            <div class="mf-meta">
              <span class="mf-stage">Quarter-final</span>
              <span class="mf-date">Sat, 11 Jul</span>
              <span class="mf-time">23:00</span>
            </div>
          </div>
          <div class="mf-flood-image-wrap">
            <img src="images/norway-england-frame.webp" alt="Cinematic football stadium technical area with strong vertical floodlight structures" class="mf-image">
          </div>
        </div>
      </article>

      <!-- MATCHFRAME 03 - HORIZON FRAME -->
      <article class="matchframe-block mf-horizon reveal">
        <div class="mf-horiz-container">
          <div class="mf-horiz-stage">Quarter-final</div>
          <div class="mf-horiz-teams">
            <div class="mf-team-left">
              <img src="images/flags/argentina.svg" alt="Flag of Argentina" class="mf-flag-inline">
              <h2 class="mf-team-name">Argentina</h2>
            </div>
            <div class="mf-vs">VS</div>
            <div class="mf-team-right">
              <h2 class="mf-team-name">Switzerland</h2>
              <img src="images/flags/switzerland.svg" alt="Flag of Switzerland" class="mf-flag-inline">
            </div>
          </div>
        </div>
        <div class="mf-image-wrap">
          <img src="images/argentina-switzerland-frame.webp" alt="Panoramic football stadium atmosphere with wide horizon composition" class="mf-image">
        </div>
        <div class="mf-horiz-rail">
          <div class="mf-date">Sun, 12 Jul</div>
          <div class="mf-time">03:00</div>
        </div>
      </article>

    </section>

    <!-- SECTION 5: THE TIME CUT -->
    <section class="time-cut container section-pad">
      <h2 class="time-cut-title display-text reveal">The Time Cut</h2>
      <div class="time-chronology reveal">
        <div class="time-marker">
          <span class="tm-date">Tomorrow</span>
          <span class="tm-time">21:00</span>
          <span class="tm-fixture">Spain vs Belgium</span>
        </div>
        <div class="time-marker">
          <span class="tm-date">Sat, 11 Jul</span>
          <span class="tm-time">23:00</span>
          <span class="tm-fixture">Norway vs England</span>
        </div>
        <div class="time-marker">
          <span class="tm-date">Sun, 12 Jul</span>
          <span class="tm-time">03:00</span>
          <span class="tm-fixture">Argentina vs Switzerland</span>
        </div>
      </div>
    </section>

    <!-- SECTION 6: THE SIX -->
    <section class="six-teams section-pad">
      <h2 class="six-title display-text reveal">The Six</h2>
      <div class="six-field reveal">
        <div class="pitch-lines"></div>
        <div class="pitch-circle"></div>
        <span class="sf-spain">Spain</span>
        <span class="sf-belgium">Belgium</span>
        <span class="sf-norway">Norway</span>
        <span class="sf-england">England</span>
        <span class="sf-argentina">Argentina</span>
        <span class="sf-switzerland">Switzerland</span>
      </div>
    </section>

    <!-- SECTION 7 & 8: Information Panels -->
    <section class="container section-pad">
      <div class="info-panels reveal">
        <!-- SECTION 7 -->
        <div class="info-panel">
          <h3 class="display-text">What the frame contains</h3>
          <ul class="info-list">
            <li>Fixture stage identification</li>
            <li>Supplied team names</li>
            <li>Supplied date labels</li>
            <li>Supplied kickoff times</li>
            <li>Static snapshot status</li>
          </ul>
        </div>
        <!-- SECTION 8 -->
        <div class="info-panel theme-dark">
          <h3 class="display-text text-accent-coral">What the frame does not claim</h3>
          <ul class="info-list">
            <li>No live scores</li>
            <li>No predictions or odds</li>
            <li>No betting information</li>
            <li>No invented lineups or tactics</li>
            <li>No invented venues</li>
            <li>No automatic updates</li>
          </ul>
        </div>
      </div>
    </section>

    <!-- SECTION 9: Editorial Note -->
    <section class="editorial-note reveal">
      <p>pixeldeckscot is an independent editorial website. This page presents a fixed snapshot of supplied data. It is not affiliated with FIFA, any national team, or any betting operator.</p>
    </section>
  </main>

  <!-- SECTION 10: Footer -->
  <footer class="final-frame">
    <div class="footer-grid">
      <div>
        <div class="footer-brand">pixeldeck<span>scot</span></div>
        <p class="text-muted">Independent fixed-snapshot football editorial.</p>
      </div>
      <nav class="footer-nav" aria-label="Footer Navigation">
        <a href="./">Matchframe</a>
        <a href="fixtures.html">Fixtures</a>
        <a href="matchframe-guide.html">Frame Guide</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
      </nav>
      <nav class="footer-nav" aria-label="Legal Navigation">
        <a href="terms.html">Terms</a>
        <a href="privacy.html">Privacy</a>
        <a href="cookies.html">Cookies</a>
      </nav>
    </div>
    <div class="footer-bottom">
      <p>Independent editorial website. Not affiliated with FIFA or any national team.</p>
      <p>Static fixture snapshot. No live score service.</p>
      <p>&copy; 2026 pixeldeckscot.asia. All rights reserved.</p>
    </div>
  </footer>

  <!-- SECTION 11: Cookie Banner -->
  <div class="cookie-banner" id="cookieBanner" role="dialog" aria-labelledby="cookieTitle">
    <div class="cb-text">
      <p id="cookieTitle">We use cookies to respect your privacy and manage preferences. Review our <a href="cookies.html">Cookies Page</a> for details.</p>
    </div>
    <div class="cb-actions">
      <button class="btn-cb btn-cb-manage" id="cbManage">Manage Preferences</button>
      <button class="btn-cb btn-cb-reject" id="cbReject">Reject Non-Essential</button>
      <button class="btn-cb btn-cb-accept" id="cbAccept">Accept All</button>
    </div>
  </div>

  <div class="cookie-pref-panel" id="cookiePrefPanel" role="dialog" aria-modal="true" aria-labelledby="prefTitle">
    <div class="cp-content">
      <button class="cp-close" id="closePref" aria-label="Close preferences">&times;</button>
      <h2 class="display-text" id="prefTitle">Cookie Preferences</h2>
      
      <div class="cp-option">
        <div class="cp-opt-text">
          <h3>ESSENTIAL</h3>
          <p>Required for basic site functionality. Always Active.</p>
        </div>
        <button class="cp-toggle active-lock" aria-disabled="true">ON</button>
      </div>
      
      <div class="cp-option">
        <div class="cp-opt-text">
          <h3>ANALYTICS</h3>
          <p>Optional measurement of site performance.</p>
        </div>
        <button class="cp-toggle" id="toggleAnalytics">OFF</button>
      </div>
      
      <div class="cp-option">
        <div class="cp-opt-text">
          <h3>PREFERENCES</h3>
          <p>Optional interface customisations.</p>
        </div>
        <button class="cp-toggle" id="togglePref">OFF</button>
      </div>
      
      <button class="btn-primary cp-save" id="savePref">Save Choices</button>
    </div>
  </div>
</body>
</html>