/*
Theme Name: Your Clothes Don't Fit
Theme URI: https://example.com
Author: Your Clothes Don't Fit
Author URI: https://example.com
Description: A bold, punk/zine-styled one-page WordPress theme for sewing & pattern-making workshops, converted from a static landing page. Almost every piece of copy is editable from the WordPress editor via custom fields on the front page.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ycdf
*/

/* ==========================================================================
   Base variables & reset (from the original design)
   ========================================================================== */
  :root{
    --ink:#1c2b4a;
    --ink-2:#12213b;
    --paper:#f2e8d3;
    --paper-2:#e9dcbb;
    --berry:#b23a63;
    --berry-2:#8c2a4c;
    --mustard:#dfa62e;
    --sage:#6b8f71;
    --marker-red:#f7422a;
    --charcoal:#241f1c;
    --white:#fffaf0;
    --serif: "Fraunces", serif;
    --mono: "Space Mono", monospace;
    --sans: "Inter", sans-serif;
    --marker: "Permanent Marker", cursive;
    /* grungy/punk fonts used ONLY past the hero section */
    --grunge-display: "Anton", sans-serif;
    --grunge-body: "Special Elite", monospace;
    --grunge-accent: "Rock Salt", cursive;
    --tape: rgba(223,166,46,0.55);
    --stitch-light: var(--berry);
    --stitch-dark: var(--mustard);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--charcoal);
    font-family:var(--sans);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  ::selection{background:var(--berry); color:var(--white);}

  a{color:inherit; text-decoration:none;}

  .paper-grain{
    background-image:
      radial-gradient(var(--paper-2) 1px, transparent 1px);
    background-size: 18px 18px;
  }

  /* ---------- NAV ---------- */
  header.nav{
    position:fixed; top:0; left:0; width:100%; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 5vw;
    mix-blend-mode:normal;
    transition: background .4s ease, padding .4s ease, box-shadow .4s ease;
  }
  header.nav.scrolled{
    background:rgba(242,232,211,0.88);
    backdrop-filter:blur(6px);
    padding:12px 5vw;
    box-shadow:0 1px 0 rgba(28,43,74,0.12);
  }
  .logo{
    font-family:var(--mono); font-weight:700; letter-spacing:1px;
    font-size:0.95rem; display:flex; align-items:center; gap:8px;
    color:var(--ink);
  }
  .logo .dot{width:8px;height:8px;border-radius:50%;background:var(--berry); display:inline-block;}
  nav.links{display:flex; gap:34px; font-family:var(--mono); font-size:0.78rem; letter-spacing:0.5px;}
  nav.links a{position:relative; color:var(--ink); padding-bottom:3px;}
  nav.links a::after{
    content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px;
    background:var(--berry); transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
  }
  nav.links a:hover::after{transform:scaleX(1);}
  .nav-cta{
    font-family:var(--mono); font-size:0.75rem; letter-spacing:0.5px;
    background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:2px;
    border:1px solid var(--ink);
  }
  .nav-links-wrap{display:flex; align-items:center; gap:34px;}
  @media (max-width:820px){ nav.links{display:none;} }

  .nav-social{display:flex; align-items:center; gap:12px;}
  .nav-social-link{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:50%;
    background:var(--berry); color:var(--white); border:2px solid var(--ink);
    box-shadow:2.5px 2.5px 0 var(--ink);
    transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .nav-social-link svg{width:19px; height:19px; fill:currentColor; display:block; transition:transform .25s ease;}
  .nav-social-link:hover, .nav-social-link:focus-visible{
    background:var(--ink); border-color:var(--ink);
    transform:translateY(-2px) rotate(-6deg);
    box-shadow:4px 4px 0 var(--berry);
  }
  .nav-social-link:hover svg, .nav-social-link:focus-visible svg{transform:scale(1.12);}
  @media (max-width:667px){
    .nav-social{gap:8px;}
    .nav-social-link{width:36px; height:36px;}
    .nav-social-link svg{width:16px; height:16px;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding:140px 6vw 80px;
    overflow:hidden;
  }
  .hero-eyebrow{
    font-family:var(--mono); font-size:0.8rem; letter-spacing:2px; text-transform:uppercase;
    color:var(--berry); margin-bottom:26px; display:flex; align-items:center; gap:10px;
  }
  .hero-eyebrow::before{content:""; width:26px; height:1px; background:var(--berry); display:inline-block;}

  .hero h1{
    font-family:var(--serif);
    font-weight:600;
    line-height:0.98;
    font-size: clamp(2.6rem, 8.4vw, 7.2rem);
    color:var(--ink);
    opacity:0.4;
    letter-spacing:-0.01em;
  }
  .hero h1 .strike-wrap{position:relative; display:inline-block;}
  .hero h1 .line{overflow:hidden; display:block;}
  .hero h1 .line span{display:inline-block; will-change:transform;}
  .hero h1 em{font-style:italic; color:var(--berry); font-weight:500;}

  .hero-title-wrap{position:relative; display:block;}

  .scribble-svg{
    position:absolute; top:-4%; left:-2%; width:104%; height:108%;
    overflow:visible; pointer-events:none; z-index:2;
  }
  .scribble-path{
    fill:none; stroke:var(--marker-red); stroke-width:30;
    stroke-linecap:round; stroke-linejoin:round; opacity:1;
  }
  .scribble-path.thin{stroke-width:9; opacity:0.8;}


  .marker-note{
    position:absolute; z-index:3; left:50%; top:47%;
    font-family:'Permanent Marker', cursive;
    color:#0d0d0d;
    font-size:clamp(4.0rem, 15vw, 11rem);
    line-height:1.05; text-align:center; white-space:normal;
    width:90vw; max-width:1100px;
    pointer-events:none;
    clip-path: inset(0 100% 0 0);
    -webkit-text-stroke: 3px #0d0d0d;
    paint-order: stroke fill;
  }
  @media (max-width:1230px){
    .marker-note{
      width:94%; top:52%;
      font-size:clamp(3.7rem, 13vw, 10rem);
    }
  }
  @media (max-width:1024px){
    .marker-note{
      width:94%; top:52%;
      font-size:clamp(3.2rem, 10vw, 7rem);
    }
  }
  @media (max-width:667px){
    .marker-note{
      width:94%; top:52%;
      font-size:clamp(2.2rem, 13vw, 3.6rem);
    }
  }

  .hero-sub{
    max-width:1260px; margin-top:34px; font-size:2.15rem; line-height:1.6;
    color:var(--charcoal); font-weight:400;
    font-family:var(--marker);
  }
  .hero-sub b{font-weight:600; color:var(--ink);}

  @media (max-width:1024px){
    .hero-sub {font-size:1.8rem;}
  }
  @media (max-width:667px){
    .hero-sub {font-size:1.6rem;}
  }



.hero-cta-row{margin-top:44px; display:flex; align-items:center; gap:28px; flex-wrap:wrap;}
  .btn-primary{
    font-family:var(--mono); font-size:1.85rem; letter-spacing:0.5px;
    background:var(--berry); color:var(--white); padding:16px 30px; border-radius:2px;
    display:inline-flex; align-items:center; gap:10px; border:1px solid var(--berry);
    transition: transform .25s ease, background .25s ease, outline-offset .25s ease;
  }
  .btn-primary:hover{background:var(--berry-2); transform:translateY(-2px);}
  section:not(.hero) .btn-primary{
    outline:2px dashed transparent; outline-offset:0px;
    box-shadow:4px 4px 0 var(--ink);
  }
  section:not(.hero) .btn-primary:hover{
    transform:translateY(-2px) rotate(-1.5deg);
    outline:2px dashed var(--ink); outline-offset:4px;
    box-shadow:6px 6px 0 var(--ink);
  }
  .btn-primary svg{transition:transform .3s ease;}
  .btn-primary:hover svg{transform:rotate(18deg);}

  .hero-tape{
    font-family:var(--mono); font-size:1.75rem; letter-spacing:1px; color:var(--ink);
    opacity:0.65;
  }
  @media (max-width:1024px){
    .hero-tape {font-size:1.8rem;}
  }
  @media (max-width:667px){
    .hero-tape {font-size:1.6rem;}
  }

  .hero-social-group{
    display:flex; flex-direction:column; align-items:flex-start; gap:12px;
    margin-left:8px;
  }
  .hero-social-label{
    font-family:var(--mono); font-size:0.85rem; letter-spacing:2px; text-transform:uppercase;
    color:var(--ink); opacity:0.7; display:flex; align-items:center; gap:10px;
  }
  .hero-social-label::before{content:""; width:22px; height:1px; background:var(--ink); opacity:0.5; display:inline-block;}
  .hero-social{
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  }
  .hero-social-link{
    display:inline-flex; align-items:center; justify-content:center;
    width:64px; height:64px; border-radius:50%;
    background:var(--berry); color:var(--white); border:2px solid var(--ink);
    box-shadow:4px 4px 0 var(--ink);
    transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .hero-social-link svg{
    width:28px; height:28px; fill:currentColor; display:block;
    transition: transform .25s ease;
  }
  .hero-social-link:hover,
  .hero-social-link:focus-visible{
    background:var(--ink); border-color:var(--ink);
    transform:translateY(-4px) rotate(-6deg);
    box-shadow:6px 6px 0 var(--berry);
  }
  .hero-social-link:hover svg,
  .hero-social-link:focus-visible svg{
    transform:scale(1.12);
  }
  @media (max-width:1230px){
    .hero-social-link{width:58px; height:58px;}
    .hero-social-link svg{width:25px; height:25px;}
  }
  @media (max-width:1024px){
    .hero-social-group{gap:10px;}
    .hero-social{gap:14px;}
    .hero-social-link{width:52px; height:52px;}
    .hero-social-link svg{width:23px; height:23px;}
    .hero-social-label{font-size:0.78rem;}
  }
  @media (max-width:667px){
    .hero-social-group{margin-left:0; gap:8px; width:100%;}
    .hero-social{gap:11px;}
    .hero-social-link{width:46px; height:46px; box-shadow:3px 3px 0 var(--ink);}
    .hero-social-link svg{width:20px; height:20px;}
    .hero-social-link:hover, .hero-social-link:focus-visible{box-shadow:4px 4px 0 var(--berry);}
    .hero-social-label{font-size:0.72rem;}
  }


.hero-svg-wrap{
    position:absolute; right:-4vw; top:50%; transform:translateY(-50%);
    width:min(48vw, 620px); opacity:0.9; pointer-events:none;
  }
  @media (max-width:900px){ .hero-svg-wrap{display:none;} }
  .hero-svg-wrap svg{width:100%; height:auto;}
  .pattern-path{fill:none; stroke:var(--ink); stroke-width:2; opacity:0.5;}
  .pattern-path.accent{stroke:var(--berry);}
  .pattern-path.dashed{stroke-dasharray:6 6; stroke:var(--mustard);}
  .grainline-arrow{fill:var(--ink);}

  .scroll-cue{
    position:absolute; bottom:34px; left:6vw; font-family:var(--mono); font-size:0.7rem;
    letter-spacing:1.5px; color:var(--ink); display:flex; align-items:center; gap:10px;
    text-transform:uppercase;
  }
  .scroll-cue .line{width:1px; height:34px; background:var(--ink); position:relative; overflow:hidden;}
  .scroll-cue .line i{position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--berry); display:block;}

  /* ---------- DIVIDER (cut line) ---------- */
  .cut-divider{
    position:relative; width:100%; padding:0 6vw; margin:0 auto;
  }
  .cut-divider svg{width:100%; height:56px; display:block;}
  .cut-line{fill:none; stroke:var(--ink); stroke-width:2; opacity:0.55; stroke-linecap:round; stroke-linejoin:round;}
  .stitch-line{fill:none; stroke:var(--stitch-light); stroke-width:2; stroke-dasharray:9 8; opacity:0.6; stroke-linecap:round;}
  .cut-icon{transform-box: fill-box;}
  .cut-divider.big-tear svg{height:100px;}
  .cut-divider.big-tear .cut-line{stroke-width:3.5; opacity:0.8; filter:drop-shadow(0 4px 3px rgba(0,0,0,0.22));}
  .cut-divider.big-tear .stitch-line{stroke-width:2.5; opacity:0.75; stroke-dasharray:11 9;}

  /* ---------- SECTION GENERIC ---------- */
  section{position:relative;}
  .section-inner{max-width:1180px; margin:0 auto; padding:130px 6vw;}
  .eyebrow{
    font-family:var(--marker); font-weight:400;
    font-size:clamp(2rem, 5vw, 3.4rem); letter-spacing:0.5px;
    text-transform:none;
    color:var(--ink); margin-bottom:26px; display:inline-block;
    position:relative; transform:rotate(-3deg);
    padding:6px 16px 10px; line-height:1;
    text-shadow: 3px 3px 0 var(--paper), 5px 5px 0 var(--berry);
  }
  .eyebrow::before{
    content:""; position:absolute; left:-8px; right:-8px; bottom:6px; top:44%;
    background:var(--tape); z-index:-1; transform:skewX(-6deg);
    border-radius:1px 4px 2px 3px/2px 3px 1px 4px;
  }
  .who-intro .eyebrow, .manifesto .eyebrow{ --tape-color: var(--mustard); }
  .who-intro .eyebrow, .manifesto .eyebrow, .cta-inner .eyebrow{
    text-shadow:3px 3px 0 var(--ink), 5px 5px 0 var(--mustard);
  }
  .who-intro .eyebrow::before, .manifesto .eyebrow::before, .cta-inner .eyebrow::before{
    background:rgba(223,166,46,0.28);
  }
  .headline{
    font-family:var(--grunge-display); font-weight:600; font-size:clamp(2rem, 4.4vw, 3.6rem);
    color:var(--ink); line-height:1.08; margin-bottom:30px;
    position:relative; display:inline-block; transform:rotate(-1.1deg);
    text-shadow: 4px 4px 0 var(--berry);
  }
  .who-intro .headline{text-shadow:4px 4px 0 var(--mustard);}

  /* ---------- MANIFESTO ---------- */
  .manifesto{
    background:
      repeating-linear-gradient(128deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 7px),
      radial-gradient(circle at 15% 20%, rgba(255,255,255,0.04), transparent 45%),
      var(--ink);
    color:var(--paper);
    padding:150px 6vw;
    position:relative;
    overflow:hidden;
  }
  .manifesto::before{
    content:"MANIFESTO"; position:absolute; top:-2vw; left:-1vw; font-family:var(--grunge-display);
    font-size:18vw; font-weight:900; color:rgba(255,255,255,0.035); letter-spacing:-0.02em;
    white-space:nowrap; pointer-events:none;
  }
  .manifesto-inner{max-width:900px; margin:0 auto; position:relative; z-index:1;}
  .manifesto .eyebrow{color:var(--mustard);}
  .manifesto p{
    font-family:var(--grunge-display); font-size:clamp(1.5rem,3.2vw,2.5rem); line-height:1.35;
    font-weight:500; margin-bottom:28px; opacity:0.96;
  }
  .manifesto p .split-line{display:block; overflow:hidden;}
  .manifesto p .split-line span{display:inline-block;}
  .manifesto p em{color:var(--berry); font-style:italic; opacity:1;}
  .manifesto .small{
    font-family:var(--grunge-body); font-size:1.05rem; font-weight:400; line-height:1.7; max-width:640px;
    color:rgba(255,250,240,0.75); margin-top:36px;
  }

  /* ---------- HISTORY ---------- */
  .history{
    background:
      repeating-linear-gradient(118deg, rgba(28,43,74,0.035) 0 2px, transparent 2px 8px),
      var(--paper-2);
    position:relative; overflow:hidden;
  }
  .history::before{
    content:"HISTORY"; position:absolute; bottom:-4vw; right:-1vw; font-family:var(--grunge-display);
    font-size:14vw; font-weight:900; color:rgba(28,43,74,0.045); letter-spacing:-0.02em;
    white-space:nowrap; pointer-events:none; z-index:0;
  }
  .history-inner{
    max-width:1180px; margin:0 auto; padding:130px 6vw;
    display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start;
    position:relative; z-index:1;
  }
  @media (max-width:820px){ .history-inner{grid-template-columns:1fr;} }
  .tape-rule{
    display:flex; align-items:center; gap:2px; margin-bottom:26px; opacity:0.7;
  }
  .tape-rule .tick{width:1px; background:var(--ink);}
  .history-copy p{font-family:var(--grunge-body); font-size:1.08rem; line-height:1.75; color:var(--charcoal); margin-bottom:22px;}
  .history-copy p b{color:var(--ink); font-weight:600;}
  .pull-quote{
    font-family:var(--grunge-body); font-style:normal; font-weight:500;
    font-size:clamp(1.6rem,3vw,2.2rem); color:var(--ink); line-height:1.3;
    border-left:3px solid var(--berry); padding:34px 28px 38px;
    position:sticky; top:130px;
    background:var(--white);
    box-shadow:0 18px 34px rgba(28,43,74,0.14);
    transform:rotate(-1.4deg);
    clip-path: polygon(0% 0%, 100% 0%, 100% 92%, 92% 100%, 82% 93%, 71% 100%, 60% 93%, 49% 100%, 38% 93%, 27% 100%, 16% 93%, 6% 100%, 0% 93%);
  }
  .pull-quote::before{
    content:""; position:absolute; top:-16px; left:32px; width:78px; height:26px;
    background:repeating-linear-gradient(45deg, rgba(223,166,46,0.6) 0 6px, rgba(223,166,46,0.4) 6px 12px);
    transform:rotate(-5deg); box-shadow:0 3px 6px rgba(0,0,0,0.18);
  }

  /* ---------- WHO THIS IS FOR — HORIZONTAL SCROLL ---------- */
  .who-section{
    background:
      repeating-linear-gradient(-125deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 7px),
      var(--ink);
    color:var(--paper); padding-top:110px; overflow:hidden;
  }
  .who-section::before{
    content:"WHO"; position:absolute; top:-3vw; right:-1vw; font-family:var(--grunge-display);
    font-size:16vw; font-weight:900; color:rgba(255,255,255,0.035); letter-spacing:-0.02em;
    white-space:nowrap; pointer-events:none; z-index:0;
  }
  .who-intro{position:relative; z-index:1;}
  .who-intro{max-width:700px; margin:0 auto; padding:0 6vw 60px; text-align:left;}
  .who-intro .headline{color:var(--paper);}
  .who-intro .eyebrow{color:var(--mustard);}
  .who-intro p{font-family:var(--grunge-body); font-size:1.1rem; line-height:1.7; color:rgba(255,250,240,0.75); max-width:560px;}

  .pin-track{
    height:100vh; position:relative; overflow:hidden;
  }
  .pin-track-inner{
    height:100%; display:flex; align-items:center;
    will-change:transform;
  }
  .swatch-card{
    flex:0 0 auto;
    width:min(78vw, 420px);
    height:70vh;
    max-height:560px;
    margin-right:36px;
    padding:52px 36px 60px;
    position:relative;
    display:flex; flex-direction:column;
    justify-content:space-between;
    box-shadow:0 30px 60px rgba(0,0,0,0.3);
    transform:rotate(var(--rot,0deg));
    clip-path: polygon(
      0% 3%, 8% 0%, 16% 3%, 24% 0%, 32% 3%, 40% 0%, 48% 3%, 56% 0%, 64% 3%, 72% 0%, 80% 3%, 88% 0%, 96% 3%, 100% 0%,
      100% 97%, 92% 100%, 84% 97%, 76% 100%, 68% 97%, 60% 100%, 52% 97%, 44% 100%, 36% 97%, 28% 100%, 20% 97%, 12% 100%, 4% 97%, 0% 100%
    );
  }
  .swatch-card::after{
    content:""; position:absolute; inset:14px; border:2px dashed rgba(0,0,0,0.22);
    pointer-events:none;
  }
  .swatch-card.c1::after, .swatch-card.c3::after, .swatch-card.c5::after{border-color:rgba(255,250,240,0.3);}
  .swatch-card:first-child{margin-left:6vw;}
  .swatch-card:last-child{margin-right:6vw;}
  .swatch-card .pin{
    position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-18deg);
    width:26px; height:26px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #fff, var(--pin-color, var(--berry)) 60%);
    box-shadow:0 4px 8px rgba(0,0,0,0.35);
  }
  .swatch-card .pin::after{
    content:""; position:absolute; top:50%; left:100%; width:34px; height:3px;
    background:var(--pin-color, var(--berry)); opacity:0.7; transform-origin:left center;
    transform:translateY(-50%) rotate(32deg); border-radius:2px;
  }
  .swatch-card .tag-num{
    font-family:var(--grunge-body); font-size:0.75rem; letter-spacing:1px; opacity:0.6;
  }
  .swatch-card h3{
    font-family:var(--grunge-display); font-weight:600; font-size:1.9rem; margin-top:18px; line-height:1.1;
  }
  .swatch-card p{font-family:var(--grunge-body); font-size:1rem; line-height:1.65; margin-top:20px; opacity:0.92;}
  .swatch-card .swatch-footer{
    font-family:var(--grunge-body); font-size:0.7rem; letter-spacing:1px; text-transform:uppercase;
    opacity:0.65; display:flex; align-items:center; gap:8px;
  }
  .swatch-card .swatch-footer::before{content:""; width:16px; height:1px; background:currentColor; display:inline-block;}

  .swatch-card.c1{background:var(--berry); color:var(--white); --rot:-2deg; --pin-color:var(--mustard);}
  .swatch-card.c2{background:var(--mustard); color:var(--ink-2); --rot:1.5deg; --pin-color:var(--berry);}
  .swatch-card.c3{background:var(--sage); color:var(--white); --rot:-1deg; --pin-color:var(--paper);}
  .swatch-card.c4{background:var(--paper); color:var(--ink); --rot:2deg; --pin-color:var(--berry);}
  .swatch-card.c5{background:var(--ink-2); color:var(--paper); border:1px solid rgba(255,250,240,0.2); --rot:-1.5deg; --pin-color:var(--mustard);}

  .who-progress{
    position:absolute; bottom:34px; left:6vw; right:6vw; height:2px; background:rgba(255,250,240,0.15);
  }
  .who-progress .bar{height:100%; width:0%; background:var(--mustard);}
  .who-hint{
    position:absolute; bottom:52px; right:6vw; font-family:var(--grunge-body); font-size:0.7rem;
    letter-spacing:1px; text-transform:uppercase; color:rgba(255,250,240,0.55);
  }

  /* ---------- HOW A WORKSHOP RUNS ---------- */
  .workshop{
    background:
      repeating-linear-gradient(-118deg, rgba(28,43,74,0.035) 0 2px, transparent 2px 8px),
      var(--paper-2);
    position:relative; overflow:hidden;
  }
  .workshop::before{
    content:"SKILLS"; position:absolute; top:-2vw; left:-1vw; font-family:var(--grunge-display);
    font-size:14vw; font-weight:900; color:rgba(28,43,74,0.045); letter-spacing:-0.02em;
    white-space:nowrap; pointer-events:none; z-index:0;
  }
  .workshop-inner{position:relative; z-index:1;}
  .workshop-inner{max-width:960px; margin:0 auto; padding:130px 6vw;}
  .steps{margin-top:70px; position:relative;}
  .steps::before{
    content:""; position:absolute; left:32px; top:0; bottom:0; width:2px;
    background:repeating-linear-gradient(to bottom, var(--berry) 0 5px, transparent 5px 11px);
    opacity:0.5;
  }
  @media (max-width:640px){ .steps::before{left:20px;} }
  .step{
    display:grid; grid-template-columns:64px 1fr; gap:26px; margin-bottom:64px; position:relative;
  }
  @media (max-width:640px){ .step{grid-template-columns:40px 1fr; gap:16px;} }
  .step:last-child{margin-bottom:0;}
  .step-num{
    width:64px; height:64px; border-radius:50%; background:var(--ink); color:var(--paper);
    font-family:var(--grunge-body); font-weight:700; font-size:1.1rem;
    display:flex; align-items:center; justify-content:center; z-index:1;
    outline:2px dashed var(--berry); outline-offset:5px;
  }
  @media (max-width:640px){ .step-num{width:40px; height:40px; font-size:0.85rem;} }
  .step-body h4{font-family:var(--grunge-display); font-weight:600; font-size:1.5rem; color:var(--ink); margin-bottom:12px;}
  .step-body p{font-family:var(--grunge-body); font-size:1.02rem; line-height:1.7; color:var(--charcoal); max-width:620px;}

  /* ---------- EVERY BODY MARQUEE ---------- */

  .marquee-section{
    background:
            repeating-linear-gradient(-45deg, rgba(0,0,0,0.08) 0 22px, transparent 22px 44px),
            var(--berry);
    padding:80px 0; overflow:hidden; position:relative;
  }
  .marquee-row{display:flex; white-space:nowrap; will-change:transform;}
  .marquee-row span{
    font-family:var(--serif); font-weight:700; font-style:italic;
    font-size:clamp(2.2rem, 6vw, 4.5rem); color:var(--paper); margin-right:0.6em;
  }
  .marquee-row span.thin{-webkit-text-stroke:1.5px var(--paper); color:transparent; font-style:normal; font-weight:600;}

  /* ---------- CTA / FOOTER ---------- */
  .cta-section{
    background:
      repeating-linear-gradient(122deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 7px),
      radial-gradient(circle at 85% 15%, rgba(255,255,255,0.04), transparent 45%),
      var(--ink);
    color:var(--paper); padding:150px 6vw 80px; position:relative; overflow:hidden;
  }
  .cta-section::before{
    content:"FIND A WORKSHOP"; position:absolute; bottom:-3vw; left:-1vw; font-family:var(--grunge-display);
    font-size:13vw; font-weight:900; color:rgba(255,255,255,0.035); letter-spacing:-0.02em;
    white-space:nowrap; pointer-events:none; z-index:0;
  }
  .cta-inner{position:relative; z-index:1;}
  .cta-inner{max-width:820px; margin:0 auto; text-align:center;}
  .cta-inner .eyebrow{color:var(--mustard);}
  .cta-inner h2{
    font-family:var(--grunge-display); font-weight:600; font-size:clamp(2.2rem,6vw,4.4rem); line-height:1.05; margin-bottom:36px;
    text-shadow:3px 3px 0 rgba(223,166,46,0.2); display:inline-block; transform:rotate(-0.5deg);
  }
  .cta-inner h2 em{color:var(--berry); font-style:italic;}
  .cta-buttons{display:flex; justify-content:center; gap:22px; flex-wrap:wrap; margin-top:20px;}
  .cta-buttons .btn-primary{font-family:var(--grunge-body);}

  .btn-outline{
    font-family:var(--grunge-body); font-size:0.85rem; letter-spacing:0.5px; color:var(--paper);
    border:1px solid rgba(255,250,240,0.4); padding:16px 30px; border-radius:2px;
    transition: border-color .25s ease, background .25s ease, transform .25s ease, outline-offset .25s ease, box-shadow .25s ease;
    outline:2px dashed transparent; outline-offset:0px;
    box-shadow:4px 4px 0 rgba(255,250,240,0.18);
  }
  .btn-outline:hover{
    border-color:var(--paper); background:rgba(255,250,240,0.08);
    transform:rotate(1.5deg); outline:2px dashed var(--mustard); outline-offset:4px;
    box-shadow:6px 6px 0 rgba(255,250,240,0.28);
  }

  footer{
    border-top:2px dashed rgba(255,250,240,0.22); margin-top:120px; padding-top:36px;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
    font-family:var(--grunge-body); font-size:0.78rem; color:rgba(255,250,240,0.6);
  }
  footer .tagline{max-width:520px; line-height:1.6;}
  footer .fmark{display:flex; align-items:center; gap:8px;}
  footer .fmark .dot{width:6px;height:6px;border-radius:50%;background:var(--mustard);}

  ::-webkit-scrollbar{width:10px;}
  ::-webkit-scrollbar-track{background:var(--paper);}
  ::-webkit-scrollbar-thumb{background:var(--ink); border-radius:6px;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }

/* ==========================================================================
   WordPress-specific additions
   ========================================================================== */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute;
  width:1px; word-wrap:normal !important;
}
.admin-bar header.nav{ top:32px; }
@media screen and (max-width: 782px){
  .admin-bar header.nav{ top:46px; }
}