@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/fraunces.woff2) format("woff2");
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/manrope.woff2) format("woff2");
}

:root {
  --white: #ffffff;
  --sand: #f4eee6;
  --sand-deep: #e9dfd1;
  --rule: #e0d4c3;
  --tan: #b08559;
  --brown: #7a5232;
  --ink: #2a2019;
  --ink-muted: #66574a;
  --button: #3b2b20;
  --alert: #a3271c;
  --serif: Fraunces, Georgia, "Times New Roman", serif;
  --sans: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(72px, 10vw, 120px);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 17px/27px var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; touch-action: manipulation; text-underline-offset: 4px; text-decoration-color: var(--tan); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 3;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--white);
}
.skip:focus { left: 8px; }

.wrap {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 450;
  font-optical-sizing: auto;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 1rem + 4.6vw, 4.9rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 1.5rem + 1.9vw, 3rem); line-height: 1.08; }
h3 { font-size: 18px; line-height: 25px; font-weight: 700; letter-spacing: -.005em; }

.eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--brown);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lead { font-size: clamp(18px, 17px + .3vw, 20px); line-height: 1.5; text-wrap: pretty; }
.muted { color: var(--ink-muted); }
.after { margin-top: 16px; }
.after-xs { margin-top: 4px; }
.after-s { margin-top: 12px; }
.after-m { margin-top: 20px; }
.after-l { margin-top: 28px; }
.section { padding-block: var(--section); }
.sand { background: var(--sand); }
.deep { background: var(--sand-deep); }
.deep .lines li { border-color: var(--tan); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 2px;
  background: var(--button);
  color: var(--white);
  font: 700 16px/1 var(--sans);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.btn:active { transform: scale(.97); }
.btn[disabled] { background: var(--ink-muted); cursor: default; }
.more { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; }

/* Section heads and two column layouts */
.head { display: grid; gap: 12px 72px; margin-bottom: 40px; }
.split { display: grid; gap: 40px 72px; }
@media (min-width: 960px) {
  .head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; }
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
  .split.align-start { align-items: start; }
  .split.wide-left { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

/* Header */
.top { position: relative; z-index: 2; background: var(--white); border-bottom: 1px solid var(--rule); }
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: max(18px, env(safe-area-inset-top)) 18px;
}
.word {
  flex-shrink: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -.01em;
  text-decoration: none;
}
.nav { display: none; align-items: center; gap: clamp(16px, 1.8vw, 26px); font-size: 15px; font-weight: 500; }
.nav a { text-decoration: none; white-space: nowrap; }
.nav a[aria-current="page"] { text-decoration: underline; }
.nav .cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 2px;
  background: var(--button);
  color: var(--white);
  font-weight: 700;
}

.menu summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.menu summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: 8px max(var(--gutter), env(safe-area-inset-right)) 20px max(var(--gutter), env(safe-area-inset-left));
  border-bottom: 1px solid var(--rule);
  background: var(--white);
}
.menu-panel a {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--rule);
  font-size: 18px;
  text-decoration: none;
}
.menu-panel a[aria-current="page"] { font-weight: 700; }

@media (min-width: 1100px) {
  .nav { display: flex; }
  .menu { display: none; }
}

/* Home hero */
.hero { display: grid; background: var(--sand); }
.hero-copy {
  display: flex;
  flex-direction: column;
  padding: clamp(36px, 6vw, 72px) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}
.hero .lead { margin-top: 24px; max-width: 31em; color: var(--ink-muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.facts { display: grid; gap: 16px 28px; margin-top: auto; padding-block: 36px; }
.facts div { padding-top: 12px; border-top: 1px solid var(--tan); }
.facts dt { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.facts dd { font-family: var(--serif); font-size: 22px; line-height: 28px; font-weight: 500; }
.hero-media { position: relative; overflow: hidden; background: var(--sand-deep); }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.hero-media video { position: absolute; inset: 0; }

@media (min-width: 560px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-copy {
    min-height: min(calc(100svh - 78px), 780px);
    padding-left: max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter)));
    padding-right: 56px;
  }
  .facts { padding-top: 48px; }
  .hero-media img { position: absolute; inset: 0; aspect-ratio: auto; }
}

/* Inner page head */
.page-head { padding-block: clamp(40px, 6vw, 80px) clamp(44px, 7vw, 88px); background: var(--sand); }
.page-head .lead { margin-top: 20px; max-width: 36em; color: var(--ink-muted); }

/* Services, the one-stop grid */
.services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 960px) {
  .services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.services li { display: grid; align-content: start; gap: 6px; padding: clamp(20px, 3vw, 32px); background: var(--white); }
.services svg { width: 40px; height: 40px; margin-bottom: 14px; }
.services p { color: var(--ink-muted); font-size: 15px; line-height: 23px; }
.services .step { color: var(--brown); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .08em; }
@media (max-width: 559px) {
  .services { grid-template-columns: minmax(0, 1fr); }
  .services li { grid-template-columns: 40px minmax(0, 1fr); gap: 2px 16px; }
  .services svg { grid-row: span 3; margin-bottom: 0; }
}
.ic { fill: none; stroke: var(--brown); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Product cards */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.cards li { display: grid; align-content: start; gap: 10px; }
.cards img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--white); border: 1px solid var(--rule); }
.cards p { margin-top: -6px; color: var(--ink-muted); font-size: 15px; line-height: 21px; }
.also { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.also li { padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--white); font-size: 15px; line-height: 21px; }
.product-groups { display: grid; gap: clamp(56px, 8vw, 88px); }
.product-groups h2 { margin-bottom: 8px; }
.product-groups .muted { margin-bottom: 24px; }

/* Ready design or your design */
.paths { display: grid; gap: 1px; margin-top: 28px; background: var(--rule); border: 1px solid var(--rule); }
.paths li { padding: 22px 24px; background: var(--white); }
.paths .step { display: block; margin-bottom: 6px; color: var(--brown); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.paths p { margin-top: 4px; color: var(--ink-muted); }

/* Photos */
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sand-deep); }
.tall img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--sand-deep); }
.packshot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--white); border: 1px solid var(--rule); }

/* Lists with hairlines */
.lines { margin-top: 28px; }
.lines li { padding-block: 16px; border-top: 1px solid var(--rule); }
.lines li:last-child { border-bottom: 1px solid var(--rule); }
.lines p { margin-top: 4px; color: var(--ink-muted); }
.lines.plain li { padding-block: 12px; }

.spec-list { margin-top: 28px; }
.spec-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 12px;
  padding-block: 14px;
  border-top: 1px solid var(--rule);
}
.spec-list li:last-child { border-bottom: 1px solid var(--rule); }
.spec-list b {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--sand-deep);
  color: var(--brown);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}
.spec-list p { grid-column: 2; color: var(--ink-muted); }

/* Minimum order figures */
.moq { display: grid; gap: 1px; margin-top: 28px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 560px) { .moq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.moq div { padding: 24px; background: var(--white); }
.moq dt { font-family: var(--serif); font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); line-height: 1; font-weight: 450; }
.moq dt small { margin-left: 6px; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.moq dd { margin-top: 10px; color: var(--ink-muted); }

/* Numbered tiles */
.tiles { display: grid; gap: 28px; }
.tiles li { padding-top: 14px; border-top: 1px solid var(--tan); }
.tiles .n { display: block; margin-bottom: 10px; color: var(--brown); font-size: 13px; line-height: 1; font-weight: 800; letter-spacing: .08em; }
.tiles p { margin-top: 4px; color: var(--ink-muted); }
@media (min-width: 760px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 560px) and (max-width: 759px) {
  .tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Process stages */
.stages { display: grid; gap: 32px 24px; }
@media (min-width: 560px) { .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; } }
.stage-photo { position: relative; background: var(--sand-deep); }
.stage-photo img, .stage-photo video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.stage-photo video { position: absolute; inset: 0; height: 100%; }
.tag {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background: var(--white);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
}
.tag span { color: var(--brown); font-size: 13px; line-height: 1; font-weight: 800; }
.stages figcaption { padding-top: 12px; color: var(--ink-muted); }

/* Stage matrix: small leather goods and bags */
.matrix { width: 100%; border-collapse: collapse; }
.matrix th, .matrix td { padding: 12px 12px 12px 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.matrix thead th { border-top: 0; padding-block: 0 12px; color: var(--ink-muted); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.matrix tbody th { font-weight: 600; }
.matrix tbody th small { display: block; color: var(--ink-muted); font-size: 14px; line-height: 20px; font-weight: 400; }
.matrix td { width: 22%; text-align: center; }
.matrix thead th:not(:first-child) { text-align: center; }
.matrix tbody tr:last-child > * { border-bottom: 1px solid var(--rule); }
.yes, .no { display: inline-block; width: 14px; height: 14px; border-radius: 999px; vertical-align: middle; }
.yes { background: var(--brown); }
.no { border: 1.5px solid var(--tan); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.key span { display: inline-flex; align-items: center; gap: 8px; }

/* Order steps */
.run { padding-block: var(--section); background: var(--sand); }
.run h2 { margin-bottom: 44px; }
.steps { position: relative; display: grid; gap: 28px; }
.steps::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 17px;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--tan) 0 9px, transparent 9px 16px);
}
.steps li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 16px; }
.steps .n {
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  outline: 6px solid var(--sand);
  background: var(--button);
  color: var(--white);
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
}
.steps h3 { padding-top: 5px; }
.steps p { color: var(--ink-muted); }
.steps .when { color: var(--brown); font-size: 14px; line-height: 20px; font-weight: 700; }
.steps li:last-child { background: var(--sand); }
.run.white { background: var(--white); }
.run.white .steps .n { outline-color: var(--white); }
.run.white .steps li:last-child { background: var(--white); }
@media (min-width: 1000px) {
  .steps li:last-child { background: none; }
  .steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
  .steps::before {
    top: 17px;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--tan) 0 9px, transparent 9px 16px);
  }
  .steps li { grid-template-columns: 1fr; justify-items: start; align-content: start; gap: 6px 0; }
  .steps .n { grid-row: auto; margin-bottom: 10px; }
  .steps h3 { padding-top: 0; }
}

/* Timeline bar */
.timeline { margin-top: 56px; }
.timeline h3 { margin-bottom: 16px; }
.bar-track { display: flex; gap: 4px; }
.bar-track div { min-width: 0; padding: 12px 14px; border-radius: 2px; background: var(--white); border: 1px solid var(--rule); }
.bar-track .sample { flex: 2.5 1 0; }
.bar-track .prod { flex: 7 1 0; background: var(--sand-deep); border-color: var(--sand-deep); }
.bar-track b { display: block; font-size: 15px; line-height: 21px; }
.bar-track span { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.pay { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; padding-left: calc(2.5 / 9.5 * 100%); color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.pay b { color: var(--brown); }
.total { margin-top: 16px; font-weight: 600; }
@media (max-width: 559px) {
  .bar-track { flex-direction: column; }
  .pay { flex-direction: column; gap: 4px; padding-left: 0; }
}

/* Who does what */
.duty { width: 100%; border-collapse: collapse; }
.duty th, .duty td { padding: 16px 20px 16px 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; }
.duty thead th { border-top: 0; padding-block: 0 12px; color: var(--ink-muted); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.duty tbody th { font-weight: 700; white-space: nowrap; }
.duty td { color: var(--ink-muted); }
.duty tbody tr:last-child > * { border-bottom: 1px solid var(--rule); }
@media (max-width: 759px) {
  .duty thead { position: absolute; left: -999px; }
  .duty tbody tr { display: block; padding-block: 14px; border-top: 1px solid var(--rule); }
  .duty tbody tr:last-child { border-bottom: 1px solid var(--rule); }
  .duty tbody tr > * { display: block; padding: 0; border: 0 !important; }
  .duty tbody td { margin-top: 6px; }
  .duty td::before { content: attr(data-who) ": "; color: var(--ink); font-weight: 700; }
}

/* Questions */
.qa { display: grid; gap: 0 72px; }
@media (min-width: 760px) { .qa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qa div { padding-block: 20px 24px; border-top: 1px solid var(--rule); }
.qa dt { font-size: 18px; line-height: 25px; font-weight: 700; }
.qa dd { margin-top: 6px; color: var(--ink-muted); }
.faq-group + .faq-group { margin-top: clamp(48px, 7vw, 72px); }
.faq-group h2 { margin-bottom: 24px; }

/* Call to action */
.cta-band { padding-block: clamp(64px, 9vw, 104px); background: var(--sand-deep); }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.cta-inner h2 { max-width: 15em; }

/* Enquiry */
.enquiry .lead { margin-top: 16px; }
.contact-grid { display: grid; gap: 32px 72px; }
@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "head form" "help form";
  }
  .c-head { grid-area: head; }
  .c-form { grid-area: form; }
  .c-help { grid-area: help; }
}
.helps h2 { font-family: var(--sans); font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: 0; }
.helps ul { margin-top: 10px; }
.helps li { padding-block: 10px; border-top: 1px solid var(--rule); }
.contact-line { margin-top: 28px; }
.contact-line a { overflow-wrap: anywhere; }

.job {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--tan);
}
.cell {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 12px 16px;
  background: var(--white);
  transition: background-color 150ms ease;
}
.cell.wide { grid-column: 1 / -1; }
.cell:focus-within { background: var(--sand); outline: 2px solid var(--ink); outline-offset: -2px; }
.cell span { color: var(--ink-muted); font-size: 13px; line-height: 18px; font-weight: 700; }
.cell span i { font-style: normal; font-weight: 400; }
.cell input, .cell textarea {
  width: 100%;
  min-height: 34px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 400 17px/26px var(--sans);
  resize: vertical;
}
.cell input::placeholder, .cell textarea::placeholder { color: var(--ink-muted); opacity: 1; }
.cell:has(:user-invalid) span { color: var(--alert); }

.job-foot {
  grid-column: 1 / -1;
  display: grid;
  gap: 16px 32px;
  padding: 16px;
  background: var(--white);
}
.job-foot .btn { width: 100%; }
.privacy { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.privacy a { color: var(--brown); overflow-wrap: anywhere; }
.oops { grid-column: 1 / -1; color: var(--alert); font-weight: 700; }
.oops a { color: inherit; overflow-wrap: anywhere; }

@media (max-width: 559px) {
  .cell { grid-column: 1 / -1; }
}
@media (min-width: 760px) {
  .job-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .job-foot .btn { width: auto; }
}

.sent { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--tan); background: var(--white); }
.sent:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.sent h2 { font-size: 40px; line-height: 1; }
.sent p { margin-top: 8px; }

/* Long text */
.prose { max-width: 42em; }
.prose h2 { margin-top: 40px; font-size: 26px; line-height: 32px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: 10px; }

/* Footer */
footer { padding-block: 48px max(32px, env(safe-area-inset-bottom)); background: var(--sand); border-top: 1px solid var(--rule); font-size: 15px; line-height: 23px; }
.foot { display: grid; gap: 28px 56px; }
.foot .word { display: inline-block; margin-bottom: 8px; }
.foot ul { display: grid; align-content: start; gap: 6px; }
.foot p { color: var(--ink-muted); }
.foot p + p { margin-top: 10px; }
.foot a { text-decoration: none; }
.foot .mail { overflow-wrap: anywhere; color: var(--ink); text-decoration: underline; }
.foot-base { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--ink-muted); font-size: 14px; }
@media (min-width: 760px) {
  .foot { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .foot ul { gap: 0; }
  .foot ul a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover, .nav .cta:hover { background: var(--ink); }
  .btn[disabled]:hover { background: var(--ink-muted); }
  .nav a:not(.cta):hover, .foot a:hover { text-decoration: underline; }
}

/* Draft review tags. The live build leaves these out. */
.q, .draft-note { display: none; }
.draft .q {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 2px;
  background: #ffe14d;
  color: #2a2019;
  font: 700 12px/18px var(--sans);
  letter-spacing: 0;
  vertical-align: middle;
  text-indent: 0;
  text-transform: none;
}
.draft .draft-note {
  display: block;
  padding: 8px var(--gutter);
  background: #ffe14d;
  color: #2a2019;
  font: 600 13px/18px var(--sans);
  text-align: center;
}