/* Fashion Coders — fashioncoders.com
   Generated by _fix/theme.js. Do not edit by hand: edit the profile in
   _fix/profiles.js and re-run, or the next build will overwrite this.

   Personality : editorial
   Accent      : #9f1239
   Typefaces   : Bodoni Moda / Jost
   Loaded after the site's original stylesheet and overrides it additively. */

:root {
  --font-display: 'Bodoni Moda', Georgia, "Times New Roman", serif;
  --font-body: 'Jost', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* The base stylesheets consume these, so re-declaring them re-skins the
     page without touching a single original rule. */
  --accent: #9f1239;
  --accent-light: #e90faa;
  --accent-dark: #710d29;
  --accent-text: #9f1239;
  --accent-soft: #f3e3e7;
  --bg-primary: #fbf6f7;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-glass: rgba(34,22,25,0.04);
  --text-primary: #221619;
  --text-secondary: #675157;
  --text-muted: #988187;
  --border: rgba(34,22,25,0.12);
  --radius: 4px;
  --radius-sm: 2px;
  --shadow: 0 10px 34px rgba(34,22,25,0.08);
  --gold: #e90faa;
  --sakura: #9f1239;
}

/* Several base sheets hard-code Noto Sans JP — Japanese faces that were copied
   from newintokyo.com onto English-language sites. Override the family rather
   than the elements, so anything the base sheet styles inherits it. */
body, input, select, textarea, button { font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6,
.section-title, .site-logo span, .logo-text-group span:first-child,
.hero h1, .blog-card h3, .card h3, .la-title {
  font-family: var(--font-display);
}

body { background: #fbf6f7; color: #221619; }
a { color: #9f1239; }
a:hover { color: #710d29; }

/* The masthead wordmark. Most templates render the name as text beside the
   badge; a few had an image-only logo and get the text injected by
   _fix/apply.js, so both paths land on the same styling here. */
.site-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.site-logo img { max-height: 42px; width: auto; flex-shrink: 0; }
/* images/logo.svg is now a full lockup: the mark AND the brand name, drawn as
   vector paths in the site's own display face by _fix/wordmark.py. The HTML
   text group beside it would therefore repeat the name — the "two logos" the
   owner reported. It is hidden rather than deleted, so the markup still
   carries the name for anything that reads the DOM, and the image carries it
   for readers. */
.site-logo .logo-text-group, .logo-text-group { display: none !important; }
.site-logo .logo-text-group > span:first-child {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.16rem; letter-spacing: -.01em; color: #221619;
  white-space: nowrap;
  /* Some base sheets paint the wordmark with a clipped gradient plus
     -webkit-text-fill-color: transparent. Left alone that beats the color
     declaration above and the name renders invisible or in the old palette. */
  background: none; -webkit-background-clip: border-box; -webkit-text-fill-color: currentColor;
}
.site-logo .logo-text-group > span.header-tagline {
  font-size: .72rem; color: #988187; font-weight: 500; white-space: nowrap;
  letter-spacing: normal; text-transform: none;
}

/* Masthead lockup — varied per personality so 115 headers do not read as one
   template. See mastheadCss(). */

.site-logo img {
  max-height: 46px; width: auto; max-width: 100%;
  object-fit: contain; object-position: left;
}


/* ============ PERSONALITY: editorial ============ */

.site-header { background: #ffffff; border-bottom: 1px solid rgba(34,22,25,0.12); backdrop-filter: none; }
.site-header::after { content:''; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:#9f1239; opacity:.55; }
.main-nav > a { text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; font-weight: 600; }
.main-nav > a::after { content:''; display:block; height:1px; background:#9f1239; transform:scaleX(0); transition:transform .25s; }
.main-nav > a:hover::after { transform:scaleX(1); }
.section-title { font-style: italic; letter-spacing: -.01em; }
.section-title::after { content:''; display:block; width:64px; height:1px; background:#9f1239; margin-top:14px; }
.blog-card, .card, .la-card { border:1px solid rgba(34,22,25,0.12); box-shadow:none; }
.blog-card:hover, .card:hover { box-shadow: 0 10px 34px rgba(34,22,25,0.1); }

/* ============ INFO & LEGAL PAGES ============
   About / Contact / Privacy / Terms / Editorial Policy / Disclaimer are
   generated by _fix/pages.js against this markup. */
.page-hero {
  padding: calc(var(--header-h, 72px) + 56px) 0 44px;
  background: linear-gradient(135deg, rgba(159,18,57,0.12), rgba(233,15,170,0.05));
  border-bottom: 1px solid rgba(34,22,25,0.12);
}
.page-hero .container { max-width: 820px; }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.14; margin-bottom: 14px; color: #221619; }
.page-hero p { color: #675157; font-size: 1.06rem; max-width: 62ch; }
.page-hero .page-eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #9f1239; margin-bottom: 14px;
}

.legal-wrap { padding: 52px 0 72px; }
.legal-wrap .container { max-width: 820px; }
.legal-body { color: #675157; font-size: 1.02rem; line-height: 1.8; }
.legal-body h2 {
  font-family: var(--font-display); color: #221619;
  font-size: clamp(1.25rem, 2.6vw, 1.55rem); margin: 40px 0 14px; line-height: 1.3;
}
.legal-body h3 { color: #221619; font-size: 1.08rem; margin: 26px 0 10px; font-weight: 700; }
.legal-body p { margin-bottom: 16px; }
.legal-body ul, .legal-body ol { margin: 0 0 18px 22px; }
.legal-body li { margin-bottom: 9px; }
.legal-body strong { color: #221619; }
.legal-body a { color: #9f1239; text-decoration: underline; text-underline-offset: 3px; }
.legal-updated {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  background: #f3e3e7; color: #9f1239;
  font-size: .8rem; font-weight: 600; margin-bottom: 8px;
}
.legal-note {
  border-left: 4px solid #9f1239; background: #f3e3e7;
  padding: 16px 20px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 26px 0;
}
.legal-note p:last-child { margin-bottom: 0; }
.legal-toc {
  background: #ffffff; border: 1px solid rgba(34,22,25,0.12);
  border-radius: var(--radius-sm); padding: 20px 24px; margin: 0 0 36px;
}
.legal-toc h2 { margin: 0 0 12px; font-size: 1rem; }
.legal-toc ol { margin: 0 0 0 20px; }
.legal-toc li { margin-bottom: 6px; }

.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px; margin: 0 0 42px;
}
.contact-card {
  background: #ffffff; border: 1px solid rgba(34,22,25,0.12);
  border-radius: var(--radius-sm); padding: 24px;
}
.contact-card .card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: #f3e3e7; color: #9f1239;
  font-size: 1.15rem; margin-bottom: 14px;
}
.contact-card h3 { font-family: var(--font-display); font-size: 1.02rem; margin-bottom: 8px; color: #221619; }
.contact-card p { color: #675157; font-size: .95rem; margin: 0; line-height: 1.65; }
.contact-card a { color: #9f1239; word-break: break-word; }

.contact-form {
  background: #ffffff; border: 1px solid rgba(34,22,25,0.12);
  border-radius: var(--radius-sm); padding: clamp(22px, 4vw, 34px);
}
.contact-form h2 { font-family: var(--font-display); margin-bottom: 6px; color: #221619; }
.contact-form > p { color: #988187; margin-bottom: 22px; font-size: .95rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; font-size: .87rem; margin-bottom: 7px; color: #221619; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid rgba(34,22,25,0.12); background: #fff;
  color: #221619; font-family: var(--font-body); font-size: .97rem;
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: #9f1239; box-shadow: 0 0 0 3px rgba(159,18,57,0.18);
}
.form-submit {
  background: #9f1239; color: #fff; border: 0; cursor: pointer;
  padding: 14px 30px; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-weight: 700; font-size: .98rem;
  min-height: 46px; transition: var(--transition, .2s);
}
.form-submit:hover { background: #7a0e2c; }
.form-submit:disabled { opacity: .6; cursor: default; }
.form-status { margin-top: 14px; font-size: .93rem; font-weight: 600; color: #9f1239; }

/* The spam trap. Moved off-screen rather than display:none — bots that are
   worth defending against skip hidden fields, but fill visible ones. Kept out
   of the tab order and hidden from assistive tech at the markup level. */
.hp-field {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}

.form-sent {
  padding: 26px 4px; text-align: center;
}
.form-sent strong {
  display: block; font-family: var(--font-display); font-size: 1.25rem;
  color: #9f1239; margin-bottom: 8px;
}
.form-sent p { color: #675157; margin: 0; }

@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; }
  .page-hero { padding: calc(var(--header-h, 60px) + 34px) 0 30px; }
  .legal-wrap { padding: 34px 0 52px; }
}

/* ============ HUB PAGES ============
   The 1,016 hub pages carry their own inline <style> with hardcoded navy
   (#1e3a5f / #2a5298 on #f8f9fa) and Segoe UI — identical on all 81 sites and
   unrelated to any of them. theme.css is linked after that block, so these
   rules win and the hubs finally match the site they belong to. */
.hub-header {
  background: linear-gradient(135deg, #9f1239, #e90faa) !important;
  color: #fff !important;
  padding: clamp(38px, 7vw, 64px) 20px !important;
  margin-top: var(--header-h, 72px) !important;
  text-align: center;
}
.hub-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.5vw, 2.5rem) !important;
  line-height: 1.15; margin-bottom: 10px; color: #fff;
}
.hub-header p { color: rgba(255,255,255,0.86); font-size: 1rem; }

.hub-grid {
  max-width: var(--max-width, 1200px) !important;
  padding: 0 20px !important;
  margin: clamp(26px, 5vw, 44px) auto !important;
  gap: clamp(16px, 2.4vw, 26px) !important;
}
.hub-card {
  background: #ffffff !important;
  border: 1px solid rgba(34,22,25,0.12) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 6px 22px rgba(34,22,25,0.07) !important;
  overflow: hidden;
}
.hub-card:hover { transform: translateY(-4px); border-color: #9f1239 !important; }
.hub-card img { height: clamp(160px, 22vw, 210px) !important; object-fit: cover; }
.hub-card-body h2 { font-family: var(--font-display); font-size: 1.1rem !important; line-height: 1.32; }
.hub-card-body h2 a { color: #221619 !important; text-decoration: none; }
.hub-card-body h2 a:hover { color: #9f1239 !important; }
.hub-card-body p { color: #675157 !important; }
.hub-card-meta { border-top: 1px solid rgba(34,22,25,0.12) !important; color: #988187 !important; }

/* Taboola units placed on the hubs by _fix/hubads.js. Reserve height so the
   listing does not jump when a unit fills. */
.tb-unit { min-height: 90px; }

@media (max-width: 560px) {
  .hub-header { margin-top: var(--header-h, 60px) !important; }
}

/* Footer — shared shape, brand colours.
   The base sheets give the footer a light background; this makes it dark, so
   everything inside it has to be re-coloured. That includes markup app.js
   injects at runtime: .fp-item h4 is styled with color: var(--text-primary),
   which is the dark ink used for the light page above and vanishes completely
   against a dark footer. Descendants therefore inherit the footer's own
   colour rather than the page token, which also covers any injected markup
   whose classes are not known here. */
.site-footer { background: #201518; color: rgba(255,255,255,0.82); }
.site-footer :is(h1, h2, h3, h4, h5, h6, p, span, div, li, strong, em, time, small, label) {
  color: inherit;
}
.site-footer h3, .site-footer h4 { color: rgba(255,255,255,0.94); }
.site-footer h3 { font-family: var(--font-display); font-size: 1rem; letter-spacing: .02em; }
.site-footer .fp-item h4 { color: rgba(255,255,255,0.88); font-weight: 600; }
.site-footer .fp-item { border-bottom-color: rgba(255,255,255,0.12); }
.site-footer .fp-item:hover h4 { color: #e90faa; }
.site-footer .footer-about-text, .site-footer .footer-contact { color: rgba(255,255,255,0.7); }
.site-footer a { color: rgba(255,255,255,0.78); }
.site-footer a:hover { color: #e90faa; }
.site-footer .footer-contact strong { color: rgba(255,255,255,0.92); }
.footer-links-bar { border-top: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(255,255,255,0.14); }
.footer-bottom { color: rgba(255,255,255,0.55); }


/* ============ RESPONSIVE / MOBILE ============
   The base sheets only swap the nav at 768px. Between 769px and ~900px the
   full desktop nav (up to 29 category links on some sites) overflowed the
   header and forced the whole page into horizontal scroll. The switch happens
   at 1000px here, and every multi-column grid collapses with it. */

/* Nothing may push the page sideways. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, table, pre, canvas { max-width: 100%; }
img, video { height: auto; }
pre, code { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
h1, h2, h3, .section-title, .blog-card h3, .card h3 { overflow-wrap: break-word; hyphens: auto; }

/* Taboola injects fixed-width units on some templates; keep them in the column. */
[id^="taboola"], .trc_rbox_container { max-width: 100%; overflow: hidden; }

/* A grid or flex item defaults to min-width:auto, which means it refuses to
   shrink below the intrinsic width of its content. On a 390px screen the hero
   tiles were therefore ~520px wide and the headline ran off the right edge
   even though the grid had correctly collapsed to a single column. This is the
   actual cause of the horizontal overflow on every one of these templates. */
.hero-grid > *, .blog-grid > *, .la-top-row > *, .la-list > *,
.cat-spotlight-grid > *, .bottom-banner-grid > *, .footer-grid > *,
.featured-card > *, .content-with-sidebar > *, .contact-grid > * { min-width: 0; }

.hero-tile, .hero-tile-overlay, .card-body, .blog-card, .la-card { max-width: 100%; }
.hero-tile h1, .hero-tile h2, .hero-tile h3, .hero-tile-overlay h2, .hero-tile-overlay h3 {
  overflow-wrap: anywhere;
}

/* The masthead is a flex row of [logo] [nav] [toggle]. The logo must be
   allowed to shrink, or on a narrow screen it holds the row open and pushes
   the menu button off the edge — which left mobile visitors with no
   navigation at all once the desktop nav was hidden. */
.header-inner { gap: 12px; }
.site-logo { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.logo-text-group { min-width: 0; }
.menu-toggle { flex: 0 0 auto; margin-left: auto; }

/* The header has a fixed height, so a nav item that wraps to a second line
   spills out of it and lands on the page. Some of these sites carry two-word
   category labels ("Mental Health") in a nav of eight items, which wraps at
   anything under about 1250px. Keep every label on one line and tighten the
   row instead. */
.main-nav > a, .nav-dropdown > a { white-space: nowrap; }
.main-nav { min-width: 0; flex-wrap: nowrap; }

@media (min-width: 1001px) and (max-width: 1279px) {
  .main-nav { gap: 12px; }
  .main-nav > a, .nav-dropdown > a { font-size: .78rem; letter-spacing: 0; }
  .site-logo .logo-text-group > span.header-tagline { display: none !important; }
}

@media (max-width: 1000px) {
  .main-nav { display: none !important; }
  .menu-toggle { display: flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px; font-size: 1.5rem; background: none; border: 0;
    color: inherit; cursor: pointer; border-radius: 8px; }
  .menu-toggle:hover { background: #f3e3e7; }
  .content-with-sidebar { grid-template-columns: 1fr !important; }
  .sidebar { position: static !important; width: auto !important; }
}

/* The slide-down panel the toggle opens. The markup and the JS already exist on
   these templates; only the styling was missing outside the 768px block. */
.mobile-nav {
  display: none; position: fixed; left: 0; right: 0; top: var(--header-h, 72px);
  background: #ffffff; border-bottom: 1px solid rgba(34,22,25,0.12);
  box-shadow: 0 18px 40px rgba(34,22,25,0.16);
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
  max-height: calc(100vh - var(--header-h, 72px)); overflow-y: auto;
  -webkit-overflow-scrolling: touch; z-index: 999;
}
.mobile-nav.open { display: flex !important; flex-direction: column; gap: 2px; }
.mobile-nav a {
  display: block; padding: 13px 12px; border-radius: 10px;
  color: #221619; font-weight: 600; font-size: .98rem; text-decoration: none;
  min-height: 44px; line-height: 1.3;
}
.mobile-nav a:hover, .mobile-nav a:focus { background: #f3e3e7; color: #9f1239; }
body.nav-open { overflow: hidden; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr !important; grid-template-rows: auto !important; height: auto !important; }
  .hero-tile { min-height: 210px; border-radius: var(--radius-sm) !important; }
  .la-top-row, .la-list, .blog-grid, .cat-spotlight-grid, .bottom-banner-grid,
  .featured-card, .footer-grid, .footer-grid-new {
    grid-template-columns: 1fr !important;
  }
  .la-card { height: auto !important; min-height: 200px; }
  .featured-card .card-image { min-height: 190px; }
  .section { padding: 40px 0 !important; }
  .footer-links-bar { flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}

@media (max-width: 560px) {
  :root { --header-h: 60px; }
  .site-header { height: 60px; }
  .container { padding-left: 16px; padding-right: 16px; }
  /* The lockup is ~4:1, so cap its width too or it squeezes the menu button
     off a 390px screen. */
  .site-logo img { max-height: 32px; max-width: 58vw; }
  .site-logo .logo-text-group > span.header-tagline { display: none !important; }
  /* Shrink-and-ellipsis rather than wrap: a two-line brand name does not fit
     the 60px mobile header, and wrapping it crowds the menu button. Paired
     with min-width:0 on .site-logo above, this lets the name give way first. */
  .site-logo .logo-text-group > span:first-child {
    font-size: 1.02rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .section-title { font-size: clamp(1.25rem, 5.4vw, 1.6rem); }
  .hero h1, .article-header h1, .contact-hero h1, .page-hero h1 { font-size: clamp(1.55rem, 7vw, 2.1rem); line-height: 1.22; }
  .article-content { font-size: 1rem; }
  .article-content h2 { font-size: 1.25rem; }
  .blog-card h3, .card h3 { font-size: 1.02rem; }
  .pagination { flex-wrap: wrap; gap: 6px; }
  .scroll-top { width: 44px; height: 44px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .contact-cards, .contact-grid { grid-template-columns: 1fr !important; }
}

/* iOS zooms the page when a focused input is under 16px. */
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Touch targets. WCAG asks for 44px; the base sheets had ~28px nav links. */
@media (hover: none) {
  .footer-links-bar a, .pagination a, .category-nav a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Respect the OS setting — several base sheets animate the body background
   forever, which is costly on a phone and unpleasant if you asked it to stop. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  body::before { animation: none !important; }
}

/* Visible keyboard focus — none of the base sheets defined one. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #9f1239; outline-offset: 2px; border-radius: 3px;
}