/* =========================================================================
   Breaking Frame - site stylesheet (shared by every baked page)
   -------------------------------------------------------------------------
   Loaded after breaking-frame-design-system/colors_and_type.css (tokens).
   Mobile first. Breakpoints (min-width): 540px, 768px, 1024px, 1280px.

   Sections:
     1. Site variables
     2. Reset and base
     3. Utilities
     4. Background layers
     5. Header and navigation
     6. Footer
     7. Glass card (devlog post card, tool card)
     8. PAGE: devlog (list + article)
     9. PAGE: tools
    10. PAGE: landing
    11. PAGE: sanguinis
    12. PAGE: sanguinis gallery overlay
    13. Touch targets
    14. Reduced motion
   ========================================================================= */

/* ===== 1. Site variables ===== */
:root {
  --header-h: 64px;
  /* Height of whatever stays stuck at the top of the viewport. Pages whose
     header scrolls away (landing, tools, sanguinis) reset it to 0. */
  --sticky-offset: var(--header-h);
  --gutter: clamp(18px, 4vw, 32px);
  --line: rgba(255, 255, 255, 0.07);
  --accent: var(--bf-electric-500);
  --pill-solid: var(--bf-electric-500);
  --pill-border: rgba(0, 71, 255, 0.45);
  --pill-bg: rgba(0, 71, 255, 0.10);
  --pill-shadow: rgba(0, 71, 255, 0.7);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 768px) {
  :root { --header-h: 92px; }
}

/* ===== 2. Reset and base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--bf-font-body);
  background: var(--bf-black);
  color: var(--bf-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: clip;
}
::selection { background: var(--accent); color: var(--bf-white); }
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--bf-white); outline-offset: 3px; }
:target { scroll-margin-top: calc(var(--sticky-offset) + 16px); }

@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6%, 4%); }
  40% { transform: translate(4%, -6%); }
  60% { transform: translate(-4%, 6%); }
  80% { transform: translate(6%, -4%); }
  100% { transform: translate(0, 0); }
}

/* ===== 3. Utilities ===== */
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap--narrow { max-width: 720px; }
.blip { display: inline-block; animation: blip 1.6s ease-in-out infinite; }
.diamond { width: 4px; height: 4px; background: var(--bf-ink-600); transform: rotate(45deg); flex: none; }
.arrow { display: inline-block; transition: transform 240ms var(--bf-ease-sharp); }
/* Underline that wipes in on hover (footer Instagram link, tools Docs link). */
.uline { position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 240ms var(--bf-ease-sharp); }

/* ===== 4. Background layers ===== */
.site { position: relative; min-height: 100vh; min-height: 100svh; background: var(--bf-black); color: var(--bf-white); }
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 10%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 10%, transparent 80%);
}
.bg-glow {
  position: absolute; width: 760px; height: 760px; left: 50%; top: -10%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 71, 255, 0.16), rgba(0, 71, 255, 0.045) 32%, transparent 66%);
  filter: blur(24px);
  transition: left 240ms var(--bf-ease-sharp), top 240ms var(--bf-ease-sharp);
}
.bg-scan {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255, 255, 255, 0.010) 3px, rgba(255, 255, 255, 0.010) 4px);
  mix-blend-mode: overlay;
}
.bg-grain {
  position: absolute; inset: -50%; width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.035; mix-blend-mode: overlay;
  animation: grain-shift 7s steps(6) infinite;
}
.bg-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 110% 90% at 50% 40%, transparent 45%, rgba(0, 0, 0, 0.72) 100%); }
.page { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }

/* ===== 5. Header and navigation ===== */
/* Single row at every width. Below 768px: 64px high, 40px logo, compact
   pills, right side label hidden. */
.header { position: relative; z-index: 6; border-bottom: 1px solid var(--line); }
.header--bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: calc(var(--header-h) + var(--safe-t));
  padding: var(--safe-t) max(18px, var(--safe-r)) 0 max(18px, var(--safe-l));
}
.header--sticky {
  position: sticky; top: 0; z-index: 20;
  padding-top: var(--safe-t);
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.header-inner {
  width: 100%; max-width: 1120px; margin: 0 auto;
  padding: 0 max(var(--gutter), var(--safe-r)) 0 max(var(--gutter), var(--safe-l));
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--header-h);
}
.header-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.header--sticky .header-left { gap: 16px; }
.brand { display: inline-flex; align-items: center; flex: none; }
.header--sticky .brand { height: 100%; }
.brand-logo {
  display: block; height: 40px; width: auto; max-width: none;
  filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(0, 71, 255, 0.22));
  transition: filter 240ms var(--bf-ease-sharp);
}
.brand:focus-visible .brand-logo { filter: brightness(0) invert(1) drop-shadow(0 0 26px rgba(0, 71, 255, 0.6)); }

.pill {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  color: var(--bf-white);
  padding: 6px 12px;
  border: 1px solid var(--pill-border); background: var(--pill-bg); border-radius: 999px;
  transition: background 200ms var(--bf-ease-sharp), box-shadow 240ms var(--bf-ease-sharp), border-color 200ms var(--bf-ease-sharp);
}
.pill.is-current { border-color: var(--pill-solid); background: var(--pill-solid); }
.pill:focus-visible { background: var(--pill-solid); border-color: var(--pill-solid); }
.pill .arrow { display: none; }

.nav { display: flex; align-items: center; gap: 20px; }
.nav-link {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bf-ink-400);
  transition: color 160ms var(--bf-ease-sharp);
}
.nav-link.is-current, .nav-link:focus-visible { color: var(--bf-white); }

.header-label { display: none; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bf-ink-400); white-space: nowrap; }
.header-label-blip { width: 6px; height: 6px; background: var(--bf-orange-500); display: inline-block; animation: blip 1.5s ease-in-out infinite; }

@media (min-width: 540px) {
  .header-left { gap: 14px; }
  .pill { letter-spacing: 0.2em; }
  .pill .arrow { display: inline-block; }
}
@media (min-width: 768px) {
  .header--bar { padding-left: max(28px, var(--safe-l)); padding-right: max(28px, var(--safe-r)); }
  .header-left, .header--sticky .header-left { gap: 24px; }
  .brand-logo { height: 56px; }
  .pill { gap: 9px; padding: 8px 14px; }
  .header-label { display: inline-flex; }
}
@media (hover: hover) and (pointer: fine) {
  .brand:hover .brand-logo { filter: brightness(0) invert(1) drop-shadow(0 0 26px rgba(0, 71, 255, 0.6)); }
  .pill:not(.is-current):hover { background: var(--pill-solid); border-color: var(--pill-solid); box-shadow: 0 8px 22px -8px var(--pill-shadow); }
  .pill:hover .arrow { transform: translateX(3px); }
  .nav-link:hover { color: var(--bf-white); }
}

/* ===== 6. Footer ===== */
/* Stacked and left aligned below 540px, row layout above. */
.footer { margin-top: auto; border-top: 1px solid var(--line); }
.footer-inner {
  width: 100%; max-width: 1120px; margin: 0 auto;
  padding: 26px max(var(--gutter), var(--safe-r)) calc(26px + var(--safe-b)) max(var(--gutter), var(--safe-l));
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px 24px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bf-ink-400);
}
.footer-group { display: flex; align-items: center; gap: 18px; }
.footer-group--end { gap: 20px; }
.footer-swatch { width: 10px; height: 10px; background: var(--accent); flex: none; }
.footer-link { position: relative; color: var(--bf-white); transition: color 160ms var(--bf-ease-sharp); }
.footer-link:focus-visible { color: var(--bf-orange-500); }

/* devlog variant: tighter tracking, medium weight */
.footer--devlog .footer-inner { padding-top: 24px; padding-bottom: calc(24px + var(--safe-b)); gap: 16px 24px; font-weight: 500; letter-spacing: 0.08em; }
.footer--devlog .footer-group { gap: 20px; }

@media (min-width: 540px) {
  .footer-inner { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}
@media (hover: hover) and (pointer: fine) {
  .footer-link:hover { color: var(--bf-orange-500); }
  .footer-link:hover .uline { transform: scaleX(1); transform-origin: left; }
}

/* ===== 7. Glass card (devlog post card, tool card) ===== */
.glass {
  position: relative;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  overflow: hidden; isolation: isolate;
  transition: transform 240ms var(--bf-ease-sharp), box-shadow 400ms var(--bf-ease-sharp), background 240ms var(--bf-ease-sharp);
}
/* 1px gradient edge drawn with a masked layer */
.glass-edge {
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.06) 28%, rgba(255, 255, 255, 0) 55%, rgba(0, 71, 255, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  transition: background 400ms var(--bf-ease-sharp);
  z-index: 1;
}
a.glass:focus-visible {
  background: linear-gradient(180deg, rgba(0, 71, 255, 0.07), rgba(255, 255, 255, 0.014));
  box-shadow: 0 0 0 1px rgba(0, 71, 255, 0.18), 0 22px 60px -22px rgba(0, 71, 255, 0.55), 0 0 50px -10px rgba(0, 71, 255, 0.22);
}
@media (hover: hover) and (pointer: fine) {
  .glass:hover {
    transform: translateY(-3px);
    background: linear-gradient(180deg, rgba(0, 71, 255, 0.07), rgba(255, 255, 255, 0.014));
    box-shadow: 0 0 0 1px rgba(0, 71, 255, 0.18), 0 22px 60px -22px rgba(0, 71, 255, 0.55), 0 0 50px -10px rgba(0, 71, 255, 0.22);
  }
  .glass:hover > .glass-edge { background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(46, 107, 255, 0.55) 30%, rgba(0, 71, 255, 0.12) 60%, rgba(0, 71, 255, 0) 100%); }
}

/* ===== 8. PAGE: devlog (list + article) ===== */
.page-devlog body { font-family: var(--bf-font-display); font-size: 16px; line-height: 1.5; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 24px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-electric-400);
}
.eyebrow-line { width: 38px; height: 1px; background: var(--bf-electric-500); flex: none; }
.intro { padding: clamp(64px, 8vw, 86px) 0 clamp(40px, 5vw, 48px); }
.intro-title { font-weight: 900; font-size: clamp(40px, 7vw, 78px); line-height: 1.02; letter-spacing: -0.03em; margin: 0; text-wrap: balance; overflow-wrap: break-word; }
.intro-lead { margin: 24px 0 0; max-width: 560px; font-size: 18px; line-height: 1.5; color: var(--bf-ink-300); font-weight: 400; }
.list { padding: 0 0 80px; }
.posts { display: flex; flex-direction: column; gap: 16px; }
.post-card { display: block; padding: 32px clamp(20px, 3vw, 32px) 24px; color: inherit; }
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-ink-400); margin-bottom: 16px; }
.post-title { font-weight: 700; font-size: 28px; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 12px; overflow-wrap: break-word; }
.post-excerpt { font-size: 16px; line-height: 1.5; color: var(--bf-ink-300); margin: 0; max-width: 64ch; }
.post-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-electric-400); }
.posts-empty { margin: 0; font-size: 16px; color: var(--bf-ink-400); }
@media (hover: hover) and (pointer: fine) {
  .post-card:hover .arrow { transform: translateX(3px); }
}

.article { padding: 72px 0 80px; }
.back-link {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 40px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-ink-400);
  transition: color 160ms var(--bf-ease-sharp);
}
.back-link:focus-visible { color: var(--bf-white); }
.article-head { margin-bottom: 40px; }
.article-head .post-meta { margin-bottom: 20px; }
.article-title { font-weight: 900; font-size: clamp(34px, 5.5vw, 56px); line-height: 1.05; letter-spacing: -0.03em; margin: 0; text-wrap: balance; overflow-wrap: break-word; }
.prose { font-size: 18px; line-height: 1.7; color: var(--bf-ink-200); overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 24px; }
.prose h2 { font-weight: 600; font-size: 28px; letter-spacing: -0.015em; line-height: 1.15; color: var(--bf-white); margin: 48px 0 16px; }
.prose h3 { font-weight: 600; font-size: 22px; letter-spacing: -0.015em; line-height: 1.15; color: var(--bf-white); margin: 40px 0 12px; }
.prose a { color: var(--bf-electric-400); border-bottom: 1px solid rgba(46, 107, 255, 0.4); transition: color 160ms var(--bf-ease-sharp), border-color 160ms var(--bf-ease-sharp); }
.prose a:focus-visible { color: var(--bf-white); border-color: var(--bf-white); }
.prose ul, .prose ol { margin: 0 0 24px; padding-left: 24px; }
.prose li { margin: 0 0 8px; }
.prose blockquote { margin: 32px 0; padding: 8px 0 8px 24px; border-left: 2px solid var(--bf-electric-500); color: var(--bf-ink-300); }
.prose code { font-family: var(--bf-font-display); font-weight: 500; font-size: 0.92em; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); padding: 1px 6px; border-radius: 2px; }
.prose pre { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; padding: 20px; overflow-x: auto; margin: 0 0 24px; }
.prose pre code { background: none; border: none; padding: 0; }
.prose img { max-width: 100%; height: auto; border-radius: 4px; }
.prose hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 40px 0; }
@media (hover: hover) and (pointer: fine) {
  .back-link:hover { color: var(--bf-white); }
  .prose a:hover { color: var(--bf-white); border-color: var(--bf-white); }
}

/* ===== 9. PAGE: tools ===== */
.page-tools, .page-landing, .page-sanguinis { --sticky-offset: 0px; }
.tools-intro { padding: clamp(64px, 8vw, 86px) 0 clamp(44px, 5vw, 56px); }
.tools-eyebrow { font-weight: 500; letter-spacing: 0.26em; margin-bottom: 26px; }
.tools-title { font-family: var(--bf-font-display); font-weight: 800; font-size: clamp(34px, 7vw, 78px); line-height: 1.0; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.tools-title-accent { color: var(--bf-electric-400); }
.tools-lead { margin: 26px 0 0; max-width: 780px; font-size: 18px; line-height: 1.6; color: var(--bf-ink-300); font-weight: 400; }
.tools-list { padding: 0 0 40px; }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px; }

.tool-card { display: flex; flex-direction: column; min-width: 0; padding: clamp(24px, 3vw, 30px) clamp(22px, 3vw, 30px) clamp(22px, 2.5vw, 26px); }
.tool-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.tool-id { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bf-ink-500); }
.tool-version { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--bf-electric-300); border: 1px solid rgba(0, 71, 255, 0.4); background: rgba(0, 71, 255, 0.10); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.tool-name { font-family: var(--bf-font-display); font-weight: 800; font-size: clamp(26px, 3vw, 30px); letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 12px; overflow-wrap: break-word; }
.tool-hook { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--bf-white); margin: 0 0 12px; }
.tool-desc { font-size: 15px; line-height: 1.62; color: var(--bf-ink-300); margin: 0 0 22px; }
.tool-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tool-tag { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-ink-300); border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); padding: 6px 11px; border-radius: 4px; }
.tool-install { display: flex; align-items: stretch; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; background: rgba(0, 0, 0, 0.35); margin-bottom: 20px; overflow: hidden; }
.tool-install code { flex: 1; min-width: 0; font-family: var(--bf-font-body); font-size: 11.5px; color: var(--bf-ink-300); padding: 10px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.copy-btn {
  flex-shrink: 0; border: none; border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04); color: var(--bf-ink-300);
  font-family: var(--bf-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0 14px;
  transition: background 160ms var(--bf-ease-sharp), color 160ms var(--bf-ease-sharp);
}
.copy-btn:focus-visible { background: var(--bf-electric-500); color: var(--bf-white); outline-offset: -2px; }
.tool-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: auto; padding-top: 4px; }
.tool-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--bf-font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.01em;
  padding: 13px 22px; border-radius: 4px;
  background: var(--bf-orange-500); color: var(--bf-white); border: 1px solid var(--bf-orange-500);
  transition: background 160ms var(--bf-ease-sharp), box-shadow 240ms var(--bf-ease-sharp), transform 160ms var(--bf-ease-sharp);
}
.tool-btn svg { width: 16px; height: 16px; display: block; }
.tool-docs { position: relative; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bf-ink-400); transition: color 160ms var(--bf-ease-sharp); }
.tool-docs:focus-visible { color: var(--bf-white); }
.tool-star { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.tool-star-text { font-size: 12.5px; line-height: 1.4; color: var(--bf-ink-400); }
.star-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bf-ink-300);
  padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.03); border-radius: 999px;
  transition: color 160ms var(--bf-ease-sharp), border-color 160ms var(--bf-ease-sharp), background 160ms var(--bf-ease-sharp), box-shadow 240ms var(--bf-ease-sharp);
}
.star-btn svg { width: 13px; height: 13px; display: block; transition: color 160ms var(--bf-ease-sharp); }
.tool-soon {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 220px; padding: 30px; border-radius: 6px; border: 1px dashed rgba(255, 255, 255, 0.12);
  transition: background 240ms var(--bf-ease-sharp), border-color 400ms var(--bf-ease-sharp);
}
.tool-soon-text { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bf-ink-500); line-height: 1.8; }
.tool-soon-plus { display: block; font-size: 30px; color: var(--bf-ink-600); margin-bottom: 10px; font-weight: 200; }
@media (min-width: 768px) {
  .tool-desc { font-size: 14.5px; }
}
@media (hover: hover) and (pointer: fine) {
  .copy-btn:hover { background: var(--bf-electric-500); color: var(--bf-white); }
  .tool-btn:hover { background: var(--bf-orange-600); box-shadow: 0 10px 26px -10px rgba(255, 90, 31, 0.7); transform: translateY(-1px); }
  .tool-docs:hover { color: var(--bf-white); }
  .tool-docs:hover .uline { transform: scaleX(1); transform-origin: left; }
  .star-btn:hover { color: var(--bf-white); border-color: rgba(255, 90, 31, 0.55); background: rgba(255, 90, 31, 0.10); box-shadow: 0 8px 22px -10px rgba(255, 90, 31, 0.5); }
  .star-btn:hover svg { color: var(--bf-orange-400); }
  .tool-soon:hover { background: rgba(255, 255, 255, 0.012); border-color: rgba(0, 71, 255, 0.4); }
}
/* "Copied" feedback (js/tools.js), declared after the hover rules so it wins */
.copy-btn.is-copied { background: var(--bf-orange-500); color: var(--bf-white); }

/* ===== 10. PAGE: landing ===== */
@keyframes ribbon-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* The stage grows with its content (short landscape phones scroll), the clip
   only cuts the decorative layers (glow, wordmark, marquee). */
.landing {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto auto 1fr auto;
  overflow: hidden; overflow: clip;
  background: var(--bf-black); color: var(--bf-white);
}
.ribbon {
  position: relative; z-index: 5; height: calc(30px + var(--safe-t)); padding-top: var(--safe-t);
  background: var(--bf-electric-500); color: var(--bf-white);
  overflow: hidden; display: flex; align-items: center; border-bottom: 1px solid #000;
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
}
.ribbon-track { display: flex; align-items: center; gap: 56px; white-space: nowrap; animation: ribbon-scroll 38s linear infinite; padding-left: 56px; flex-shrink: 0; }
.ribbon-dot { width: 6px; height: 6px; background: #000; flex: none; }
.page-landing .header--bar { height: var(--header-h); padding-top: 0; }

.landing-main { position: relative; z-index: 4; display: grid; place-items: center; padding: clamp(16px, 4svh, 40px) 24px; }
.landing-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.landing-glow {
  position: absolute; width: 800px; height: 800px; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 71, 255, 0.18), rgba(0, 71, 255, 0.05) 30%, transparent 65%);
  filter: blur(20px); pointer-events: none; z-index: 1;
  transition: left 220ms var(--bf-ease-sharp), top 220ms var(--bf-ease-sharp);
}
.landing-scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255, 255, 255, 0.012) 3px, rgba(255, 255, 255, 0.012) 4px);
}
.landing-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.6) 100%); pointer-events: none; z-index: 1; }
.landing-center { display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 5svh, 40px); position: relative; z-index: 2; max-width: 100%; }
/* Outlined background wordmark. Sized to fit the viewport below 768px. */
.wordmark {
  position: absolute; left: 0; right: 0; bottom: -40%;
  font-family: var(--bf-font-display); font-weight: 900; font-size: 9.2vw; line-height: 0.85; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06);
  white-space: nowrap; pointer-events: none; -webkit-user-select: none; user-select: none; text-align: center; z-index: -1;
  display: flex; justify-content: center;
}
.hero-logo {
  position: relative;
  width: min(620px, 78vw, calc((100vh - 330px) * 1.98));
  width: min(620px, 78vw, calc((100svh - 330px) * 1.98));
  min-width: 160px;
  filter: drop-shadow(0 0 60px rgba(0, 71, 255, 0.15));
  transition: filter 400ms var(--bf-ease-sharp);
}
/* Revealed by js/landing.js once the SVG is injected and ready to draw */
.hero-logo-main { opacity: 0; }
.bf-logo-live .hero-logo-main { opacity: 1; }
.hero-logo-fallback { display: block; width: 100%; filter: brightness(0) invert(1); }
.hero-logo-ghost { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 240ms ease, transform 240ms var(--bf-ease-sharp); }
.wip-line {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--bf-font-display); font-weight: 700; font-size: clamp(12px, 3.4vw, 14px); letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--bf-white);
  opacity: 0; animation: fade-in 1s 1.8s var(--bf-ease-sharp) forwards;
}
.wip-rule { display: none; width: 56px; height: 1px; background: var(--bf-ink-600); flex: none; }
.wip-blip { width: 9px; height: 9px; background: var(--accent); flex: none; }
.coming-soon { margin-top: -22px; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bf-ink-500); opacity: 0; animation: fade-in 1s 2.1s var(--bf-ease-sharp) forwards; }
.landing-footer {
  position: relative; z-index: 5;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px 24px;
  padding: 22px max(18px, var(--safe-r)) calc(22px + var(--safe-b)) max(18px, var(--safe-l));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bf-ink-300);
  opacity: 0; animation: fade-in 1s 2.3s var(--bf-ease-sharp) forwards;
}
.landing-footer .footer-group { gap: 24px; }
.landing-footer .footer-group--end { gap: 22px; }
.landing-footer .footer-link { transition: color 200ms; }
.landing-footer .uline { transition-duration: 280ms; }
@media (min-width: 540px) {
  .wip-line { gap: 18px; font-size: clamp(14px, 1.4vw, 18px); letter-spacing: 0.42em; }
  .landing-footer { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}
@media (min-width: 768px) {
  .wip-rule { display: block; }
  .wordmark { font-size: clamp(120px, 24vw, 360px); }
  .landing-footer { padding-left: max(32px, var(--safe-l)); padding-right: max(32px, var(--safe-r)); }
}
@media (hover: hover) and (pointer: fine) {
  .hero-logo:hover { filter: drop-shadow(0 0 80px rgba(0, 71, 255, 0.45)); }
  .hero-logo:hover .hero-logo-ghost--c { opacity: 0.7; transform: translate(-6px, 0); }
  .hero-logo:hover .hero-logo-ghost--m { opacity: 0.7; transform: translate(6px, 0); }
}

/* ===== 11. PAGE: sanguinis ===== */
/* Page scoped palette (not global brand tokens) */
.page-sanguinis {
  --sg-red: #ab1d1d;
  --sg-red-hover: #c42626;
  --sg-red-light: #d04040;
  --sg-line: rgba(255, 255, 255, 0.08);
  --sg-edge: rgba(255, 255, 255, 0.12);
  --accent: var(--sg-red);
  --pill-solid: var(--sg-red);
  --pill-border: rgba(171, 29, 29, 0.6);
  --pill-bg: rgba(171, 29, 29, 0.14);
  --pill-shadow: rgba(171, 29, 29, 0.7);
  --subnav-h: 56px;
  scroll-snap-type: y proximity;
  scroll-padding-top: calc(var(--sticky-offset) + var(--subnav-h));
}
@media (min-width: 768px) {
  .page-sanguinis { --subnav-h: 80px; }
}
@media (min-width: 1024px) {
  .page-sanguinis { scroll-snap-type: y mandatory; }
}
.page-sanguinis.is-locked { overflow: hidden; scroll-snap-type: none; }
@keyframes logo-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.017) rotate(0.4deg); } }
@keyframes sword-breath { 0%, 100% { transform: translateX(-6%) scale(0.95); } 50% { transform: translateX(-6%) scale(0.964); } }
@keyframes bg-zoom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.page-sanguinis .bg-glow { background: radial-gradient(circle, rgba(171, 29, 29, 0.16), rgba(171, 29, 29, 0.045) 32%, transparent 66%); }
.page-sanguinis .header--bar { z-index: 21; background: var(--bf-black); scroll-snap-align: start; }
@media (min-width: 768px) {
  .page-sanguinis .header--bar { padding-left: max(clamp(18px, 3vw, 28px), var(--safe-l)); padding-right: max(clamp(18px, 3vw, 28px), var(--safe-r)); }
}

/* --- hero --- */
.sg-hero {
  position: relative;
  height: max(440px, calc(100vh - var(--header-h)));
  height: max(440px, calc(100svh - var(--header-h)));
  background: var(--bf-black); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  container-type: size;
}
/* Background: 16:9 box that always covers the hero, centered. */
.sg-hero-art {
  position: absolute; left: 50%; top: 50%;
  width: max(100cqw, 177.78cqh); height: max(56.25cqw, 100cqh);
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 0;
}
/* Sword: its own 16:9 frame (the PNGs are 2560x1440 with the sword at 21% of
   the width once the image transform is applied), sized from the hero height
   and anchored to the bottom, so it keeps the same size and place at every
   aspect ratio instead of following the background crop.
     --sword-h     frame height (the visible sword is 62% of it)
     --sword-x     horizontal position of the sword axis
     --sword-drop  part of the frame hidden below the hero */
.sg-sword-box {
  /* wide heroes: sword on the left, never further than 75cqh from the center */
  --sword-h: 112cqh;
  --sword-x: max(21cqw, 50cqw - 75cqh);
  --sword-drop: calc(var(--sword-h) * 0.054);
  position: absolute;
  height: var(--sword-h); width: calc(var(--sword-h) * 16 / 9);
  left: calc(var(--sword-x) - var(--sword-h) * 16 / 9 * 0.21);
  bottom: calc(-1 * var(--sword-drop));
  pointer-events: none; z-index: 1;
}
@container (max-aspect-ratio: 7/5) {
  /* square and portrait heroes (phones, foldables, tablets): sword 20% smaller,
     pinned at the top above the logo, its blade fading out behind the logo.
     --sword-top is where the visible sword starts (the PNG is empty above
     38.2% of the frame height). --hero-shift (set by js/sanguinis.js) centers
     the sword + content group vertically. */
  .sg-sword-box {
    --sword-h: min(73.6cqh, 132cqw);
    --sword-x: 50cqw;
    --sword-top: 12px;
    bottom: auto;
    top: calc(var(--hero-shift, 0px) + var(--sword-top) - var(--sword-h) * 0.382);
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 96%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 96%);
  }
}
.sg-forest {
  position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); max-width: none;
  filter: blur(4px); transform-origin: 50% 50%; animation: bg-zoom 24s ease-in-out infinite;
  object-fit: cover; object-position: center; pointer-events: none; z-index: 0;
}
.sg-shade { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.95) 100%); }
.sg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.sg-sword {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center;
  transform: translateX(-6%) scale(0.95); transform-origin: 27% 100%;
  animation: sword-breath 7s ease-in-out infinite;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
  pointer-events: none; z-index: 0;
}
.sg-sword--asleep { opacity: 0; }
/* Blink state toggled by js/sanguinis.js */
.sg-hero.is-blink .sg-sword--asleep { opacity: 1; }
.sg-hero.is-blink .sg-sword--awake { opacity: 0; }
.sg-hero-content {
  --hero-gap: max(12px, min(1.75cqw, 3.1cqh));
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: var(--hero-gap);
  padding: min(7.5cqw, 13.3cqh) 24px min(4cqw, 7.1cqh);
  max-width: 100%; text-align: center;
}
.sg-hero-logo {
  display: block; width: min(40cqw, 71cqh, 88cqw); min-width: 220px; height: auto; max-width: none;
  opacity: 0; transform-origin: 50% 50%;
  animation: fade-in 800ms 200ms var(--bf-ease-sharp) forwards, logo-breath 6s 1s ease-in-out infinite;
}
.sg-wip {
  display: flex; align-items: center; gap: clamp(10px, 2vw, 18px);
  font-family: var(--bf-font-display); font-weight: 700; font-size: max(12px, min(1.125cqw, 2cqh)); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--bf-white); white-space: nowrap;
  margin-top: calc(-1 * var(--hero-gap));
  opacity: 0; animation: fade-in 1s 900ms var(--bf-ease-sharp) forwards;
}
.sg-hero-copy {
  margin: 0; max-width: max(min(46cqw, 82cqh), min(560px, 92cqw));
  font-family: var(--bf-font-display); font-weight: 600; font-size: max(15px, min(1.375cqw, 2.45cqh)); line-height: 1.35; letter-spacing: -0.01em;
  text-wrap: balance;
}
.sg-hero-copy br { display: none; }
.sg-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 420px) {
  /* keep both CTAs on one row on small phones */
  .sg-hero-cta { flex-wrap: nowrap; gap: 10px; }
  .sg-hero-cta .sg-btn { font-size: 14px; padding: 14px 16px; }
}
@container (max-aspect-ratio: 7/5) {
  /* portrait heroes: content pinned under the header, large logo
     (after the base rules so it wins the cascade) */
  /* content starts under the sword: 78% of its visible height, so the faded
     blade tip sits behind the logo (same formula as --sword-h above) */
  .sg-hero-content { align-self: flex-start; margin-top: var(--hero-shift, 0px); padding: calc(12px + min(73.6cqh, 132cqw) * 0.618 * 0.78) 16px 0; }
  .sg-hero-logo { width: min(72cqw, 380px); }
}
.sg-platform { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bf-white); white-space: nowrap; }
@media (min-width: 540px) {
  .sg-wip { letter-spacing: 0.42em; }
}
@media (min-width: 768px) {
  .sg-hero-copy { font-size: max(14px, min(1.375cqw, 2.45cqh)); }
  .sg-hero-copy br { display: inline; }
}

/* --- buttons --- */
.sg-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--bf-font-display); font-weight: 700; font-size: 15px;
  padding: 15px 26px; white-space: nowrap; flex-shrink: 0; border-radius: 4px;
  color: var(--bf-white); border: 1px solid transparent;
  transition: background 160ms var(--bf-ease-sharp), border-color 160ms var(--bf-ease-sharp), box-shadow 240ms var(--bf-ease-sharp);
}
.sg-btn--dark { background: var(--bf-black); border-color: var(--bf-black); }
.sg-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.5); }
.sg-btn--red { background: var(--sg-red); border-color: var(--sg-red); }
.sg-btn--md { padding: 14px 24px; }
.sg-btn--sm { font-size: 14px; padding: 13px 22px; }
@media (hover: hover) and (pointer: fine) {
  .sg-btn--dark:hover { background: #1F1F1F; border-color: #1F1F1F; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.8); }
  .sg-btn--ghost:hover { border-color: var(--bf-white); background: rgba(255, 255, 255, 0.06); }
  .sg-btn--red:hover { background: var(--sg-red-hover); }
  .sg-btn--red.sg-btn--md:hover { box-shadow: 0 10px 26px -10px rgba(171, 29, 29, 0.8); }
}

/* --- sticky subnav --- */
/* Horizontal scroller. js/sanguinis.js adds .has-more while there is content
   hidden on the right, which draws the fade hint. */
.subnav { position: sticky; top: var(--sticky-offset); z-index: 20; background: var(--bf-black); border-bottom: 1px solid var(--sg-line); }
.subnav-inner {
  max-width: 1120px; margin: 0 auto;
  padding: 0 max(var(--gutter), var(--safe-r)) 0 max(var(--gutter), var(--safe-l));
  display: flex; align-items: center; gap: clamp(16px, 3vw, 32px);
  height: var(--subnav-h);
  overflow-x: auto; white-space: nowrap;
  scroll-snap-type: x proximity; scroll-padding: 0 var(--gutter);
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav-inner.has-more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
.subnav-logo { display: block; height: 40px; width: auto; max-width: none; flex-shrink: 0; margin-right: 0; scroll-snap-align: start; }
.subnav-link {
  height: 100%; display: flex; align-items: center; flex: none;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bf-ink-400); border-bottom: 2px solid transparent;
  scroll-snap-align: start;
  transition: color 160ms var(--bf-ease-sharp), border-color 160ms var(--bf-ease-sharp);
}
.subnav-link.is-active { color: var(--bf-white); border-bottom-color: var(--sg-red); }
.subnav-link:focus-visible { color: var(--bf-white); outline-offset: -4px; }
@media (min-width: 768px) {
  .subnav-logo { height: 60px; margin-right: 8px; }
}
@media (hover: hover) and (pointer: fine) {
  .subnav-link:hover { color: var(--bf-white); }
}

/* --- screens --- */
.sg-screen { scroll-snap-align: start; min-height: calc(100vh - var(--subnav-h)); min-height: calc(100svh - var(--subnav-h)); display: flex; flex-direction: column; }
.sg-h2 { font-family: var(--bf-font-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; margin: 0; }

/* le jeu */
.sg-jeu { position: relative; overflow: hidden; background: #000; }
.sg-trailer { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(16px, 4svh, 64px) 0; }
.sg-trailer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(28px, 4vw, 56px); align-items: center; }
.sg-video {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  max-height: calc(100vh - 220px); max-height: calc(100svh - 220px);
  background: #000; border: 1px solid var(--sg-edge); border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.sg-video-player { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--bf-black); border-radius: inherit; cursor: auto; }
.sg-pitch { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 2.2svh, 20px); }
.sg-jeu .sg-h2 { font-size: clamp(24px, min(3.6vw, 5.5svh), 42px); line-height: 1.08; text-wrap: balance; }
.sg-pitch-text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--bf-ink-300); max-width: 52ch; }
.sg-specs { position: relative; z-index: 1; border-top: 1px solid var(--sg-line); background: var(--bf-black); }
.sg-specs-grid { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); display: grid; /* one row at every width: columns size to content, a long value wraps inside its column only when space runs out */ grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: clamp(8px, 2.5vw, 24px); }
.sg-spec { padding: clamp(10px, 2.5svh, 22px) 0; display: flex; flex-direction: column; gap: 6px; }
.sg-spec-label { font-size: clamp(10px, 2.9vw, 11px); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-ink-500); white-space: nowrap; }
.sg-spec-value { font-family: var(--bf-font-display); font-weight: 700; font-size: clamp(11px, 3vw, 16px); line-height: 1.25; }
@media (min-width: 540px) {
  .sg-spec-label { letter-spacing: 0.14em; }
}
@media (min-width: 768px) {
  /* desktop: 4 equal columns, as in the original design */
  .sg-specs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: normal; }
  .sg-spec-label { letter-spacing: 0.2em; }
}

/* explorer */
.sg-explorer { justify-content: center; padding: clamp(40px, 6vw, 72px) 0; position: relative; overflow: hidden; background: var(--bf-black); }
.sg-explorer-inner { position: relative; z-index: 1; }
.sg-explorer .sg-h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 28px; }
.sg-doors { display: flex; flex-wrap: wrap; gap: 16px; }
.sg-door {
  position: relative; flex: 1 1 320px; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: clamp(180px, calc(100vh - 340px), 420px);
  height: clamp(180px, calc(100svh - 340px), 420px);
  border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 6px; overflow: hidden;
  background: var(--bf-ink-800); color: var(--bf-white);
  transition: border-color 240ms var(--bf-ease-sharp);
}
.sg-door--off { background: var(--sg-red); cursor: default; }
.sg-door-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 60%; }
.sg-door--off .sg-door-img { object-position: 50% 50%; filter: grayscale(1) brightness(0.45); }
.sg-door-flag { position: absolute; top: 16px; left: 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bf-white); background: var(--bf-black); padding: 6px 10px; border-radius: 4px; }
.sg-door-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: var(--bf-black); }
.sg-door-title { font-family: var(--bf-font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.sg-door-note { font-size: 13px; font-weight: 500; color: #B0B0B0; }
a.sg-door:focus-visible { border-color: var(--bf-white); }
@media (hover: hover) and (pointer: fine) {
  a.sg-door:hover { border-color: var(--bf-white); }
  a.sg-door:hover .arrow { transform: translateX(4px); color: var(--sg-red-light); }
}
@media (max-width: 767px) {
  /* phones: landscape cards sized from their width instead of the viewport height */
  .sg-door { flex-basis: 100%; height: auto; aspect-ratio: 16 / 9; }
  .sg-door-flag { top: 12px; left: 12px; font-size: 11px; }
  .sg-door-bar { padding: 12px 16px; }
  .sg-door-title { font-size: 18px; }
}

/* suivre */
.sg-follow { position: relative; overflow: hidden; flex: 1; display: flex; align-items: center; background: #000; border-top: 1px solid var(--sg-line); border-bottom: 1px solid var(--sg-line); }
.sg-follow-inner {
  position: relative; z-index: 1; width: 100%; max-width: 1120px; margin: 0 auto;
  padding: clamp(20px, 5svh, 64px) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 72px);
}
.sg-cover {
  display: block; width: auto; max-width: 100%;
  height: calc(100vh - var(--subnav-h) - 180px); height: calc(100svh - var(--subnav-h) - 180px);
  max-height: 640px; min-height: 260px;
  object-fit: cover;
  border: 1px solid var(--sg-edge); border-radius: 6px;
}
.sg-follow-text { flex: 1 1 320px; min-width: 0; max-width: 480px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.sg-follow .sg-h2 { font-size: clamp(26px, 3.4vw, 38px); }
.sg-follow-cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 767px) {
  /* phones: title and buttons centered under the cover */
  .sg-follow-text { flex-basis: 100%; max-width: none; align-items: center; text-align: center; }
  .sg-follow-cta { justify-content: center; }
  /* poster sized from the width, not the viewport height */
  .sg-cover { width: min(58vw, 280px); height: auto; min-height: 0; max-height: none; }
}
.page-sanguinis .footer { margin-top: 0; border-top: none; }
.page-sanguinis .footer-inner { width: auto; }

/* ===== 12. PAGE: sanguinis gallery overlay ===== */
.gallery {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 10, 10, 0.96);
  display: flex; flex-direction: column;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}
.gallery[hidden], .gallery [hidden] { display: none; }
.gallery-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; padding: 0 var(--gutter); border-bottom: 1px solid var(--sg-line); }
.gallery-bar-left { display: flex; align-items: center; gap: 20px; min-width: 0; }
.gallery-title { font-family: var(--bf-font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.gallery-back {
  display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; color: var(--bf-ink-400);
  font-family: var(--bf-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 0; white-space: nowrap;
}
.gallery-back:focus-visible { color: var(--bf-white); }
.icon-btn {
  display: flex; align-items: center; justify-content: center; flex: none;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; color: var(--bf-white); padding: 0;
  transition: border-color 160ms var(--bf-ease-sharp);
}
.icon-btn--close { width: 44px; height: 44px; }
.icon-btn--sm { width: 28px; height: 28px; }
.icon-btn--lg { width: 44px; height: 44px; }
.icon-btn:focus-visible { border-color: var(--sg-red); }

.gallery-grid-view { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.gallery-groups { max-width: 1280px; margin: 0 auto; padding: 32px var(--gutter) 64px; display: flex; flex-direction: column; gap: 40px; }
.gallery-label { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sg-red-light); display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.gallery-label-line { width: 38px; height: 1px; background: var(--sg-red); flex: none; }
/* Masonry columns: 2 below 768px, 3 from 768px, 4 from 1280px */
.gallery-grid { columns: 2; column-gap: 16px; }
.gallery-item { position: relative; margin: 0 0 20px; break-inside: avoid; }
.gallery-stack { position: absolute; top: 8px; left: 8px; right: -8px; bottom: -8px; background: #161616; border: 1px solid var(--sg-edge); border-radius: 6px; }
.gallery-card { position: relative; background: var(--bf-ink-900); border: 1px solid var(--sg-edge); border-radius: 6px; overflow: hidden; color: var(--bf-white); transition: border-color 240ms var(--bf-ease-sharp); }
.gallery-open { display: block; width: 100%; padding: 0; border: none; background: transparent; }
.gallery-open:focus-visible { outline-offset: -3px; }
.gallery-thumb { display: block; width: 100%; height: auto; }
.gallery-caption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; min-height: 44px; }
.gallery-name { font-size: 13px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.gallery-variants { display: flex; align-items: center; gap: 6px; flex: none; }
.gallery-vcount { font-size: 11px; letter-spacing: 0.08em; color: var(--bf-ink-400); font-variant-numeric: tabular-nums; min-width: 28px; text-align: center; white-space: nowrap; }
@media (min-width: 768px) {
  .gallery-grid { columns: 3; }
}
@media (min-width: 1280px) {
  .gallery-grid { columns: 4; }
}

/* lightbox: full screen below 768px with the arrows laid over the image */
.lightbox { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lb-stage { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 8px 0; touch-action: pan-y; }
.lb-frame { position: relative; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.lb-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.lb-stage .icon-btn--lg { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; background: rgba(10, 10, 10, 0.6); }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
.lb-bar { flex: none; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 16px var(--gutter); border-top: 1px solid var(--sg-line); }
.lb-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.lb-group { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-red-light); }
.lb-title { font-size: 15px; font-weight: 600; }
.lb-variants { display: flex; align-items: center; gap: 6px; }
.lb-variant { height: 30px; padding: 0 10px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; color: var(--bf-white); font-family: var(--bf-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: border-color 160ms var(--bf-ease-sharp); }
.lb-variant:focus-visible { border-color: var(--sg-red); }
.lb-vcount { font-size: 11px; color: var(--bf-ink-400); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-counter { font-size: 12px; letter-spacing: 0.1em; color: var(--bf-ink-400); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 768px) {
  .lb-stage { grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 12px; padding: 20px clamp(12px, 3vw, 28px); }
  .lb-stage .icon-btn--lg { position: static; transform: none; width: 48px; height: 48px; background: transparent; }
}
@media (hover: hover) and (pointer: fine) {
  .gallery-back:hover { color: var(--bf-white); }
  .icon-btn:hover, .lb-variant:hover { border-color: var(--sg-red); }
  .gallery-card:hover { border-color: var(--sg-red); }
}

/* ===== 13. Touch targets ===== */
/* 44x44px minimum hit area on touch devices, without changing the visual size */
@media (pointer: coarse) {
  .tool-install code { padding-top: 15px; padding-bottom: 15px; }
  .tap { position: relative; }
  .tap::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}

/* ===== 14. Reduced motion ===== */
/* Static but complete: no marquee, grain, blips, breathing, draw or fades. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .wip-line, .coming-soon, .landing-footer, .sg-hero-logo, .sg-wip { opacity: 1 !important; }
}