/*
Theme Name: Floulex
Theme URI: https://floulexweb.com
Author: Howard Kessa
Description: The site that sells the work. A warm near-black ground with one inverted paper panel carrying the offer, because the money is the thing that should be read on paper. Type-led, because there is no client portfolio to lean on yet and pretending otherwise is worse than admitting it.
Version: 3.0.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: floulex
*/

/* ─────────────────────────────────────────────────────────────────────────
   FOUR THINGS DELIBERATELY ABSENT, and they must stay absent.

   The previous version scrolled smoothly in Safari and juddered in Chrome.
   Four separate compositor costs were stacking:

     mix-blend-mode over a full viewport   promoted the whole page to a layer
     backdrop-filter on the fixed bar      re-read the backdrop every frame
     a canvas on requestAnimationFrame     ran forever, on every page
     infinite CSS animations               never let the compositor idle

   None of them are in this file. Grep before adding one.
   ───────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --fx-ground: var(--wp--preset--color--ground);
  --fx-raised: var(--wp--preset--color--raised);
  --fx-ink: var(--wp--preset--color--ink);
  --fx-muted: var(--wp--preset--color--muted);
  --fx-accent: var(--wp--preset--color--accent);
  --fx-line: var(--wp--preset--color--line);
  --fx-paper: var(--wp--preset--color--paper);
  --fx-paper-ink: var(--wp--preset--color--paper-ink);
  --fx-paper-muted: var(--wp--preset--color--paper-muted);
  --fx-paper-line: var(--wp--preset--color--paper-line);
  --fx-accent-deep: var(--wp--preset--color--accent-deep);
}

body { background: var(--fx-ground); color: var(--fx-ink); }
/* Nothing on this site is allowed to widen the document. A single overflowing
   child used to clip the body text of every section, which is invisible on a
   desktop and ruins the page on a phone. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Optical sizing is why this face is worth 50 KB: the same file draws a 12px
   label and a 78px headline with different letterforms, not one scaled twice. */
h1, h2, h3, .fx-display { font-optical-sizing: auto; text-wrap: balance; }

.fx-wrap { max-width: 1200px; margin: 0 auto; }

.fx-skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--fx-accent); color: #0f0e0d; padding: 0.7rem 1.1rem;
  font-weight: 700; text-decoration: none;
}
.fx-skip:focus { left: 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--fx-accent); outline-offset: 3px;
}

/* ───────────────────────────────────────────────────────────────── header */

.fx-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--fx-ground);
  border-bottom: 1px solid var(--fx-line);
  padding: 0 clamp(1.25rem, 5vw, 4rem);
}
.fx-bar {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 4.4rem;
}
.fx-mark {
  display: inline-flex; align-items: center; gap: 0.62rem;
  text-decoration: none; color: var(--fx-ink);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800; font-size: 1.15rem; letter-spacing: -0.028em;
}
.fx-mark i {
  width: 0.72rem; height: 0.72rem; background: var(--fx-accent);
  border-radius: 50%; flex: none;
}
.fx-nav { display: flex; align-items: center; gap: 0.35rem 1.55rem; flex-wrap: wrap; }
.fx-nav a {
  text-decoration: none; color: var(--fx-muted);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.004em;
}
.fx-nav a:hover { color: var(--fx-ink); }
.fx-nav a[aria-current="page"] { color: var(--fx-ink); }
.fx-nav .fx-cta {
  background: var(--fx-accent); color: #0f0e0d; font-weight: 700;
  padding: 0.6rem 1.05rem; border-radius: 2px;
}
.fx-nav .fx-cta:hover { background: var(--fx-ink); color: #0f0e0d; }
@media (max-width: 640px) {
  /* align-items must stay stretch. With flex-start the nav sizes to its own
     max-content, never wraps, and widens the whole document past the viewport,
     which clips every line of body text on the page and not just the header. */
  .fx-bar { min-height: 0; padding: 0.85rem 0 0.95rem; flex-direction: column; align-items: stretch; }
  .fx-nav { width: 100%; gap: 0.45rem 1.1rem; font-size: 0.9rem; }
  .fx-nav .fx-cta { padding: 0.5rem 0.9rem; }
}

/* ───────────────────────────────────────────────────────────────── shared */

.fx-sec { padding: clamp(3.6rem, 8vw, 7rem) clamp(1.25rem, 5vw, 4rem); }
.fx-sec-tight { padding-top: clamp(2rem, 4vw, 3rem); }

.fx-eyebrow {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--fx-accent); margin: 0 0 1rem;
}
.fx-lede {
  font-size: clamp(1.0625rem, 1.45vw, 1.25rem); line-height: 1.6;
  color: var(--fx-muted); max-width: 40rem; margin: 1.2rem 0 0;
}
.fx-lede strong { color: var(--fx-ink); font-weight: 600; }

.fx-btn {
  display: inline-block; background: var(--fx-accent); color: #0f0e0d;
  text-decoration: none; font-weight: 700; font-size: 1rem;
  padding: 1rem 1.7rem; border-radius: 2px; letter-spacing: -0.004em;
}
.fx-btn:hover { background: var(--fx-ink); color: #0f0e0d; }
.fx-btn-ghost {
  display: inline-block; color: var(--fx-ink); text-decoration: none;
  font-weight: 600; font-size: 1rem; padding: 1rem 1.5rem;
  border: 1px solid var(--fx-line); border-radius: 2px;
}
.fx-btn-ghost:hover { border-color: var(--fx-ink); }
.fx-acts { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

/* ─────────────────────────────────────────────────────────────────── hero */

.fx-hero { padding: clamp(3.2rem, 7vw, 6.5rem) clamp(1.25rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.fx-hero-in { max-width: 1200px; margin: 0 auto; }

/* A live count, not a sentence typed into a page. It comes from an option, so
   it cannot still say two spots in November. */
.fx-spots {
  display: inline-flex; align-items: center; gap: 0.6rem;
  border: 1px solid var(--fx-line); border-radius: 100px;
  padding: 0.42rem 0.95rem 0.42rem 0.6rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--fx-muted); margin-bottom: 1.7rem;
}
.fx-spots b { color: var(--fx-ink); font-weight: 700; }
.fx-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--fx-accent); flex: none;
}

.fx-hero h1 { margin: 0; max-width: 15ch; }
.fx-hero h1 em {
  font-style: normal; color: var(--fx-accent);
}
.fx-hero .fx-lede { max-width: 36rem; margin-top: 1.6rem; }

.fx-hero-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2.2rem;
  margin-top: 2.6rem; padding-top: 1.5rem;
  border-top: 1px solid var(--fx-line);
  font-size: 0.9375rem; color: var(--fx-muted);
}
.fx-hero-meta b { color: var(--fx-ink); font-weight: 600; }

/* ────────────────────────────────────────────────────────── paper section */

/* The one inversion on the site, and it is not decoration. Everything that
   commits either of us to something (the offer, the prices, the terms) is set
   on paper. Everything else is on the dark. */

.fx-paper-sec {
  background: var(--fx-paper); color: var(--fx-paper-ink);
  padding: clamp(3.2rem, 7vw, 6rem) clamp(1.25rem, 5vw, 4rem);
}
.fx-paper-sec .fx-eyebrow { color: var(--fx-accent-deep); }
.fx-paper-sec .fx-lede { color: var(--fx-paper-muted); }
.fx-paper-sec .fx-lede strong { color: var(--fx-paper-ink); }
.fx-paper-sec a { color: var(--fx-accent-deep); }
.fx-paper-sec a:hover { color: var(--fx-paper-ink); }
.fx-paper-sec .fx-btn { background: var(--fx-accent-deep); color: var(--fx-paper); }
.fx-paper-sec .fx-btn:hover { background: var(--fx-paper-ink); color: var(--fx-paper); }
.fx-paper-sec .fx-btn-ghost { color: var(--fx-paper-ink); border-color: var(--fx-paper-line); }
.fx-paper-sec .fx-btn-ghost:hover { border-color: var(--fx-paper-ink); }

.fx-offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 880px) { .fx-offer { grid-template-columns: 1fr; } }

.fx-price-big {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800; font-size: clamp(4.4rem, 12vw, 8rem); line-height: 0.86;
  letter-spacing: -0.045em; margin: 0.4rem 0 0;
  color: var(--fx-accent-deep);
}
.fx-price-was {
  font-size: 1.0625rem; color: var(--fx-paper-muted);
  margin: 0.9rem 0 0;
}
.fx-price-was s { text-decoration-thickness: 1px; }

/* Scoped to > li so a nested list inside an item cannot inherit the marker. */
.fx-ticks { margin: 0; padding: 0; list-style: none; }
.fx-ticks > li {
  position: relative; padding: 0 0 0 1.75rem; margin: 0 0 0.85rem;
  font-size: 1rem; line-height: 1.55;
}
.fx-ticks > li::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 0.72rem; height: 0.72rem; border-radius: 50%;
  background: var(--fx-accent-deep);
}
.fx-ticks > li b { font-weight: 700; }

.fx-callout {
  border-left: 3px solid var(--fx-accent-deep);
  padding: 0.1rem 0 0.1rem 1.15rem; margin: 2rem 0 0;
  font-size: 0.9688rem; line-height: 1.62; color: var(--fx-paper-muted);
}
.fx-callout strong { color: var(--fx-paper-ink); font-weight: 700; }

/* ────────────────────────────────────────────────────────────── the offer */

.fx-deliver {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--fx-line);
  border: 1px solid var(--fx-line); margin-top: 3rem;
}
@media (max-width: 1000px) { .fx-deliver { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .fx-deliver { grid-template-columns: 1fr; } }
.fx-deliver > div { background: var(--fx-ground); padding: 1.7rem 1.6rem 1.9rem; }
.fx-deliver h3 { margin: 0 0 0.55rem; }
.fx-deliver p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--fx-muted); }
.fx-deliver .fx-num {
  display: block; font-family: var(--wp--preset--font-family--display);
  font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.02em;
  color: var(--fx-accent); margin-bottom: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────── process */

/* Numbered because it genuinely is a sequence with days attached, not because
   numbers look tidy. The day column is the information. */

.fx-steps { margin-top: 3rem; border-top: 1px solid var(--fx-line); }
.fx-step {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 9rem;
  gap: 1.5rem; padding: 1.9rem 0;
  border-bottom: 1px solid var(--fx-line);
  align-items: baseline;
}
.fx-step > .fx-step-n {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800; font-size: 1.6rem; line-height: 1;
  color: var(--fx-accent); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.fx-step h3 { margin: 0 0 0.5rem; }
.fx-step p { margin: 0; font-size: 0.9688rem; line-height: 1.62; color: var(--fx-muted); max-width: 38rem; }
.fx-step > .fx-step-when {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fx-muted); text-align: right;
}
@media (max-width: 780px) {
  .fx-step { grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; }
  .fx-step > .fx-step-when { grid-column: 2; text-align: left; margin-top: 0.7rem; }
}

/* ───────────────────────────────────────────────────────────────── tables */

.fx-table-scroll { overflow-x: auto; margin-top: 2.6rem; }
.fx-table { width: 100%; border-collapse: collapse; font-size: 0.9688rem; min-width: 34rem; }
.fx-table th, .fx-table td {
  text-align: left; padding: 1rem 1.1rem; vertical-align: top;
  border-bottom: 1px solid var(--fx-line);
}
.fx-table thead th {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fx-muted);
  border-bottom: 1px solid var(--fx-ink);
}
.fx-table thead th:nth-child(2) { color: var(--fx-accent); }
.fx-table tbody th { font-weight: 600; color: var(--fx-ink); width: 12rem; }
.fx-table td { color: var(--fx-muted); }
.fx-table td:first-of-type { color: var(--fx-ink); }
.fx-table tbody tr:last-child th, .fx-table tbody tr:last-child td { border-bottom: 0; }

/* ───────────────────────────────────────────────────────────────── ladder */

/* Three prices that are genuinely a ladder in time: what is running now, what
   it becomes, and what it costs when neither applies. */

.fx-ladder {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--fx-paper-line);
  border: 1px solid var(--fx-paper-line); margin-top: 2.8rem;
}
@media (max-width: 820px) { .fx-ladder { grid-template-columns: 1fr; } }
.fx-rung { background: var(--fx-paper); padding: 1.8rem 1.6rem 2rem; }
.fx-rung.is-now { background: var(--fx-paper-ink); color: var(--fx-paper); }
.fx-rung.is-now .fx-rung-when { color: var(--fx-accent); }
.fx-rung.is-now .fx-rung-note { color: #b3aca1; }
.fx-rung.is-now .fx-rung-price { color: var(--fx-paper); }
.fx-rung-when {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--fx-accent-deep); margin: 0 0 1rem;
}
.fx-rung-price {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800; font-size: clamp(2.2rem, 4vw, 2.9rem); line-height: 1;
  letter-spacing: -0.035em; margin: 0; color: var(--fx-paper-ink);
}
.fx-rung-price small {
  display: inline; font-family: var(--wp--preset--font-family--body);
  font-weight: 500; font-size: 0.9375rem; letter-spacing: 0;
}
.fx-rung-note { margin: 0.9rem 0 0; font-size: 0.9375rem; line-height: 1.58; color: var(--fx-paper-muted); }

/* ──────────────────────────────────────────────────────────────────── faq */

.fx-faq { margin-top: 2.8rem; border-top: 1px solid var(--fx-line); max-width: 46rem; }
.fx-faq > details { border-bottom: 1px solid var(--fx-line); }
.fx-faq > details > summary {
  cursor: pointer; list-style: none; padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700; font-size: 1.125rem; letter-spacing: -0.018em;
  color: var(--fx-ink);
}
.fx-faq > details > summary::-webkit-details-marker { display: none; }
.fx-faq > details > summary::after {
  content: "+"; position: absolute; right: 0.2rem; top: 1.15rem;
  font-size: 1.4rem; font-weight: 400; line-height: 1; color: var(--fx-accent);
}
.fx-faq > details[open] > summary::after { content: "\2013"; }
.fx-faq > details > div { padding: 0 0 1.5rem; }
.fx-faq p { margin: 0 0 0.9rem; font-size: 1rem; line-height: 1.68; color: var(--fx-muted); max-width: 42rem; }
.fx-faq p:last-child { margin-bottom: 0; }
.fx-faq strong { color: var(--fx-ink); font-weight: 600; }

/* ──────────────────────────────────────────────────────────────── contact */

.fx-contact {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--fx-line);
  border: 1px solid var(--fx-line); margin-top: 2.8rem;
}
@media (max-width: 620px) { .fx-contact { grid-template-columns: 1fr; } }
.fx-contact > a, .fx-contact > div {
  background: var(--fx-ground); padding: 1.5rem 1.6rem 1.7rem;
  text-decoration: none; display: block;
}
.fx-contact > a:hover { background: var(--fx-raised); }
.fx-contact small {
  display: block; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--fx-muted); margin-bottom: 0.6rem;
}
.fx-contact b {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em;
  color: var(--fx-ink); display: block;
}

/* ───────────────────────────────────────────────────────────────── footer */

.fx-foot {
  border-top: 1px solid var(--fx-line);
  padding: clamp(2.8rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4rem) 2.6rem;
}
.fx-foot-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem;
}
@media (max-width: 760px) { .fx-foot-grid { grid-template-columns: 1fr 1fr; } .fx-foot-grid > :first-child { grid-column: 1 / -1; } }
.fx-foot h5 {
  margin: 0 0 0.9rem; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--fx-muted);
}
.fx-foot ul { margin: 0; padding: 0; list-style: none; }
.fx-foot li { margin-bottom: 0.55rem; }
.fx-foot a { color: var(--fx-ink); text-decoration: none; font-size: 0.9375rem; }
.fx-foot a:hover { color: var(--fx-accent); }
.fx-legal-links { margin: 2.8rem 0 0; font-size: 0.875rem; color: var(--fx-muted); }
.fx-legal-links a { color: var(--fx-muted); text-decoration: none; }
.fx-legal-links a:hover { color: var(--fx-ink); }
.fx-legal {
  margin: 0.9rem 0 0; font-size: 0.8125rem; line-height: 1.6;
  color: var(--fx-muted); max-width: 52rem;
}

/* ──────────────────────────────────────────────────────────── page bodies */

.fx-body { padding: clamp(2.6rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4rem) 5rem; }
.fx-body h2 { margin-top: 2.8rem; }
.fx-body h3 { margin-top: 2rem; }
.fx-body > .fx-wrap > * { max-width: 42rem; }
.fx-body > .fx-wrap > .fx-table-scroll,
.fx-body > .fx-wrap > .fx-ladder,
.fx-body > .fx-wrap > .fx-steps,
.fx-body > .fx-wrap > .fx-contact,
.fx-body > .fx-wrap > .fx-deliver { max-width: none; }

/* ───────────────────────────────────────────────────────────────── motion */

/* One transition, driven by a single IntersectionObserver that disconnects
   itself once everything has fired. Nothing runs on a frame loop. */
.fx-in { opacity: 0; transform: translateY(10px); }
.fx-in.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .fx-in, .fx-in.is-in { opacity: 1; transform: none; transition: none; }
  .fx-head { position: static; }
}