/* ==========================================================================
   Lowkey Workshop — sawdust & lamplight
   Warm near-black, amber accent, pegboard texture as the only decoration.
   Fonts: Sora (display/wordmark), Atkinson Hyperlegible (body) — self-hosted.
   ========================================================================== */

:root {
  --bench: #14110D;      /* page background — warm near-black */
  --shadow: #1E1913;     /* cards, surfaces */
  --grain: #2E2619;      /* borders, rules */
  --grain-strong: #4A3D28;
  --paper: #EAE3D6;      /* primary ink  (≈14.4:1 on bench) */
  --dim: #A2937D;        /* secondary ink (≈6.3:1 on bench) */
  --lamplight: #E6A94E;  /* accent        (≈8.6:1 on bench) */
  --ember: #C97F3D;

  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 960px;
  --radius: 10px;
}

* { box-sizing: border-box; }

html {
  background: var(--bench);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bench);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

p { max-width: 64ch; }

a { color: var(--lamplight); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ember); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--lamplight);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--shadow);
  color: var(--paper);
  padding: 10px 16px;
  z-index: 10;
}
.skip-link:focus { left: 12px; top: 12px; }

.section-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 22px;
}

/* --------------------------------------------------------------------------
   Wordmark — logo 04 "Set Low": lowkey muted above, workshop bold on the
   amber bench line. The word "lowkey" is literally low-key.
   -------------------------------------------------------------------------- */

.wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
  text-decoration: none;
  font-family: var(--font-display);
}
.wordmark__low {
  color: var(--dim);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.wordmark__shop {
  color: var(--paper);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  border-bottom: 2px solid var(--lamplight);
  padding-bottom: 2px;
}
.wordmark:hover .wordmark__shop { color: var(--paper); }

/* Header / nav */

.header {
  border-bottom: 1px solid var(--grain);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
}
.nav {
  display: flex;
  gap: 26px;
  align-items: baseline;
}
.nav a {
  color: var(--dim);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 15px;
}
.nav a:hover { color: var(--paper); }
.nav__lang { border-left: 1px solid var(--grain); padding-left: 26px; }

/* --------------------------------------------------------------------------
   Hero — one lamp on
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 84px;
}
.hero--small { padding: 72px 0; }

.hero__glow {
  position: absolute;
  top: -180px;
  left: 6%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 169, 78, 0.14) 0%, rgba(230, 169, 78, 0) 62%);
  pointer-events: none;
}

.hero__logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
  font-family: var(--font-display);
  margin-bottom: 40px;
}
.hero__logo-low {
  color: var(--dim);
  font-weight: 400;
  font-size: clamp(18px, 3vw, 24px);
}
.hero__logo-shop {
  color: var(--paper);
  font-weight: 700;
  font-size: clamp(30px, 5.4vw, 44px);
  letter-spacing: -0.015em;
  border-bottom: 3px solid var(--lamplight);
  padding-bottom: 6px;
}

.hero__title {
  font-size: clamp(28px, 4.6vw, 40px);
  font-weight: 650;
}
.hero__description {
  color: var(--dim);
  font-size: 19px;
  margin: 16px 0 0;
  max-width: 56ch;
}
.hero__nots {
  color: var(--paper);
  font-size: 17px;
  margin: 14px 0 0;
}

.btn {
  display: inline-block;
  margin-top: 28px;
  border: 1px solid var(--grain-strong);
  background: var(--shadow);
  color: var(--paper);
  padding: 11px 20px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  text-decoration: none;
}
.btn:hover { border-color: var(--lamplight); color: var(--paper); }

/* --------------------------------------------------------------------------
   Pegboard shelf — the apps
   -------------------------------------------------------------------------- */

.shelf { padding: 40px 0 30px; }

.pegboard {
  border: 1px solid var(--grain);
  border-radius: var(--radius);
  padding: 28px;
  background-color: #171310;
  background-image: radial-gradient(circle, #241E15 1.6px, transparent 1.6px);
  background-size: 26px 26px;
}

.apps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.app {
  background: var(--shadow);
  border: 1px solid var(--grain);
  border-radius: 9px;
  padding: 18px 20px;
}
.app--empty { opacity: 0.62; }

.app__peg {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--peg, var(--grain));
  margin-bottom: 12px;
}
.app__peg--empty {
  background: transparent;
  border: 1px dashed var(--grain-strong);
}

.app__name {
  font-size: 17px;
  font-weight: 600;
}
.app__name a { color: var(--paper); text-decoration: none; }
.app__name a:hover { color: var(--lamplight); }

.app__desc {
  color: var(--dim);
  font-size: 14.5px;
  margin: 6px 0 0;
}
.app__status {
  color: var(--dim);
  font-size: 12.5px;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 12px 0 0;
}
.app--empty .app__desc { font-style: italic; }

/* --------------------------------------------------------------------------
   The four Lows
   -------------------------------------------------------------------------- */

.lows { padding: 64px 0 20px; }

.lows__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border: 1px solid var(--grain);
  border-radius: var(--radius);
  overflow: hidden;
}
.low {
  padding: 22px 24px;
  border-right: 1px solid var(--grain);
  border-bottom: 1px solid var(--grain);
}
.low:last-child { border-right: 0; }
@media (min-width: 861px) { .low { border-bottom: 0; } }
@media (max-width: 860px) { .low:nth-child(even) { border-right: 0; } }

.low h3 {
  font-size: 16px;
  color: var(--paper);
}
.low p {
  color: var(--dim);
  font-size: 14.5px;
  margin: 6px 0 0;
}

.lows__never {
  color: var(--dim);
  font-size: 15px;
  margin-top: 22px;
  max-width: 64ch;
}

/* Support */

.support { padding: 56px 0 90px; }
.support__body { color: var(--dim); font-size: 16.5px; margin: 0; }

/* --------------------------------------------------------------------------
   Long-form pages — /apps, /philosophy, /support, /privacy
   The home page carries short blurbs; these carry the full versions.
   -------------------------------------------------------------------------- */

.details { padding: 20px 0 90px; }

/* "Read more" style link that closes a section */
.more {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: 15px;
}

/* One app, at length */
.app-detail {
  border-top: 1px solid var(--grain);
  padding: 34px 0 6px;
}
.app-detail:first-child { border-top: 0; }

.app-detail__peg { margin-bottom: 14px; }

.app-detail__name {
  font-size: 23px;
  font-weight: 650;
}
.app-detail .app__status { margin: 8px 0 0; }

.app-detail__long { margin: 16px 0 0; }
.app-detail__for {
  color: var(--dim);
  font-size: 15.5px;
  margin: 12px 0 0;
  font-style: italic;
}
.app-detail--empty { opacity: 0.62; }

/* One quality / one policy section, at length.
   Sections are marked by the heading's amber bench line — the wordmark's own
   device (.wordmark__shop) — rather than by a rule between them. A 1px --grain
   separator sits at ~1.35:1 on --bench, which is not a visible boundary. */
.quality {
  padding: 38px 0 6px;
}

.quality__title {
  font-size: 21px;
  font-weight: 650;
  display: inline-block;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--lamplight);
}
.quality__lead {
  color: var(--paper);
  margin: 12px 0 0;
}
.quality__long {
  color: var(--dim);
  margin: 12px 0 0;
}
/* Body copy on pages whose sections have no lead above them to be secondary to
   (/support, /privacy). Same rhythm as .quality__long, primary ink — a whole page
   of --dim reads as supporting detail with nothing to support. */
.quality__body {
  color: var(--paper);
  margin: 12px 0 0;
}

.promises {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  max-width: 64ch;
}
.promises li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  color: var(--paper);
}
.promises li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--lamplight);
}

.hero__nots--quiet { color: var(--dim); font-size: 14.5px; }

/* --------------------------------------------------------------------------
   Browser SBOM table — /bom. Dormant until canon exports bom.*.
   Scrolls inside its own wrapper so a narrow phone never scrolls the page.
   -------------------------------------------------------------------------- */

.bom-table-wrap {
  overflow-x: auto;
  margin: 30px 0 0;
}

.bom {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  text-align: left;
  font-size: 15px;
}

.bom th,
.bom td {
  border-bottom: 1px solid var(--grain);
  padding: 16px 18px 16px 0;
  vertical-align: top;
  font-weight: 400;
}

.bom thead th {
  border-bottom: 2px solid var(--lamplight);
  padding-bottom: 8px;
  color: var(--dim);
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bom__name {
  color: var(--paper);
  font-weight: 600;
}
.bom__version,
.bom__copyright,
.bom__note {
  display: block;
  color: var(--dim);
  font-weight: 400;
  font-size: 14px;
  margin-top: 5px;
}
/* The justification column — the only judgment on the page, so it reads as
   primary text rather than as a caption. */
.bom__why {
  color: var(--paper);
  max-width: 34ch;
}

/* An optional per-row note: for facts that need explaining rather than
   correcting. Italic so it reads as an aside, not as more transcription. */
.bom__note { font-style: italic; }

.bom__served code {
  font-size: 13px;
  color: var(--dim);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   FAQ — native <details>, no JavaScript. The question is the summary; the
   answer opens beneath it. Nothing moves until you touch it, which is the
   same rule the rest of the site follows.
   -------------------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--grain);
  padding: 4px 0 10px;
}
.faq:first-child { border-top: 0; }

.faq__question {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--paper);
  padding: 20px 0 20px 30px;
  position: relative;
  cursor: pointer;
  list-style: none;          /* Firefox */
  text-wrap: balance;
}
.faq__question::-webkit-details-marker { display: none; }

/* The marker: a lit peg when open, an empty hole when closed. */
.faq__question::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.55em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--grain-strong);
  background: transparent;
}
.faq[open] > .faq__question::before {
  background: var(--lamplight);
  border-color: var(--lamplight);
}

.faq__question:hover { color: var(--lamplight); }
.faq__question:focus-visible {
  outline: 2px solid var(--lamplight);
  outline-offset: 3px;
  border-radius: 2px;
}

.faq__short {
  color: var(--paper);
  margin: 0 0 0 30px;
}
.faq__long {
  color: var(--dim);
  margin: 12px 0 14px 30px;
}

@media (max-width: 560px) {
  .faq__question { padding-left: 26px; }
  .faq__short, .faq__long { margin-left: 26px; }
}

/* Footer */

.footer { border-top: 1px solid var(--grain); }
/* Three stacked rows, centred — copyright, links, closing line — matching the
   Leet Enterprises footer. This was one space-between row that wrapped, which
   put the three parts side by side on a wide screen and in an arbitrary order
   on a narrow one, because wrapping is not stacking. Same tokens, same type
   scale; only the arrangement changes. */
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding-top: 22px;
  padding-bottom: 30px;
  color: var(--dim);
  font-size: 13.5px;
}
.footer a { color: var(--dim); }
.footer a:hover { color: var(--paper); }
.footer__quiet { font-style: italic; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }

/* Current page in the nav — a lit peg, not a heavier weight. */
.nav a[aria-current="page"] { color: var(--paper); }

/* Motion discipline: the site does not move unless you touch it. */
@media (prefers-reduced-motion: no-preference) {
  .app, .btn { transition: border-color 0.18s ease; }
}