/* noir.photos SEO pages: the token values below mirror docs/design/tokens.css. */
:root {
  color-scheme: dark;
  --color-bg: #0A0A0A;
  --color-surface: #161616;
  --color-ink: #F2F2F2;
  --color-muted: #A3A3A3;
  --color-line: #232323;
  --color-border: #707070;
  --color-border-strong: #949494;
  --color-safelight: #F6844C;
  --color-safelight-strong: #FCA479;
  --color-safelight-fill: #BD3E0F;
  --color-safelight-fill-hover: #97310C;
  --color-safelight-tint: #2F180E;
  --color-on-safelight: #FFFFFF;
  --color-danger: #F25F77;
  --color-danger-tint: #361218;
  --color-warning: #E6C74C;
  --color-warning-tint: #2C2711;
  --color-focus-ring: var(--color-safelight-strong);
  --checker-a: color-mix(in srgb, var(--color-ink) 8%, var(--color-bg));
  --checker-b: var(--color-bg);
  --shadow-sm: none;
  --shadow-md: none;
  --font-display: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "URW Palladio", "Noto Serif", serif;
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: "Courier Prime Code", "Courier Prime", ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, "Liberation Mono", monospace;
  --text-small: .875rem;
  --text-body: 1rem;
  --text-lead: clamp(1.05rem, 2.2vw, 1.3rem);
  --text-h3: 1.125rem;
  --text-h2: clamp(1.5rem, 3.6vw, 2.1rem);
  --text-h1: clamp(2.25rem, 6.5vw, 4rem);
  --text-mono-data: 1rem;
  --text-mono-data-lg: clamp(1.9rem, 5.5vw, 3rem);
  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-mono: 1.45;
  --tracking-tight: -.015em;
  --tracking-snug: -.01em;
  --tracking-normal: 0;
  --tracking-wide: .08em;
  --tracking-mono: .01em;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-xs: .1875rem;
  --radius-sm: .375rem;
  --radius-md: .5rem;
  --radius-lg: .625rem;
  --radius-pill: 999px;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --color-bg: #EFEFEF;
    --color-surface: #FFFFFF;
    --color-ink: #121212;
    --color-muted: #4C4C4C;
    --color-line: #DDDDDD;
    --color-border: #7A7A7A;
    --color-border-strong: #5C5C5C;
    --color-safelight: #9C3B11;
    --color-safelight-strong: #6E2A0C;
    --color-safelight-fill: #9C3B11;
    --color-safelight-fill-hover: #6E2A0C;
    --color-safelight-tint: #FAEBE5;
    --color-on-safelight: #FFFFFF;
    --color-danger: #A51D34;
    --color-danger-tint: #FBE9EC;
    --color-warning: #7B5D0A;
    --color-warning-tint: #FAF5E1;
    --color-focus-ring: var(--color-safelight-strong);
    --shadow-sm: 0 1px 2px rgb(18 18 18 / 8%), 0 1px 1px rgb(18 18 18 / 5%);
    --shadow-md: 0 10px 28px rgb(18 18 18 / 16%), 0 2px 6px rgb(18 18 18 / 9%);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #EFEFEF;
  --color-surface: #FFFFFF;
  --color-ink: #121212;
  --color-muted: #4C4C4C;
  --color-line: #DDDDDD;
  --color-border: #7A7A7A;
  --color-border-strong: #5C5C5C;
  --color-safelight: #9C3B11;
  --color-safelight-strong: #6E2A0C;
  --color-safelight-fill: #9C3B11;
  --color-safelight-fill-hover: #6E2A0C;
  --color-safelight-tint: #FAEBE5;
  --color-on-safelight: #FFFFFF;
  --color-danger: #A51D34;
  --color-danger-tint: #FBE9EC;
  --color-warning: #7B5D0A;
  --color-warning-tint: #FAF5E1;
  --color-focus-ring: var(--color-safelight-strong);
  --shadow-sm: 0 1px 2px rgb(18 18 18 / 8%), 0 1px 1px rgb(18 18 18 / 5%);
  --shadow-md: 0 10px 28px rgb(18 18 18 / 16%), 0 2px 6px rgb(18 18 18 / 9%);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0A0A0A;
  --color-surface: #161616;
  --color-ink: #F2F2F2;
  --color-muted: #A3A3A3;
  --color-line: #232323;
  --color-border: #707070;
  --color-border-strong: #949494;
  --color-safelight: #F6844C;
  --color-safelight-strong: #FCA479;
  --color-safelight-fill: #BD3E0F;
  --color-safelight-fill-hover: #97310C;
  --color-safelight-tint: #2F180E;
  --color-on-safelight: #FFFFFF;
  --color-danger: #F25F77;
  --color-danger-tint: #361218;
  --color-warning: #E6C74C;
  --color-warning-tint: #2C2711;
  --color-focus-ring: var(--color-safelight-strong);
  --shadow-sm: none;
  --shadow-md: none;
}
html { background: var(--color-bg); }
body { margin: 0; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-normal); }
*, *::before, *::after { box-sizing: border-box; font-synthesis: none; }
a { color: var(--color-ink); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 3px; }
.skip-link { position: absolute; left: var(--space-4); top: var(--space-2); transform: translateY(-180%); z-index: 2; padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.skip-link:focus { transform: translateY(0); }
.site-header, .site-footer__inner { width: min(100% - 2rem, 78rem); margin-inline: auto; }
.site-header { min-height: 4.75rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); border-bottom: 1px solid var(--color-line); }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 650; letter-spacing: .02em; }
.brand-mark { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-ink); font-family: var(--font-display); font-size: .875rem; }
.brand-dot, .eyebrow { color: var(--color-muted); }
.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); color: var(--color-muted); font-size: var(--text-small); }
.site-nav a { color: inherit; }
.lang-switch { display: inline-flex; gap: var(--space-3); }
.lang-switch a[aria-current="page"] { color: var(--color-safelight); text-decoration: underline 2px currentColor; }
.theme-button { min-height: 2.75rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); font: inherit; cursor: pointer; }
.seo-main { width: min(100% - 2rem, 68rem); margin-inline: auto; }
.seo-hero { max-width: 58rem; padding: clamp(4rem, 10vw, 8rem) 0 var(--space-12); }
.eyebrow { margin: 0 0 var(--space-4); font-size: var(--text-small); font-weight: 700; letter-spacing: var(--tracking-wide); }
h1, h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
h1 { max-width: 18ch; margin: 0; font-size: var(--text-h1); }
h2 { margin: 0 0 var(--space-4); font-size: var(--text-h2); }
.seo-intro { max-width: 62ch; margin: var(--space-6) 0 0; color: var(--color-muted); font-size: var(--text-lead); }
.seo-section, .seo-faq, .related-tools { border-top: 1px solid var(--color-line); padding: var(--space-10) 0; }
.seo-section p, .seo-faq p { max-width: 68ch; margin: 0; }
.seo-list { max-width: 68ch; padding-left: 1.25rem; color: var(--color-muted); }
.seo-list li + li { margin-top: var(--space-2); }
.seo-notice { max-width: 62ch; margin: var(--space-5) 0 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); color: var(--color-muted); border-radius: var(--radius-sm); }
.seo-notice span { color: var(--color-ink); font-weight: 650; }
.seo-cta-wrap { margin: var(--space-8) 0 0; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); text-decoration: none; font-weight: 650; }
.button-primary { background: var(--color-safelight-fill); color: var(--color-on-safelight); }
.button-primary:hover { background: var(--color-safelight-fill-hover); }
.faq-list { display: grid; gap: var(--space-3); }
details { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
summary { min-height: 2.75rem; padding: var(--space-4); cursor: pointer; font-size: var(--text-h3); font-weight: 600; }
details p { padding: 0 var(--space-4) var(--space-4); color: var(--color-muted); }
.related-tools ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3); padding: 0; margin: 0 0 var(--space-5); list-style: none; }
.related-tools li { min-height: 2.75rem; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.related-tools li a { display: block; }
.related-home { color: var(--color-muted); }
.site-footer { margin-top: var(--space-12); border-top: 1px solid var(--color-line); }
.site-footer__inner { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 2fr); gap: var(--space-6); padding: var(--space-8) 0; color: var(--color-muted); font-size: var(--text-small); }
.site-footer__identity { display: grid; align-content: start; gap: var(--space-2); }
.site-footer__brand { color: var(--color-ink); font-weight: 650; }
.footer-tools, .footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; }
.footer-tools a, .footer-legal a { color: inherit; }
.site-footer .lang-switch { justify-self: end; }
.site-footer__meta { grid-column: 1 / -1; margin: 0; color: var(--color-muted); }
@media (max-width: 700px) {
  .site-header { align-items: flex-start; flex-wrap: wrap; padding: var(--space-4) 0; }
  .site-nav { flex-wrap: wrap; gap: var(--space-3); }
  .site-nav > a { display: none; }
  .site-footer__inner { display: block; padding: var(--space-6) 0; }
  .site-footer__identity, .footer-tools, .footer-legal, .site-footer .lang-switch { margin-bottom: var(--space-5); }
  .site-footer .lang-switch { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}