/* Welcome to the Workshop — theme "shop drawing" (Phase 3, pass 2).
   Identity: the measured drawing — the shared visual language of period
   furniture from Chippendale's plates to craftsman drafting. Ink rules that
   structure the page like layout lines, photos framed as plates, metadata
   set as annotations. One reserved accent: sage, from a paint Denis has
   actually brushed. Tokens + method documented in docs/design.md. */

:root {
  /* grounds + ink */
  --paper: #FBFAF6;      /* drawing paper */
  --surface: #F1F0EC;
  --line: #E4E2DB;       /* soft edges (placeholder fills, form fields) */
  --rule: #C9C4B6;       /* fine secondary rules — the pencil lines */
  --ink: #23221E;        /* 15.4:1 on paper — the pen lines */
  --ink-soft: #6B6960;   /* 5.3:1 on paper — AA */

  /* the reserved accent: brushed sage */
  --sage: #4A5C44;       /* 7.0:1 on paper — AAA */
  --sage-deep: #3C4B37;  /* hover */

  /* type */
  --font-title: "Bitter", Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-inscription: Georgia, "Times New Roman", serif; /* italic asides */

  /* layout */
  --measure: 42rem;
  --wide: 70rem;
  --radius: 0px;         /* drawings have corners */
}

@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/bitter-var.woff2") format("woff2");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.wrap {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.wrap.narrow { max-width: var(--measure); }

a { color: var(--sage); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--sage-deep); }

:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- header: the sheet's border ---------- */

.site-header {
  border-bottom: 1px solid var(--ink);
  position: relative;
}

/* the fine companion rule — a drawing sheet's double border */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-block: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--ink);
}

.mark { width: 44px; height: 44px; flex: none; color: var(--ink); }
.mark-seat { stroke: var(--sage); }

.brand-text { display: flex; flex-direction: column; }

.site-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.site-tagline {
  color: var(--ink-soft);
  font-family: var(--font-inscription);
  font-style: italic;
  font-size: 0.9rem;
  margin-top: 0.15rem;
}

.site-nav { display: flex; gap: 1.4rem; }

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
}

.site-nav a:hover { color: var(--sage-deep); text-decoration: underline; }

/* ---------- content shell ---------- */

.content { padding-block: 3rem 3.5rem; }

/* ---------- home / category grid ---------- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}

@media (max-width: 56rem) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 36rem) {
  .post-grid { grid-template-columns: 1fr; }
}

.card { display: flex; flex-direction: column; }

/* photos are plates: square, ink-framed */
.card-cover {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--surface);
}

.card-cover--empty { border-color: var(--rule); }

.card-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.card-cover--empty {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-cover--empty .mark {
  width: 64px;
  height: 64px;
  color: #C9C6BC;
}

.card-cover--empty .mark .mark-seat { stroke: #C3CDBA; }

.card-body { padding-top: 0.9rem; }

/* metadata reads as a drawn annotation: leader dash, then the note */
.card-meta {
  margin: 0 0 0.3rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.card-meta::before { content: "\2014\00a0"; color: var(--rule); }

.card-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { color: var(--sage-deep); text-decoration: underline; }

.card-excerpt {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-cats { margin: 0.7rem 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; }

/* categories are drawn labels, not pills */
.cat {
  display: inline-block;
  padding: 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--sage);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

.cat:hover { color: var(--sage-deep); border-bottom-color: var(--sage-deep); }

.listing-header { margin-bottom: 2rem; }

.listing-kicker {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.listing-title {
  margin: 0.1rem 0 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.9rem;
  letter-spacing: -0.01em;
}

.empty { color: var(--ink-soft); }

/* ---------- post / page ---------- */

.post-header {
  margin-bottom: 1.75rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}

.post-meta {
  margin: 0 0 0.5rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.post-meta::before { content: "\2014\00a0"; color: var(--rule); }

.post-meta .cat { text-transform: none; letter-spacing: normal; }

.post-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.7rem, 4.5vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.post-body { font-size: 1.0625rem; }

.post-body h2, .post-body h3, .post-body h4 {
  font-family: var(--font-title);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 2rem 0 0.6rem;
}

.post-body h2 { font-size: 1.45rem; }
.post-body h3 { font-size: 1.2rem; }

.post-body p { margin: 0 0 1.1rem; }

.post-body img {
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  margin: 1.5rem auto;
  /* portraits shouldn't tower over the reading column */
  width: auto;
  height: auto;
  max-height: 38rem;
}

/* a run of photos (adjacent images share one <p>) tiles like plates on a
   sheet instead of stacking full-width */
@media (min-width: 36rem) {
  .post-body p:has(> picture:nth-of-type(2)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    align-items: start;
    margin: 1.5rem 0;
  }

  .post-body p:has(> picture:nth-of-type(2)) img {
    margin: 0;
    width: 100%;
    max-height: none;
  }
}

.post-body ul, .post-body ol { padding-left: 1.4rem; margin: 0 0 1.1rem; }
.post-body li { margin-bottom: 0.35rem; }

.post-body blockquote {
  margin: 1.5rem 0;
  padding: 0.1rem 0 0.1rem 1.1rem;
  border-left: 2px solid var(--rule);
  font-family: var(--font-inscription);
  font-style: italic;
  color: var(--ink-soft);
}

.post-body code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}

.post-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2rem 0;
}

/* footnote back-and-forth links stay small and quiet */
.post-body sup a { text-decoration: none; }

.post-footer {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.back-link { text-decoration: none; font-size: 0.95rem; }
.back-link:hover { text-decoration: underline; }

.not-found h1 { font-family: var(--font-title); }

/* ---------- the mark page (/mark/ — the revision table) ---------- */

.mark-page-note {
  font-family: var(--font-inscription);
  font-style: italic;
  color: var(--ink-soft);
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}

.rev-date {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-left: 0.6rem;
}

.rev-plate {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem;
  border: 1px solid var(--ink);
  background: var(--paper);
  margin: 1.5rem 0;
}

/* ---------- draft badge (serve mode only) ---------- */

.draft-badge {
  display: inline-block;
  vertical-align: 0.1em;
  background: #8A4B3B;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- subscribe (renders once Buttondown is wired, Phase 4) ---------- */

.subscribe { border-top: 1px solid var(--line); background: var(--surface); }

.subscribe .wrap { padding-block: 2.25rem; }

.subscribe h2 {
  margin: 0 0 0.3rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.3rem;
}

.subscribe p { margin: 0 0 1rem; color: var(--ink-soft); }

.subscribe form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
/* a class selector outranks the UA [hidden] rule, so restate it here */
.subscribe form[hidden] { display: none; }

.subscribe input[type="email"] {
  flex: 1 1 16rem;
  font: inherit;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}

.subscribe button {
  font: inherit;
  font-weight: 600;
  padding: 0.5rem 1.2rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--sage);
  color: #fff;
  cursor: pointer;
}

.subscribe button:hover { background: var(--sage-deep); }
.subscribe button:disabled { opacity: 0.7; cursor: default; }

.subscribe-status {
  margin: 0.9rem 0 0;
  font-family: var(--font-inscription);
  font-style: italic;
  color: var(--sage-deep);
}

/* ---------- footer: the title block ----------
   Every measured drawing ends in a boxed title block naming the sheet,
   the maker, and the revision. Ours names the site, the maker, and the
   feed. */

.site-footer { border-top: 1px solid var(--ink); position: relative; }

.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 1px;
  background: var(--rule);
}

.titleblock {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--rule);
  margin-block: 2rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.titleblock > div {
  padding: 0.7rem 1.1rem;
  border-right: 1px solid var(--rule);
  flex: 0 0 auto;
}

.titleblock > div:first-child { flex: 1 1 12rem; }
.titleblock > div:last-child { border-right: none; }

.titleblock .tb-label {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.titleblock .tb-value { color: var(--ink-soft); }
.titleblock .tb-value.tb-title { font-family: var(--font-title); font-weight: 600; color: var(--ink); }

.titleblock a { color: var(--sage); text-decoration: none; border-bottom: 1px solid var(--rule); }
.titleblock a:hover { color: var(--sage-deep); border-bottom-color: var(--sage-deep); }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  a, .cat, .subscribe button { transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease; }
}