/* The foundation every page on blacksquare.art fetches: the tokens, the base
   rules, the furniture and the section grid. What is here is what two or more
   pages draw. Anything one page alone needs stays in that page's own <style>,
   because a rule added here is a rule every page pays for. Served by
   config/landing.py from the LANDING_FILES allowlist, gzipped, with the same
   five-minute lifetime as the pages, so a release reaches everyone without a
   fingerprinted name.

   Tokens follow the product's design system (frontend/src/styles/base.css):
   paper, ink, hairlines, no radius, no shadow, no gradient. Single theme by
   choice: this site is paper. */
:root {
  --paper: #FFFFFF;
  --paper-shade: #F4F4F2;
  --ink: #0A0A0A;
  --ink-mid: #6B6B6B;
  --ink-faint: #A5A5A5;
  --rule: #0A0A0A;
  --rule-faint: rgba(10, 10, 10, 0.15);
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px; --s7: 96px; --s8: 144px;
  --page-x: clamp(20px, 3.5vw, 56px);
  --font-display: 'Archivo', 'Noto Sans TC', system-ui, sans-serif;
  --font-text: 'Work Sans', 'Noto Sans TC', system-ui, sans-serif;
  --track-mega: -0.035em;
  --track-display: -0.02em;
  --track-label: 0.18em;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: var(--font-text); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; overflow-x: hidden; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---------- furniture ---------- */
/* In the flow. The home page sets this absolute, over its sticky stage. */
.lnav { display: flex; justify-content: space-between; align-items: center; height: 64px; padding: 0 var(--page-x); }
.wordmark { font: 500 1.125rem/1 var(--font-display); letter-spacing: var(--track-display); color: var(--ink); text-decoration: none; }
.lnav-links { display: flex; gap: var(--s4); }
.lnav-links a { font: 600 10px/1 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; transition: border-color 80ms linear; }
.lnav-links a:hover { border-bottom-color: var(--rule); }
@media (max-width: 560px) { .lnav-links a:not(:last-child) { display: none; } }

.label { font: 600 10px/1.2 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; margin: 0; color: var(--ink); }
.hero-h { font: 500 clamp(2rem, 4vw, 3.5rem)/0.95 var(--font-display); letter-spacing: var(--track-mega); text-wrap: balance; margin: 0; color: var(--ink); max-width: 11em; }
.h2 { font: 500 clamp(1.75rem, 3.2vw, 3rem)/1.02 var(--font-display); letter-spacing: var(--track-display); text-wrap: balance; max-width: 16em; margin: 0; color: var(--ink); }
.body-p { font-size: 15px; line-height: 1.5; max-width: 34em; margin: 0; color: var(--ink); }
.body-p + .body-p { margin-top: var(--s3); }
.cta-row { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.btn { display: inline-block; background: var(--ink); color: var(--paper); font: 600 10px/1 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; padding: 15px 22px 14px; border: 1px solid var(--ink); text-decoration: none; cursor: pointer; transition: background-color 80ms linear, color 80ms linear; }
.btn:hover { background: var(--paper); color: var(--ink); }
.link { font: 600 10px/1 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid var(--rule); }
.link-mail { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-faint); }
.link-mail:hover { border-bottom-color: var(--rule); }

/* ---------- sections ---------- */
.sec { padding: var(--s7) var(--page-x); border-top: 1px solid var(--rule); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s5); align-items: start; }
/* Copy under a section head starts where the head's second column does. That
   column begins a third of the way across plus the whole gap, so the margin
   is (width + 2 gaps) / 3; with one gap in the sum every heading sat a third
   of a gap to the right of its own paragraph. */
.sec-p { margin-top: var(--s5); margin-left: calc((100% + 2 * var(--s5)) / 3); }
/* A column-gap rather than a left padding on every cell but the first: the
   rule belongs to the cell on its left, so the gap falls on the far side of
   it and each rule ends up with the same air either side. It also keeps the
   first cell flush with the section's own left edge, and it survives the
   grid dropping to two columns and then to one without needing to know which
   cells have a rule in front of them. */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--s4); border-top: 1px solid var(--rule); margin-top: var(--s6); }
/* Two cells with the four-cell grid's rules: one hairline between them. */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--s4); border-top: 1px solid var(--rule); margin-top: var(--s6); }
.cell { padding: var(--s4) var(--s4) var(--s5) 0; border-right: 1px solid var(--rule-faint); }
.cell:last-child { border-right: 0; }
.cell h3 { font: 500 1.375rem/1.1 var(--font-display); letter-spacing: var(--track-display); margin: 0 0 var(--s3); }
.cell p { margin: 0; color: var(--ink-mid); font-size: 13px; max-width: 24em; }
.cols-2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6); align-items: start; }
.col-copy { display: grid; gap: var(--s4); }
.sec-cta { display: grid; gap: var(--s5); }
/* This section is a grid, so its gap already spaces these. The block-flow
   margins they carry in every other section would stack on top of it. */
.sec-cta .body-p, .sec-cta .sec-p { margin-top: 0; }
.sec-note { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; margin: var(--s5) 0 0; font-size: 13px; color: var(--ink-mid); max-width: 44em; }
/* The button is a mail link, and the address sits beside it in plain sight: a
   visitor whose browser does nothing with mailto: can still read and copy it. */
.cta-mail { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin: 0; margin-left: calc((100% + 2 * var(--s5)) / 3); font-size: 15px; }
.cta-mail .btn { white-space: nowrap; }
/* Questions in two columns, each a heading and its answer, no accordion:
   the answers are short and hiding them would only add a click. */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); margin: var(--s6) 0 0; border-top: 1px solid var(--rule); padding-top: var(--s5); }
.faq div { display: grid; gap: var(--s2); align-content: start; }
.faq dt { font: 500 1.375rem/1.1 var(--font-display); letter-spacing: var(--track-display); }
.faq dd { margin: 0; color: var(--ink-mid); font-size: 13px; max-width: 30em; }
.faq dd a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-faint); }
.faq dd a:hover { border-bottom-color: var(--rule); }
.foot { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); align-items: baseline; padding: var(--s5) var(--page-x) var(--s6); border-top: 1px solid var(--rule); font-size: 11px; color: var(--ink-mid); }
.foot .wordmark { margin-right: auto; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s4); }
.foot-links a { color: var(--ink-mid); text-decoration: none; border-bottom: 1px solid var(--rule-faint); transition: color 80ms linear, border-color 80ms linear; }
.foot-links a:hover { color: var(--ink); border-bottom-color: var(--rule); }

/* ---------- a page without the opener ---------- */
/* The breadcrumb is drawn as well as declared in the JSON-LD: the one there is
   for the result, this one is for somebody who arrived from a search and has
   never seen the home page, which is most of the traffic these pages are for. */
.crumb { font: 600 10px/1 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mid); margin: 0; padding: 0 0 var(--s2); }
.crumb a { color: var(--ink-mid); text-decoration: none; border-bottom: 1px solid var(--rule-faint); }
.crumb a:hover { color: var(--ink); border-bottom-color: var(--rule); }
/* Static, under a nav in the flow, where the home page's hero is pinned to a
   sticky stage. */
.hero { padding: var(--s6) var(--page-x) var(--s8); display: grid; gap: var(--s4); }
.hero .body-p { margin-top: var(--s2); }
.hero .cta-row { margin-top: var(--s3); }

@media (max-width: 860px) {
  .sec-head, .cols-2, .faq { grid-template-columns: 1fr; }
  .hero { padding-bottom: var(--s7); }
  .sec-p, .cta-mail { margin-left: 0; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .cell:nth-child(2n) { border-right: 0; }
}
@media (max-width: 520px) {
  .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .cell { border-right: 0; }
  .sec { padding-top: var(--s6); padding-bottom: var(--s6); }
}