/*
Theme Name: Circular Notes
Theme URI: https://circularnotes.com
Author: Ahmoda Moriom Mishu
Author URI: https://circularnotes.com
Description: Editorial WordPress theme for Circular Notes — independent coverage of the Digital Product Passport, circular economy and EU sustainability regulation. Includes templates for Home, Articles, Topics, About and Contact.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: circular-notes
*/


  /* ===================== DESIGN TOKENS ===================== */
  :root{
    /* Color */
    --color-paper:      #EEF0E9;
    --color-paper-alt:  #E4E7DC;
    --color-ink:        #17231C;
    --color-moss:       #2B4A34;
    --color-moss-dark:  #16261B;
    --color-ochre:      #B9812E;
    --color-ochre-dark: #8F6421;
    --color-line:       #CBCFC0;
    --color-line-dark:  #4B5A4F;
    --color-slate:      #5B665C;
    --color-white:      #FFFFFF;
    --color-pill-bg:    #DDEEE0;
    --color-paper-rgb:  238,240,233;

    /* Type */
    --font-display: "Fraunces", serif;
    --font-body: "IBM Plex Sans", sans-serif;

    --text-display-1: 3.6rem;
    --text-display-2: 2.35rem;
    --text-display-3: 1.5rem;
    --text-lede:       1.2rem;
    --text-body-lg:    1.08rem;
    --text-body:       1rem;
    --text-small:      0.9rem;
    --text-meta:       0.8rem;

    --leading-tight: 1.08;
    --leading-snug:  1.3;
    --leading-body:  1.65;

    /* Spacing */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-sm:  1.1rem;
    --space-md:  1.75rem;
    --space-lg:  2.75rem;
    --space-xl:  4.25rem;
    --space-2xl: 6rem;
    --space-3xl: 8rem;

    /* Layout */
    --content-width: 1180px;
    --side-padding: 3rem;
    --border-width: 1px;
    --radius: 0px;
    --radius-pill: 2px;
    --header-height: 84px;
  }

  /* ===================== RESET ===================== */
  *, *::before, *::after{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *, *::before, *::after{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  }
  body{
    margin:0;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
  }
  h1,h2,h3,h4,p,figure,blockquote,dl,ul{ margin:0; }
  ul{ padding:0; list-style:none; }
  img{ max-width:100%; display:block; }
  a{ color: inherit; text-decoration:none; }
  button{ font-family: inherit; cursor:pointer; }
  input, select, textarea{ font-family: inherit; font-size: var(--text-body); }

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

  .skip-link{
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-moss);
    color: var(--color-white);
    padding: var(--space-xs) var(--space-sm);
    z-index: 500;
  }
  .skip-link:focus{ left: var(--space-sm); top: var(--space-sm); }

  /* ===================== SHARED LAYOUT HELPERS ===================== */
  .section-inner, .header-inner, .footer-inner, .page-header-inner{
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
    display: flex;
    flex-direction: column;
  }

  .section{ padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
  .section-alt{ background: var(--color-paper-alt); }

  .section-head{
    display:flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md);
    border-bottom: var(--border-width) solid var(--color-line);
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-lg);
  }
  .section-head h2{ margin:0; }

  h1, h2, h3{ font-family: var(--font-display); font-weight: 500; color: var(--color-ink); }
  h1{ font-size: var(--text-display-1); line-height: var(--leading-tight); letter-spacing: -0.01em; }
  h2{ font-size: var(--text-display-2); line-height: var(--leading-tight); }
  h3{ font-size: var(--text-display-3); line-height: var(--leading-snug); }

  .eyebrow-kicker{
    font-family: var(--font-body);
    font-size: var(--text-meta);
    font-weight: 600;
    color: var(--color-moss);
  }

  .link-text{
    font-weight: 600;
    color: var(--color-moss);
    border-bottom: var(--border-width) solid var(--color-moss);
    padding-bottom: 2px;
    white-space: nowrap;
  }
  .link-text:hover{ color: var(--color-ochre-dark); border-color: var(--color-ochre-dark); }

  .button-primary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-moss);
    color: var(--color-white);
    font-weight: 600;
    font-size: var(--text-body);
    padding: 0.9rem 1.6rem;
    border: var(--border-width) solid var(--color-moss);
    border-radius: var(--radius);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .button-primary:hover{ background: var(--color-moss-dark); border-color: var(--color-moss-dark); }

  .button-secondary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--color-ink);
    font-weight: 600;
    font-size: var(--text-body);
    padding: 0.9rem 1.6rem;
    border: var(--border-width) solid var(--color-ink);
    border-radius: var(--radius);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .button-secondary:hover{ background: var(--color-ink); color: var(--color-paper); }

  .mockup-note{
    font-size: var(--text-meta);
    color: var(--color-slate);
    font-style: italic;
  }

  /* ===================== HEADER ===================== */
  .site-header{
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(var(--color-paper-rgb), 0.92);
    backdrop-filter: saturate(140%) blur(6px);
    border-bottom: var(--border-width) solid var(--color-line);
  }
  .header-inner{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
  }
  .brand{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xs);
  }
  .logo-ring{
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    display: inline-block;
    border-radius: 50%;
    border: 3px solid var(--color-moss);
    border-right-color: transparent;
    transform: rotate(-25deg);
  }
  .footer-brand .logo-ring{ border-color: var(--color-white); border-right-color: transparent; }
  .brand-name{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--color-ink);
    letter-spacing: -0.015em;
  }

  .site-nav{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xs);
  }
  .site-nav a{
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--color-ink);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-pill);
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .site-nav a:hover{ background: var(--color-paper-alt); }
  .site-nav a.active{ color: var(--color-moss); background: var(--color-pill-bg); }
  .site-nav a.nav-cta{
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-white);
    background: var(--color-moss-dark);
    padding: 0.6rem 1.1rem;
    margin-left: var(--space-sm);
  }
  .site-nav a.nav-cta:hover{ background: var(--color-moss); color: var(--color-white); }
  .site-nav a.nav-cta.active{ color: var(--color-white); background: var(--color-moss-dark); }

  .nav-toggle{
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: var(--border-width) solid var(--color-line);
  }
  .nav-toggle span{ width: 18px; height: 2px; background: var(--color-ink); display:block; }

  /* ===================== FOOTER ===================== */
  .site-footer{
    background: var(--color-moss-dark);
    color: rgba(255,255,255,0.82);
  }
  .footer-inner{
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-lg);
  }
  .footer-top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: var(--border-width) solid rgba(255,255,255,0.18);
  }
  .footer-brand{ max-width: 320px; display:flex; flex-direction: column; gap: var(--space-sm); }
  .footer-brand .brand-name{ color: var(--color-white); }
  .footer-brand p{ color: rgba(255,255,255,0.65); font-size: var(--text-small); }
  .footer-columns{ display:flex; flex-direction: row; gap: var(--space-2xl); }
  .footer-col{ display:flex; flex-direction: column; gap: var(--space-sm); min-width: 150px; }
  .footer-col-title{ font-size: var(--text-meta); font-weight:600; color: rgba(255,255,255,0.5); }
  .footer-col a, .footer-col span{ font-size: var(--text-small); color: rgba(255,255,255,0.82); }
  .footer-col a:hover{ color: var(--color-white); }
  .footer-bottom{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: var(--space-md);
    font-size: var(--text-meta);
    color: rgba(255,255,255,0.5);
  }

  /* ===================== PAGE VISIBILITY ===================== */
  .page[hidden]{ display:none; }
  .page{ display:block; }

  /* ===================== PAGE HEADER ===================== */
  .page-header{ padding-top: var(--space-2xl); padding-bottom: var(--space-xl); border-bottom: var(--border-width) solid var(--color-line); }
  .page-header-inner{ gap: var(--space-sm); }
  .page-header p{ max-width: 620px; font-size: var(--text-lede); color: var(--color-slate); }

  /* ===================== HOME: HERO ===================== */
  .hero{ padding-top: var(--space-2xl); padding-bottom: var(--space-xl); }
  .hero-inner{
    max-width: var(--content-width);
    margin: 0 auto;
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
    display:flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
  }
  .hero-text{ flex: 1 1 50%; display:flex; flex-direction: column; gap: var(--space-md); }
  .hero-text h1{ margin:0; }
  .hero-lede{ font-size: var(--text-lede); color: var(--color-slate); max-width: 46ch; }
  .hero-actions{ display:flex; flex-direction: row; align-items:center; gap: var(--space-lg); flex-wrap: wrap; }
  .hero-byline{ font-size: var(--text-meta); font-weight: 600; color: var(--color-moss); }

  .hero-media{ flex: 1 1 42%; display:flex; flex-direction: column; gap: var(--space-2xs); }
  .hero-media img{ width:100%; height: 460px; object-fit: cover; }
  .hero-media figcaption{ font-size: var(--text-meta); color: var(--color-slate); border-left: 2px solid var(--color-ochre); padding-left: var(--space-2xs); }

  .topic-rail{ border-top: var(--border-width) solid var(--color-line); border-bottom: var(--border-width) solid var(--color-line); }
  .topic-rail-inner{
    max-width: var(--content-width);
    margin: 0 auto;
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .topic-rail-item{
    font-weight: 600;
    font-size: var(--text-small);
    color: var(--color-ink);
    padding: var(--space-sm) var(--space-lg) var(--space-sm) 0;
    margin-right: var(--space-lg);
    border-right: var(--border-width) solid var(--color-line);
  }
  .topic-rail-item:last-child{ border-right: none; margin-right:0; padding-right:0; }
  .topic-rail-item:hover{ color: var(--color-moss); }

  .article-list{ display:flex; flex-direction: column; }
  .article-row{
    display:flex;
    flex-direction: row;
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
    border-bottom: var(--border-width) solid var(--color-line);
    align-items: flex-start;
  }
  .article-row:first-child{ padding-top: 0; }
  .article-row-media{ flex: 0 0 260px; }
  .article-row-media img{ width: 260px; height: 180px; object-fit: cover; }
  .article-row-body{ flex: 1 1 auto; display:flex; flex-direction: column; gap: var(--space-2xs); min-width:0; }
  .article-row-topic{ font-size: var(--text-meta); font-weight:600; color: var(--color-moss); }
  .article-row-body h3{ margin: 0; }
  .article-row-body h3 a:hover{ color: var(--color-moss); }
  .article-row-dek{ color: var(--color-slate); font-size: var(--text-body); max-width: 62ch; }
  .article-row-meta{ font-size: var(--text-meta); color: var(--color-slate); margin-top: var(--space-2xs); }
  .article-row[hidden]{ display:none; }

  .service-list{ display:flex; flex-direction: row; flex-wrap: wrap; margin-top: var(--space-lg); border-top: var(--border-width) solid var(--color-line); border-left: var(--border-width) solid var(--color-line); }
  .service-row{
    flex: 1 1 50%;
    padding: var(--space-lg);
    border-right: var(--border-width) solid var(--color-line);
    border-bottom: var(--border-width) solid var(--color-line);
    display:flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
  .service-row h3{ margin:0; }
  .service-row p{ color: var(--color-slate); }

  .cta-band{ background: var(--color-moss); color: var(--color-white); }
  .cta-band-inner{
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-2xl) var(--side-padding);
    display:flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
  }
  .cta-text{ flex: 1 1 55%; display:flex; flex-direction: column; gap: var(--space-md); }
  .cta-text h2{ color: var(--color-white); }
  .cta-text > p{ color: rgba(255,255,255,0.78); max-width: 46ch; }
  .subscribe-form{ display:flex; flex-direction: row; gap: var(--space-sm); max-width: 420px; }
  .subscribe-form input{
    flex: 1 1 auto;
    padding: 0.85rem 1rem;
    border: var(--border-width) solid rgba(255,255,255,0.4);
    background: transparent;
    color: var(--color-white);
  }
  .subscribe-form input::placeholder{ color: rgba(255,255,255,0.55); }
  .cta-band .button-primary{ background: var(--color-ochre); border-color: var(--color-ochre); color: var(--color-ink); }
  .cta-band .button-primary:hover{ background: var(--color-ochre-dark); border-color: var(--color-ochre-dark); }
  .cta-band .mockup-note{ color: rgba(255,255,255,0.55); }
  .cta-media{ flex: 1 1 35%; }
  .cta-media img{ width: 100%; height: 320px; object-fit: cover; }

  .filter-row{ display:flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
  .filter-btn{
    background: transparent;
    border: var(--border-width) solid var(--color-line-dark);
    color: var(--color-ink);
    font-size: var(--text-small);
    font-weight: 600;
    padding: 0.5rem 1rem;
  }
  .filter-btn.active{ background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
  .filter-btn:not(.active):hover{ border-color: var(--color-moss); color: var(--color-moss); }

  .topic-spread{
    display:flex;
    flex-direction: row;
    align-items: stretch;
    border-bottom: var(--border-width) solid var(--color-line);
  }
  .topic-spread:nth-child(even){ flex-direction: row-reverse; }
  .topic-spread-media{ flex: 1 1 46%; }
  .topic-spread-media img{ width:100%; height: 420px; object-fit: cover; }
  .topic-spread-body{
    flex: 1 1 54%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-2xl) var(--space-2xl);
  }
  .topic-spread-count{ font-size: var(--text-meta); font-weight:600; color: var(--color-ochre-dark); }
  .topic-spread-body h2{ margin:0; }
  .topic-spread-body p{ color: var(--color-slate); max-width: 48ch; }

  .about-mission{ flex-direction: row; align-items:flex-start; gap: var(--space-2xl); }
  .about-quote-col{ flex: 0 0 320px; display:flex; flex-direction: column; gap: var(--space-lg); }
  .about-mission blockquote{
    font-family: var(--font-display);
    font-size: 2.1rem;
    line-height: var(--leading-tight);
    color: var(--color-ink);
    max-width: 18ch;
    font-style: italic;
    font-weight: 500;
  }
  .about-mission-text{ display:flex; flex-direction: column; gap: var(--space-sm); flex: 1 1 auto; padding-top: var(--space-3xs); }
  .about-mission p{ font-size: var(--text-lede); color: var(--color-slate); max-width: 58ch; }

  .byline-card{
    display:flex;
    flex-direction: column;
    gap: var(--space-3xs);
    border: var(--border-width) solid var(--color-line);
    border-left: 3px solid var(--color-ochre);
    padding: var(--space-md);
  }
  .byline-name{ font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--color-ink); }
  .byline-role{ font-size: var(--text-small); color: var(--color-slate); }
  .byline-card .link-text{ margin-top: var(--space-2xs); font-size: var(--text-small); }

  .about-media img{ width:100%; height: 420px; object-fit: cover; }

  .audience-list{ display:flex; flex-direction: row; flex-wrap: wrap; margin-top: var(--space-lg); border-top: var(--border-width) solid var(--color-line); border-left: var(--border-width) solid var(--color-line); }
  .audience-row{
    flex: 1 1 50%;
    padding: var(--space-lg);
    border-right: var(--border-width) solid var(--color-line);
    border-bottom: var(--border-width) solid var(--color-line);
    display:flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }
  .audience-row h3{ margin:0; font-size: var(--text-body-lg); font-family: var(--font-body); font-weight: 600; color: var(--color-ink); }
  .audience-row p{ color: var(--color-slate); margin:0; }

  .how-i-work-split{ display:flex; flex-direction: row; gap: var(--space-2xl); align-items: stretch; }
  .how-i-work-media{ flex: 0 0 300px; }
  .how-i-work-media img{ width:100%; height: 100%; min-height: 360px; object-fit: cover; }
  .how-i-work-content{ flex: 1 1 auto; display:flex; flex-direction: column; }

  .value-list{ display:flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-lg); }
  .value-item{ flex: 1 1 220px; display:flex; flex-direction: column; gap: var(--space-xs); padding-top: var(--space-md); border-top: 2px solid var(--color-moss); }
  .value-item p{ color: var(--color-slate); }

  .about-closing-inner{ flex-direction: row; align-items:center; gap: var(--space-2xl); }
  .closing-image{ flex: 0 0 340px; width: 340px; height: 260px; object-fit: cover; }
  .closing-note{ font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--color-ink); max-width: 30ch; }

  .contact-grid{ flex-direction: row; gap: var(--space-2xl); align-items: flex-start; }
  .contact-info{ flex: 1 1 40%; display:flex; flex-direction: column; gap: var(--space-md); }
  .contact-info p{ color: var(--color-slate); max-width: 42ch; }
  .contact-details{ display:flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-sm); }
  .contact-details div{ display:flex; flex-direction: column; gap: 2px; border-top: var(--border-width) solid var(--color-line); padding-top: var(--space-sm); }
  .contact-details dt{ font-size: var(--text-meta); color: var(--color-slate); font-weight:600; }
  .contact-details dd{ margin:0; font-size: var(--text-body-lg); }

  .contact-form-wrap{ flex: 1 1 60%; display:flex; flex-direction: column; gap: var(--space-sm); }
  .contact-form{ display:flex; flex-direction: column; gap: var(--space-md); border: var(--border-width) solid var(--color-line); padding: var(--space-lg); }
  .form-row{ display:flex; flex-direction: row; gap: var(--space-md); }
  .form-field{ flex: 1 1 0; display:flex; flex-direction: column; gap: var(--space-3xs); }
  .form-field label{ font-size: var(--text-meta); font-weight:600; color: var(--color-slate); }
  .form-field input, .form-field select, .form-field textarea{
    border: var(--border-width) solid var(--color-line-dark);
    background: var(--color-paper);
    padding: 0.75rem 0.9rem;
    color: var(--color-ink);
  }
  .form-field textarea{ resize: vertical; min-height: 130px; }

  .contact-media{ margin-top: var(--space-2xl); }
  .contact-media img{ width:100%; height: 360px; object-fit: cover; }

  @media (max-width: 1024px){
    :root{
      --side-padding: 2rem;
      --text-display-1: 2.9rem;
      --text-display-2: 2rem;
      --header-height: 72px;
    }
    .site-nav{ display:none; }
    .nav-toggle{ display:flex; }
    .site-nav.open{
      display:flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      position: sticky;
      top: var(--header-height);
      background: var(--color-paper);
      border-bottom: var(--border-width) solid var(--color-line);
      padding: var(--space-sm) var(--side-padding) var(--space-md);
      width:100%;
    }
    .site-nav.open a{ width:100%; padding: var(--space-sm) 0; border-bottom: var(--border-width) solid var(--color-line); }
    .site-nav.open a.nav-cta{ border-bottom: none; margin-top: var(--space-sm); margin-left: 0; text-align:center; }

    .hero-inner{ flex-direction: column; align-items: stretch; gap: var(--space-lg); }
    .hero-media img{ height: 340px; }

    .article-row-media{ flex-basis: 200px; }
    .article-row-media img{ width:200px; height: 150px; }

    .service-row{ flex-basis: 100%; }

    .cta-band-inner{ flex-direction: column; align-items: stretch; }
    .cta-media img{ height: 260px; }

    .topic-spread, .topic-spread:nth-child(even){ flex-direction: column; }
    .topic-spread-media img{ height: 300px; }
    .topic-spread-body{ padding: var(--space-lg); }

    .about-mission{ flex-direction: column; }
    .about-quote-col{ flex-basis: auto; }
    .audience-row{ flex-basis: 100%; }
    .how-i-work-split{ flex-direction: column; }
    .how-i-work-media{ flex-basis: auto; }
    .how-i-work-media img{ height: 260px; min-height: 0; }
    .value-list{ flex-direction: column; gap: var(--space-md); }
    .about-closing-inner{ flex-direction: column; align-items: flex-start; }
    .closing-image{ width:100%; flex-basis: auto; }

    .contact-grid{ flex-direction: column; }
    .footer-top{ flex-direction: column; gap: var(--space-lg); }
    .footer-columns{ flex-wrap: wrap; gap: var(--space-lg); }
  }

  @media (max-width: 640px){
    :root{
      --side-padding: 1.25rem;
      --text-display-1: 2.2rem;
      --text-display-2: 1.6rem;
      --text-display-3: 1.3rem;
      --text-lede: 1.05rem;
      --space-2xl: 3.5rem;
      --space-xl: 2.5rem;
    }
    .brand-name{ font-size: 1.1rem; }
    .hero{ padding-top: var(--space-lg); }
    .hero-actions{ flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
    .hero-media img{ height: 240px; }

    .topic-rail-inner{ flex-direction: column; }
    .topic-rail-item{ border-right:none; border-bottom: var(--border-width) solid var(--color-line); margin-right:0; padding: var(--space-sm) 0; width:100%; }
    .topic-rail-item:last-child{ border-bottom:none; }

    .section-head{ flex-direction: column; align-items: flex-start; gap: var(--space-xs); }

    .article-row{ flex-direction: column; gap: var(--space-sm); }
    .article-row-media{ flex-basis: auto; width:100%; }
    .article-row-media img{ width:100%; height: 200px; }

    .subscribe-form{ flex-direction: column; max-width: 100%; }

    .filter-row{ overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--space-2xs); }
    .filter-btn{ flex: 0 0 auto; white-space: nowrap; }

    .form-row{ flex-direction: column; }

    .footer-columns{ flex-direction: column; gap: var(--space-lg); }
    .footer-bottom{ flex-direction: column; gap: var(--space-2xs); }
  }