/* ═══════════════════════════════════════════════════════════════════════════
   YBS HEIRLOOM — You+ Baby Studio design language (v2)
   "Raw film, warm ivory, dusty blue — the quiet of good paper."

   A committed letterpress-stationery world: a warm ivory card floating on a
   soft dark desk, embossed wordmark, black-and-white film photography, a real
   pen signature, arabesque detailing for our Gulf clients. Minimal. Tactile.

   USE:  <link rel="stylesheet" href="css/brand.css">
   Reach for the var(--ybs-*) tokens and the .ybs-* components below.
   Everything derives from here — welcome, cabinet, voucher, forms, emails.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Real faces. Display = Cormorant Garamond (high-contrast editorial serif, the
   fine-stationery voice). UI = Jost (quiet geometric sans). Signature = Mr De
   Haviland (a true fountain-pen hand — the founder signs "Leanca" in this).
   Note = Caveat. Arabic display = Reem Kufi (modern luxe kufi), body = Amiri. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Domine:wght@500;600;700&family=Jost:wght@300;400;500;600&family=Mr+De+Haviland&family=Caveat:wght@400;600;700&family=Reem+Kufi:wght@400;500;600;700&family=Amiri:ital@0;1&display=swap');

:root{
  /* ── Papers — warm ivory stock (the card) ── */
  --ybs-paper:#F6F1E7;   --ybs-paper-hi:#FDFBF4; --ybs-paper-lo:#EBE2D0; --ybs-edge:#DFD4BE;
  --ybs-bone:#F4EFE4;    --ybs-oat:#ECE4D2;      --ybs-linen:#E1D8C6;

  /* ── The desk — soft dark ground the card floats on ── */
  --ybs-desk-1:#1E1A15;  --ybs-desk-2:#332C25;   --ybs-desk-3:#423931;

  /* ── Ink — warm, from soft to near-black for contrast ── */
  --ybs-ink:#332B22;     --ybs-ink-warm:#51453A; --ybs-ink-soft:#7C6E5B; --ybs-ink-faint:#B4A88F;

  /* ── Dusty blue — the tender signature (the voucher's blue) ── */
  --ybs-baby-soft:#C2D2DB; --ybs-baby:#8AA2B4;  --ybs-baby-deep:#5F7789;

  /* ── Bold accents — one at a time (pen, seals, grounds) ── */
  --ybs-pen:#2C4A73;      /* fountain-pen ink — signatures, links */
  --ybs-oxblood:#7C2B23;  /* postage / wax seals                  */
  --ybs-forest:#33463A;   /* botanical / deep ground              */
  --ybs-gold:#B08D57;     /* leaf line, sparingly                 */

  /* ── Semantic ── */
  --ybs-bg:var(--ybs-desk-1);
  --ybs-accent:var(--ybs-baby-deep);

  /* ── Type ── */
  --ybs-serif:"Cormorant Garamond","Hoefler Text","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --ybs-logo-font:"Domine","Bookman Old Style","URW Bookman L",Bookman,Georgia,"Times New Roman",serif; /* the wordmark — bold book serif */
  --ybs-sans:"Jost",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ybs-script:"Mr De Haviland","Snell Roundhand","Segoe Script",cursive;  /* pen signature */
  --ybs-hand:"Caveat","Bradley Hand","Segoe Script",cursive;              /* casual note   */
  --ybs-ar:"Reem Kufi","Amiri","Noto Naskh Arabic","Geeza Pro",serif;     /* Arabic display */
  --ybs-ar-body:"Amiri","Noto Naskh Arabic","Geeza Pro",serif;            /* Arabic body    */

  /* fluid type scale */
  --ybs-fs-mega:clamp(44px,11vw,88px);
  --ybs-fs-h1:clamp(32px,7.5vw,58px);
  --ybs-fs-h2:clamp(24px,5vw,36px);
  --ybs-fs-lead:clamp(16px,3.6vw,21px);
  --ybs-fs-body:15.5px;
  --ybs-fs-label:11.5px;

  /* ── Space, radius, shadow, motion ── */
  --ybs-r:10px; --ybs-r-sm:5px; --ybs-r-lg:16px;
  --ybs-shadow:0 30px 60px -22px rgba(0,0,0,.6), 0 8px 20px -12px rgba(0,0,0,.4);
  --ybs-shadow-sm:0 12px 28px -16px rgba(30,22,14,.5);
  --ybs-emboss-hi:rgba(255,255,255,.85); --ybs-emboss-lo:rgba(78,64,48,.34);
  --ybs-ease:cubic-bezier(.19,1,.22,1);

  /* 350gsm linen grain (subtle, tileable) */
  --ybs-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.02' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)' opacity='0.5'/></svg>");

  /* Arabesque — an 8-point khatam star grid, drawn in ink line (for our Gulf work) */
  --ybs-arabesque:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='none' stroke='%2351453A' stroke-width='0.9'><rect x='10' y='10' width='40' height='40'/><rect x='10' y='10' width='40' height='40' transform='rotate(45 30 30)'/><circle cx='30' cy='30' r='7'/></g></svg>");
}

/* ── Grounds ─────────────────────────────────────────────────────────────── */
/* The desk — a soft dark radial with film grain + vignette. The default world. */
.ybs-bg{ position:relative; color:var(--ybs-bone);
  background:radial-gradient(120% 90% at 50% 6%, var(--ybs-desk-3) 0%, var(--ybs-desk-2) 40%, var(--ybs-desk-1) 100%); }
.ybs-bg::before{ content:""; position:fixed; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.ybs-bg::after{ content:""; position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%, transparent 54%, rgba(0,0,0,.42) 100%); }
.ybs-bg--light{ background:radial-gradient(120% 90% at 50% -6%, var(--ybs-paper-hi), var(--ybs-bone) 60%, var(--ybs-oat)); color:var(--ybs-ink); }
.ybs-bg--forest{ background:var(--ybs-forest); color:var(--ybs-bone); }

/* Paper panel — ivory card stock with 350gsm grain, the letterpress surface */
.ybs-paper{ position:relative; color:var(--ybs-ink);
  background:linear-gradient(180deg,var(--ybs-paper-hi),var(--ybs-paper) 26%,var(--ybs-paper) 74%,var(--ybs-paper-lo));
  border-radius:var(--ybs-r); box-shadow:0 0 0 1px var(--ybs-edge) inset, var(--ybs-shadow); overflow:hidden; }
.ybs-paper::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background-image:var(--ybs-grain); opacity:.06; mix-blend-mode:multiply; }

/* Deckle / torn edge — apply to a .ybs-paper; needs the #ybsDeckle SVG filter in the page */
.ybs-deckle{ filter:url(#ybsDeckle); border-radius:2px; }

/* Arabesque wash — subtle geometric tile; layer under content for Gulf pieces */
.ybs-arabesque{ position:relative; }
.ybs-arabesque::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background-image:var(--ybs-arabesque); background-size:52px 52px; opacity:.05; }

/* ── Type ────────────────────────────────────────────────────────────────── */
.ybs-display{ font-family:var(--ybs-serif); font-weight:500; line-height:1.02; letter-spacing:.005em; text-wrap:balance; }
.ybs-display em, .ybs-italic{ font-style:italic; }
.ybs-lead{ font-family:var(--ybs-serif); font-style:italic; font-weight:400; font-size:var(--ybs-fs-lead); color:var(--ybs-ink-warm); line-height:1.5; }
.ybs-eyebrow, .ybs-label{ font-family:var(--ybs-sans); font-size:var(--ybs-fs-label); letter-spacing:.34em; text-transform:uppercase; font-weight:500; color:var(--ybs-baby-deep); }
.ybs-body{ font-family:var(--ybs-sans); font-weight:300; font-size:var(--ybs-fs-body); line-height:1.7; color:var(--ybs-ink-warm); }
.ybs-script{ font-family:var(--ybs-script); color:var(--ybs-pen); line-height:1; }       /* pen signature */
.ybs-hand{ font-family:var(--ybs-hand); color:var(--ybs-pen); font-size:1.4em; line-height:1.3; } /* marker note */
.ybs-ar{ font-family:var(--ybs-ar); direction:rtl; line-height:1.6; }
.ybs-ar-body{ font-family:var(--ybs-ar-body); direction:rtl; line-height:1.95; }

.ybs-rule{ height:1px; border:0; background:linear-gradient(90deg,transparent,var(--ybs-taupe,var(--ybs-ink-faint)),transparent); }
.ybs-tick{ width:40px; height:1px; margin:14px 0; background:linear-gradient(90deg,transparent,var(--ybs-ink-faint),transparent); border:0; }

/* Founder's pen signature — "Leanca" (real hand, in pen, with a flourish underline) */
.ybs-sign{ display:inline-flex; flex-direction:column; align-items:center; gap:2px; }
.ybs-sign .name{ font-family:var(--ybs-script); color:var(--ybs-pen); font-size:2.9em; line-height:.9; padding:0 .1em; }
.ybs-sign .role{ font-family:var(--ybs-sans); font-size:9.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--ybs-ink-faint); }

/* ── Brand marks ─────────────────────────────────────────────────────────── */
/* Wordmark. A bold book-serif (Bookman-class) set solid on one line. The "+" is
   a full-weight, full-size plus sitting inline between "You" and "Baby" — same
   ink as the letters by default, or dusty blue via .ybs-logo--blue. */
.ybs-logo{ font-family:var(--ybs-logo-font); font-weight:700; color:var(--ybs-ink);
  letter-spacing:.005em; line-height:1; white-space:nowrap; display:inline-block; }
.ybs-logo .plus{ font-size:.92em; font-style:normal; font-weight:700; vertical-align:baseline;
  padding:0 .26em; color:inherit; }
.ybs-logo--blue .plus{ color:var(--ybs-baby-deep); }
.ybs-logo--emboss{ text-shadow:0 1px 0 var(--ybs-emboss-hi); }

/* Stacked lockup — You+ over BABY STUDIO */
.ybs-lock{ text-align:center; line-height:1; }
.ybs-lock .top{ font-family:var(--ybs-logo-font); font-weight:700; font-size:2.4em; letter-spacing:.005em; }
.ybs-lock .top .plus{ font-size:.92em; font-style:normal; vertical-align:baseline; color:inherit; padding:0 .12em; }
.ybs-lock .bot{ font-family:var(--ybs-sans); font-weight:500; font-size:.62em; letter-spacing:.46em; text-transform:uppercase; color:var(--ybs-ink-soft); margin-top:.7em; padding-left:.46em; }

/* Monogram crest — Y + B in an embossed oval, for favicons/seals */
.ybs-mono{ display:inline-grid; place-items:center; width:64px; height:78px; }
.ybs-mono svg{ width:100%; height:100%; }
.ybs-mono .oval{ fill:none; stroke:var(--ybs-ink); stroke-width:1.1; }
.ybs-mono .yb{ font-family:var(--ybs-logo-font); font-weight:700; fill:var(--ybs-ink); }
.ybs-mono .pl{ font-family:var(--ybs-logo-font); font-weight:700; fill:var(--ybs-baby-deep); }

/* Letterpress emboss surface */
.ybs-emboss{ background-image:radial-gradient(120% 100% at 50% 0,var(--ybs-paper-hi),var(--ybs-paper-lo)); }
.ybs-emboss .ybs-logo, .ybs-emboss .ybs-lock .top{ text-shadow:0 1px 0 var(--ybs-emboss-hi), 0 -1px 0 var(--ybs-emboss-lo); }

/* ── Materials ───────────────────────────────────────────────────────────── */
/* Postage stamp — put a photo/canvas inside; perforations via a mask. */
.ybs-stamp{ --p:7px; padding:var(--p); background:var(--ybs-paper-hi); filter:drop-shadow(0 8px 16px rgba(0,0,0,.4));
  -webkit-mask:
    radial-gradient(circle var(--p) at var(--p) var(--p),#0000 96%,#000) calc(-1*var(--p)) calc(-1*var(--p)),
    radial-gradient(#000 0 0) padding-box;
  -webkit-mask-composite:source-out; mask-composite:subtract; }
.ybs-stamp > *{ display:block; width:100%; }
/* Simple film frame */
.ybs-frame{ background:var(--ybs-paper-hi); padding:6px; border-radius:2px; box-shadow:var(--ybs-shadow-sm); display:inline-block; }
.ybs-frame > img, .ybs-frame > canvas{ display:block; filter:grayscale(1) contrast(1.06); }
/* Polaroid print */
.ybs-print{ background:var(--ybs-paper-hi); padding:9px 9px 30px; border-radius:2px; box-shadow:var(--ybs-shadow-sm); display:inline-block; }
.ybs-print > img, .ybs-print > canvas{ display:block; filter:grayscale(1); }
/* Photobooth strip */
.ybs-strip{ display:flex; flex-direction:column; gap:2px; background:var(--ybs-paper-hi); padding:5px; box-shadow:var(--ybs-shadow-sm); }
.ybs-strip img, .ybs-strip canvas{ display:block; width:100%; filter:grayscale(1) contrast(1.06); }
/* washi tape accent (dusty blue) */
.ybs-tape{ position:relative; }
.ybs-tape::after{ content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:74px; height:20px; background:rgba(138,162,180,.5); box-shadow:0 1px 3px rgba(0,0,0,.14); }

/* red wax / franking mark */
.ybs-frank{ font-family:var(--ybs-serif); font-size:9px; color:var(--ybs-oxblood); border:1.4px solid var(--ybs-oxblood);
  border-radius:4px; padding:5px 7px; letter-spacing:.06em; text-align:center; line-height:1.25; display:inline-block; transform:rotate(7deg); }

/* Embossed botanical sprig (line art) */
.ybs-sprig{ width:52px; height:30px; opacity:.9; filter:drop-shadow(0 1px 0 var(--ybs-emboss-hi)); }
.ybs-sprig path{ fill:none; stroke:var(--ybs-ink-faint); stroke-width:1.1; stroke-linecap:round; }

/* Arabesque corner ornament (line art) */
.ybs-corner path{ fill:none; stroke:var(--ybs-ink-faint); stroke-width:1; stroke-linecap:round; }

/* ── Controls ────────────────────────────────────────────────────────────── */
.ybs-btn{ font-family:var(--ybs-sans); font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ybs-paper);
  background:var(--ybs-ink); border:none; border-radius:999px; padding:13px 28px; cursor:pointer;
  box-shadow:var(--ybs-shadow-sm); transition:transform .12s var(--ybs-ease), background .2s ease; }
.ybs-btn:hover{ transform:translateY(-1px); }
.ybs-btn--blue{ background:var(--ybs-baby-deep); }
.ybs-btn--ox{ background:var(--ybs-oxblood); }
.ybs-btn-ghost{ background:transparent; color:var(--ybs-ink); border:1.2px solid var(--ybs-ink); border-radius:999px;
  padding:12px 26px; font-family:var(--ybs-sans); font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }

/* ── Motion ──────────────────────────────────────────────────────────────── */
@keyframes ybs-rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes ybs-develop{ from{ filter:grayscale(1) brightness(1.7) contrast(.6); opacity:0; } to{ filter:grayscale(1); opacity:1; } }
.ybs-rise{ animation:ybs-rise 1s var(--ybs-ease) both; }
.ybs-develop{ animation:ybs-develop 1.6s ease both; }
@media (prefers-reduced-motion:reduce){ .ybs-rise,.ybs-develop{ animation:none; } }