/* ==========================================================================
   FAVORITE FACE STUDIO — shared design layer (all three homepage directions)
   Palette = the client's APPROVED Monochrome + Pop system (design brief p.4).
   Contrast rule (same as Living Waters): the brand hex is for graphics; the
   "-ink" variant is for text and buttons wherever WCAG AA must hold.
   ========================================================================== */
:root{
  /* brand — approved */
  --black:#0E0E0E;          /* Core Black */
  --ivory:#F6F4F0;          /* Warm Ivory — main canvas */
  --gray:#7A7A7A;           /* Editorial Gray — dividers, graphics only (3.9:1 on ivory) */
  --blue:#2F8FDE;           /* Electric Blue — graphics, doodles, focus ring */
  --orange:#F4A62A;         /* Statement Orange — accents, never under white text */
  /* derived — text-safe */
  --white:#FFFFFF;
  --paper:#FBFAF7;          /* raised surfaces on ivory */
  --ivory-2:#ECE8E1;        /* sunken panels */
  --gray-ink:#5C5C5C;       /* secondary copy on ivory 6.1:1 */
  --gray-on-black:#A3A3A3;  /* secondary copy on black 7.7:1 */
  --blue-ink:#1D72C2;       /* CTA fill under white text 4.95:1 / links on ivory 4.5:1 (brand blue under white = 3.4:1, fails) */
  --blue-hi:#5AAAF0;        /* links on black 7.8:1 */
  --line:rgba(14,14,14,.12);
  --line-on-black:rgba(246,244,240,.16);

  --font-display:"Inter Tight","Helvetica Now Display","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-hand:"Permanent Marker","Marker Felt",cursive; /* artwork only — never UI or body */

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --gutter:clamp(16px,4vw,56px);
  --max:1440px;
  --r-sm:10px; --r:18px; --r-lg:28px; --pill:999px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--black);font-family:var(--font-body);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:.95}
p{margin:0}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:999;background:var(--black);color:var(--ivory);padding:10px 16px;border-radius:var(--pill);text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ---------- eyebrow / labels ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue)}
.eyebrow.is-orange::before{background:var(--orange)}
.eyebrow.no-dot::before{display:none}

/* ---------- buttons (brief: blue pill primary, black/outlined secondary) ---------- */
.btn{--bg:var(--blue-ink);--fg:#fff;--bd:var(--blue-ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;
  border-radius:var(--pill);border:1.5px solid var(--bd);background:var(--bg);color:var(--fg);
  font:700 14px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:transform .5s var(--ease),background-color .25s,color .25s,border-color .25s,box-shadow .5s var(--ease);will-change:transform}
.btn:hover{--bg:var(--black);--bd:var(--black);box-shadow:0 14px 30px -14px rgba(14,14,14,.55)}
.btn .arr{width:18px;height:18px;transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn--ghost{--bg:transparent;--fg:var(--black);--bd:var(--black)}
.btn--ghost:hover{--bg:var(--black);--fg:var(--ivory)}
.btn--light{--bg:var(--ivory);--fg:var(--black);--bd:var(--ivory)}
.btn--light:hover{--bg:var(--blue-ink);--fg:#fff;--bd:var(--blue-ink)}
.btn--ghost-light{--bg:transparent;--fg:var(--ivory);--bd:rgba(246,244,240,.6)}
.btn--ghost-light:hover{--bg:var(--ivory);--fg:var(--black);--bd:var(--ivory)}
.btn--sm{min-height:44px;padding:0 20px;font-size:12px}

.link-u{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .5s var(--ease)}
.link-u:hover{background-size:100% 1.5px}

/* ---------- logo (INTERIM wordmark built from the brief's logo system — final vector logo still to be produced) ---------- */
.ffs-logo{display:inline-flex;flex-direction:column;align-items:flex-start;text-decoration:none;color:inherit;line-height:.82;position:relative}
.ffs-logo .w{font:900 22px/0.84 var(--font-display);letter-spacing:-.045em;text-transform:uppercase;display:flex;align-items:flex-end;gap:4px}
.ffs-logo .crown{width:22px;height:18px;color:var(--blue);margin-bottom:3px}
.ffs-logo .s{font:600 7.5px/1 var(--font-body);letter-spacing:.62em;margin-top:5px;padding-left:2px;text-transform:uppercase}
.ffs-logo--lg .w{font-size:clamp(56px,12vw,190px)}
.ffs-logo--lg .crown{width:clamp(48px,9vw,150px);height:auto}
.ffs-logo--lg .s{font-size:clamp(11px,1.6vw,22px);margin-top:clamp(8px,1.2vw,18px)}

/* ---------- doodles (hand-drawn crowns, stars, smileys, scribbles — use sparingly) ---------- */
.doodle{position:absolute;pointer-events:none;color:var(--blue);overflow:visible}
.doodle path,.doodle circle{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.doodle.thin path{stroke-width:3}
.doodle.is-orange{color:var(--orange)}
.doodle.is-black{color:var(--black)}
.doodle.is-ivory{color:var(--ivory)}
/* self-drawing — JS sets pathLength=1 on every path */
.draw path,.draw circle{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease-io)}
.draw.is-in path,.draw.is-in circle{stroke-dashoffset:0}
.draw.is-in path:nth-child(2){transition-delay:.25s}
.draw.is-in path:nth-child(3){transition-delay:.4s}
.draw.is-in path:nth-child(4){transition-delay:.55s}

/* ---------- placeholder system (inherited from Living Waters: unknown facts stay visibly unknown) ---------- */
.ph{display:inline;font:500 .82em/1.4 ui-monospace,"SFMono-Regular",Consolas,monospace;letter-spacing:0;color:#8A5A00;
  background:repeating-linear-gradient(-45deg,rgba(244,166,42,.18) 0 6px,rgba(244,166,42,.08) 6px 12px);
  border:1px dashed rgba(196,124,0,.7);border-radius:6px;padding:.1em .45em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.on-dark .ph{color:#FFD08A;border-color:rgba(244,166,42,.7)}
.ph.ph--light{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.12)}
.ph-block{display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;
  background:repeating-linear-gradient(-45deg,rgba(14,14,14,.035) 0 10px,transparent 10px 20px),var(--ivory-2);
  border:1.5px dashed rgba(14,14,14,.25);color:var(--gray-ink);font:500 12px/1.45 ui-monospace,Consolas,monospace}
.on-dark .ph-block{background:repeating-linear-gradient(-45deg,rgba(246,244,240,.05) 0 10px,transparent 10px 20px),#1a1a1a;border-color:rgba(246,244,240,.25);color:var(--gray-on-black)}

/* ---------- garment composite: model photo + live portrait print ---------- */
/* .ffs-frame crops like object-fit:cover (focal point --fx/--fy) while the print stays locked to the chest */
.ffs-frame{position:relative;overflow:hidden;container-type:size;background:var(--ivory-2)}
.ffs-frame>.ffs-wear{position:absolute;left:var(--fx,50%);top:var(--fy,50%);translate:calc(var(--fx,50%)*-1) calc(var(--fy,50%)*-1);
  aspect-ratio:var(--ar);width:calc(max(100cqw,calc(100cqh*var(--ar)))*var(--z,1));height:auto}
.ffs-wear{position:relative;aspect-ratio:var(--ar);margin:0}
.ffs-wear>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ffs-wear>.ffs-print{position:absolute;left:var(--px);top:var(--py);width:var(--pw);rotate:var(--pr,0deg)}
.ffs-print{aspect-ratio:300/360;mix-blend-mode:multiply;opacity:.94}
.ffs-print svg{width:100%;height:100%;overflow:visible}
.ffs-print[data-ink="light"]{mix-blend-mode:screen;opacity:.92}
.ffs-print.flat{mix-blend-mode:normal;opacity:1}
.ffs-print.is-fresh{animation:printIn .7s var(--ease)}
@keyframes printIn{from{opacity:0;filter:blur(6px)}}

/* ---------- reveal choreography (animation gate: content is visible unless JS stamps .js) ---------- */
.js [data-rv]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.js [data-rv="clip"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease)}
.js [data-rv="scale"]{transform:scale(.94)}
.js [data-rv="left"]{transform:translateX(-36px)}
.js [data-rv].is-in{opacity:1;transform:none;clip-path:inset(-40% -10% -10% -10%)}
.split .ln{display:block}
.js .split .ln{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.js .split .ln>span{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.js .split.is-in .ln>span{transform:none}
.js .split.is-done .ln{overflow:visible}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;white-space:nowrap;display:flex;user-select:none}
.marquee__track{display:flex;flex:none;align-items:center;gap:40px;padding-right:40px;animation:marq var(--dur,38s) linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-100%)}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-rv],.js .split .ln>span{opacity:1!important;transform:none!important;clip-path:none!important}
  .marquee__track{animation:none}
}

/* ---------- real print files on garments (client artwork, transparent WebP) ---------- */
.ffs-wear>.ffs-art{position:absolute;left:var(--px);top:var(--py);width:var(--pw);height:auto;rotate:var(--pr,0deg);mix-blend-mode:screen;opacity:.97;pointer-events:none}
.ffs-wear>.ffs-art.on-white{mix-blend-mode:multiply;opacity:.95}
/* a white-tee product photo "dyed" black for black-tee designs (hanger/flat shots only — never on skin) */
.ffs-wear.is-dyed>img:first-child{filter:grayscale(1) brightness(.2) contrast(1.25)}
/* client images referenced by class (build embeds each one once per page) */
.ffs-wear>div.ffs-art{background-size:100% 100%;background-repeat:no-repeat}
.webimg{background-size:cover;background-repeat:no-repeat;background-position:var(--fx,50%) var(--fy,28%)}
.ffs-frame>.webimg{position:absolute;inset:0}
/* studio product shots (white backdrop): multiply the backdrop into the same soft wall grey as the hanger photos */
.ffs-frame:has(>.ffs-wear.is-studio),.ffs-wear.is-studio{background:#DCDBD8}
.ffs-wear.is-studio>img:first-child{mix-blend-mode:multiply}