/* ============================================================
   Shared interior-page furniture: page headers, prose, panels,
   plan tables, forms. Kept separate from home.css so the homepage
   pays for nothing it doesn't use.
   ============================================================ */

/* ---------- page header ---------- */
.page-head { padding-block: var(--s-9) var(--s-8); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: var(--t-6); max-width: 18ch; }
.page-head .lede {
  font-size: var(--t-1); color: var(--ink-soft);
  max-width: 54ch; margin-top: var(--s-5); line-height: 1.6;
}
.page-head .rule { margin-bottom: var(--s-4); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* ---------- prose ---------- */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { font-size: var(--t-3); margin-top: var(--s-8); }
.prose h3 { font-size: var(--t-2); margin-top: var(--s-7); }
.prose h4 { font-size: var(--t-1); margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: 1.25em; display: grid; gap: var(--s-3); }
.prose li { padding-left: .15em; }
.prose li::marker { color: var(--gilt); }
.prose img, .prose figure { margin-block: var(--s-7); border-radius: var(--radius-img); }
.prose figure img { margin: 0; }
.prose figcaption { font-size: var(--t--1); color: var(--ink-faint); margin-top: var(--s-3); }
.prose blockquote {
  border-left: 2px solid var(--gilt);
  padding-left: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-2);
  font-style: italic;
  line-height: 1.35;
  color: var(--ink);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--s-7); }
.prose a { color: var(--blue); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-0); }
.prose th, .prose td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--line); }
.prose code { background: var(--paper-sunk); padding: .1em .35em; border-radius: var(--radius); font-size: .9em; }
.prose .embed { position: relative; aspect-ratio: 16/9; margin-block: var(--s-7); }
.prose .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-img); }

/* ---------- checklist ---------- */
.checks { list-style: none; padding: 0; display: grid; gap: var(--s-4); }
.checks li { display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--s-3); align-items: start; }
.checks li::before {
  content: ""; width: 1rem; height: 1rem; margin-top: .35em;
  border: 1.5px solid var(--gilt); border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 44%, var(--gilt) 44%, var(--gilt) 56%, transparent 56%) center/0.55rem 0.1rem no-repeat;
}
.checks strong { display: block; }
.checks span { color: var(--ink-soft); }

/* ---------- plans ---------- */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); align-items: start; }
@media (max-width: 54rem) { .plans { grid-template-columns: 1fr; } }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-6); background: var(--paper); }
.plan--featured { border-color: var(--blue); border-width: 1.5px; }
.plan__name { font-family: var(--font-display); font-size: var(--t-3); }
.plan__for { color: var(--ink-soft); margin-top: var(--s-2); min-height: 3em; }
.plan__price { display: flex; align-items: baseline; gap: var(--s-2); margin-top: var(--s-5); }
.plan__price b { font-family: var(--font-display); font-size: var(--t-5); font-weight: 500; letter-spacing: -0.02em; }
.plan__price span { color: var(--ink-soft); }
.plan .btn { width: 100%; margin-top: var(--s-5); }
.plan__rows { list-style: none; padding: 0; margin-top: var(--s-6); display: grid; gap: 0; }
.plan__rows li {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding-block: var(--s-3); border-top: 1px solid var(--line-soft);
}
.plan__rows dt, .plan__rows .k { color: var(--ink-soft); }
.plan__rows .v { text-align: right; }
.plan__rows li[data-has="false"] .v { color: var(--ink-faint); }

/* ---------- panel / addons ---------- */
.panel { background: var(--paper-sunk); border-radius: var(--radius); padding: var(--s-7); }
.addons { display: grid; gap: 0; border-top: 1px solid var(--line); }
.addon {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
  gap: var(--s-6); padding-block: var(--s-6); border-bottom: 1px solid var(--line); align-items: start;
}
@media (max-width: 54rem) { .addon { grid-template-columns: 1fr; gap: var(--s-3); } }
.addon h3 { font-size: var(--t-2); }
.addon p { color: var(--ink-soft); }
.addon__price { font-family: var(--font-display); font-size: var(--t-1); color: var(--ink); white-space: nowrap; }
.addon__note { color: var(--gilt); font-size: var(--t--1); display: block; margin-top: var(--s-2); }

/* ---------- two column ---------- */
.cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-8); align-items: start; }
@media (max-width: 54rem) { .cols { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---------- marquee of pillars ---------- */
.pillars {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  padding-block: var(--s-5);
  border-block: 1px solid var(--line);
  color: var(--ink-soft);
  align-items: center;
}
.pillars span { display: inline-flex; align-items: center; gap: var(--s-5); }
.pillars span::after { content: "\2733"; color: var(--gilt-soft); font-size: .7em; }
.pillars span:last-child::after { content: none; }

/* ---------- forms ---------- */
.form { display: grid; gap: var(--s-5); max-width: 36rem; }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--t-0); color: var(--ink-soft); }
.field input, .field textarea, .field select {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  padding: .7em .85em;
  font-size: var(--t-0);
  color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue); }
.field textarea { min-height: 9rem; resize: vertical; }
.field--required label::after { content: " *"; color: var(--gilt); }
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { font-size: var(--t-0); }
.form__status[data-state="error"] { color: #B3261E; }
.form__status[data-state="ok"] { color: var(--blue); }
.form__note { color: var(--ink-faint); font-size: var(--t--1); }

/* ---------- team ---------- */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
@media (max-width: 60rem) { .team { grid-template-columns: repeat(2, 1fr); } }
.member img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: var(--paper-sunk); }
.member h3 { font-size: var(--t-1); margin-top: var(--s-4); }
.member .role { color: var(--gilt); font-size: var(--t--1); }
.member p { color: var(--ink-soft); font-size: var(--t-0); margin-top: var(--s-2); }

/* ---------- faq ---------- */
.faq { max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding-block: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-1);
  line-height: 1.3;
  display: flex; gap: var(--s-4); align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; color: var(--gilt);
  font-family: var(--font-text); font-size: var(--t-2); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq p { color: var(--ink-soft); padding-bottom: var(--s-5); max-width: var(--measure); }


/* ---------- post ---------- */
.post-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  color: var(--ink-faint); font-size: var(--t--1); margin-top: var(--s-5);
}
.post-meta span + span::before,
.post-meta time + span::before { content: "\00b7"; margin-right: var(--s-4); color: var(--line); }
.post-taxo { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-bottom: var(--s-8); }
.chip {
  font-size: var(--t--1); color: var(--ink-soft); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: .3em .85em;
}
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip--cat { border-color: var(--gilt-soft); color: var(--gilt); }

/* ---------- blog index ---------- */
.post-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.post-row {
  display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--s-6); padding-block: var(--s-6);
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.post-row img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius-img); }
.post-row h2 { font-size: var(--t-2); }
.post-row:hover h2 { color: var(--blue); }
.post-row p { color: var(--ink-soft); margin-top: var(--s-3); max-width: 62ch; }
.post-row .post-meta { margin-top: var(--s-3); }
@media (max-width: 48rem) {
  .post-row { grid-template-columns: 1fr; gap: var(--s-3); }
}

.pager { display: flex; gap: var(--s-4); align-items: center; justify-content: space-between; padding-block: var(--s-7); }
.pager span { color: var(--ink-faint); font-size: var(--t--1); }

.taxo-cloud { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Spotify show player is taller than a 16:9 video embed. */
.embed--show { aspect-ratio: auto; height: 32rem; }
.embed--show iframe { position: static; height: 100%; }
.embed--form { aspect-ratio: auto; min-height: 45rem; }
.embed--form iframe { position: static; height: 45rem; }

/* Explicit, separate consent — a download request is not newsletter consent. */
.opt-in { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; cursor: pointer; }
.opt-in input { margin-top: .25em; width: 1.05rem; height: 1.05rem; accent-color: var(--blue); }
.opt-in span { color: var(--ink-soft); font-size: var(--t--1); line-height: 1.5; }

/* In-article call to action, replacing the embedded Google Forms. */
.post-cta {
  margin-block: var(--s-8);
  padding: var(--s-6);
  background: var(--wash);
  border-left: 3px solid var(--gilt);
  border-radius: var(--radius);
}
.post-cta h3 { font-size: var(--t-2); font-weight: 450; margin: 0; }
.post-cta p { color: var(--ink-soft); margin-top: var(--s-3); max-width: 48ch; }
.post-cta .btn { margin-top: var(--s-5); }

/* ---------- in-article images ----------
   Migrated posts carry images up to 2500px tall. Cap them so a picture never
   takes more than about a screen, and centre anything narrower than the column. */
.prose img {
  max-height: 32rem;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  border-radius: var(--radius-img);
}
.prose figure { margin-inline: 0; }
.prose figure img { max-height: 30rem; object-fit: cover; }

/* ---------- bolder pricing ---------- */
.plan { position: relative; padding: clamp(1.5rem, 3vw, 2.5rem); }
.plan--featured {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.plan--featured .plan__name, .plan--featured .plan__price b { color: #fff; }
.plan--featured .plan__for, .plan--featured .plan__rows .k { color: rgba(255,255,255,.66); }
.plan--featured .plan__rows li { border-color: rgba(255,255,255,.14); }
.plan--featured .plan__rows .v { color: #fff; }
.plan--featured .plan__rows li[data-has="false"] .v { color: rgba(255,255,255,.42); }
.plan--featured .btn--primary { background: var(--sky); color: var(--navy); }
.plan--featured .btn--primary:hover { background: #fff; color: var(--navy); }
.plan__price b { font-size: clamp(2.75rem, 6vw, 4rem); font-weight: 300; letter-spacing: -0.04em; }
.plan__flag {
  position: absolute; top: 0; right: var(--s-5); transform: translateY(-50%);
  background: var(--gilt); color: #fff;
  font-size: var(--t--1); padding: .3em 1em; border-radius: 999px;
}


/* ============================================================
   Section furniture shared by the homepage and the interior pages.
   These lived in home.css, which interior pages never load — so their
   section headings rendered unstyled.
   ============================================================ */
/* ---------- section heads ---------- */
.sec-head { display: grid; gap: var(--s-4); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sec-head h2 { font-size: var(--t-6); font-weight: 350; letter-spacing: -0.03em; max-width: 16ch; }
.sec-head p { color: var(--ink-soft); max-width: 50ch; font-size: var(--t-1); }
.field-dark .sec-head p { color: rgba(255,255,255,.7); }


/* ---------- who we serve ---------- */
.serve { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 62rem) { .serve { grid-template-columns: 1fr; } }
.serve__item { display: grid; gap: var(--s-4); align-content: start; }
.serve__item .icon { color: var(--gilt); }
.serve__item h3 { font-size: var(--t-2); font-weight: 450; }
.serve__item p { color: var(--ink-soft); }
.field-dark .serve__item p { color: rgba(255,255,255,.7); }


/* ---------- services: a real sequence, so numerals are earned ---------- */
.services { display: grid; border-top: 1px solid var(--line); }
.service {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background-color .25s var(--ease), padding-inline .25s var(--ease);
}
.service:hover { background: var(--paper-sunk); padding-inline: var(--s-4); }
.service h3 { font-size: var(--t-3); font-weight: 400; letter-spacing: -0.02em; }
.service p { color: var(--ink-soft); max-width: 56ch; margin-top: var(--s-3); }
.service__no {
  font-family: var(--font-display);
  font-size: var(--t-4);
  font-weight: 300;
  color: var(--gilt);
  line-height: 1;
}
.service__go { color: var(--blue); white-space: nowrap; align-self: center; }
@media (max-width: 62rem) {
  .service { grid-template-columns: 1fr; gap: var(--s-2); }
  .service__no { font-size: var(--t-2); }
  .service:hover { padding-inline: 0; }
}


/* ---------- offers ---------- */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 62rem) { .offers { grid-template-columns: 1fr; } }
.offer {
  display: grid; gap: var(--s-4); align-content: start;
  padding: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.offer .icon { color: var(--gilt); }
.offer h3 { font-size: var(--t-1); font-weight: 500; }
.offer p { color: var(--ink-soft); font-size: var(--t-0); }
.offer .btn { justify-self: start; margin-top: auto; }


/* ---------- articles ---------- */
.articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 62rem) { .articles { grid-template-columns: 1fr; } }
.article { display: grid; gap: var(--s-3); align-content: start; text-decoration: none; color: inherit; }
.article h3 { font-size: var(--t-1); font-weight: 450; line-height: 1.25; }
.article:hover h3 { color: var(--blue); }
.article time { color: var(--ink-faint); font-size: var(--t--1); }
.article .fig { transition: transform .4s var(--ease); }
.article:hover .fig { transform: translateY(-3px); }


/* ---------- works ----------
   Live screenshots of each client's own site: the most direct proof available. */
.works { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 62rem) { .works { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .works { grid-template-columns: 1fr; } }
.work {
  display: grid; gap: var(--s-3); align-content: start;
  text-decoration: none; color: inherit;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.work__shot {
  border: 1px solid var(--line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.work:hover .work__shot {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2.5rem rgba(10,27,41,.14);
}
.work h3 { font-size: var(--t-1); font-weight: 500; }
.work:hover h3 { color: var(--blue); }
.work p { color: var(--ink-soft); font-size: var(--t-0); }
.work__metrics { display: flex; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-2); }
.work__metric b {
  display: block; font-family: var(--font-display); font-size: var(--t-2);
  font-weight: 400; letter-spacing: -0.02em; color: var(--blue);
}
.work__metric span { color: var(--ink-faint); font-size: var(--t--1); }

/* ---------- closing ---------- */
.closing { padding-block: clamp(4rem, 9vw, 8rem); }
.closing h2 { font-size: var(--t-6); font-weight: 300; max-width: 15ch; letter-spacing: -0.03em; }
.closing p { max-width: 46ch; margin-top: var(--s-5); font-size: var(--t-1); }
.closing .btn { margin-top: var(--s-6); }

/* A section head that carries a statement beside the label, instead of
   stranding a short heading in an empty column. */
.sec-head--split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
}
.sec-head--split h2 { max-width: 12ch; }
.sec-head--split .lede-xl { max-width: 34ch; }
@media (max-width: 62rem) {
  .sec-head--split { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* Equal-height serve cards: the heading block reserves two lines so the
   portraits and body copy line up across all three. */
.serve__item h3 { min-height: 2.4em; }
@media (max-width: 62rem) { .serve__item h3 { min-height: 0; } }
.serve__item .fig { margin-bottom: var(--s-2); }

/* ---------- services index ----------
   Small images on purpose: this is a scannable menu, not a gallery. */
.svc-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 62rem) { .svc-index { grid-template-columns: 1fr; } }
.svc-card {
  display: grid; gap: var(--s-3); align-content: start;
  text-decoration: none; color: inherit;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.svc-card .fig { max-height: 11rem; }
.svc-card h2 { font-size: var(--t-2); font-weight: 450; }
.svc-card p { color: var(--ink-soft); font-size: var(--t-0); }
.svc-card__go { color: var(--blue); font-size: var(--t-0); }
.svc-card:hover h2 { color: var(--blue); }

/* ---------- service detail ----------
   No image at all: the index above already showed it. This section is for reading. */
.svc-detail {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 62rem) { .svc-detail { grid-template-columns: 1fr; gap: var(--s-6); } }
.svc-detail__head .service__no { display: block; margin-bottom: var(--s-3); }
.svc-detail__head h2 { font-size: var(--t-4); font-weight: 350; letter-spacing: -0.02em; }
.svc-detail__intro { color: var(--ink-soft); margin-top: var(--s-4); max-width: 42ch; }
.svc-detail__head .btn { margin-top: var(--s-5); }
.svc-detail__lists { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 48rem) { .svc-detail__lists { grid-template-columns: 1fr; } }
.svc-detail__lists h3 {
  font-family: var(--font-text); font-size: var(--t-0); color: var(--ink-faint);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); margin-bottom: var(--s-4);
}

/* ---------- long forms ---------- */
.form--wide { max-width: none; gap: var(--s-7); }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-5); }
.form legend {
  font-family: var(--font-display); font-size: var(--t-2); font-weight: 450;
  padding: 0 0 var(--s-4); border-bottom: 1px solid var(--line);
  width: 100%; margin-bottom: var(--s-2);
}
.form legend.as-label {
  font-family: var(--font-text); font-size: var(--t-0); font-weight: 400;
  color: var(--ink-soft); border: 0; padding-bottom: var(--s-2); margin-bottom: 0;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 48rem) { .field-row { grid-template-columns: 1fr; } }
.field .opt { color: var(--ink-faint); font-size: var(--t--1); }
.checks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--s-5); }
@media (max-width: 36rem) { .checks-grid { grid-template-columns: 1fr; } }

.steps { list-style: none; counter-reset: s; padding: 0; margin-top: var(--s-4); display: grid; gap: var(--s-4); }
/* Indent-and-overlay rather than a 2-column grid: with a grid, the <b> takes the
   content column and the text after it becomes a third item, auto-placed back
   into the narrow number column — which wraps it one word per line. */
.steps li {
  counter-increment: s;
  position: relative;
  padding-left: 2.1rem;
  color: var(--ink-soft);
  font-size: var(--t-0);
}
.steps li::before {
  content: counter(s);
  position: absolute;
  left: 0; top: 0;
  width: 1.6rem;
  font-family: var(--font-display);
  color: var(--gilt);
  font-size: var(--t-1);
  line-height: 1.35;
}
.steps b { display: block; color: var(--ink); }

/* ---------- testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.quote { margin: 0; display: grid; gap: var(--s-4); align-content: start; }
.quote blockquote { margin: 0; }
.quote blockquote p {
  font-family: var(--font-display); font-size: var(--t-2); font-weight: 350;
  line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); margin: 0;
}
.quote blockquote p::before { content: "\201C"; color: var(--gilt); }
.quote blockquote p::after  { content: "\201D"; color: var(--gilt); }
.quote figcaption { color: var(--ink-soft); font-size: var(--t--1); }
.quote figcaption b { display: block; color: var(--ink); font-weight: 500; font-size: var(--t-0); }

/* ---------- case studies ---------- */
.work { border-top: 2px solid var(--gilt); padding-top: var(--s-4); }
.work__metrics { display: flex; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-4); }
.work__metric b {
  display: block; font-family: var(--font-display); font-size: var(--t-3);
  font-weight: 400; letter-spacing: -0.02em; color: var(--blue);
}
.work__metric span { color: var(--ink-faint); font-size: var(--t--1); }

/* Marks the clients whose presence was built from nothing — the number beside
   it is absolute growth, not a percentage from zero. */
.work__tag {
  font-family: var(--font-text); font-size: var(--t--1); font-weight: 400;
  color: var(--gilt); letter-spacing: .01em; white-space: nowrap;
}