/* Westend (Lexington) design system, translated to plain CSS: six monochrome tokens, Inter only,
   uppercase semibold headings, pill buttons, hairline dividers, underline inputs, no shadows. */

@font-face {
  font-family: "Inter Variable";
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --background: oklch(0.985 0 0);
  --foreground: oklch(0.067 0 0);
  --muted: oklch(0.964 0 0);
  --muted-foreground: oklch(0.51 0 0);
  --border: oklch(0.922 0 0);
  --accent: oklch(0.452 0.313 264.05);
  /* Status colours for the manufacturing check (derived; Westend has none). */
  --ok: oklch(0.5 0.13 150);
  --warn: oklch(0.56 0.12 70);
  --bad: oklch(0.5 0.19 27);
  --radius-lg: 0.5rem;
  --header: 4.25rem;
  --stats: 3.75rem;
  font-family: "Inter Variable", sans-serif;
  font-feature-settings: "liga" 1, "calt" 1;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--background);
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

/* ---------- type ---------- */
.display {
  margin: 0;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-wrap: balance;
}
@media (min-width: 768px) { .display { font-size: 2.25rem; } }
@media (min-width: 1024px) { .display { font-size: 3rem; } }
@media (min-width: 1536px) { .display { font-size: 3.75rem; } }
.display.sm { font-size: 1.5rem; }
.lead { margin: 1rem 0 0; color: var(--muted-foreground); font-size: 1rem; text-wrap: pretty; max-width: 46rem; }
@media (min-width: 640px) { .lead { font-size: 1.125rem; } }
@media (min-width: 768px) { .lead { font-size: 1.25rem; } }
.lead.small { font-size: 0.875rem; margin-top: 0.5rem; }
.muted { color: var(--muted-foreground); }
.small { font-size: 0.75rem; }
.note { color: var(--muted-foreground); font-size: 0.75rem; margin: 1.5rem 0 0; }

.dot-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
}
.dot { width: 0.75rem; height: 0.75rem; border-radius: 999px; background: var(--foreground); flex: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.5rem; padding: 0 1.25rem; border: 0; border-radius: 999px;
  background: var(--foreground); color: var(--background);
  font-size: 1rem; font-weight: 500; white-space: nowrap;
  transition: background-color 0.5s ease-in-out;
}
.btn:hover { background: color-mix(in oklch, var(--foreground) 90%, transparent); }
.btn:focus-visible { outline: 2px solid var(--muted-foreground); outline-offset: 2px; }
.btn:disabled { background: var(--border); color: var(--muted-foreground); cursor: not-allowed; }
.btn.muted { background: var(--muted); color: var(--foreground); }
.btn.muted:hover { background: var(--border); }
.btn.sm { height: 2.25rem; padding: 0 1rem; font-size: 0.875rem; }
.btn.xs { height: 2rem; padding: 0 1rem; font-size: 0.75rem; }
.btn.link { background: none; color: var(--muted-foreground); padding: 0 0.5rem; }
.btn.link:hover { color: var(--foreground); }
.link { background: none; border: 0; padding: 0; color: var(--accent); font-size: 0.75rem; font-weight: 500; }

/* Pills and segmented choices share the pill shape. */
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 3rem; }
.pills.small { margin-top: 0.75rem; gap: 0.375rem; }
.pill, .seg button {
  height: 2rem; padding: 0 1rem; border-radius: 999px; border: 0;
  background: var(--muted); color: var(--foreground); font-size: 0.75rem; font-weight: 500;
  transition: background-color 0.3s ease-in-out;
}
.pills.small .pill { height: 1.75rem; padding: 0 0.75rem; }
.pill:hover, .seg button:hover { background: var(--border); }
.pill.on, .seg button.on { background: var(--foreground); color: var(--background); }
.seg { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.seg.small button { height: 1.75rem; padding: 0 0.75rem; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  height: var(--header); display: flex; align-items: center; gap: 2rem;
  padding: 0 2rem; background: var(--background); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: baseline; gap: 0.625rem; text-decoration: none; color: inherit; white-space: nowrap; }
.mark { font-weight: 600; text-transform: uppercase; letter-spacing: -0.025em; font-size: 1.125rem; line-height: 1; }
.by { color: var(--muted-foreground); font-size: 0.75rem; }
.logo { height: 1.625rem; width: auto; align-self: center; }
.steps { display: flex; gap: 0.25rem; margin: 0 auto; }
.step {
  display: inline-flex; align-items: center; gap: 0.5rem; height: 2.25rem; padding: 0 1rem;
  border: 0; border-radius: 999px; background: none; color: var(--muted-foreground);
  font-size: 0.875rem; font-weight: 500;
}
.step .n { font-size: 0.75rem; }
.step:hover { color: var(--foreground); }
.step.on { background: var(--muted); color: var(--foreground); }
.step:disabled { cursor: default; opacity: 0.45; }
.top-right { display: flex; align-items: center; gap: 0.75rem; }
.price-chip { font-size: 0.875rem; font-weight: 500; white-space: nowrap; }

/* ---------- collection ---------- */
.wrap { max-width: 95rem; margin: 0 auto; padding: 6rem 2rem; }
@media (min-width: 1024px) { .wrap { padding: 6rem 6rem; } }
.heading { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .heading { grid-template-columns: 3fr 9fr; } }
.cards { display: grid; grid-template-columns: 1fr; gap: 3rem 2rem; margin-top: 3rem; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(4, 1fr); } }
.card { display: block; text-align: left; border: 0; padding: 0; background: none; }
.card .media { aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--muted); }
.card .media img, .card .media .ph { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease-out; }
.card:hover .media img { transform: scale(1.05); }
.card .ph { display: grid; place-items: center; color: var(--muted-foreground); font-size: 0.75rem; }
.card .meta { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; display: flex; justify-content: space-between; gap: 1rem; }
.card h3 { margin: 0; font-size: 1rem; font-weight: 500; }
.card p { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--muted-foreground); }
.card .from { font-size: 0.875rem; font-weight: 500; white-space: nowrap; }

.feature { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border); }
@media (min-width: 1024px) { .feature { grid-template-columns: 7fr 5fr; align-items: center; } }
.feature-media { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.feature-shot { display: block; padding: 0; border: 0; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--muted); }
.feature-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease-out; }
.feature-shot:hover img { transform: scale(1.05); }
.feature-shot .ph { height: 100%; display: grid; place-items: center; color: var(--muted-foreground); font-size: 0.75rem; }
.gen-icon { width: 3rem; height: 3rem; color: var(--foreground); }
.card .media .ph { display: grid; place-items: center; }
.gen { margin-top: 1.25rem; }
.gen-field span { display: block; font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.75rem; }
.gen-field textarea { width: 100%; margin-top: 0.25rem; padding: 0.5rem 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; font: inherit; font-size: 0.875rem; resize: vertical; }
.gen-field textarea:focus { outline: none; border-bottom-color: var(--foreground); }
.gen-go { margin-top: 1rem; justify-content: flex-start; }
.gen .status { margin-top: 0.75rem; }
.gen-result { margin-top: 0.5rem; }
.gen-preview { aspect-ratio: 1; border-radius: var(--radius-lg); background: var(--muted); padding: 1rem; }
.gen-preview svg { width: 100%; height: 100%; fill: var(--foreground); stroke: none; }
.gen-result .foot-buttons { margin-top: 0.75rem; }
.feature-text .display { margin-top: 1rem; font-size: 1.875rem; }
@media (min-width: 1024px) { .feature-text .display { font-size: 2.25rem; } }
.feature-text .facts { margin-top: 2rem; }
.feature-cta { margin-top: 2rem; width: fit-content; }
#tierNote { margin-top: 1rem; font-size: 0.75rem; color: var(--muted-foreground); }

/* ---------- studio ---------- */
.studio {
  display: grid; grid-template-columns: 17.5rem minmax(0, 1fr) 22rem;
  height: calc(100vh - var(--header) - var(--stats));
}
.lib { border-right: 1px solid var(--border); padding: 1.5rem; overflow-y: auto; }
.lib-list { margin-top: 1rem; border-top: 1px solid var(--border); }
.lib-item {
  display: flex; align-items: center; gap: 0.875rem; width: 100%; padding: 0.875rem 0;
  border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left;
}
.lib-item svg { width: 1.375rem; height: 1.375rem; flex: none; }
.lib-item b { display: block; font-size: 0.875rem; font-weight: 500; }
.lib-item small { display: block; font-size: 0.75rem; color: var(--muted-foreground); }
.lib-item:hover b, .lib-item.on b { color: var(--accent); }
.picker { margin-top: 1.25rem; }
.picker-head { display: flex; justify-content: space-between; align-items: baseline; }
.picker-head b { font-size: 0.875rem; font-weight: 500; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.75rem; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding: 0.625rem 0.25rem 0.5rem;
  border: 0; border-radius: var(--radius-lg); background: var(--muted); font-size: 0.6875rem; line-height: 1.2; text-align: center;
}
.tile:hover { background: var(--border); }
.tile.on { outline: 1px solid var(--foreground); }
.tile svg { width: 2.75rem; height: 2.75rem; fill: var(--foreground); stroke: none; }
.tile svg.line { fill: none; stroke: var(--foreground); stroke-width: 1.4; }

.stage { padding: 1.5rem; min-width: 0; }
.viewer { position: relative; height: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--muted); touch-action: none; }
#gl { display: block; width: 100%; height: 100%; }
.chips { position: absolute; top: 1rem; left: 1rem; display: flex; flex-wrap: wrap; gap: 0.375rem; pointer-events: none; }
.chip { height: 1.75rem; display: inline-flex; align-items: center; padding: 0 0.75rem; border-radius: 999px; background: var(--background); font-size: 0.75rem; font-weight: 500; }
.chip.faint { color: var(--muted-foreground); }
.toolbar { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: var(--background); }
.toolbar button { height: 2rem; padding: 0 0.875rem; border: 0; border-radius: 999px; background: none; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }
.toolbar button:hover { color: var(--foreground); }
.toolbar button.on { background: var(--foreground); color: var(--background); }
.zoompad { position: absolute; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.zoompad button { width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: var(--background); font-size: 1rem; font-weight: 500; }
.hint { position: absolute; right: 1rem; top: 1rem; font-size: 0.75rem; color: var(--muted-foreground); max-width: 14rem; text-align: right; pointer-events: none; }
.busy { position: absolute; left: 1rem; bottom: 1.25rem; font-size: 0.75rem; color: var(--muted-foreground); }
.side-labels span { position: absolute; transform: translateX(-50%); font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); pointer-events: none; }
.side-labels span.on { color: var(--foreground); }
.markers span { position: absolute; width: 0.875rem; height: 0.875rem; margin: -0.4375rem 0 0 -0.4375rem; border-radius: 999px; border: 2px solid var(--bad); pointer-events: none; }
.markers span.gap { border-color: var(--warn); }

.panel { border-left: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.panel-scroll { flex: 1; overflow-y: auto; padding: 0 1.5rem; }
.block { padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.block:last-child { border-bottom: 0; }
.row-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.sides { margin-top: 0.75rem; }
.panel-foot { border-top: 1px solid var(--border); padding: 1rem 1.5rem 1.25rem; }
.status { margin: 0 0 0.75rem; font-size: 0.75rem; color: var(--muted-foreground); min-height: 1.125rem; }
.status.bad { color: var(--bad); }
.status.ok { color: var(--ok); }
.foot-buttons { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; }
.wrap-buttons { flex-wrap: wrap; justify-content: flex-start; margin-top: 1rem; }

/* Controls: label row on top, control under it, hairline rhythm. */
.ctl { margin-top: 1.25rem; }
.ctl > label, .ctl > .lbl { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.75rem; color: var(--muted-foreground); }
.ctl > label b, .ctl > .lbl b { color: var(--foreground); font-weight: 500; }
.ctl .seg { margin-top: 0.5rem; }
.ctl .hintline { font-size: 0.75rem; color: var(--muted-foreground); margin: 0.375rem 0 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
input[type="text"], input:not([type]), input[type="email"], select {
  width: 100%; height: 3rem; padding: 0; border: 0; border-bottom: 1px solid var(--border);
  background: transparent; font-size: 0.75rem; border-radius: 0;
}
input:focus, select:focus { outline: none; border-bottom-color: var(--foreground); }
input::placeholder { color: var(--muted-foreground); }
.ctl input[type="text"] { height: 2.5rem; font-size: 0.875rem; font-weight: 500; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 1.5rem; margin: 0.25rem 0 0; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--border); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--border); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 0.875rem; height: 0.875rem; margin-top: -0.4375rem; border-radius: 999px; background: var(--foreground); border: 0; }
input[type="range"]::-moz-range-thumb { width: 0.875rem; height: 0.875rem; border-radius: 999px; background: var(--foreground); border: 0; }
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }

.layers { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--border); }
.layer { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.layer .name { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer .tag { font-size: 0.75rem; color: var(--muted-foreground); }
.layer.on .name { color: var(--accent); }
.layer.off .name { color: var(--muted-foreground); text-decoration: line-through; }
.layer .lvl { width: 0.5rem; height: 0.5rem; border-radius: 999px; flex: none; background: transparent; }
.layer .lvl.fail { background: var(--bad); }
.layer .lvl.warn { background: var(--warn); }
.icon-btn { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--muted-foreground); }
.icon-btn:hover { background: var(--muted); color: var(--foreground); }
.icon-btn svg { width: 1rem; height: 1rem; }

.findings { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--border); }
.finding { display: grid; grid-template-columns: 0.5rem 1fr; gap: 0.75rem; padding: 0.875rem 0; border-bottom: 1px solid var(--border); }
.finding .lvl { width: 0.5rem; height: 0.5rem; border-radius: 999px; margin-top: 0.4rem; }
.finding.fail .lvl { background: var(--bad); }
.finding.warn .lvl { background: var(--warn); }
.finding.ok .lvl { background: var(--ok); }
.finding b { display: block; font-size: 0.875rem; font-weight: 500; }
.finding span { display: block; font-size: 0.75rem; color: var(--muted-foreground); }
.finding[data-layer] { cursor: pointer; }

/* ---------- order ---------- */
.order { display: grid; grid-template-columns: 1fr; gap: 3rem 2rem; margin-top: 3rem; }
@media (min-width: 1024px) { .order { grid-template-columns: 7fr 5fr; } }
.order-media { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .order-media { grid-template-columns: 3fr 2fr; } }
.frame { aspect-ratio: 3 / 2; border-radius: var(--radius-lg); overflow: hidden; background: var(--muted); }
.order-media .frame:last-child { aspect-ratio: 1; }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.facts div { border-top: 1px solid var(--border); padding-top: 1rem; }
.facts dt { font-size: 0.75rem; color: var(--muted-foreground); }
.facts dd { margin: 0.25rem 0 0; font-size: 0.875rem; font-weight: 500; }
.price-lines { margin-top: 2rem; border-top: 1px solid var(--border); }
.price-lines div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.price-lines div span:first-child { color: var(--muted-foreground); }
.price-lines .total { font-weight: 600; font-size: 1rem; }
.price-lines .total span:first-child { color: var(--foreground); }
.form { margin-top: 2rem; display: grid; gap: 0.5rem; }
.form label span { display: block; font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.75rem; }
.form .foot-buttons { margin-top: 1.5rem; }
.shop-files { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 2rem; }

/* ---------- stats (the one dark surface) ---------- */
.stats {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--stats); z-index: 15;
  display: flex; align-items: center; gap: 2.5rem; padding: 0 2rem;
  background: color-mix(in oklch, var(--foreground) 95%, transparent); color: var(--background);
}
.stats div { display: flex; flex-direction: column; }
.stats small { font-size: 0.6875rem; color: color-mix(in oklch, var(--background) 60%, transparent); }
.stats b { font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.stats div:last-child { margin-left: auto; text-align: right; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 1rem; background: color-mix(in oklch, var(--foreground) 40%, transparent); }
.modal-card { width: min(36rem, 100%); max-height: 90vh; overflow-y: auto; background: var(--background); border-radius: var(--radius-lg); padding: 2rem; }
.steps-list { margin: 1.5rem 0; padding-left: 1.25rem; display: grid; gap: 0.75rem; font-size: 0.875rem; }
.steps-list b { font-weight: 500; }
.modal-card .facts { margin-bottom: 2rem; }
.facts.one { grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
#rulesNote { margin-top: 0; }
.facts.one div { padding-top: 0.75rem; }

/* ---------- small screens ---------- */
@media (max-width: 1100px) {
  .studio { grid-template-columns: 15rem minmax(0, 1fr) 20rem; }
}
@media (max-width: 900px) {
  .top { height: auto; padding: 0.75rem 1rem 0.5rem; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
  .steps { order: 3; width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .top-right { margin-left: auto; }
  .by, .step .n { display: none; }
  .step { padding: 0 0.75rem; font-size: 0.8125rem; height: 2rem; flex: none; }
  .zoompad { display: none; }
  .toolbar { bottom: 0.75rem; }
  .wrap { padding: 3rem 1rem 6rem; }
  .studio { display: flex; flex-direction: column; height: auto; padding-bottom: var(--stats); }
  .stage { order: 1; padding: 1rem; height: 62vh; }
  .lib { order: 2; border-right: 0; border-bottom: 1px solid var(--border); padding: 1rem; }
  .panel { order: 3; border-left: 0; }
  .panel-scroll, .panel-foot { padding-left: 1rem; padding-right: 1rem; }
  .stats { gap: 1.25rem; padding: 0 1rem; overflow-x: auto; }
  .stats div:nth-child(3), .stats div:nth-child(4) { display: none; }
  .hint { display: none; }
  .top-right .btn { display: none; }
}

/* ---------- journal: the server-rendered articles, and the latest three on the home page ---------- */
.site-nav { display: flex; gap: 0.25rem; margin: 0 auto; }
.site-nav a {
  display: inline-flex; align-items: center; height: 2.25rem; padding: 0 1rem; border-radius: 999px;
  color: var(--muted-foreground); font-size: 0.875rem; font-weight: 500; text-decoration: none;
}
.site-nav a:hover { color: var(--foreground); }
.site-nav a.on { background: var(--muted); color: var(--foreground); }
.toplink { color: var(--muted-foreground); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.toplink:hover { color: var(--foreground); }
a.btn, a.dot-label { text-decoration: none; }
a.dot-label { color: inherit; }
.display.sentence { text-transform: none; }

.post-head { padding-bottom: 0; }
.post-date { margin: 2rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; }
.post-hero { margin: 3rem 0 0; aspect-ratio: 3 / 2; border-radius: 1rem; overflow: hidden; background: var(--muted); }
.post-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-main { padding-top: 4rem; }

.prose { max-width: 42rem; font-size: 1.0625rem; line-height: 1.7; text-wrap: pretty; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose table { margin: 0 0 1.25rem; }
.prose h2 { margin: 3rem 0 1rem; font-size: 1.5rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.prose h3 { margin: 2rem 0 0.5rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.prose a { color: var(--accent); font-weight: 500; text-decoration: none; }
.prose a:hover { color: var(--foreground); }
.prose strong { font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin: 0.375rem 0; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 0.75rem 1.5rem 0.75rem 0; border-top: 1px solid var(--border); }
.prose th { border-top: 0; color: var(--muted-foreground); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 3rem 0; }
.prose blockquote { margin: 2rem 0; padding-left: 1.25rem; border-left: 1px solid var(--foreground); color: var(--muted-foreground); }

.post-cta, .related { padding-top: 0; }
.post-cta > .heading, .related > .row-head { border-top: 1px solid var(--border); padding-top: 3rem; }
.post-cta .btn { margin-top: 2rem; }

.row-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.row-head .display { max-width: 40rem; }
.fancy { display: inline-flex; align-items: center; gap: 1rem; color: var(--foreground); font-weight: 500; text-decoration: none; }
.fancy span { display: inline-flex; gap: 0.125rem; }
.fancy i { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--foreground); transition: transform 0.3s ease-out; }
.fancy:hover i:nth-child(2) { transform: translateX(-0.625rem); }
.fancy:hover i:nth-child(3) { transform: translateX(-1.25rem); }

.post-grid { display: grid; grid-template-columns: 1fr; gap: 4rem 2rem; margin-top: 3rem; }
@media (min-width: 768px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { position: relative; display: flex; flex-direction: column; gap: 0.25rem; }
.post-media { aspect-ratio: 3 / 2; margin-bottom: 0.75rem; border-radius: var(--radius-lg); overflow: hidden; background: var(--muted); }
.post-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease-out; }
.post-card:hover .post-media img { transform: scale(1.05); }
.post-card h2, .post-card h3 { margin: 0; font-size: 0.875rem; font-weight: 500; line-height: 1.4; }
.post-card h2 a, .post-card h3 a { color: inherit; text-decoration: none; }
.post-card h2 a::after, .post-card h3 a::after { content: ""; position: absolute; inset: 0; }
.post-card .post-date { margin: 0; }
.post-card .post-desc { margin: 0.25rem 0 0; color: var(--muted-foreground); font-size: 0.75rem; }
.home-journal { margin-top: 8rem; padding-top: 3rem; border-top: 1px solid var(--border); }

.site-foot { border-top: 1px solid var(--border); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-top: 2rem; padding-bottom: 2rem; color: var(--muted-foreground); font-size: 0.75rem; }
.site-foot nav { display: flex; gap: 1.5rem; }
.site-foot a { color: var(--foreground); font-weight: 500; text-decoration: none; }
@media (max-width: 900px) {
  .site-nav { order: 3; width: 100%; margin: 0; }
  .site-nav a { height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; }
  .home-journal { margin-top: 5rem; }
}
.site .heading > .dot-label { align-self: start; margin-top: 0.5rem; }

/* ---------- accounts: sign-in, the customer's orders and the studio's order dashboard ---------- */
.account a:not(.btn):not(.dot-label) { color: var(--accent); font-weight: 500; text-decoration: none; }
.account a:not(.btn):not(.dot-label):hover { color: var(--foreground); }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 2rem; }
.account-actions form { margin: 0; }
.notice { max-width: 46rem; margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--foreground); font-size: 0.875rem; }
.account-form { max-width: 28rem; }
.account-form .foot-buttons, .update-form .foot-buttons { justify-content: flex-start; }

.account-head { padding-bottom: 4rem; }
.account.order-list { padding-top: 0; }
.account .facts dd { overflow-wrap: anywhere; }
.order-card { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.order-card + .order-card { margin-top: 4rem; }
@media (min-width: 1024px) { .order-card { grid-template-columns: 7fr 5fr; gap: 2rem 4rem; } }
.order-card .display { margin-top: 1rem; }
.studio-note { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.studio-note p { margin: 0.5rem 0 0; max-width: 40rem; font-size: 0.875rem; white-space: pre-line; }
.pay { margin-top: 2rem; }
.pay .note { margin-top: 0.75rem; }

/* The stage timeline: a hairline track with dot markers. Done stages are solid, the current one is
   the accent, upcoming ones stay on the border colour. Vertical on small screens. */
.timeline { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.timeline li { position: relative; margin-left: 0.375rem; padding: 0 0 1.25rem 1.25rem; border-left: 1px solid var(--border); }
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before { content: ""; position: absolute; left: -0.4375rem; top: 0.25rem; width: 0.75rem; height: 0.75rem; border-radius: 999px; background: var(--border); }
.timeline li.done { border-left-color: var(--foreground); }
.timeline li.done::before { background: var(--foreground); }
.timeline li.current::before { background: var(--accent); }
.timeline b { display: block; font-size: 0.875rem; font-weight: 500; line-height: 1.4; }
.timeline .upcoming b { color: var(--muted-foreground); }
.timeline time, .timeline small { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }
@media (min-width: 768px) {
  .timeline { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .timeline li, .timeline li:last-child { margin: 0; padding: 1.25rem 1rem 0 0; border-left: 0; border-top: 1px solid var(--border); }
  .timeline li::before { left: 0; top: -0.4375rem; }
  .timeline li.done { border-top-color: var(--foreground); }
}

/* Underline fields inside .form, like the inputs above. */
.form textarea, .form input[type="date"] {
  width: 100%; padding: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: transparent; color: inherit; font: inherit; font-size: 0.75rem;
}
.form input[type="date"] { height: 3rem; }
.form textarea { min-height: 6rem; padding: 0.875rem 0; line-height: 1.5; resize: vertical; }
.form textarea:focus, .form input[type="date"]:focus { outline: none; border-bottom-color: var(--foreground); }
.form select { cursor: pointer; }
.form .check { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.form .check span { margin: 0; color: var(--foreground); font-size: 0.875rem; }
.form .check input { width: 1rem; height: 1rem; margin: 0; flex: none; accent-color: var(--foreground); }

.table-scroll { margin-top: 3rem; overflow-x: auto; }
.orders-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.orders-table th, .orders-table td { padding: 0.875rem 1.5rem 0.875rem 0; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.orders-table th { border-top: 0; color: var(--muted-foreground); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.orders-table small { display: block; margin-top: 0.125rem; color: var(--muted-foreground); font-size: 0.75rem; }
.orders-table .nowrap { white-space: nowrap; }
.admin-section { margin-top: 6rem; padding-top: 3rem; border-top: 1px solid var(--border); }
.admin-section .table-scroll { margin-top: 2rem; }
.admin-block { margin-top: 3rem; }
.admin-block .facts, .admin-order .facts { margin-top: 1rem; }
.admin-order .update-form { margin-top: 1rem; }
.admin-order .update-form + .update-form { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.address { white-space: pre-line; }
.design-notes { margin: 0.5rem 0 0; padding-left: 1.25rem; color: var(--muted-foreground); font-size: 0.875rem; }
.history { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--border); }
.history li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.history li span { font-weight: 500; }
.history time { color: var(--muted-foreground); font-size: 0.75rem; }
.history li p { flex-basis: 100%; margin: 0; color: var(--muted-foreground); font-size: 0.75rem; white-space: pre-line; }