/* ═══════════════════════════════════════════════════════════════════════
   YOURSHOPDESK.COM

   The pictures on this site are dark application screens. So the page is
   warm paper and the ONLY dark objects on it are the screenshots and two
   deliberate bands. That is the whole design decision. Everything else
   serves it: if the page were also dark, the product would stop reading as
   the product and start reading as more page.

   The furniture is borrowed from an engineering drawing rather than from a
   SaaS landing page. Hairline rules, mono labels, numbered figures, a spec
   rail down the left of each section. The site is about how systems are put
   together, so it is dressed as a drawing of one.

   No framework, no reset library, no JavaScript.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Paper, in three weights. Nothing here is pure white: a screenshot with
     a white chrome sits ON the page, and pure white would fuse the two. */
  --paper: #f7f4ef;
  --paper-2: #fffefb;
  --paper-3: #efe9df;

  /* Ink. --ink-3 is the lightest that still passes AA on --paper at body
     size. Do not lighten it to make something look calmer. */
  --ink: #15120e;
  --ink-2: #4b453c;
  --ink-3: #6e6559;

  --rule: #ded5c7;
  --rule-2: #cbc0ae;

  /* One accent. --flame is for surfaces and marks, --flame-ink for anything
     that is read as text, because the bright one does not pass on paper. */
  --flame: #c03d0a;
  --flame-ink: #8f2d06;
  --flame-soft: #fbeade;

  --blue: #1d4e8f;
  --blue-soft: #e6eef8;
  --green: #166b45;
  --green-soft: #e4f1ea;

  --dark: #14120f;
  --dark-2: #1f1b16;

  --wrap: 1160px;
  --narrow: 730px;

  --s1: .35rem;
  --s2: .7rem;
  --s3: 1.1rem;
  --s4: 1.7rem;
  --s5: 2.6rem;
  --s6: 4rem;
  --s7: 6rem;

  --radius: 3px;

  --head: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  /* House baseline. Body type starts here and is not quietly designed down. */
  font-size: 1.15rem;
  line-height: 1.7;
  font-synthesis-weight: none;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }          /* the UA default 40px side margin insets every shot */
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s5) 0; }

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

h1, h2, h3, h4 {
  font-family: var(--head);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--s3);
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

/* ── The wrap. Every band gets one. A strip with no wrap runs to the edge of
      a 1920 screen while everything else stops, and nothing lines up. ───── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.2rem); }
.wrap--narrow { max-width: var(--narrow); }

.band { padding-block: clamp(3.2rem, 7vw, var(--s7)); }
.band--tint { background: var(--paper-3); }
.band--line { border-top: 1px solid var(--rule); }

/* A dark band REBINDS the ink ramp rather than recolouring selectors. A
   component added later inherits the fix instead of reintroducing the bug. */
.band--dark {
  background: var(--dark);
  --ink: #f4f1ea;
  --ink-2: #c3bcae;
  --ink-3: #958d7f;
  --paper: var(--dark);
  --paper-2: #24201a;
  --paper-3: #1b1813;
  --rule: #332e26;
  --rule-2: #464035;
  --flame-ink: #ff8a4c;
  --flame-soft: #2b1a10;
  --blue-soft: #16243a;
  --green-soft: #12281d;
  color: var(--ink);
}
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: var(--ink); }

/* ── Mono furniture. The drawing-office voice. ───────────────────────────── */
.kicker {
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--flame-ink);
  margin: 0 0 var(--s2);
  display: block;
}
.kicker--quiet { color: var(--ink-3); }

.rule-label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lede { font-size: clamp(1.2rem, 2.1vw, 1.42rem); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.note { font-size: .96rem; color: var(--ink-3); }

/* ── The spec rail. Section kicker in a left column, content on the right,
      hairline between. Stacks to one column below 900. ──────────────────── */
.rail { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3.4rem); align-items: start; }
.rail > .rail-head { border-top: 2px solid var(--ink); padding-top: var(--s2); position: sticky; top: var(--s4); }
.rail > .rail-head .n { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; color: var(--ink-3); display: block; margin-top: var(--s1); }
@media (max-width: 900px) {
  .rail { grid-template-columns: 1fr; gap: var(--s3); }
  .rail > .rail-head { position: static; }
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: .7rem 1.1rem; z-index: 100;
  font-family: var(--head); font-weight: 600;
}
.skip:focus { left: .6rem; top: .6rem; }

.site-head { border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 50; }
.site-head .wrap { display: flex; align-items: center; gap: var(--s4); min-height: 68px; }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--head); font-weight: 700; font-size: 1.06rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.brand svg { width: 26px; height: 26px; flex: none; }
.brand span { color: var(--ink-3); font-weight: 500; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.7rem); }
.site-nav a { font-family: var(--head); font-size: .95rem; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--flame-ink); }
@media (max-width: 720px) {
  .site-head .wrap { flex-wrap: wrap; min-height: 0; padding-block: .7rem; gap: .5rem var(--s3); }
  .site-nav { margin-left: 0; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .site-nav a { white-space: nowrap; font-size: .9rem; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--head); font-size: 1rem; font-weight: 600;
  padding: .78rem 1.3rem; border-radius: var(--radius);
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  text-decoration: none; cursor: pointer; line-height: 1.2;
}
.btn:hover { background: var(--flame); border-color: var(--flame); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; padding-block: clamp(2.8rem, 7vw, 5.4rem) clamp(2.4rem, 5vw, 3.6rem); overflow: hidden; }
/* A drawing grid, faint enough that you notice it only if you look. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 8%, transparent 72%);
  opacity: .5;
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { max-width: 17ch; }
.hero .lede { margin-top: var(--s3); }

/* ── Figures. Every screenshot is a numbered figure with a mono caption. ─── */
.fig { margin-block: var(--s4); }
.fig-frame {
  border: 1px solid var(--rule-2);
  background: var(--paper-2);
  padding: 7px;
  border-radius: var(--radius);
  box-shadow: 0 1px 0 var(--rule), 0 14px 30px -20px rgba(20,18,15,.5);
}
.fig-frame img { border-radius: 1px; width: 100%; }
.fig figcaption {
  display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap;
  margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px solid var(--rule);
  font-size: .95rem; color: var(--ink-2);
}
.fig figcaption b { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--flame-ink); font-weight: 500; flex: none; }

/* On a phone the figure swaps to the PHONE capture of the same screen, which
   is tall and narrow. Full bleed it would be a metre of scrolling, so the
   frame narrows and centres and the picture reads as what it is: the product,
   on a phone. Matches the breakpoint in the <picture> source exactly. */
@media (max-width: 640px) {
  .fig--dual .fig-frame { max-width: 320px; margin-inline: auto; }
  .fig--dual figcaption { max-width: 320px; margin-inline: auto; }
}

/* Four brands, one system. The strip that makes the whole argument at a
   glance.

   TWO columns, not four. Two of these desks are LIGHT themed, because that
   is the brand their owner has, and at a quarter of the page width a light
   screenshot reads as an empty box rather than as software. Half width is
   the smallest size at which all four are legibly a screen. */
.brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); margin-top: var(--s5); }
.brands figure { min-width: 0; margin: 0; }
.brands .fig-frame { padding: 5px; }
.brands figcaption { margin-top: .55rem; padding-top: .55rem; font-size: .92rem; display: block; }
.brands figcaption b { display: block; margin-bottom: 2px; }
@media (max-width: 560px) {
  .brands { grid-template-columns: 1fr; }
  /* Four full length phone captures stacked is most of a minute of scrolling
     before the visitor has read a sentence. Show the top of each one. A
     cropped screenshot is still a screenshot, and the point of this strip is
     recognition, not reading. */
  .brands .fig-frame img { max-height: 340px; object-fit: cover; object-position: top; }
}

/* ── Numbers ─────────────────────────────────────────────────────────────── */
.counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.counts div { border-top: 2px solid var(--ink); padding-top: var(--s2); }
.counts .n { font-family: var(--head); font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; display: block; }
.counts p { font-size: .98rem; color: var(--ink-2); margin: var(--s2) 0 0; line-height: 1.45; }
@media (max-width: 800px) { .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Cards, lists, code ──────────────────────────────────────────────────── */
.cards { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.card { border: 1px solid var(--rule); background: var(--paper-2); border-radius: var(--radius); padding: var(--s4); }
.card .n { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; color: var(--flame-ink); display: block; margin-bottom: var(--s2); }
.card h3 { margin-bottom: var(--s2); }
.card p { font-size: 1.04rem; color: var(--ink-2); }

pre.code {
  font-family: var(--mono); font-size: .88rem; line-height: 1.75;
  background: var(--dark); color: #f1ece2;
  border-radius: var(--radius); padding: var(--s3) var(--s4);
  overflow-x: auto; margin: 0;
  -webkit-text-size-adjust: 100%;
}
pre.code .c { color: #8e8574; }
pre.code .k { color: #ff9a63; }
.code-cap { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: var(--s2); }

/* ── The line. A numbered rail with a hairline running down it. ──────────── */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { position: relative; padding: 0 0 var(--s4) clamp(2.6rem, 5vw, 3.4rem); counter-increment: step; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: .1rem;
  font-family: var(--mono); font-size: .8rem; font-weight: 500; color: var(--flame-ink);
  background: var(--paper); padding-bottom: .3rem;
}
.steps li::after {
  content: ""; position: absolute; left: 11px; top: 1.5rem; bottom: 0; width: 1px; background: var(--rule-2);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps h3 { font-size: 1.16rem; margin-bottom: .2rem; }
.steps p { color: var(--ink-2); font-size: 1.04rem; }

/* ── Flow. How a request moves, as boxes with arrows between them. ───────── */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); margin: var(--s4) 0 var(--s3); list-style: none; padding: 0; }
.flow li { position: relative; border: 1px solid var(--rule-2); background: var(--paper-2); border-radius: var(--radius); padding: var(--s3); }
.flow li h4 { font-family: var(--head); font-size: 1rem; margin: 0 0 .3rem; }
.flow li p { font-size: .94rem; line-height: 1.5; color: var(--ink-2); margin: 0; }
.flow li .step-n { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; color: var(--flame-ink); display: block; margin-bottom: .35rem; }
/* The arrow sits between boxes. It is decorative, so it is hidden from a
   screen reader and it disappears the moment the grid wraps to one column. */
.flow li + li::before {
  content: "\203A"; position: absolute; left: calc(var(--s3) * -0.5 - 6px); top: 50%;
  transform: translateY(-50%); color: var(--rule-2); font-size: 1.5rem; line-height: 1;
}
@media (max-width: 640px) { .flow li + li::before { content: none; } }

/* ── Stacks ──────────────────────────────────────────────────────────────── */
.stack { border-top: 2px solid var(--ink); padding-top: var(--s4); margin-top: var(--s6); }
.stack:first-of-type { margin-top: var(--s4); }
.stack-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.stack-head h2 { margin-bottom: 0; }
.stack-head .tag { font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--flame-ink); }
.stack-sub { font-family: var(--head); font-size: 1.1rem; color: var(--ink-3); font-weight: 500; }
.stack-for { border-left: 3px solid var(--flame); padding-left: var(--s3); margin: var(--s3) 0 var(--s4); color: var(--ink-2); max-width: 60ch; }

.parts { width: 100%; border-collapse: collapse; margin: var(--s3) 0; font-size: 1rem; }
.parts th, .parts td { text-align: left; vertical-align: top; padding: .72rem var(--s3) .72rem 0; border-bottom: 1px solid var(--rule); }
.parts th { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; width: 16%; white-space: nowrap; }
.parts td:first-of-type { font-family: var(--head); font-weight: 600; width: 26%; }
.parts td:last-child { color: var(--ink-2); font-size: .98rem; }
.table-wrap { overflow-x: auto; }
@media (max-width: 720px) {
  .parts, .parts tbody, .parts tr, .parts th, .parts td { display: block; width: auto; }
  .parts tr { border-bottom: 1px solid var(--rule); padding-bottom: .7rem; margin-bottom: .7rem; }
  .parts th, .parts td { border: 0; padding: 0 0 .2rem; }
  .parts td:first-of-type { width: auto; }
}

.twoup { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.ticks, .crosses { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.ticks li, .crosses li { position: relative; padding-left: 1.7rem; margin-bottom: .6rem; font-size: 1.02rem; color: var(--ink-2); line-height: 1.55; }
.ticks li::before { content: "+"; position: absolute; left: 0; top: 0; color: var(--green); font-family: var(--mono); font-weight: 700; }
.crosses li::before { content: "\2212"; position: absolute; left: 0; top: 0; color: var(--flame); font-family: var(--mono); font-weight: 700; }
.cost { font-family: var(--mono); font-size: .92rem; background: var(--flame-soft); border: 1px solid var(--rule-2); border-radius: var(--radius); padding: .6rem var(--s3); display: inline-block; color: var(--ink); }

/* ── Work entries ────────────────────────────────────────────────────────── */
.entry { border-top: 2px solid var(--ink); padding-top: var(--s4); margin-top: var(--s6); }
.entry:first-of-type { margin-top: var(--s4); }
.entry-meta { display: flex; flex-wrap: wrap; gap: .4rem var(--s3); margin-bottom: var(--s3); }
.entry-meta span { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.entry-meta span b { color: var(--ink-2); font-weight: 500; }
.pull { font-family: var(--head); font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 600; line-height: 1.3; color: var(--flame-ink); border-left: 3px solid var(--flame); padding-left: var(--s3); margin: var(--s4) 0 0; text-wrap: balance; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { font-family: var(--head); font-weight: 600; font-size: 1.14rem; padding: var(--s3) 2.2rem var(--s3) 0; cursor: pointer; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); font-family: var(--mono); color: var(--flame-ink); font-size: 1.2rem; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 var(--s4); color: var(--ink-2); max-width: 66ch; }

/* ── Form ────────────────────────────────────────────────────────────────── */
.form { display: grid; gap: var(--s3); max-width: 620px; margin-top: var(--s4); }
.field label { display: block; font-family: var(--head); font-weight: 600; font-size: .96rem; margin-bottom: .32rem; }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--body); font-size: 1.05rem;
  padding: .7rem .85rem; border: 1px solid var(--rule-2); border-radius: var(--radius);
  background: var(--paper-2); color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--flame); outline-offset: 1px; border-color: var(--flame); }
.field textarea { min-height: 150px; resize: vertical; }
.field .hint { font-size: .9rem; color: var(--ink-3); margin-top: .25rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--rule); background: var(--paper-3); padding-block: var(--s5); font-size: .98rem; }
.site-foot .cols { display: grid; grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 760px) { .site-foot .cols { grid-template-columns: 1fr 1fr; } .site-foot .cols > :first-child { grid-column: 1 / -1; } }
.site-foot h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: var(--s2); }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .45rem; }
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--flame-ink); text-decoration: underline; }
.site-foot .fine { border-top: 1px solid var(--rule-2); margin-top: var(--s5); padding-top: var(--s3); color: var(--ink-3); font-size: .92rem; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }

/* ── Print. Somebody will print the stacks page and take it to a meeting. ── */
@media print {
  .site-head, .site-foot, .btn-row, .skip { display: none; }
  body { background: #fff; font-size: 11pt; }
  .band { padding-block: 1rem; }
  .band--dark { background: #fff; color: #000; }
  .fig-frame { box-shadow: none; }
}