/* -----------------------------------
   Root Design Tokens (no visual change)
------------------------------------ */
:root{
  /* Colors */
  --c-white: #fff;
  --c-black: #000;
  --c-dark-1: #222;
  --c-dark-2: #333;
  --c-light-1: #fff;
  --c-light-2: #eee;

  /* Gradients */
  --grad-dark: linear-gradient(145deg, var(--c-dark-1) 0, var(--c-dark-2) 80%);
  --grad-light: linear-gradient(145deg, var(--c-light-2) 0, var(--c-light-1) 80%);

  /* Fonts */
  --font-sans-1: Nunito, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-sans-2: Roboto, system-ui, -apple-system, Segoe UI, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", Times, serif;

  /* Typography sizes */
  --fs-h1-xl: 5.5rem;
  --fs-h2-xl: 3.5rem;
  --fs-h1-md: 5rem;
  --fs-h2-md: 3rem;
  --fs-h1-sm: 4rem;
  --fs-h2-sm: 2.5rem;
  --fs-body-lg: 1.75rem;
  --fs-list-lg: 1.85rem;
  --fs-legal-h: 2rem;
  --fs-legal-p: 1.25rem;
  --lh-legal-p: 1.75rem;
  --lh-quote: 1.6;

  /* Spacing & layout */
  --space-0: 0;
  --space-1: 1rem;
  --space-2: 2rem;
  --space-3: 3rem;
  --space-4: 4rem;
  --space-6: 6rem;
  --gap-rows: 10px;
  --gap-col: 2rem;

  /* Sizes */
  --container-max: 1200px;
  --avatar-max: 400px;

  /* Borders */
  --quote-border: 8px solid var(--c-dark-2);
}

/* -----------------------------------
   Fonts (kept identical, just tidy)
------------------------------------ */
@font-face{
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-v30-latin/roboto-v30-latin-regular.woff2') format('woff2');
}
@font-face{
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-v30-latin/roboto-v30-latin-700.woff2') format('woff2');
}
@font-face{
  font-family: Nunito;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-v26-latin/nunito-v26-latin-regular.woff2') format('woff2');
}
@font-face{
  font-family: Nunito;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/nunito-v26-latin/nunito-v26-latin-800.woff2') format('woff2');
}
@font-face{
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-display-v36-latin/playfair-display-v36-latin-regular.woff2') format('woff2');
}

/* -----------------------------------
   Base
------------------------------------ */
html, body{
  color: var(--c-white);
  background: var(--grad-dark);
  font-family: var(--font-sans-1);
  scroll-behavior: smooth;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 0.5em 1em;
  z-index: 100;
  transition: top 0.3s ease;
}
.skip-link:focus {
  top: 0;
}

a:focus-visible,
button:focus-visible {
  outline: 3px dashed var(--c-light-2);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Shared text colors */
footer,
.legal,
.legal a{ color: var(--c-black); }

h1, h2{ font-family: var(--font-sans-2); }

h1{
  text-align: left;
  font-size: var(--fs-h1-xl);
}
h2{ font-size: var(--fs-h2-xl); }

blockquote, p{ font-size: var(--fs-body-lg); }

img{ max-width: 100%; height: auto; }
.avatar{ height: auto; }

/* -----------------------------------
   Structure / Layout
------------------------------------ */
section{
  margin: var(--space-0);
  padding: var(--space-2) 0 var(--space-6);
}

.content-wrapper{
  margin: auto;
  padding: var(--space-1);
  max-width: var(--container-max);
}

.row,
footer ul{
  padding: var(--space-0);
  display: flex;
}

.row{
  margin: var(--space-0);
  flex-wrap: wrap;
  justify-content: space-between;
}

.column{
  flex: 1;
  box-sizing: border-box;
}
.column:first-child{ margin-right: var(--gap-col); }

/* -----------------------------------
   Footer (desktop + mobile stacking)
------------------------------------ */
footer {
  margin: var(--space-0);
  padding: var(--space-1) 0;
  background: var(--grad-light);
  text-transform: uppercase;
}

footer ul {
  list-style: none;
  margin: var(--space-1) 0;
  padding: var(--space-0);
  display: flex;
  flex-wrap: wrap;
}

footer ul li {
  margin-right: var(--space-1);
  min-height: 44px;
}

footer ul li:last-child {
  margin-left: auto;
}

footer ul li a {
  color: var(--c-black);
  text-decoration: none;
  display: inline-block;
  padding: 0.5rem 0;
}

/* Stack footer links vertically on mobile */
@media (max-width: 768px) {
  footer ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  footer ul li {
    margin-right: 0;
    margin-left: 0;
    width: 100%;
  }

  footer ul li:last-child {
    margin-left: 0;
  }

  footer ul li a {
    width: 100%;
  }
}

/* -----------------------------------
   Components
------------------------------------ */
.main{ margin-bottom: var(--gap-rows); }

.avatar{
  float: right;
  max-width: var(--avatar-max);
  margin-top: calc(var(--space-2) * -1.5);
}

.tutorials{
  margin: var(--space-2) 0;
  padding: var(--space-0);
  list-style: circle;
}
.tutorials li{
  font-size: var(--fs-list-lg);
  margin: var(--space-1) 0 var(--space-1) var(--space-3);
}
.tutorials li a{
  color: var(--c-white);
  background-color: transparent;
}

.legal{
  margin: var(--space-0);
  padding: var(--space-2) 0;
  background: var(--grad-light);
}
.legal h2{ font-size: var(--fs-legal-h); }
.legal p{
  font-size: var(--fs-legal-p);
  line-height: var(--lh-legal-p);
}

/* Blockquote */
blockquote{
  margin: var(--space-4) 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-white);
  padding: 1.2em 30px 1.2em 75px;
  border-left: var(--quote-border);
  line-height: var(--lh-quote);
  position: relative;
}
blockquote::before{
  content: "\201C";
  font-family: Arial, sans-serif;
  color: var(--c-white);
  font-size: 4em;
  position: absolute;
  left: 10px;
  top: -10px;
}
blockquote::after{ content: ''; }
blockquote cite{
  display: block;
  color: var(--c-white);
  font-style: normal;
  font-weight: 700;
  margin-top: 1em;
}

/* -----------------------------------
   Responsive (unchanged behavior)
------------------------------------ */
@media only screen and (max-width: 600px){
  h1{ font-size: var(--fs-h1-sm); }
  h2{ font-size: var(--fs-h2-sm); }
}

@media only screen and (min-width: 601px) and (max-width: 1024px){
  h1{ font-size: var(--fs-h1-md); }
  h2{ font-size: var(--fs-h2-md); }
}

@media (max-width: 768px){
  .column{
    flex: none;
    width: 100%;
    margin: 0;
  }
}

@media (min-width: 600px){
  .flexbox{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .main{ margin: 0 10px 0 0; }
  .side{ width: 35%; }
}