/* hito showcase — hito.mlnp.fr

   The design tokens, paper texture, and typography are copied verbatim from
   the application stylesheet (lib/web/assets/hito.css) so the showcase and the
   app read as one product. Only the layout below (hero, features, screenshots,
   footer) is specific to the showcase. Keep the token block in sync with the
   app when it changes. */

@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap");

:root {
  color-scheme: light;
  --paper: #f7f2e8;
  --paper-raised: #fffdf8;
  --ink: #1a1a16;
  --muted-ink: #5b584f;
  --rule: #b9b1a2;
  --rule-strong: #756f63;
  --oxblood: #8c201b;
  --oxblood-dark: #65130f;
  --brass: #7b5714;
  --brass-wash: #f4e7c5;
  --evergreen: #1f5b45;
  --evergreen-wash: #dcebe2;
  --focus: #65130f;
  --error: #8c201b;
  --font-size-small: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lead: 1.125rem;
  --font-size-heading: 2rem;
  --radius: 0.4em;
  --sans: "Work Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Courier Prime", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  min-width: 20rem;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 400 var(--font-size-base)/1.5 var(--sans);
  text-rendering: optimizeLegibility;
}

/* The signature paper rule-grid, shared with the app. */
body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(to bottom, rgba(26, 26, 22, 0.035) 1px, transparent 1px);
  background-size: 100% 2rem;
  content: "";
  pointer-events: none;
}

a {
  color: var(--oxblood-dark);
  font-weight: 600;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.16em;
}

a:hover { color: var(--oxblood); }

a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Shared shell metrics and the wordmark, matching the app masthead. */
.shell {
  width: min(100%, 72rem);
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

.masthead {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  color: var(--ink);
  font: 800 2rem/1 var(--sans);
  letter-spacing: -0.03em;
  text-decoration: none;
}

.masthead-cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--oxblood-dark);
  border-radius: var(--radius);
  color: var(--paper-raised);
  background: var(--oxblood);
  font-weight: 700;
  text-decoration: none;
}
.masthead-cta:hover {
  color: var(--paper-raised);
  background: var(--oxblood-dark);
}

/* The eyebrow label, shared with the app. */
.eyebrow {
  margin: 0 0 0.5rem;
  color: var(--oxblood-dark);
  font: 700 var(--font-size-small)/1.35 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Hero: the oxblood-topped paper card, matching the app's .page-surface. */
.hero {
  border: 1px solid var(--rule-strong);
  border-top: 6px solid var(--oxblood);
  background: var(--paper-raised);
  border-radius: var(--radius);
  box-shadow: 0 0.4rem 1.5rem rgba(26, 26, 22, 0.09);
  padding: clamp(1.5rem, 4vw, 3rem);
}

.hero h1 {
  margin: 0 0 0.75rem;
  font: 800 clamp(2rem, 5vw, 3rem)/1.05 var(--sans);
  letter-spacing: -0.02em;
}

.hero .lead {
  max-width: 42rem;
  margin: 0 0 1.75rem;
  color: var(--muted-ink);
  font-size: var(--font-size-lead);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
}
.button-primary {
  color: var(--paper-raised);
  background: var(--oxblood);
  border: 1px solid var(--oxblood-dark);
}
.button-primary:hover {
  color: var(--paper-raised);
  background: var(--oxblood-dark);
}
.button-secondary {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule-strong);
}
.button-secondary:hover {
  color: var(--oxblood-dark);
  background: #ece4d5;
}

/* Section rhythm. */
.section {
  margin-top: 3rem;
}
.section > h2 {
  margin: 0 0 1.25rem;
  font: 800 var(--font-size-heading)/1.1 var(--sans);
  letter-spacing: -0.01em;
}

/* Feature grid: each principle is a paper card. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.feature {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brass);
  background: var(--paper-raised);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.feature h3 {
  margin: 0 0 0.5rem;
  font: 700 var(--font-size-lead)/1.25 var(--sans);
}
.feature p {
  margin: 0;
  color: var(--muted-ink);
}

/* Screenshot slots: captioned placeholders, ready for images later. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}
.shot {
  margin: 0;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  border-radius: var(--radius);
  overflow: hidden;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}
.shot .placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  color: var(--muted-ink);
  background: repeating-linear-gradient(
    45deg,
    #efe7d6,
    #efe7d6 10px,
    var(--paper-raised) 10px,
    var(--paper-raised) 20px
  );
  font: 700 var(--font-size-small)/1.35 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.shot figcaption {
  padding: 0.75rem 1rem;
  color: var(--muted-ink);
  font-size: var(--font-size-small);
  border-top: 1px solid var(--rule);
}

/* Closing call to action. */
.cta-band {
  margin-top: 3rem;
  border: 1px solid var(--rule-strong);
  border-top: 6px solid var(--evergreen);
  background: var(--evergreen-wash);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}
.cta-band h2 {
  margin: 0 0 0.5rem;
  font: 800 var(--font-size-heading)/1.1 var(--sans);
}
.cta-band p {
  margin: 0 0 1.5rem;
  color: var(--muted-ink);
}

/* Footer. */
.site-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted-ink);
  font-size: var(--font-size-small);
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}