/* ==========================================================================
   FONTS
   ========================================================================== */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: local("Lato Light Italic"), local("Lato-LightItalic"), url(https://fonts.gstatic.com/s/lato/v16/S6u_w4BMUTPHjxsI9w2_Gwftx9897g.woff2) format("woff2");
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local("Lato Italic"), local("Lato-Italic"), url(https://fonts.gstatic.com/s/lato/v16/S6u8w4BMUTPHjxsAXC-qNiXg7Q.woff2) format("woff2");
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: local("Lato Bold Italic"), local("Lato-BoldItalic"), url(https://fonts.gstatic.com/s/lato/v16/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2) format("woff2");
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local("Lato Light"), local("Lato-Light"), url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2) format("woff2");
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local("Lato Regular"), local("Lato-Regular"), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format("woff2");
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local("Lato Bold"), local("Lato-Bold"), url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format("woff2");
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Bebas Neue Regular"), local("BebasNeue-Regular"), url(https://fonts.gstatic.com/s/bebasneue/v1/JTUSjIg69CK48gW7PXoo9WlhyyTh89Y.woff2) format("woff2");
}
@font-face {
  font-family: 'Passion One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Passion One Regular"), local("PassionOne-Regular"), url(https://fonts.gstatic.com/s/passionone/v10/PbynFmL8HhTPqbjUzux3JEuR9lvC6poU.woff2) format("woff2");
}

/* ==========================================================================
   BASE RESET
   Note: body has font-size:0 on the real live site (a deliberate old
   trick to remove whitespace gaps between inline-block elements). Every
   text element below sets its own font-size explicitly, so this is safe.
   .tg-container and .clearfix are OUR additions, replacing the parent
   theme's inaccessible generic wrapper classes.
   ========================================================================== */
* { box-sizing: border-box; }
html { overflow-x: hidden; }
body { padding: 0; margin: 0; font-size: 0; overflow-x: hidden; }
img { max-width: 100%; }
.tg-container { width: 100%; max-width: 100vw; margin: 0 auto; }
.clearfix::after { content: ""; display: table; clear: both; }

/* ==========================================================================
   SITEWIDE LAYOUT PRIMITIVES
   ========================================================================== */
section {
  padding: 2vw;
  display: flex;
  align-items: flex-start;
  box-shadow: inset 0 8px 6px -2px rgba(0, 0, 0, 0.3);
}
section:first-of-type { box-shadow: none; }
.inset-row { display: flex; }
.center-row { display: flex; align-items: center; justify-content: center; padding: 4vw; text-align: center; }
.centerme { display: flex; align-items: center; justify-content: center; }
.orange-row { background-color: #e39600; color: #333333; }
.orange-row blockquote { border-left-color: white; }
.orange-row em { color: #333333; }
.dark-orange-row { background-color: #bf7f00; }
.gray-row { background-color: #333333; color: #ffffff; }
.gray-row p, .gray-row h1, .gray-row h2, .gray-row h3, .gray-row h4, .gray-row h5, .gray-row h6,
.dark-orange-row p, .dark-orange-row h1, .dark-orange-row h2, .dark-orange-row h3, .dark-orange-row h4, .dark-orange-row h5, .dark-orange-row h6 {
  color: #ffffff;
}
.wrap-row { flex-wrap: wrap; }
.title-row { padding-bottom: 0; }
.column { max-width: 100vw; flex: 1; margin: 0 auto; }
.column + .column { padding: 0 0 0 2vw; }
.column img { margin: 0; max-width: 100%; }
.top-column { margin: 0; }
.column-50 { width: 46vw; flex: none; }

.orange-button, .popupaoc-button {
  padding: 15px; display: block; background-color: #e39600; color: #333333;
  text-align: center; margin: 25px 0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  font-size: calc(12px + .75vmax);
}
.orange-button:hover, .popupaoc-button:hover { background-color: #bf7f00; }
.white-button {
  padding: 15px; display: block; background-color: #ffffff; color: #333333;
  text-align: center; margin: 25px 0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  font-size: calc(12px + .75vmax);
}
.white-button:hover { background-color: #dddddd; }
.gray-button, .pdb-submit {
  padding: 15px; display: block; background-color: #333333; color: #ffffff;
  text-align: center; margin: 25px 0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  font-size: calc(12px + .75vmax);
}
.gray-button:hover, .pdb-submit:hover { background-color: #666666; }

#main { margin-bottom: 0; font-size: 18px; }
li { font-family: lato, sans-serif; font-weight: 300; margin-bottom: 20px; color: #333333; }

.read-more {
  display: block; padding: 10px; margin-top: 10px; background-color: #e39600;
  color: #ffffff; text-decoration: none; text-align: center; font-size: calc(12px + .75vmax);
}

button, input[type=button] { cursor: pointer; }
button:hover, input[type=button]:hover { filter: brightness(80%); transition: 0.3s; }

#submission-box {
  background-color: #eaeaea; margin: 2vw; padding: 2vw; font-size: calc(12px + .75vmax);
}

.sidebar-box {
  background-color: #eaeaea; margin-bottom: 2vw; padding: 2vw;
  display: flex; flex-direction: column; color: #333333; text-decoration: none; transition: 0.3s;
}
.sidebar-box h6 { text-align: center; font-size: calc(12px + 2.5vmax); color: #777777; }
.sidebar-box p { font-size: calc(8px + .75vmax); color: #777777; margin-top: 15px; }
.sidebar-box a { margin: 2vw; font-size: 16px; }
.sidebar-box:hover { filter: brightness(0.92); }
.orange { color: #e39600; }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6, p, a, blockquote, label {
  font-family: lato, sans-serif; line-height: 1; margin: 10px 0; color: #333333;
}
h1 { font-size: 8vmax; font-family: 'Bebas Neue', sans-serif; line-height: 0.85; margin-bottom: 0; }
h1.align-with-movement { margin-top: 5vmax; }
h2 { text-transform: uppercase; letter-spacing: 0.05em; font-size: calc(12px + 3.6vmax); }
h3 { font-size: calc(12px + 2.6vmax); }
h4 { text-transform: uppercase; letter-spacing: 0.05em; font-size: calc(12px + 1.6vmax); }
h5 { font-weight: 300; text-transform: uppercase; letter-spacing: 0.2em; font-size: calc(12px + 1.1vmax); }
h6 { font-size: calc(12px + 1.2vmax); font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; }
blockquote { padding: 2vmax; border-left: solid 5px #e39600; font-family: lato, sans-serif; font-size: calc(12px + 1.6vmax); font-style: italic; margin: 10px 0; }
/* Markdown wraps a ">" blockquote's text in its own inner <p> tag. Without
   this, the generic "p" rule below overrides the blockquote's intended
   font-size/weight on that inner tag, making pull-quotes render smaller
   and heavier than they should. */
blockquote p { font-size: inherit; font-weight: inherit; font-style: inherit; line-height: inherit; margin: 0; }
p, label { font-weight: 300; font-size: calc(12px + .75vmax); line-height: 1.25; }
#single-post-content p + *, .content p + * { margin-top: 30px; }
#single-post-content blockquote, .content blockquote { margin-bottom: 30px; }
em { font-weight: 700; font-style: italic; }
a { text-decoration: none; transition: 0.3s; color: #333333; }
a:hover { filter: brightness(0.8); }

/* Enhanced pull-quote with giant decorative background quotation mark,
   used on the /fighting hub page. To get this exact effect on a quote
   inside a written post, wrap it in a div with class="quote" (covered
   when we build the post template). A plain ">" blockquote in Markdown
   still gets the standard orange-border pull-quote styling above,
   automatically, with no extra step. */
.quote {
  padding: 2vmax 6vmax;
  border-left: solid 5px #e39600;
  font-family: lato, sans-serif;
  font-size: calc(12px + 1.6vmax);
  font-style: italic;
  margin: 10px 0;
  position: relative;
  overflow: hidden;
}
.quote::before, #pledge::before {
  position: absolute;
  font-size: 22vmax;
  margin-left: -8vmax;
  margin-top: -5vmax;
  color: #eaeaea;
  content: '"';
  font-family: 'Passion One', cursive;
  z-index: -1;
}
.center-quote { max-width: 750px; margin-left: auto; margin-right: auto; border-right: solid 5px #e39600; }

.inset-box {
  /* This whole rule is a direct port of the live site's actual CSS for
     this component — verified by fetching the live stylesheet directly,
     rather than continuing to patch guesses. max-width + margin:auto is
     how the live site solves the outline-overflow problem: the box is
     deliberately narrower than its flex-allocated space, so its own
     outline has guaranteed room to expand into without ever reaching a
     neighboring column, at any viewport width. */
  background-color: #eaeaea;
  border: 2px dashed #cccccc;
  outline: 2vmax solid #eaeaea;
  padding: 2vmax !important;
  margin: 4vmax auto;
  max-width: calc(100% - 8vmax);
}
/* On the homepage specifically, .inset-box is a plain block-level child of
   .column-50 (not a flex item, unlike the social-page/#experiment-row
   version of this same class below, which sizes itself via flex:1
   instead). The rule above relies on the browser's default block
   behavior — stretch to fill available space, then get capped by
   max-width — to arrive at the right width. That's an indirect chain of
   assumptions. Giving it an explicit "width" here instead is a more
   direct, deterministic instruction that leaves no room for a browser's
   default sizing behavior to produce a different result. */
/* On the homepage, this box should sit flush with the paragraph text on
   either side of it — no inset gap. (The narrower "inset" look in the
   base .inset-box rule above is the original WordPress theme's design;
   we're moving away from that here, one spot at a time.) The outline is
   turned off too, since it exists specifically to create breathing room
   around a narrower box — with no gap left to fill, it would just
   overflow past the column's edge instead. */
.column-50 > .inset-box {
  width: 100%;
  max-width: 100%;
  outline: none;
}
/* The "RULE OF SEVEN" heading is close enough to the box's edge that a
   small difference in window width can push it from one line to two.
   Giving it a touch more breathing room (slightly smaller size, tighter
   letter-spacing) keeps it reliably on one line across ordinary desktop
   widths without changing its appearance in any noticeable way. */
.inset-box h2 {
  font-size: calc(12px + 3vmax);
  letter-spacing: 0.02em;
}

.icon-title { text-align: center; margin: -5.5vmax 0 3.5vmax 0; }
.icon-title-ico { margin: auto; width: auto; height: 8vmax; display: block; }

.byline { color: #e39600; font-weight: bold; font-size: calc(12px + 1.2vmax); margin-top: 0; }

#YCNT-dropcap { float: left; margin: 0 1vw 0 0; width: 25%; }

/* ==========================================================================
   HEADER
   ========================================================================== */
#headergrid, #dummyheader {
  background-color: #333333; display: grid;
  grid-template-columns: 220px 1fr 220px; grid-template-rows: auto;
  grid-template-areas: "home-nav header-logo fighting-nav";
  width: 100vw; z-index: 999; position: fixed; top: 0;
  box-shadow: 0 8px 6px rgba(0, 0, 0, 0.3);
}
#headergrid .nav, #dummyheader .nav { width: 200px; height: auto; transition: 0.3s; padding: 10px; }
#headergrid .nav:hover, #dummyheader .nav:hover { filter: brightness(70%); }
#headergrid .header-logo, #dummyheader .header-logo { margin: auto; width: 66%; grid-area: header-logo; padding: 10px; }
#dummyheader { position: relative; z-index: 0; box-shadow: none; }
.home-nav { grid-area: home-nav; }
.fighting-nav { grid-area: fighting-nav; }
.hover-big { margin: 0; padding: 0; display: block; }
.hover-big:hover { transform: scale(1.03); filter: invert(20%); }
.foursquarefight { margin: 0; padding: 0; }

/* Category page header sub-grid (appears under the header on category pages) */
#cat-header-grid {
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto;
  grid-template-areas: "grid1 parentgrid"; font-size: 0; transition: transform 0.75s;
}
.grid1 { grid-area: grid1; font-size: 0; }
.parentgrid {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  grid-template-areas: "grid2 grid3" "grid4 grid5"; grid-area: parentgrid;
}
.grid2 { grid-area: grid2; }
.grid3 { grid-area: grid3; }
.grid4 { grid-area: grid4; }
.grid5 { grid-area: grid5; }

/* ==========================================================================
   HOMEPAGE HERO
   ========================================================================== */
#home-hero {
  background-image: url("../uploads/2020/06/Chalkboard-background-only-scaled.jpg");
  background-size: cover;
  text-align: right;
  /* The two columns are pinned to the row's top edge by default (the
     generic "section" rule above sets align-items: flex-start). That
     means the text column's position has no real relationship to the
     image beside it — it just starts wherever the top happens to be.
     Centering it vertically instead ties its position directly to the
     image's rendered height, so the two sides stay visually balanced
     against each other at any width, rather than both being independently
     anchored to the top. */
  align-items: center;
}
#home-hero p { color: #ffffff; }
#home-hero h1 { font-size: 6vmax; margin: 0; }
#home-hero h5 { margin: 10px 0; }

/* ==========================================================================
   /fighting HUB PAGE ("Browse Content")
   ========================================================================== */
#fight-header { padding: 2vw 2vw 0 2vw; margin-bottom: -2vw; text-align: center; }
.fight-col { display: inline-block; width: 45vw; margin-top: 0; }
.fight-col:last-of-type { border-left: solid 5px #e39600; margin-left: 1vw; padding-left: 1vw; }
.fight-quote { border: none; padding: 2vmax 0 2vmax 6vmax; }

#fight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: max-content max-content auto;
  gap: 0;
  grid-template-areas: "questioning deprogramming fighting-text" "expanse communication fighting-text" "action social fighting-text";
}
#fight-grid p { font-size: 1.8vw; }
#fight-grid #questioning { grid-area: questioning; }
#fight-grid #deprogramming { grid-area: deprogramming; }
#fight-grid #expanse { grid-area: expanse; }
#fight-grid #communication { grid-area: communication; }
#fight-grid #action { grid-area: action; }
#fight-grid #social { grid-area: social; }
#fight-grid #fighting-text { grid-area: fighting-text; margin-left: 20px; }
#fight-grid #fighting-text p { font-size: calc(1.8vw * var(--text-fit-scale, 1)); line-height: calc(1.25 * var(--text-fit-line-scale, 1)); }
#fight-grid #fighting-text blockquote { font-size: calc((12px + 1.6vmax) * var(--text-fit-scale, 1)); }
#fight-grid > * { margin-top: 0; }
#fight-grid .hover-big { display: block; }
#fighting-1 img, #fighting-2 img { max-width: 100%; }

/* ==========================================================================
   CATEGORY LISTING PAGE + POST CARDS
   (real styling from the live site — ready for the category template)
   ========================================================================== */
.cat-widget-container {
  box-shadow: 0 10px 10px -5px grey; overflow: hidden;
}
.cat-widget-container .cat-text-widget { float: left; width: 66%; padding: 1.5rem; background-color: #eeeeee; box-sizing: border-box; }
.cat-widget-container .cat-links-widget { float: right; width: 34%; background-color: lightgray; padding: 1.5rem; overflow-y: scroll; box-sizing: border-box; }
.cat-links-toggle { display: none; }
.cat-widget-container .cat-links-widget p { font-size: calc(8px + .75vmax); }

h2.widgettitle { letter-spacing: normal; font-size: calc(12px + 1.75vmax); font-family: 'Bebas Neue', sans-serif; }

/* .secondary-p: the real live-site class for a featured post's "note"
   column (e.g. "A Note from Marketers"). Verified directly from the
   live theme's stylesheet — no background box, no padding. Paragraphs
   are italic BY DEFAULT; an <i> tag inside un-italicizes that specific
   phrase (used for contrast, e.g. around a defined term). */
.secondary-p p { font-size: calc(8px + .75vmax); font-style: italic; }
.secondary-p i { font-style: normal; }

.cat-grid { columns: 3 200px; column-gap: 1rem; padding: 1rem; }
.cat-grid article { margin: 0 1rem 1rem 0; display: inline-block; width: 100%; }
.cat-link img { width: 100px; height: 100px; }
.cat-link .cat-link-thumb { display: inline-block; vertical-align: top; }
.cat-link .cat-link-text { display: inline-block; width: calc(100% - 115px); margin-left: 10px; }
.cat-link .cat-link-text > * { margin: 0; }
.cat-link:hover { filter: opacity(0.8); transition: .3s; }
.feature-cat-post { box-shadow: 0 8px 6px -2px rgba(0, 0, 0, 0.3); }

.post {
  box-shadow: 0px 2px 5px gray; display: inline-block; width: 100%;
  margin: 0 1rem 1rem 0; height: auto; padding-bottom: 5%;
}
.post img { margin: 5% auto auto 5%; max-width: 90%; height: auto; align-self: center; }
.post-header {
  margin: 0; max-width: 100%; background-color: #333333; color: white;
  padding: .75rem; text-align: center; letter-spacing: .75rem; font-weight: 300;
  text-transform: uppercase; font-size: calc(10px + .5vmax);
}
.upcoming { background-color: #888888; }
.post-title { margin: 5px 5% 5px 5%; font-family: 'Lato', sans-serif; line-height: 1.2; hyphens: auto; font-size: calc(12px + 1vmax); }
.post-cat { list-style: none; color: #e39600; max-width: 90%; margin: auto 5% auto 5%; text-transform: uppercase; font-size: calc(10px + .5vmax); }
.post-cat a { color: #e39600; text-decoration: none; font-size: 1rem; }
.post-excerpt { font-size: 1rem; max-width: 90%; margin: 5px 5% auto 5%; }
.post-full-link {
  font-size: 1.5rem; width: 90%; margin: 5% auto auto 5%; background-color: #e39600;
  text-decoration: none; color: white; padding: 10px 0; display: block; text-align: center;
}

/* Related posts styling (reused for our automatic/manual relatedPosts feature) */
/* Deprogramming-and-education "tactic entry" pages only (see post.njk's
   isTacticEntry check) — image wraps with text instead of stacking with
   dead space beside it, breathing room under the title, and a drop cap
   on the opening paragraph. Scoped to .tactic-entry so nothing else on
   the site is affected. */
.tactic-entry::after { content: ""; display: table; clear: both; }
.tactic-entry h1 { margin-bottom: 2rem; }
.tactic-entry img {
  float: left; width: 45%; max-width: 320px;
  margin: 0 1.75rem 1rem 0;
}
.tactic-entry > p:first-of-type::first-letter {
  float: left; font-family: 'Bebas Neue', sans-serif; font-size: 4.5rem;
  line-height: 0.8; padding: 0.25rem 0.5rem 0 0; color: #e39600;
}

.yarpp-related, .yarpp-related-none {
  margin: 1em -2vw; padding: 0 2vw 2vw 2vw; background: linear-gradient(#eaeaea, #ffffff);
}
.yarpp-related h3, .yarpp-related-none h3 {
  text-align: center; font-weight: normal; background-color: #aaaaaa; padding: 1vw;
  margin: 0 -2vw; text-transform: uppercase; font-size: calc(12px + 1.1vmax);
}
.yarpp-related .yarpp-thumbnails-horizontal, .yarpp-related-none .yarpp-thumbnails-horizontal {
  display: flex; justify-content: center;
}
.yarpp-related .yarpp-thumbnail, .yarpp-related-none .yarpp-thumbnail { border: none; height: auto; padding: 0 2vw; text-align: center; }
.yarpp-thumbnail img { display: block; width: 120px; height: 120px; object-fit: cover; margin: 0 auto; }
.yarpp-thumbnail-title { display: block; font-size: calc(10px + .5vmax); margin-top: 5px; max-width: 150px; }

/* ==========================================================================
   CROWD / PARTICIPATE SECTION (homepage)
   ========================================================================== */
.two-thirds-column {
  width: 50%; margin: 0 0 2vw 50%; padding: 0 1vw; text-align: left;
  background-color: #666666; border-left: solid 5px #e39600;
}
.two-thirds-column p { color: #ffffff; }
.two-thirds-column a { color: #e39600; }

#crowd-row {
  background-image: url("../uploads/2020/03/crowd.png");
  background-position: left bottom; background-size: 50vw; background-repeat: no-repeat;
  display: block;
}
#crowd-row h5 { letter-spacing: normal; }

.small-p {
  font-size: 80%; line-height: 1; text-align: left; font-weight: 400;
  padding: 0 1vw 1vw 1vw; margin-top: 0; background-color: #333333;
  color: #ffffff; width: 46vw; margin: auto;
}

#slideshow { height: 46vw; width: 46vw; margin: 0 auto; overflow: hidden; border: solid 1vw #333333; }
.slide-wrapper { width: calc(48vw * 10); animation: slide 45s ease infinite; }
.slide { float: left; height: 48vw; width: 48vw; }
@keyframes slide {
  0%, 5% { margin-left: 0px; }
  10%, 15% { margin-left: calc(-48vw * 1); }
  20%, 25% { margin-left: calc(-48vw * 2); }
  30%, 35% { margin-left: calc(-48vw * 3); }
  40%, 45% { margin-left: calc(-48vw * 4); }
  50%, 55% { margin-left: calc(-48vw * 5); }
  60%, 65% { margin-left: calc(-48vw * 6); }
  70%, 75% { margin-left: calc(-48vw * 7); }
  80%, 85% { margin-left: calc(-48vw * 8); }
  90%, 95% { margin-left: calc(-48vw * 9); }
  100% { margin-left: 0px; }
}

#other-ideas { margin: 2vw -2vw; background-color: #bf7f00; padding: 2vw 0; }

#bubble-info { height: 4.5vmax; width: 4.5vmax; display: inline-block; }
#bubble { display: inline-block; transform: translateY(-1.5vmax); }
.bubble-container {
  background: #333333; padding: 5px 20px; border-radius: 50px; display: flex;
  align-items: center; color: #ffffff; width: fit-content;
}
.bubble-carousel { overflow: hidden; display: inline-block; vertical-align: top; height: 3.5vmax; }
.bubble-inner { animation: bubble 25s linear infinite; }
.bubble-element { color: #ffffff; font-size: 1.5vmax; line-height: 1.5; }
@keyframes bubble {
  0% { transform: translateY(30px); }
  100% { transform: translateY(calc(-3vmax * 8.5)); }
}

.frontpage-grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto;
  gap: 2vw; grid-template-areas: "Music Art" "Time Money" "Industry Industry";
}
.frontpage-grid > div { background-color: white; box-shadow: -1px 3px 4px 3px rgba(0, 0, 0, 0.3); padding: 1vw; }
.frontpage-grid h4 { margin: -1vw; text-align: center; padding: 1vw; background-color: #eaeaea; }
.frontpage-grid img { width: 150px; padding: 2vw 10px 0 0; float: left; }
.Music { grid-area: Music; }
.Art { grid-area: Art; }
.Time { grid-area: Time; }
.Money { grid-area: Money; }
.Industry { grid-area: Industry; }

.desktop-flex { display: flex; padding-bottom: 2vw; }
.desktop-flex p { text-align: left; }
.desktop-flex h6 { font-size: calc(12px + 2vmax); }
.fp-grid-content { padding: 2vw 1vw 1vw 1vw; }
.fp-grid-content > * { margin-left: 160px; }

/* ==========================================================================
   SOCIAL PAGE
   ========================================================================== */
#social-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-column-gap: 0;
  grid-template-areas: "grid1 grid2 grid3 grid4 grid5"; z-index: 900; position: relative; margin-bottom: -2px;
}
#social-grid a, #social-grid img { margin: 0; padding: 0; }
#social-row {
  background-image: url("../uploads/2020/07/social-header-background.jpg");
  background-position: center; background-size: cover; display: block;
}
.social-subhead { color: #e39600; font-style: italic; font-weight: bold; font-size: calc(12px + 1.2vmax); }

#lost-list { overflow: hidden; display: inline-block; vertical-align: top; height: calc(200px + 2vw); }
#lost-list ul { padding: 0; }
#lost-list li {
  padding: 20px; background-color: #eaeaea; color: #333333; list-style: none;
  border-radius: 20px; font-weight: bold;
}
#lost-inner { animation: scroll 45s linear infinite; }
@keyframes scroll {
  from { transform: translateY(200px); }
  to { transform: translateY(-100%); }
}
#fade {
  z-index: 1; margin-top: calc(-200px - 2vw); pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0) 50%, #ffffff);
  width: 100%; height: calc(200px + 2vw); position: relative;
}
#libral-row {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.4)), url("../uploads/2020/07/libral-background.jpg");
  background-position: center; background-size: cover; padding: 150px 0;
}
#libral-card { background-color: #ffffff; box-shadow: 0 10px 20px 10px rgba(0, 0, 0, 0.4); padding: 2vmax; width: 700px; max-width: 80vw; }
#libral-card h6 { text-align: center; font-size: calc(12px + 3vmax); }
#libral-card p:last-of-type { margin-bottom: 20px; text-align: right; }
#libral-card a {
  border-top: 4px solid #9E3E2C; border-bottom: 4px solid #245E7A; box-shadow: 0 5px 7px rgba(0, 0, 0, 0.4);
  background-color: #ffffff; padding: 15px; display: block; margin: 0 20%; text-align: center;
}
/* Ported directly from the live site's real stylesheet. align-items:flex-start
   was my own addition and isn't present live — removed. The real gutter
   between the two columns comes from these margin rules, which our CSS
   never actually had; that (not anything my earlier "fixes" touched) was
   the true cause of the missing gutter this whole time. */
#experiment-row { display: flex; }
#experiment-row .inset-box { flex: 1; }
#experiment-row > div { margin-right: 2vw; }
#experiment-row div + div { margin-left: 2vw; }
#experiment-row a { padding: 45px; font-size: calc(12px + 1.5vmax); }
#experiment-row h2 { font-size: calc(12px + 2.6vmax); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
#colophon { display: block; }
#colophon .column {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2vw;
  padding: 2vw;
}
footer .sidebar-box { margin: 0; }
/* On pages where the sidebar boxes already appear next to a featured
   post (desktop), hide the footer's duplicate copy — but only on those
   pages, so pages without a post-sidebar (like deprogramming-and-education)
   keep showing their footer boxes normally either way. */
.has-post-sidebar footer .sidebar-box { display: none; }
#footerbar {
  background-color: #bf7f00; padding-top: 40px; font-size: 20px;
  box-shadow: inset 0 8px 6px -2px rgba(0, 0, 0, 0.3);
}
#footerbar h1 { line-height: 1.05; font-size: 4vmax; padding: 2vw 2vw 0 2vw; color: #333333; }
#footer-2-col { column-count: 2; column-gap: 40px; padding: 40px; font-size: 14px; }
#footer-2-col > p { margin-top: 0; font-weight: 500; color: #333333; }
#footer-divider {
  background-color: #333333; color: #ffffff; padding: 4vw 4vw 0 4vw; text-align: center;
  box-shadow: inset 0 8px 6px -2px rgba(0, 0, 0, 0.3);
}
#footer-divider h5 { text-transform: none; letter-spacing: normal; color: #888888; margin: auto; line-height: 1.1; max-width: 1000px; }
#copyrightbar { background-color: #222222; color: #ffffff; padding: 20px; }
#copyrightbar p { font-size: 12px; color: #aaaaaa; }
.footer-3-col { display: grid; grid: auto-flow / 1fr 1fr 1fr; grid-gap: 30px; padding: 30px; align-items: end; background-color: #333333; }
.footer-3-col p { color: #ffffff; }
.footer-3-col > div { padding: 20px; }
.footer-3-col img { display: block; margin-left: auto; margin-right: auto; max-width: 100%; max-height: 200px; }

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media only screen and (max-width: 1024px) {
  #fight-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr auto; gap: 0;
    grid-template-areas: "questioning deprogramming expanse" "communication action social" "fighting-text fighting-text fighting-text";
  }
  #fight-grid p { font-size: calc(12px + .75vmax); }
  #fight-grid #fighting-text p { font-size: calc(12px + .75vmax); line-height: 1.25; }
  #fighting-text {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; gap: 0 20px;
    grid-template-areas: "fighting-1 fighting-2"; grid-area: fighting-text; margin-top: 20px;
  }
  #fighting-1 { grid-area: fighting-1; }
  #fighting-2 { grid-area: fighting-2; }
  #cat-header-grid { grid-template-columns: 1fr; grid-template-rows: 2fr 1fr; grid-template-areas: "grid1" "parentgrid"; }
  .parentgrid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; grid-template-areas: "grid2 grid3 grid4 grid5"; grid-area: parentgrid; }
  .headercenter { display: block; }
  #customlogo { max-width: 98vw; }
  #headergrid, #dummyheader { width: 100%; padding: 0; }
  .footer-3-col { grid: 1fr / auto-flow; grid-auto-flow: row; padding: 10px 20%; }
  .footer-3-col img { max-height: inherit; }
  .desktop-flex { display: block; }
  .desktop-flex .column { padding: 0 0 10px 0; }
  #crowd-grid {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;
    grid-template-areas: "spread share" "follow share"; gap: 10px 30px;
  }
  #crowd-grid #spread { grid-area: spread; }
  #crowd-grid #follow { grid-area: follow; }
  #crowd-grid #share { grid-area: share; }
  #crowd-grid .column + .column { padding: 0; }
  #colophon .column { grid-template-columns: 1fr; }
  /* This is where the live site actually stacks #experiment-row — a
     different breakpoint than the other two-column sections (which
     stack at 680px). Ported directly from the live stylesheet. */
  #experiment-row { display: block; }
  #experiment-row > div { margin-right: 0; }
  #experiment-row .column + .column { padding: inherit; }
  #experiment-row .inset-box { margin: 6vw 4vw; min-width: 0; }
}

@media only screen and (max-width: 850px) {
  .column.post-sidebar { display: none; }
  .has-post-sidebar footer .sidebar-box { display: flex; }
  .cat-grid { columns: 1 auto; }
  #crowd-row { background-position: center bottom; background-size: 100vw; }
  .cat-widget-container .cat-text-widget, .cat-widget-container .cat-links-widget { float: none; width: 100%; }
  .cat-widget-container { margin-bottom: 2rem; }
  .cat-widget-container .cat-text-widget { max-height: none !important; }
  .cat-widget-container .cat-links-widget { max-height: 420px !important; overflow-y: hidden !important; position: relative; padding-bottom: 4rem; }
  .cat-widget-container .cat-links-widget.expanded { max-height: none !important; overflow-y: visible !important; padding-bottom: 1.5rem; }
  .cat-widget-container .cat-links-widget::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 3.25rem; height: 2.5rem;
    background: linear-gradient(to bottom, rgba(211, 211, 211, 0), lightgray);
    pointer-events: none;
  }
  .cat-widget-container .cat-links-widget.expanded::before { content: none; }
  .cat-links-toggle {
    display: block; width: 100%; padding: 0.75rem; border: none;
    background-color: #333333; color: #ffffff; font-family: 'Bebas Neue', sans-serif;
    text-transform: uppercase; letter-spacing: normal; font-weight: 700;
    font-size: calc(10px + .75vmax); cursor: pointer;
    position: absolute; left: 0; right: 0; bottom: 0; margin-top: 0;
  }
  .cat-widget-container .cat-links-widget.expanded .cat-links-toggle {
    position: static; margin-top: 1rem;
  }
  #headergrid, #dummyheader {
    grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;
    grid-template-areas: "home-nav fighting-nav" "header-logo header-logo";
  }
  #headergrid .fighting-nav, #dummyheader .fighting-nav { margin-left: auto; }
  .frontpage-grid {
    display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto;
    gap: 2vw; grid-template-areas: "Music" "Art" "Time" "Money" "Industry";
  }
  #slideshow { height: 94vw; width: 94vw; }
  .small-p { width: 94vw; }
  .slide-wrapper { width: calc(94vw * 10); animation: slide-mobile 45s ease infinite; }
  .slide { float: left; height: 94vw; width: 94vw; }
  @keyframes slide-mobile {
    0%, 5% { margin-left: 0px; }
    10%, 15% { margin-left: calc(-94vw * 1); }
    20%, 25% { margin-left: calc(-94vw * 2); }
    30%, 35% { margin-left: calc(-94vw * 3); }
    40%, 45% { margin-left: calc(-94vw * 4); }
    50%, 55% { margin-left: calc(-94vw * 5); }
    60%, 65% { margin-left: calc(-94vw * 6); }
    70%, 75% { margin-left: calc(-94vw * 7); }
    80%, 85% { margin-left: calc(-94vw * 8); }
    90%, 95% { margin-left: calc(-94vw * 9); }
    100% { margin-left: 0px; }
  }
}

@media only screen and (max-width: 680px) {
  #home-hero { text-align: left; }
  #crowd-grid { display: block; }
  #crowd-grid .column + .column { padding: 20px 0; }
  .footer-3-col { padding: 10px 20px; }
  .column { display: block; min-width: 90vw; }
  .column img { display: block; margin: 0 auto; }
  .column + .column { padding: 0; }
  section, .inset-row, .fight-col { display: block; }
  .fight-col:last-of-type { border: none; }
  .two-thirds-column { margin-right: auto; }
  .two-thirds-column p { padding: 10px 5vw 10px 0px; }
  #footer-2-col { column-count: 1; }
  .cat-grid { columns: 1 auto; }
  #fight-grid, #fight-grid #fighting-text { display: block; margin-left: unset; }
  #experiment-row .inset-box { margin: 10vw 5vw; min-width: 0; }
}

/* ==========================================================================
   ACCESSIBILITY
   Respects the visitor's OS-level "reduce motion" setting by pausing the
   two continuously-animating elements on the site (the slideshow and the
   bubble carousel). Some people experience real physical discomfort
   (vertigo, nausea) from persistent motion — this is the standard,
   W3C-recommended way to accommodate that.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .slide-wrapper, .bubble-inner {
    animation: none;
  }
}