/* simplymanu.com rebuild, 2026-10-16. Direction: rebuild_2026-10-16/DIRECTION.md.
   Two colour tokens, two faces, one radius, one curve. Every value below cites the
   direction note ("DIR <section>") or BRAND.md ("BRAND s<n>"). */

/* ---- Fonts (DIR "Type": local() first, then self-hosted OFL woff2, then Arial Black / Arial) */
@font-face {
  font-family: "Archivo Black";
  src: local("Archivo Black"), local("ArchivoBlack-Regular"),
       url("/wp-content/mu-plugins/manu-site/assets/fonts/ArchivoBlack-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: local("Inter Regular"), local("Inter-Regular"),
       url("/wp-content/mu-plugins/manu-site/assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---- Tokens (DIR "Tokens and rules", "Type scale", "Grid") */
:root {
  --black: #000000;
  --white: #ffffff;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);   /* Preymaker, the one curve */
  --t-ui: 0.3s;                             /* every interaction */
  --t-in: 1.2s;                             /* the single entrance */

  --display: "Archivo Black", "Arial Black", Arial, sans-serif;
  --text: "Inter", Arial, sans-serif;

  --giant: 288px;
  --h1: 96px;
  --h2: 64px;
  --row: 48px;      /* item-row titles, revision 2 */
  --h3: 36px;       /* dense lists (FAQ questions), revision 2 */
  --stmt: 40px;
  --small: 14px;

  --cols: 12;
  --g: 24px;
  --m: 40px;
  --hdr: 64px;
  --pad-y: 120px;
}
@media (max-width: 1023px) {
  :root {
    --giant: 128px; --h1: 52px; --h2: 32px; --row: 28px; --h3: 26px; --stmt: 24px;
    --cols: 4; --g: 16px; --pad-y: 72px;
  }
}
@media (max-width: 767px) {
  :root { --m: 16px; --hdr: 48px; }
}

/* Section schemes (DIR "Tokens": data-scheme maps --fg and --bg to the two tokens).
   Body is 17px per the type scale, raised to 18px on dark grounds, where the gate's
   18px light-on-dark floor applies. */
[data-scheme="dark"]  { --fg: var(--white); --bg: var(--black); --body: 18px; }
[data-scheme="light"] { --fg: var(--black); --bg: var(--white); --body: 17px; }
[data-scheme] { background-color: var(--bg); color: var(--fg); }

/* ---- Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  --fg: var(--white); --bg: var(--black); --body: 18px;
  background-color: var(--black); color: var(--white);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  font-family: var(--text);
  font-weight: 400;
  font-size: var(--body);
  line-height: 1.6;
  font-synthesis: none;
}
img { display: block; max-width: 100%; height: auto; border-radius: 0; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
::selection { background-color: var(--fg); color: var(--bg); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
:target, #main { scroll-margin-top: calc(var(--hdr) + 16px); }

/* ---- Type roles (DIR "Type scale") */
.giant, .h1, .h2, .h3, .row-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
}
.giant, .h1, .h2, .h3, .row-title, .pair__word, .wordmark, .site-footer__word {
  hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal;
}
.giant { font-size: var(--giant); line-height: 0.8; }
.h1 { font-size: var(--h1); line-height: 0.9; }
.h2 { font-size: var(--h2); line-height: 0.9; }
.row-title { font-size: var(--row); line-height: 0.95; }
.h3 { font-size: var(--h3); line-height: 1; }
.statement { font-size: var(--stmt); line-height: 1.15; }
.body, .body p { font-size: var(--body); line-height: 1.6; max-width: 34em; }
.small { font-size: var(--small); line-height: 1.4; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---- Grid (DIR "Grid": 12 columns, 24px gutter, 40px margin; 4 / 16 / 16 on the phone) */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--g);
  padding-inline: var(--m);
}
.grid > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1024px) {
  .grid > .c-left  { grid-column: 1 / 7; }
  .grid > .c-left5 { grid-column: 1 / 6; }
  .grid > .c-right { grid-column: 7 / -1; }   /* the hang line, DIR "Layout" (Preymaker) */
  .grid > .c-ten   { grid-column: 1 / 11; }
}
.section { padding-block: var(--pad-y); }
.stack > * + * { margin-top: 24px; }
.stack-lg > * + * { margin-top: 48px; }

/* ---- 1 Notice line (DIR inventory 1) */
.notice { padding: 8px var(--m); font-size: var(--small); line-height: 1.4; }

/* Skip link (WCAG 2.4.1) */
.skip {
  position: absolute; left: 8px; top: 8px; z-index: 100;
  padding: 8px 16px; background-color: var(--white); color: var(--black);
  font-size: var(--small); transform: translateX(-200%);
}
.skip:focus { transform: none; outline: 2px solid var(--white); outline-offset: 2px; }

/* ---- 2 Site header (DIR inventory 2: fixed bar, mix-blend-mode difference, white type) */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--hdr);
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--g);
  align-items: center;
  padding-inline: var(--m);
  color: var(--white);
  mix-blend-mode: difference;   /* Avec Anni: reads white on black, black on white */
  font-size: 17px; line-height: 1;
}
.site-header a { text-decoration: none; }
.wordmark {
  grid-column: 1 / 4;
  justify-self: start;
  font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: 0;
  text-transform: uppercase;
}
.nav-desk { grid-column: 7 / -1; position: relative; height: 100%; }
.nav-desk ul { display: flex; height: 100%; align-items: center; gap: 24px; }
.nav-desk li:last-child { margin-left: auto; }
.nav-desk a { display: inline-flex; align-items: center; height: 100%; padding-block: 8px; }
.nav-desk__ink {
  position: absolute; left: 0; bottom: 14px; height: 1px; width: 0;
  background-color: var(--white);
  transform: translateX(0);
  transition: transform var(--t-ui) var(--ease), width var(--t-ui) var(--ease);
  pointer-events: none;
}
html:not(.js) .nav-desk a[aria-current="page"] { text-decoration: underline 1px; text-underline-offset: 0.2em; }
.nav-phone { display: none; }
.menu-btn {
  font: inherit; color: inherit; background: none; border: 0; padding: 8px 0; cursor: pointer;
}
@media (max-width: 767px) {
  .site-header { grid-template-columns: auto 1fr; }
  .wordmark { grid-column: 1; font-size: 18px; }
  .nav-desk { display: none; }
  .nav-phone { display: flex; grid-column: 2; justify-content: flex-end; gap: 20px; align-items: center; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header { grid-template-columns: auto 1fr; }
  .wordmark { grid-column: 1; }
  .nav-desk { grid-column: 2; }
  .nav-desk ul { justify-content: flex-end; }
  .nav-desk li:last-child { margin-left: 0; }
}

/* ---- 3 Menu sheet (DIR inventory 3: The Romans nav-mobile dialog, clip-path wipe) */
.menu-sheet {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; border: 0; padding: 0 var(--m) 32px;
  background-color: var(--black); color: var(--white);
  --fg: var(--white); --bg: var(--black);
  clip-path: inset(0);
}
.menu-sheet[open] { display: flex; flex-direction: column; transition: clip-path var(--t-ui) var(--ease); }
@starting-style { .menu-sheet[open] { clip-path: inset(0 0 100%); } }
.menu-sheet::backdrop { background-color: transparent; }
.menu-sheet__bar { display: flex; justify-content: flex-end; align-items: center; height: var(--hdr); }
.menu-sheet__close { font: inherit; font-size: 17px; color: inherit; background: none; border: 0; padding: 8px 0; cursor: pointer; }
.menu-sheet ul { margin-top: 24px; }
.menu-sheet li + li { margin-top: 16px; }
.menu-sheet a { text-decoration: none; display: inline-block; }
.menu-sheet a:hover, .menu-sheet a[aria-current="page"] { text-decoration: underline 1px; text-underline-offset: 0.12em; }

/* ---- 4 Headline split-line reveal (DIR inventory 4: Preymaker data-animation="text",
   The Romans mask padding trick). JS builds .mask > .line; reduced motion skips it. */
.mask {
  display: block;
  overflow: clip;
  padding: 0.12em 0.2em 0.12em 0.12em;
  /* adjacent vertical margins collapse, so the bottom margin carries both paddings */
  margin: 0 -0.2em -0.24em -0.12em;
}
.mask:first-child { margin-top: -0.12em; }
.mask:last-child { margin-bottom: -0.12em; }
.line { display: block; white-space: nowrap; transform-origin: left bottom; }
@media (prefers-reduced-motion: no-preference) {
  .js .split:not(.split-done) { visibility: hidden; animation: split-failsafe 0s 2.5s forwards; }
  .js .split.split-ready .line { transform: translateY(125%) rotate(15deg); }
  .js .split.split-play .line {
    transform: none;
    transition: transform var(--t-in) var(--ease) calc(var(--i, 0) * 0.1s);
  }
  .js .split.split-static .line { transition: none; transform: none; }
}
@keyframes split-failsafe { to { visibility: visible; } }

/* ---- 6 Hero photograph (DIR inventory 6: cols 1-6 bleeding left, blur-to-sharp, Velour) */
.hero { position: relative; }
.hero--split .hero__grid { padding-block: 24px 0; row-gap: 0; }
.hero__text > * + * { margin-top: 24px; }
@media (min-width: 1024px) { .hero__text > * + * { margin-top: 32px; } }
.hero__photo { overflow: clip; margin-inline: calc(var(--m) * -1); margin-top: 48px; }
.hero__photo img { width: 100%; height: auto; }
@media (min-width: 1024px) {
  .hero--split .hero__grid {
    min-height: calc(100svh - var(--hdr) - 36px);
    padding-block: 0;
    align-items: center;
  }
  .hero--split .hero__text { grid-column: 7 / -1; grid-row: 1; padding-block: 64px; }
  .hero--split .hero__photo {
    grid-column: 1 / 7; grid-row: 1; align-self: stretch;
    margin: 0 0 0 calc(var(--m) * -1);
    position: relative;
  }
  .hero--split .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero--about .hero__photo { grid-column: 1 / 6; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .settle img { filter: blur(11px); scale: 1.08; }
  .js .settle img.is-in {
    filter: none; scale: 1;
    transition: filter var(--t-in) var(--ease), scale var(--t-in) var(--ease);
  }
}

/* ---- Home photograph scroll settle (orchestrator revision 1, Preymaker hero settle,
   ported). Component 5 (photo slice and pin) is retired. The photograph settles from
   scale(1.08) to scale(1) as it leaves the viewport, with no extra height and no spacer. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-settle img {
      animation: photo-settle linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}
@keyframes photo-settle {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* ---- 7 Action button (DIR inventory 7). The fill follows the Forever tile below. */
/* from forever-ai-components (MIT, (c) 2026 Mr.I): infinite/buttons/08-sliding-fill.html */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 32px;
  border: 1px solid var(--fg); border-radius: 0;
  background-color: var(--fg); color: var(--bg);
  font-family: var(--text); font-size: 17px; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: color var(--t-ui) var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-color: var(--bg);
  transform: translateX(-101%);
  transition: transform var(--t-ui) var(--ease);
}
.btn:hover, .btn:focus-visible { color: var(--fg); }
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

/* ---- 8 Variant pair (DIR inventory 8), revision 2: two filled Action buttons (component 7 fill),
   1px gap showing the black ground between them, black sliding fill on hover and focus */
/* from forever-ai-components (MIT, (c) 2026 Mr.I): infinite/buttons/08-sliding-fill.html */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.pair__cell {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  min-height: 88px; padding: 12px 20px;
  border: 1px solid var(--fg);
  background-color: var(--fg); color: var(--bg); text-decoration: none;
  transition: color var(--t-ui) var(--ease);
}
.pair__cell::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-color: var(--bg);
  transform: translateX(-101%);
  transition: transform var(--t-ui) var(--ease);
}
.pair__cell:hover, .pair__cell:focus-visible, .pair__cell.is-busy { color: var(--fg); }
.pair__cell:hover::before, .pair__cell:focus-visible::before, .pair__cell.is-busy::before { transform: translateX(0); }
.pair__cell:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; z-index: 1; }
.pair__word { font-family: var(--display); font-size: 32px; line-height: 0.9; text-transform: uppercase; }
.pair__act { font-family: var(--text); font-size: 17px; line-height: 1.2; }
.pair-status:empty { display: none; }
@media (max-width: 767px) {
  .pair { grid-template-columns: 1fr; }
  .pair__cell { min-height: 72px; padding: 10px 16px; }
}

/* ---- 9 Field row (DIR inventory 9: .ed-facts, Velour .section-kicker, the CoA table) */
.fields > li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--g);
  align-items: baseline;
  border-top: 1px solid var(--fg);
  padding-block: 12px;
}
.fields > li:last-child { border-bottom: 1px solid var(--fg); }
.field__label { font-size: var(--small); line-height: 1.4; }
.field__value { font-size: var(--body); line-height: 1.5; font-variant-numeric: tabular-nums; }
.fields--corner > li { grid-template-columns: auto auto; justify-content: space-between; }
.fields--corner .field__value { text-align: right; }
.field--single { display: block !important; }
@media (max-width: 767px) {
  .fields > li { grid-template-columns: 1fr; row-gap: 4px; }
  .fields--corner > li { grid-template-columns: auto auto; }
  .fields--inline > li { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

/* ---- 10 Item row (DIR inventory 10: Velour services grid, Grigoletti rows) */
.items > .item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.32fr);
  column-gap: var(--g); row-gap: 16px;
  border-top: 1px solid var(--fg);
  padding-block: 24px 40px;
}
.items > .item:last-child { border-bottom: 1px solid var(--fg); }
.item__title { grid-column: 1; }
.item__body { grid-column: 2; }
.item__body > * + * { margin-top: 12px; }
.item__plate { grid-column: 1; width: 50%; margin-top: 16px; }
@media (max-width: 1023px) {
  .items > .item { grid-template-columns: 1fr; }
  .item__title, .item__body, .item__plate { grid-column: 1; }
  .item__plate { width: auto; margin-inline: calc(var(--m) * -1); }
}
@media (min-width: 1024px) {
  .items > .item--faq { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .item--faq .item__title { grid-column: 1 / 8; }
  .item--faq .item__body { grid-column: 8 / -1; }
  .items--sticky > .item { position: sticky; background-color: var(--bg); }
  .items--sticky > .item:nth-child(1) { top: 112px; }
  .items--sticky > .item:nth-child(2) { top: 96px; }
  .items--sticky > .item:nth-child(3) { top: 80px; }
}

/* ---- 11 Statement (DIR inventory 11: Preymaker large-paragraph, first line one column in) */
.statement { text-indent: calc((100% + var(--g)) / var(--span, 10)); }
@media (max-width: 1023px) { .statement { --span: 4; } }

/* ---- 12 Photo plate (DIR inventory 12) and 13 Sticky photo column (DIR inventory 13) */
.plate img { width: 100%; height: auto; }
.plate-pair { row-gap: 24px; }
/* Final fix: at 1440 the portrait plate ran about 700px past its rows. Desktop crop only, the phone keeps the
   full portrait. Home section 2 at 4/3, Wholesale sticky column at 4/5. */
@media (min-width: 1024px) {
  .plate--crop-43 img, .plate--crop-45 img { width: 100%; height: auto; object-fit: cover; object-position: center; }
  .plate--crop-43 img { aspect-ratio: 4 / 3; }
  .plate--crop-45 img { aspect-ratio: 4 / 5; }
}
@media (min-width: 1024px) {
  .sticky-col { position: sticky; top: calc(var(--hdr) + 24px); align-self: start; }
}

/* ---- 14 Text link (DIR inventory 14) */
.tlink, .body a, .field__value a, .statement a {
  text-decoration: underline 1px;
  text-underline-offset: 0.2em;
}
.tlink:hover, .body a:hover, .field__value a:hover { text-decoration-thickness: 2px; }
.links { display: flex; flex-wrap: wrap; column-gap: 32px; row-gap: 12px; }

/* ---- 15 Footer (DIR inventory 15: one hairline row of six links, the mark built live) */
.site-footer { padding: 64px var(--m) 40px; container-type: inline-size; }
.site-footer__links {
  display: flex; flex-wrap: wrap; column-gap: 32px; row-gap: 8px;
  border-top: 1px solid var(--fg); padding-top: 16px;
  font-size: var(--small); line-height: 1.4;
}
.site-footer__links a { text-decoration: underline 1px; text-underline-offset: 0.2em; }
.site-footer__mark { margin-top: 96px; }
.site-footer__word {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: calc(100cqi / 3.42); line-height: 0.8; letter-spacing: 0;
  white-space: nowrap;
}
.site-footer__rule { border: 0; border-top: 1px solid var(--fg); color: var(--fg); height: 0; margin: 24px 0 16px; }
.site-footer__made { font-size: var(--body); line-height: 1.4; }
.site-footer__legal { margin-top: 48px; font-size: var(--small); line-height: 1.4; }

/* ---- Page specifics */
.lead { font-size: var(--body); }
.needs { white-space: normal; }

/* Layout helpers for single pages */
.section--flush-top { padding-top: 0; }
.align-end { align-self: end; }
.align-start { align-self: start; }
.fields--stack > li { grid-template-columns: 1fr; row-gap: 2px; }
.hero--faq { padding-block: 64px; }
.handoff { row-gap: 24px; }
.uop { row-gap: 32px; margin-bottom: 64px; align-items: end; }
@media (min-width: 1024px) {
  .hero--about .hero__photo { align-self: center; margin-block: 48px; }
  .hero--about .hero__photo img { position: static; height: auto; aspect-ratio: 1 / 1; }
}

/* One-step phone size reductions where a whole word is wider than the 358px column at 52px
   (orchestrator revision 1, item 4: no hyphenation, reduce instead) */
@media (max-width: 767px) {
  .page-wholesale .h1 { font-size: 44px; }      /* WHOLESALE is 361px at 52px */
  /* revision 1, item 8: action not fully visible at 390x664 with a 52px h1 */
  .page-product .h1, .page-where-to-buy .h1 { font-size: 44px; }
  .page-faqs .h1 { font-size: 44px; }   /* round 5: QUESTIONS is 389px at 52px */
  /* round 5: the longer Where to buy H1 put Directions at 737px on 390x664 */
  .page-where-to-buy .hero--split .hero__grid { padding-top: 8px; }
  .page-where-to-buy .hero__text > * + * { margin-top: 12px; }
}

/* Round 5: the shorter Wholesale H1 fits at 96px, the round 4 64px step is removed. */

/* ---- Reduced motion: every element renders its final frame (DIR "Reduced motion") */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .menu-sheet[open] { transition: none; }
}