/* fotografickesluzby.cz, the darkroom and contact sheet look (proposal 045, D2 and D3).
   Hand-written, not part of the Tailwind build. Every colour this domain prints lives
   here as a custom property. Tailwind utilities in the templates carry spacing, grid
   and type scale only. Unlayered, so it beats Tailwind's utility layer. */

:root {
  --fs-ink: #171412;
  --fs-ink-2: #26211d;
  --fs-paper: #f6f1e7;
  --fs-paper-2: #ebe3d3;
  --fs-line: #d8cdb8;
  --fs-text: #2b2622;
  --fs-muted: #6b6257;
  --fs-accent: #c2410c;
  --fs-accent-dark: #9a3412;
  --fs-glow: #fb923c;
  --fs-film: #f2b705;
  --fs-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fs-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.fs-body {
  background: var(--fs-paper);
  color: var(--fs-text);
  font-family: var(--fs-sans);
  overflow-x: hidden;
}

/* The global demand-form.twig prints these two, recoloured here (045, step 3). */
.fs-body .text-gray-900 { color: var(--fs-ink); }
.fs-body .text-gray-700 { color: var(--fs-text); }
.fs-body main h1.text-gray-900 { font-family: var(--fs-serif); }

/* Header and nav */
.fs-header {
  background: var(--fs-ink);
  color: var(--fs-paper);
  border-bottom: 2px solid var(--fs-film);
}
.fs-logo { color: var(--fs-paper); text-decoration: none; }
.fs-logo-word {
  font-family: var(--fs-serif);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  white-space: nowrap;
}
.fs-logo-word em { font-style: italic; }
.fs-navrow {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fs-navrow::-webkit-scrollbar { display: none; }
.fs-nav {
  font-family: var(--fs-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fs-paper);
  text-decoration: none;
  white-space: nowrap;
}
.fs-nav:hover, .fs-nav:focus-visible { color: var(--fs-glow); }

/* Buttons */
.fs-btn {
  display: inline-block;
  background: var(--fs-accent);
  color: #ffffff;
  border-radius: 6px;
  font-weight: 600;
  padding: 14px 28px;
  text-decoration: none;
  white-space: nowrap;
}
.fs-btn:hover, .fs-btn:focus-visible { background: var(--fs-accent-dark); color: #ffffff; }
.fs-btn-small {
  padding: 8px 16px;
  font-size: 0.875rem;
}

/* Hero */
.fs-hero {
  background: var(--fs-ink);
  color: var(--fs-paper);
}
.fs-hero p { color: var(--fs-paper); }
.fs-kicker {
  font-family: var(--fs-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fs-glow);
}

/* Headings */
.fs-h1, .fs-h2, .fs-h3 {
  font-family: var(--fs-serif);
  line-height: 1.15;
  color: var(--fs-ink);
}
.fs-hero .fs-h1, .fs-strip .fs-h3 { color: var(--fs-paper); }
.fs-h1 { font-weight: 800; font-size: 2.25rem; }
.fs-h1 em { font-style: italic; font-weight: 700; color: var(--fs-glow); }
.fs-h2 { font-weight: 700; font-size: 1.75rem; }
.fs-h3 { font-weight: 700; font-size: 1.25rem; }
@media (min-width: 768px) {
  .fs-h1 { font-size: 3rem; }
  .fs-h2 { font-size: 2rem; }
}

/* The film strip with sprocket holes along the top and bottom 14 px */
.fs-strip {
  background-color: var(--fs-ink-2);
  color: var(--fs-paper);
  padding: 34px 20px;
  position: relative;
}
.fs-strip::before, .fs-strip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  background: repeating-linear-gradient(
    to right,
    transparent 0 6px,
    var(--fs-paper) 6px 16px,
    transparent 16px 22px
  );
  background-size: 22px 10px;
  background-repeat: repeat-x;
  background-position: 0 2px;
}
.fs-strip::before { top: 6px; }
.fs-strip::after { bottom: 6px; }
.fs-frame {
  display: block;
  border: 1px solid rgba(216, 205, 184, 0.25);
  padding: 20px;
  color: var(--fs-paper);
  text-decoration: none;
}
.fs-frame:hover, .fs-frame:focus-visible { border-color: var(--fs-glow); }
.fs-frame-no {
  font-family: var(--fs-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--fs-glow);
}

/* Cards, tables, notes, links on paper */
.fs-card {
  background: var(--fs-paper-2);
  border: 1px solid var(--fs-line);
  border-radius: 4px;
  padding: 20px;
}
.fs-card a:not(.fs-btn), .fs-table a { color: var(--fs-accent-dark); }
a.fs-card { display: block; color: var(--fs-ink); text-decoration: none; }
a.fs-card:hover, a.fs-card:focus-visible { border-color: var(--fs-accent-dark); }
.fs-tablewrap { overflow-x: auto; }
.fs-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.fs-table th {
  background: var(--fs-paper-2);
  font-family: var(--fs-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  text-align: left;
  color: var(--fs-ink);
}
.fs-table th, .fs-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--fs-line);
  vertical-align: top;
}
.fs-table td.fs-num { font-weight: 600; }
.fs-table td:first-child { min-width: 11rem; }
@media (min-width: 768px) {
  .fs-table td.fs-num { white-space: nowrap; }
}
.fs-table .fs-group td {
  font-family: var(--fs-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fs-muted);
  padding-top: 18px;
}
.fs-note { color: var(--fs-muted); font-size: 0.875rem; }
.fs-label {
  font-family: var(--fs-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.fs-link {
  color: var(--fs-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fs-link:hover, .fs-link:focus-visible { color: var(--fs-accent-dark); }
.fs-list { list-style: disc; padding-left: 1.25rem; }
.fs-list li + li { margin-top: 0.4rem; }

/* Footer */
.fs-footer {
  background: var(--fs-ink);
  color: rgba(246, 241, 231, 0.8);
}
.fs-footer .fs-label { color: var(--fs-glow); }
.fs-footer a { color: var(--fs-paper); text-decoration: none; }
.fs-footer a:hover, .fs-footer a:focus-visible { color: var(--fs-glow); text-decoration: underline; }