/* ============================================================
   Changing Nepal — inner pages
   Machines listing, machine detail, journal listing, article.
   Builds on the shared parts in cn.css.
   ============================================================ */

/* ============================================================
   Page header — replaces the old breadcrumb strip
   ============================================================ */
/* Light on every page but home, whose hero is the video wall. The
   fixed header is already white here, so a hairline keeps the two
   from reading as one block. */
.cn-phead {
  background: var(--cn-bg);
  color: var(--cn-fg);
  border-bottom: 1px solid var(--cn-line);
  /* Cleared the fixed header, which sits over the page. */
  padding-top: calc(var(--cn-head-h) + clamp(2rem, 5vw, 4rem));
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.cn-phead--tall { padding-bottom: clamp(3rem, 7vw, 6rem); }

.cn-phead__title {
  font-family: var(--cn-display);
  font-size: clamp(2.2rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.03em;
  max-width: 20ch;
  text-wrap: balance;
}
/* Roughly 0.45em of the title. The old 1.15rem was written when the
   reset was silently zeroing it, so it had never actually been seen —
   once it applied it came out at 0.23em under an 80px heading, half
   the space beneath it separating the lead from the buttons. The
   tightest gap on the block should not sit under the largest type. */
.cn-phead__lead {
  color: var(--cn-fg-muted);
  max-width: 56ch;
  margin-top: clamp(1.25rem, 2.2vw, 2.25rem);
}
.cn-phead__row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.85rem 1.5rem;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
.cn-count { font-family: var(--cn-data); font-size: var(--cn-t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cn-fg-muted); }
.cn-count b { color: var(--cn-brand-deep); font-weight: 600; }

/* ============================================================
   Category filter rail
   ============================================================ */
.cn-filters {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-block: 1rem;
  scrollbar-width: none;
}
.cn-filters::-webkit-scrollbar { display: none; }
.cn-chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--cn-line);
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cn-fg-muted);
  white-space: nowrap;
  transition: background var(--cn-dur) var(--cn-ease), color var(--cn-dur) var(--cn-ease), border-color var(--cn-dur) var(--cn-ease);
}
.cn-chip:hover { border-color: var(--cn-line-hard); color: var(--cn-fg); }
.cn-chip.is-on {
  background: var(--cn-ink-deep);
  border-color: var(--cn-ink-deep);
  color: var(--cn-on-ink);
}
.cn-chip em { font-style: normal; opacity: 0.6; }

/* Sticky so the filter stays reachable down a long grid. */
.cn-filters__bar {
  position: sticky;
  top: var(--cn-head-h);
  z-index: 20;
  background: var(--cn-bg);
  border-bottom: 1px solid var(--cn-line);
}

/* ============================================================
   Machines grid
   ============================================================ */
.cn-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .cn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .cn-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 84rem) { .cn-grid { grid-template-columns: repeat(4, 1fr); } }

.cn-empty {
  border: 1px dashed var(--cn-line-hard);
  padding: clamp(2rem, 6vw, 4rem);
  text-align: center;
  color: var(--cn-fg-muted);
}

/* ---------- pagination ---------- */
.cn-pager { margin-top: clamp(2rem, 5vw, 3.5rem); }
.cn-pager nav { display: flex; justify-content: center; }
.cn-pager svg { width: 0.85rem; height: 0.85rem; }
.cn-pager ul, .cn-pager .pagination {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  align-items: center; justify-content: center;
  list-style: none; margin: 0; padding: 0;
}
.cn-pager li > *, .cn-pager li span, .cn-pager li a {
  display: grid; place-items: center;
  min-width: 2.75rem; height: 2.75rem;
  padding-inline: 0.6rem;
  border: 1px solid var(--cn-line);
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  color: var(--cn-fg-muted);
  transition: background var(--cn-dur) var(--cn-ease), color var(--cn-dur) var(--cn-ease), border-color var(--cn-dur) var(--cn-ease);
}
.cn-pager li a:hover { border-color: var(--cn-ink-deep); color: var(--cn-fg); }
.cn-pager .active > *, .cn-pager li[aria-current] > * {
  background: var(--cn-ink-deep); border-color: var(--cn-ink-deep); color: var(--cn-on-ink);
}
.cn-pager .disabled > * { opacity: 0.35; }

/* ============================================================
   Machine detail
   ============================================================ */
.cn-pd {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
  padding-block: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 66rem) { .cn-pd { grid-template-columns: 1.15fr 1fr; } }

/* ---------- gallery ---------- */
.cn-gal__main {
  position: relative;
  overflow: hidden;
  background: var(--cn-bg-soft);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--cn-line);
}
.cn-gal__main img { width: 100%; height: 100%; object-fit: cover; }
.cn-gal__thumbs {
  display: flex; gap: 0.5rem;
  margin-top: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
}
.cn-gal__thumb {
  flex: none;
  width: 5.5rem; height: 4.25rem;
  border: 1px solid var(--cn-line);
  background: var(--cn-bg-soft);
  padding: 0;
  overflow: hidden;
  transition: border-color var(--cn-dur) var(--cn-ease);
}
.cn-gal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cn-gal__thumb.is-on { border-color: var(--cn-ink-deep); border-width: 2px; }

/* ---------- buy column ---------- */
.cn-pd__eyebrow { margin-bottom: 0.85rem; }
.cn-pd__title {
  font-family: var(--cn-display);
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -0.025em;
  text-wrap: balance;
}
.cn-pd__price {
  font-family: var(--cn-data);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--cn-brand-deep);
  margin-top: 1rem;
}
.cn-pd__price s { color: var(--cn-fg-muted); opacity: 0.7; margin-left: 0.6rem; font-size: 0.85em; }
.cn-pd__note { font-family: var(--cn-data); font-size: var(--cn-t-xs); color: var(--cn-fg-muted); letter-spacing: 0.06em; margin-top: 0.35rem; }
.cn-pd__row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.25rem, 3vw, 2rem); }

/* ---------- spec table ---------- */
.cn-specs { margin-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--cn-line); }
.cn-specs div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--cn-line);
}
@media (min-width: 30rem) { .cn-specs div { grid-template-columns: 12rem 1fr; gap: 1rem; align-items: baseline; } }
.cn-specs dt {
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cn-fg-muted);
}
.cn-specs dd { margin: 0; font-size: var(--cn-t-sm); }

/* ---------- trust strip ---------- */
.cn-assure {
  display: grid; gap: 1px;
  background: var(--cn-line);
  border: 1px solid var(--cn-line);
  grid-template-columns: 1fr;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 30rem) { .cn-assure { grid-template-columns: repeat(3, 1fr); } }
.cn-assure > div { background: var(--cn-bg); padding: 1rem; display: flex; gap: 0.6rem; align-items: flex-start; }
.cn-assure .cn-ico { color: var(--cn-brand-deep); margin-top: 0.15em; }
.cn-assure b { display: block; font-size: var(--cn-t-sm); }
.cn-assure span { font-size: var(--cn-t-xs); color: var(--cn-fg-muted); }

/* ============================================================
   Article
   ============================================================ */
.cn-art { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; padding-block: clamp(2rem, 5vw, 4rem); }
@media (min-width: 68rem) { .cn-art { grid-template-columns: minmax(0, 1fr) 20rem; } }

.cn-art__hero { overflow: hidden; background: var(--cn-bg-soft); aspect-ratio: 16 / 9; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.cn-art__hero img { width: 100%; height: 100%; object-fit: cover; }

.cn-aside { position: sticky; top: calc(var(--cn-head-h) + 1.5rem); align-self: start; }
.cn-aside__title {
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cn-fg-muted);
  padding-bottom: 0.85rem; border-bottom: 1px solid var(--cn-line);
}
.cn-mini { display: grid; gap: 1rem; margin-top: 1.15rem; }
.cn-mini a { display: grid; grid-template-columns: 5rem 1fr; gap: 0.85rem; align-items: start; }
.cn-mini__shot { width: 5rem; height: 3.75rem; object-fit: cover; background: var(--cn-bg-soft); }
.cn-mini__t { font-size: var(--cn-t-sm); font-weight: 600; line-height: 1.3; }
.cn-mini a:hover .cn-mini__t { color: var(--cn-brand-deep); }
.cn-mini__d { font-family: var(--cn-data); font-size: var(--cn-t-xs); color: var(--cn-fg-muted); }

/* ============================================================
   Journal listing — the leading line that draws down the
   archive as it scrolls.
   ============================================================ */
.cn-thread { position: relative; }
@media (min-width: 62rem) {
  .cn-thread::before {
    content: '';
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 1px;
    background: var(--cn-line);
  }
  /* Two pixels against the track's one, so the drawn part actually
     reads at a glance rather than disappearing into the hairline. */
  .cn-thread__fill {
    position: absolute;
    left: 50%; top: 0;
    width: 2px; height: 100%;
    margin-left: -0.5px;
    background: var(--cn-brand);
    transform: scaleY(0);
    transform-origin: top center;
  }
}
.cn-thread__fill { display: none; }
@media (min-width: 62rem) { .cn-thread__fill { display: block; } }

.cn-entry {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
  padding-block: clamp(1.75rem, 4vw, 3rem);
  border-bottom: 1px solid var(--cn-line);
}
@media (min-width: 62rem) {
  .cn-entry { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); border-bottom: 0; }
  /* Alternate which side the picture sits on down the thread. */
  .cn-entry:nth-child(even) .cn-entry__shot { order: 2; }
}
.cn-entry__shot { overflow: hidden; background: var(--cn-bg-soft); aspect-ratio: 3 / 2; }
.cn-entry__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--cn-ease); }
.cn-entry:hover .cn-entry__shot img { transform: scale(1.04); }
.cn-entry__date { font-family: var(--cn-data); font-size: var(--cn-t-xs); letter-spacing: 0.1em; color: var(--cn-fg-muted); }
.cn-entry__t {
  font-family: var(--cn-display);
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  font-weight: 700; line-height: 1.14; letter-spacing: -0.02em;
  margin-block: 0.6rem 0.75rem;
  text-wrap: balance;
}
.cn-entry:hover .cn-entry__t { color: var(--cn-brand-deep); }
.cn-entry__d { font-size: var(--cn-t-sm); color: var(--cn-fg-muted); max-width: 46ch; }
.cn-entry__go { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; font-family: var(--cn-data); font-size: var(--cn-t-xs); letter-spacing: 0.1em; text-transform: uppercase; }

/* ============================================================
   Contact
   ============================================================ */
.cn-contact {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 68rem) { .cn-contact { grid-template-columns: minmax(0, 1fr) 20rem; } }

.cn-reach { position: sticky; top: calc(var(--cn-head-h) + 1.5rem); }
.cn-reach__list { margin-top: 1.15rem; }
.cn-reach .cn-row .cn-ico { color: var(--cn-brand-deep); }
.cn-reach a { color: var(--cn-fg-muted); display: block; }
.cn-reach a:hover { color: var(--cn-fg); }

.cn-map { line-height: 0; border-top: 1px solid var(--cn-line); }
.cn-map iframe { width: 100%; height: clamp(18rem, 40vw, 26rem); border: 0; display: block; }

/* ---------- listing card: category above the name ---------- */
.cn-card__meta {
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cn-fg-muted);
}


/* The count chip also appears on light section heads, where the
   on-ink colours of .cn-count would be invisible. */
.cn-count--dark { color: var(--cn-fg-muted); }
.cn-count--dark b { color: var(--cn-brand-deep); }

/* ============================================================
   Search results

   The app already ships a working site-wide search route; this is
   the page it renders into. Results are grouped by what they are —
   a sector, a machine, an article — because "momo" legitimately
   matches all three and an undifferentiated list buries the one
   the reader wanted.
   ============================================================ */

/* ---------- the refine field ---------- */
.cn-find {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 40rem;
  margin-top: clamp(1.25rem, 2.2vw, 2rem);
  padding: 0.35rem 0.35rem 0.35rem 0.9rem;
  border: 1px solid var(--cn-line-hard);
  background: var(--cn-bg);
  transition: border-color var(--cn-dur) var(--cn-ease);
}
.cn-find:focus-within { border-color: var(--cn-brand); }
.cn-find__ico { display: grid; place-items: center; color: var(--cn-fg-muted); flex: none; }
.cn-find__field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}
.cn-find__field:focus { outline: none; }
.cn-find__field::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.cn-find .cn-btn { flex: none; }

/* ---------- category and brand chips ---------- */
.cn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.cn-chipl {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--cn-line);
  background: var(--cn-bg);
  font-weight: 600;
  transition: border-color var(--cn-dur) var(--cn-ease),
              background var(--cn-dur) var(--cn-ease);
}
a.cn-chipl:hover { border-color: var(--cn-brand); background: var(--cn-bg-soft); }
.cn-chipl__mark { display: grid; place-items: center; color: var(--cn-brand-deep); flex: none; }
.cn-chipl__mark .cn-ico { width: 1.35em; height: 1.35em; }

/* ---------- article hits ---------- */
.cn-hits {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
@media (min-width: 52rem) { .cn-hits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cn-hit {
  position: relative;
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--cn-line);
  background: var(--cn-bg);
  transition: border-color var(--cn-dur) var(--cn-ease);
}
.cn-hit:hover { border-color: var(--cn-brand); }
.cn-hit__shot {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--cn-bg-soft);
}
.cn-hit__shot img { width: 100%; height: 100%; object-fit: cover; }
.cn-hit__body { display: grid; gap: 0.3rem; min-width: 0; }
.cn-hit__meta {
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cn-fg-muted);
}
.cn-hit__t { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.cn-hit:hover .cn-hit__t a { color: var(--cn-brand-deep); }
.cn-hit__d { font-size: var(--cn-t-sm); line-height: 1.55; color: var(--cn-fg-muted); }
/* One link per hit, stretched over the whole row. */
.cn-hit__t a::after { content: ""; position: absolute; inset: 0; }

@media (max-width: 30rem) {
  .cn-hit { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .cn-hit__d { display: none; }
}

/* ---------- overflow note and empty state ---------- */
.cn-more {
  margin-top: 1.15rem;
  font-size: var(--cn-t-sm);
  color: var(--cn-fg-muted);
}
.cn-more a { color: var(--cn-brand-deep); text-decoration: underline; text-underline-offset: 0.2em; }

.cn-empty__d { margin-top: 0.6rem; color: var(--cn-fg-muted); max-width: 46ch; }
.cn-empty__row {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  justify-content: center; margin-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .cn-find, .cn-chipl, .cn-hit { transition: none; }
}

/* ---------- live catalogue search ----------
   The field filters the grid in place, so it needs a clear affordance
   and something to say while it is working. */
.cn-find__clear {
  display: grid;
  place-items: center;
  align-self: stretch;
  padding-inline: 0.6rem;
  color: var(--cn-fg-muted);
  flex: none;
}
.cn-find__clear:hover { color: var(--cn-fg); }
.cn-find__clear[hidden] { display: none; }
.cn-find .cn-btn[hidden] { display: none; }

/* A quiet busy state — a spinner for a 260ms debounce is more motion
   than the wait deserves. */
.cn-find.is-busy { border-color: var(--cn-brand); }
.cn-find.is-busy .cn-find__ico { opacity: 0.5; }

.cn-find__note {
  margin-top: 0.75rem;
  font-family: var(--cn-data);
  font-size: var(--cn-t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cn-fg-muted);
}
.cn-find__note[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cn-find__clear { transition: none; }
}

/* ============================================================
   Output calculator

   Shown only on machines whose rated figure is a real rate. Every
   number in it derives from that one figure and the four inputs, so
   the panel cannot display totals that disagree with each other.
   ============================================================ */
.cn-out {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.15rem, 2.5vw, 1.75rem);
  border: 1px solid var(--cn-line);
  background: var(--cn-bg-soft);
}
.cn-out__head { display: grid; gap: 0.35rem; }
.cn-out__src {
  font-family: var(--cn-data);
  font-size: var(--cn-t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cn-fg-muted);
}

.cn-out__controls {
  display: grid;
  gap: 0.9rem 1.5rem;
  grid-template-columns: 1fr;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 34rem) { .cn-out__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cn-out__ctl { display: grid; gap: 0.4rem; min-width: 0; }
.cn-out__ctl > span {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--cn-t-sm);
  color: var(--cn-fg-muted);
}
.cn-out__ctl > span b { color: var(--cn-fg); font-variant-numeric: tabular-nums; }

/* The native track is styled per-engine; both are given the same
   height and brand thumb so the control reads the same either way. */
/* The element is given a real height so there is something to grab on a
   touch screen — styling the bare input to 3px leaves a 3px target. The
   visible 3px line is drawn on the track instead, and the element itself
   is transparent. */
.cn-out__ctl input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  border-radius: 0;
  cursor: pointer;
}
.cn-out__ctl input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--cn-line-hard);
  border-radius: 0;
}
.cn-out__ctl input[type="range"]::-moz-range-track {
  height: 3px;
  background: var(--cn-line-hard);
  border-radius: 0;
}
.cn-out__ctl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  /* Centres the thumb on a 3px track: (3 - 18) / 2 */
  margin-top: -7.5px;
  background: var(--cn-brand-deep);
  border: 0;
  cursor: pointer;
}
.cn-out__ctl input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--cn-brand-deep);
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.cn-out__ctl input[type="range"]:focus-visible {
  outline: 2px solid var(--cn-brand-deep);
  outline-offset: 4px;
}

.cn-out__figures {
  display: grid;
  gap: 0.75rem 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(1.15rem, 2.5vw, 1.75rem);
  padding-top: clamp(1.15rem, 2.5vw, 1.5rem);
  border-top: 1px solid var(--cn-line);
}
.cn-out__k {
  font-family: var(--cn-data);
  font-size: var(--cn-t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cn-fg-muted);
}
.cn-out__v {
  margin-top: 0.25rem;
  font-family: var(--cn-display);
  font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.cn-out__v small {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--cn-body);
  font-size: var(--cn-t-xs);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--cn-fg-muted);
}

.cn-out__note {
  margin-top: 1rem;
  font-size: var(--cn-t-sm);
  line-height: 1.6;
  color: var(--cn-fg-muted);
}
.cn-out__note a { color: var(--cn-brand-deep); text-decoration: underline; text-underline-offset: 0.2em; }