@import url('/shared/header.css');

/* Shared public design system. Page styles own layout, never the palette or navigation. */
:root {
  --qf-wood: #daa268;
  --qf-bevel-shadow: #713c15;
  --qf-bevel-light: #f7d3a0;
  --qf-wood-soft: #e0b17e;
  --qf-wood-inset: #bc8958;
  --qf-surface: var(--qf-wood);
  --qf-surface-soft: var(--qf-wood-soft);
  --qf-surface-inset: var(--qf-wood-inset);
  --qf-button-bg: #40554a;
  --qf-button-hover: #293f34;
  --qf-button-text: #fff;
  --qf-ink: #33281e;
  --qf-muted: #59412d;
  --qf-line: #78512f55;
  --qf-accent: #40554a;
  --qf-accent-hover: #293f34;
  --qf-surface-texture: url('/assets/wood-grain.png');
  --qf-surface-wash: #daa268cc;
  --qf-texture-scale: 300px 300px;
  --qf-radius: 10px;
  --qf-width: 1120px;
  --qf-gutter: clamp(24px, 5vw, 64px);
  --qf-font: 'Segoe UI', Arial, sans-serif;
  --qf-header-height: 64px;
  --qf-header-text: #fff;
  --qf-board-fill: linear-gradient(#daa268ad, #daa268ad), url('/assets/wood-painted.svg') center / 680px 340px repeat;
}
/* Reveal more painted grain through luminosity, preserving the base wood hue. */
:is(.page-content, .qf-page, .docs-shell)::before {
  background-blend-mode: normal, luminosity, normal;
}
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }

.public-site {
  --qf-surface-fill: linear-gradient(var(--qf-surface-wash), var(--qf-surface-wash)), var(--qf-surface-texture) left top / var(--qf-texture-scale) repeat, var(--qf-surface);
  --paper: var(--qf-surface); --ink: var(--qf-ink); --text: var(--qf-ink);
  --muted: var(--qf-muted); --line: var(--qf-line); --accent: var(--qf-accent);
  --soft: var(--qf-surface-inset); --surface: var(--qf-surface); --surface-raised: var(--qf-surface-soft);
  --panel: var(--qf-surface-soft); --sans: var(--qf-font); --serif: Georgia, serif;
  --sky-ground: #7b61bb;
  margin: 0; padding: 0; position: relative; isolation: isolate; min-height: 100svh;
  font: 15px/1.65 var(--qf-font); color: var(--qf-ink); background: var(--sky-ground); color-scheme: light;
}
.public-site[data-sky='day'] { --sky-ground: #feb688; }
.public-site[data-sky='night'] {
  --qf-surface: #1d3252;
  --qf-surface-soft: #24395c;
  --qf-surface-inset: #172b47;
  --qf-surface-wash: #1d3252ed;
  --qf-ink: #f3f3ef;
  --qf-muted: #c3cede;
  --qf-line: #a9b9d433;
  --qf-accent: #edc991;
  --qf-accent-hover: #f5dbb1;
  color-scheme: dark;
}

.public-site * { box-sizing: border-box; }
.public-site [hidden] { display: none !important; }
.public-site a { color: inherit; text-decoration: none; }
.public-site img { display: block; max-width: 100%; }
.public-site button, .public-site input { font: inherit; }
.public-site button { cursor: pointer; }
.public-site button:disabled { cursor: default; opacity: .5; }
.public-site :is(a, button, input, summary):focus-visible { outline: 2px solid var(--qf-accent); outline-offset: 4px; }
.public-site :is(h1, h2, h3) { font-family: var(--qf-font); font-weight: 750; line-height: 1.15; }
.public-site h1 { font-size: clamp(32px, 4vw, 48px); letter-spacing: -1.3px; }
.public-site .eyebrow { color: var(--qf-accent); font-size: 10px; font-weight: 750; letter-spacing: 2px; margin: 0 0 18px; }
.public-site .muted { color: var(--qf-muted); }
.qf-surface { position: relative; width: min(var(--qf-width), calc(100% - 64px)); margin-inline: auto; background: var(--qf-surface-fill); border: 1px solid var(--qf-line); border-radius: var(--qf-radius); box-shadow: 0 18px 60px #18162224; }
.qf-page { margin-block: 64px 32px; padding: 56px var(--qf-gutter) 64px; min-height: 65svh; }
.qf-page-heading { margin-bottom: 40px; }
.qf-page-heading h1 { margin: 0 0 16px; }
.qf-page-heading > p:last-child { margin: 0; max-width: 650px; }
.qf-skip { position: absolute; left: 20px; top: -100px; padding: 12px 20px; background: var(--qf-surface); color: var(--qf-ink); z-index: 20; }
.qf-skip:focus { top: 12px; }
.qf-brand { display: block; flex-shrink: 0; }
.qf-brand, .qf-brand img, .hero-logo { user-select: none; -webkit-user-drag: none; }
.qf-brand img { width: 150px; height: auto; max-height: 64px; object-fit: contain; }
.qf-sky { position: absolute; top: var(--qf-header-height); inset-inline: 0; height: clamp(760px, 66vw, 1100px); z-index: -1; pointer-events: none; mask-image: linear-gradient(#000 0%, #000 48%, transparent 100%); }
.qf-sky-layer { position: absolute; inset: 0; background: center top / cover no-repeat; transition: opacity 450ms ease; }
.qf-sky-night { background-image: url('/assets/quiet-falls-night-sky.png'); }
.qf-sky-day { background-image: url('/assets/quiet-falls-day-sky.png'); opacity: 0; }
[data-sky='day'] .qf-sky-night { opacity: 0; }
[data-sky='day'] .qf-sky-day { opacity: 1; }
.public-site :is(.button, .primary, .secondary) { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 12px 20px; min-height: 44px; font-size: 13px; font-weight: 700; line-height: 1.4; border: 1px solid transparent; border-radius: 6px; background: var(--qf-button-bg); color: var(--qf-button-text); box-shadow: none; }
.public-site :is(.button, .primary):hover { background-color: var(--qf-button-hover); color: #fff; }
.public-site .secondary { background: var(--qf-surface-soft); border-color: var(--qf-line); color: var(--qf-ink); }
.public-site .secondary:hover { background-color: var(--qf-surface-inset); }
/* A painted face, a narrow bevel and a short extrusion share one control style. */
.public-site :is(.button, .primary, .secondary, .night-secondary) {
  --control-edge: #23382d;
  border: 1px solid var(--control-edge);
  background-image: linear-gradient(to bottom, #ffffff24, #ffffff03 45%, #00000014);
  box-shadow: inset 0 1px 0 #ffffff66, inset 0 -2px 0 #00000024,
    0 3px 0 var(--control-edge), 0 5px 8px #00000026;
  text-shadow: 0 1px 1px #00000070;
  transform: translateY(0);
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.public-site :is(.secondary, .night-secondary) {
  --control-edge: color-mix(in srgb, var(--qf-surface-inset) 75%, #101b20);
}
.public-site .secondary { text-shadow: 0 1px 1px #00000020; }
.public-site .night-secondary { background-color: #29425b; color: #fff; border-radius: 6px; }
.public-site :is(.button, .primary, .secondary, .night-secondary):hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #ffffff77, inset 0 -2px 0 #00000024,
    0 4px 0 var(--control-edge), 0 7px 10px #0000002e;
}
.public-site :is(.button, .primary, .secondary, .night-secondary):active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: inset 0 1px 2px #00000030, 0 1px 0 var(--control-edge);
}
@media (prefers-reduced-motion: reduce) {
  .public-site :is(.button, .primary, .secondary, .night-secondary) { transition: none; }
}
.qf-footer { margin-block: 0 32px; padding: 24px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 12px; color: var(--qf-muted); }
.qf-footer p { margin: 0; }
.qf-footer p a { text-decoration: underline; text-underline-offset: 3px; }
.qf-footer .qf-brand img { width: 130px; }
/* Post cards are the same component on the homepage and in the devlog. */
.qf-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.qf-post { min-width: 0; overflow: hidden; border: 1px solid var(--qf-line); border-radius: 8px; background: var(--qf-surface-soft); }
.qf-post > a { display: flex; flex-direction: column; height: 100%; }
.qf-post:hover { border-color: var(--qf-accent); }
.qf-post:focus-within { outline: 2px solid var(--qf-accent); outline-offset: 4px; }
.qf-post-cover { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; }
.qf-post-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--qf-surface-fill); color: var(--qf-ink); }
.qf-post-placeholder > span { font-size: clamp(28px, 3vw, 38px); font-weight: 750; letter-spacing: -1.5px; }
.qf-post-placeholder small { font-size: 8px; letter-spacing: 2px; }
.qf-post-copy { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.qf-post time { font-size: 11px; color: var(--qf-muted); }
.public-site .qf-post :is(h2, h3) { font-size: 23px; line-height: 1.25; letter-spacing: -.5px; margin: 12px 0; overflow-wrap: anywhere; }
.qf-post-copy p { font-size: 13px; line-height: 1.75; color: var(--qf-muted); margin: 0 0 24px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qf-post-link { margin-top: auto; padding-top: 10px; color: var(--qf-accent); font-size: 12px; font-weight: 700; }
.qf-post-link > span { margin-left: 8px; }
.home-posts-message, .empty-state { grid-column: 1 / -1; margin: 0; padding: 28px; border: 1px solid var(--qf-line); border-radius: 8px; background: var(--qf-surface-soft); color: var(--qf-muted); font-size: 14px; line-height: 1.8; }
.home-posts-message a, .empty-state a { color: var(--qf-accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .qf-brand img { width: 125px; }
  .qf-surface { width: calc(100% - 28px); }
  .qf-page { margin-top: 32px; padding: 32px 24px 40px; }
  .qf-footer { padding: 24px; flex-wrap: wrap; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) { .qf-sky-layer { transition: none; } }

/* One painted wooden cap for every main content panel. */
:is(.page-content, .qf-page, .docs-shell)::before {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  top: -15px; left: -12px; width: calc(100% + 24px); height: 34px;
  background: var(--qf-board-fill), var(--qf-wood);
  border: 1px solid var(--qf-bevel-shadow); border-top: 1px solid var(--qf-bevel-light); border-bottom: 2px solid var(--qf-bevel-shadow);
  border-radius: 12px 7px 10px 6px / 6px 5px 6px 4px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--qf-bevel-light) 50%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--qf-bevel-shadow) 45%, transparent), 0 3px 6px #0c172626;
}
.qf-page { margin-top: 88px; }
@media (max-width: 760px) {
  :is(.page-content, .qf-page, .docs-shell)::before { left: -6px; width: calc(100% + 12px); top: -11px; height: 24px; }
  .qf-page { margin-top: 56px; }
}