/* Katha Kavana — counter. Generated by build/counter_style.py. */

:root {
  --paper:  #F7F4EC;
  --ink:    #17150F;
  --soft:   #6E685C;
  --line:   #C9C1B0;
  --stamp:  #C1622D;
  --slip:   34rem;
  --bar:    4.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Courier Prime", ui-monospace, SFMono-Regular, Menlo,
               "Courier New", monospace;
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--stamp); }
:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--stamp);
              color: var(--paper); padding: 0.6rem 1rem; z-index: 20; }

/* The slip. padding-bottom clears the fixed action bar so the last line of
   the card is never parked underneath it. */
.slip {
  width: min(var(--slip), 100% - 2.25rem);
  margin: 0 auto;
  padding: clamp(2rem, 7vw, 3.25rem) 0 calc(var(--bar) + 2.5rem);
}

/* --- head -------------------------------------------------------------- */

.slip-head { text-align: center; }
.kn { margin: 0 0 0.5rem; letter-spacing: 0.3em; color: var(--stamp);
      font-size: 0.9rem; }
.slip-head h1 { margin: 0; font-size: clamp(1.65rem, 7vw, 2.2rem);
                font-weight: 700; letter-spacing: 0.14em;
                text-transform: uppercase; }
.sub { margin: 0.35rem 0 0; letter-spacing: 0.24em; font-size: 0.72rem;
       text-transform: uppercase; color: var(--soft); }
.sign { margin: 1rem 0 0; color: var(--soft); font-size: 0.92rem; }

/* --- tear lines -------------------------------------------------------- */

.tear { border: 0; border-top: 1px dashed var(--line);
        margin: 1.75rem 0; }
.tear-label {
  display: flex; align-items: center; gap: 0.9rem;
  margin: 2.25rem 0 1.25rem; color: var(--soft);
  font-size: 0.72rem; letter-spacing: 0.28em;
}
.tear-label::before, .tear-label::after {
  content: ""; flex: 1; border-top: 1px dashed var(--line);
}
.tear-end { text-align: center; color: var(--line); letter-spacing: 0.4em;
            margin: 1.5rem 0 0; }

/* --- facts ------------------------------------------------------------- */

.facts { margin: 0; }
.facts > div { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr);
               gap: 0.75rem; padding: 0.5rem 0; }
.facts dt { font-size: 0.72rem; letter-spacing: 0.18em; color: var(--soft);
            padding-top: 0.2rem; }
.facts dd { margin: 0; }

.fine { display: block; color: var(--soft); font-size: 0.78rem;
        line-height: 1.5; margin-top: 0.25rem; }
.fine.block { margin: 0.75rem 0 0; }

/* --- the card ---------------------------------------------------------- */

.card-src { margin: 1.75rem 0 0; color: var(--soft); font-size: 0.7rem;
            letter-spacing: 0.16em; text-transform: uppercase; }
.sec { margin: 1.4rem 0 0.5rem; font-size: 0.95rem; font-weight: 700;
       letter-spacing: 0.12em; text-transform: uppercase; }
.lines { margin: 0; }
.line { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.2rem 0; }
.line dt { flex: 0 1 auto; }
.line dd { margin: 0; }

/* The leader: a flexible cell filled with dots, so it takes exactly the space
   between the name and the price at any width. */
.dots {
  flex: 1 1 1.5rem; min-width: 1.5rem; align-self: center; height: 1px;
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1px);
  background-size: 6px 2px; background-repeat: repeat-x;
  background-position: 0 center;
}
.amt { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }

.stamp {
  margin: 1.5rem 0 0; text-align: center; color: var(--stamp);
  border: 2px solid var(--stamp); padding: 0.55rem 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.16em; font-weight: 700;
  transform: rotate(-1.2deg);
}

/* --- service ticks ----------------------------------------------------- */

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { display: flex; gap: 0.7rem; padding: 0.22rem 0; }
.ticks .mk { flex: 0 0 1rem; font-weight: 700; }
.ticks .yes .mk { color: var(--stamp); }
.ticks .no { color: var(--soft); }
.ticks .no .mk { color: var(--line); }

/* --- foot and bar ------------------------------------------------------ */

.slip-foot { margin-top: 2.25rem; }
.slip-foot .fine { margin-top: 0.75rem; }

/* The bar spans the full width and centres its three actions on the slip.
   Floating it against the right edge instead put it straight over the price
   column on a wide screen. */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: center;
  height: var(--bar); align-items: stretch;
  background: var(--paper); border-top: 1px dashed var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.act {
  flex: 1 1 0; max-width: calc(var(--slip) / 3);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 0.82rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink);
  border-left: 1px dashed var(--line);
}
.act:first-child { border-left: 0; }
.act.primary { background: var(--stamp); color: var(--paper);
               font-weight: 700; }
.act.primary:hover { color: var(--paper); }

@media (min-width: 40rem) {
  .bar { height: 3.5rem; }
}

@media print {
  .bar, .skip { display: none; }
  body { background: #fff; }
  .slip { width: auto; padding-bottom: 0; }
}