/* The ticket: thermal paper on a plain page, shared by the roast and the bill. */
/* One accent, the red ink of the stamp: it marks what is failing and what is for sale, nothing else. */
:root { --bg: #dcd8cd; --ink: #141413; --soft: #55534d; --line: #c2beb2; --box: #fff; --ring: rgba(20, 20, 19, .14); --shade: rgba(40, 34, 20, .26); --red: #c8321e; --cream: #fbf6ea; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #131211; --ink: #f2f1ec; --soft: #9a9891; --line: #34332f; --box: #1e1e1c; --ring: rgba(242, 241, 236, .16); --shade: rgba(0, 0, 0, .55); --red: #d23a24; }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
main {
  min-height: 100%; max-width: 440px; margin: 0 auto; padding: 36px 16px 48px;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
p { margin: 0; }

.printer { overflow: hidden; padding: 0 0 34px; margin-bottom: -22px; filter: drop-shadow(0 14px 26px var(--shade)); }
.paper {
  --paper: #f8f5ec; --print: #1c1b18; --faint: #68645b; --red: #c8321e;
  position: relative; background: var(--paper); color: var(--print); padding: 34px 24px 30px;
  font: 14px/1.5 ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 14px 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 51% repeat-x;
  animation: feed .75s steps(15) both;
}
@keyframes feed { from { transform: translateY(-101%); } to { transform: none; } }
.brand { display: block; text-align: center; color: inherit; text-decoration: none; font-size: 19px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
/* Number and date stacked on the left: the right side stays free for the stamp. */
.meta { display: flex; flex-direction: column; margin-top: 10px; color: var(--faint); font-size: 13px; min-height: 3em; }
.rule { border: 0; border-top: 1px dashed var(--faint); margin: 14px 0; opacity: .7; }
.item, .label { text-transform: uppercase; font-size: 12px; letter-spacing: .06em; color: var(--faint); }
.label { margin-bottom: 4px; }
.quote { margin-top: 4px; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
html:not(.asked) .quote, html:not(.asked) #no, .asked .sub, .asked #row-count { display: none; }

/* The roast: the largest line on the paper. */
h1, .paper-h1 { margin: 0; font: inherit; font-size: clamp(20px, 5.5vw, 24px); line-height: 1.24; font-weight: 800; letter-spacing: -.03em; min-height: 2.48em; overflow-wrap: anywhere; }
h1.typing::after { content: ""; display: inline-block; width: .5em; height: .95em; margin-left: .08em; vertical-align: -.1em; background: var(--print); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sub { margin-top: 10px; color: var(--faint); }
#answer-text { overflow-wrap: anywhere; }
.late { opacity: 0; transition: opacity .25s ease; }
.late.in { opacity: 1; }

dl { margin: 0; }
dl div { display: flex; align-items: baseline; }
dt { flex: 1; display: flex; align-items: baseline; text-transform: uppercase; font-size: 13px; }
dt::after { content: ""; flex: 1; margin: 0 8px; border-bottom: 1px dotted var(--faint); transform: translateY(-3px); }
dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.barcode { display: flex; justify-content: center; align-items: stretch; gap: 2px; height: 46px; margin: 18px 0 8px; }
.barcode i { background: var(--print); }
.foot { text-align: center; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.paper a { color: inherit; text-underline-offset: 3px; }

/* The coupon at the bottom of the ticket: the one advertising slot. */
.ad { position: relative; margin-top: 18px; padding: 14px 14px 12px; border: 1px dashed var(--print); text-align: center; }
.ad span { position: absolute; top: -9px; left: 12px; padding: 0 6px; background: var(--paper); font-size: 11px; letter-spacing: .1em; color: var(--faint); }

.stamp {
  position: absolute; right: 16px; top: 76px; padding: 3px 10px 2px; border: 3px solid var(--red); border-radius: 6px; color: var(--red);
  font-size: 19px; font-weight: 800; letter-spacing: .14em; rotate: -11deg; opacity: .86; mix-blend-mode: multiply;
  animation: thud .22s cubic-bezier(.2, .8, .3, 1.3) both;
}
@keyframes thud { from { opacity: 0; scale: 2.6; } to { opacity: .86; scale: 1; } }

/* The bill: one fact per block, the multiplier as the large figure. */
.bill h1 { min-height: 0; }
.bill .lede { margin-top: 8px; color: var(--faint); }
.fact .no { color: var(--faint); font-size: 12px; letter-spacing: .06em; }
.fact h2 { margin: 0 0 8px; font: inherit; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.fact .times { margin: 10px 0 6px; font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.fact .note { font-size: 13px; }
.fact .src { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--faint); overflow-wrap: anywhere; }

.cta {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border-radius: 28px;
  background: var(--ink); color: var(--bg); font-weight: 650; font-size: 18px; text-decoration: none;
}
.cta:hover { filter: brightness(1.12); }
.cta:active { scale: .97; }
.cta svg, .copy svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.cta.second { border: 1.5px solid var(--ink); background: none; color: var(--ink); font: inherit; font-weight: 650; font-size: 17px; cursor: pointer; width: 100%; }
.cta:disabled { opacity: .3; cursor: default; }
button.cta { border: 0; font-family: inherit; width: 100%; cursor: pointer; }
.more { text-align: center; font-size: 15px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; color: var(--soft); }
.more span { padding: 6px; flex-basis: 100%; }
.more button, .more a { border: 0; background: none; padding: 6px; color: var(--soft); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.more button:hover, .more a:hover { color: var(--ink); }

/* Passing it on, behind the text link. */
.maker { display: flex; flex-direction: column; gap: 10px; }
.box {
  display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 20px; min-height: 56px;
  background: var(--box); border: 1px solid var(--line); border-radius: 28px; transition: box-shadow .18s ease, border-color .18s ease;
}
.box:focus-within { border-color: var(--soft); box-shadow: 0 0 0 4px var(--ring); }
.box input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: inherit; font: inherit; padding: 8px 0; }
.box input::placeholder { color: var(--soft); }
.copy {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px 0 14px; border: 0; border-radius: 21px;
  background: var(--ink); color: var(--bg); font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; transition: opacity .18s ease;
}
.copy:disabled { opacity: .3; cursor: default; }
.copy:not(:disabled):active { scale: .96; }
.copy .done, .copy.ok .todo { display: none; }
.copy.ok .done { display: block; }
.box.small { min-height: 46px; padding: 3px 20px; }
.box.small input { font-size: 15px; }
.hint { min-height: 1.45em; margin-top: -4px; padding: 0 20px; color: var(--soft); font-size: 14px; }
.hint:empty { display: none; }
#pay-note { text-align: center; margin-top: -10px; }
.maker .more { margin: -4px 0; }
#pay { height: auto; min-height: 56px; padding: 10px 20px; text-align: center; line-height: 1.25; }
.made { display: flex; flex-direction: column; gap: 10px; }
.url { padding: 0 20px; color: var(--ink); font-weight: 500; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pair { display: flex; gap: 10px; }
.pair .copy { flex: 1; justify-content: center; height: 48px; border-radius: 24px; text-decoration: none; }
.copy.ghost { background: none; color: var(--ink); border: 1.5px solid var(--ink); padding: 0 18px; }

[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* The website roast. */
.host { margin-top: 4px; font-weight: 700; overflow-wrap: anywhere; }
#more-lines .also { margin-top: 10px; }
.paper .typing::after { content: ""; display: inline-block; width: .5em; height: .95em; margin-left: .08em; vertical-align: -.1em; background: var(--print); animation: blink 1s steps(1) infinite; }
.ad .small { margin-top: 6px; font-size: 11px; color: var(--faint); }
.ad .small a { color: inherit; }
.center { text-align: center; }

/* The score: the total of the receipt, printed double height; in red when it fails. */
.score { display: flex; align-items: baseline; justify-content: space-between; }
.score .label { margin: 0; }
.score .big { font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.score .big small { margin-left: 3px; font-size: 16px; font-weight: 700; letter-spacing: 0; }
.score.bad .big { color: var(--red); }

/* What is for sale is the one coloured button. On a phone it stays at the foot of the screen while the bill scrolls. */
.cta.buy { background: var(--red); color: var(--cream); box-shadow: 0 8px 22px rgba(200, 50, 30, .3); }
.buybar { position: sticky; bottom: 0; z-index: 3; margin: 0 -16px; padding: 22px 16px 12px; background: linear-gradient(to bottom, transparent, var(--bg) 46%); }
.pitch { font-size: 24px; line-height: 1.28; font-weight: 650; letter-spacing: -.015em; margin-bottom: 8px; }
.only-wide { display: none; }

/* Two columns from a laptop up: the paper on the left, what to do with it on the right, in view while the paper scrolls.
   On a phone the two columns are one, in reading order. */
.roll, .side { flex-direction: column; gap: 18px; min-width: 0; }
main.wide > .roll, main.wide > .side { display: contents; }
@media (min-width: 980px) {
  main.wide { max-width: 1060px; display: grid; grid-template-columns: minmax(0, 490px) minmax(0, 400px); column-gap: 84px; justify-content: center; align-content: center; align-items: start; padding: 56px 24px 64px; }
  main.wide > .roll, main.wide > .side { display: flex; }
  main.wide > .side { position: sticky; top: 56px; }
  main.wide .paper { font-size: 15px; padding: 40px 32px 34px; }
  main.wide h1 { font-size: 27px; }
  .only-wide { display: block; }
  .buybar { position: static; margin: 0; padding: 0; background: none; }
}

/* The home page and the report are plain pages: wide, in the page's own type, made to be read.
   The paper is kept for what is a ticket: the roast and its score, the part that gets passed on. */
main.tool, main.report { max-width: 1120px; min-height: 0; display: block; padding: 28px 20px 56px; }
.cols { display: grid; gap: 30px; }
/* On a phone the report is one column in reading order: the ticket, how to pass it on, then the bill.
   Its parts are laid straight into the page, so the button to buy stays at the foot of the screen from the first one. */
main.report { display: flex; flex-direction: column; gap: 16px; }
main.report .cols, main.report .ticket-col, main.report .bill-col { display: contents; }
.say, .shows, .ticket-col, .bill-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.wordmark { font: 800 14px/1 ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; }
.wordmark a { color: inherit; text-decoration: none; }
.headline { min-height: 0; font-size: clamp(40px, 10vw, 68px); line-height: 1; font-weight: 800; letter-spacing: -.04em; overflow-wrap: normal; }
.lede-plain { font-size: 19px; line-height: 1.45; color: var(--soft); max-width: 33em; }
.say .maker { margin-top: 6px; max-width: 520px; }
.deal { font-size: 15px; line-height: 1.5; color: var(--soft); max-width: 36em; }
.shows .paper-h1 { min-height: 3.7em; }
.caption { text-align: center; font-size: 15px; }
.caption a, .human a { color: var(--soft); text-underline-offset: 3px; }
.caption a:hover, .human a:hover { color: var(--ink); }
.faq { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--line); display: grid; gap: 28px 56px; }
.faq h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; font-weight: 700; }
.faq p { font-size: 16px; line-height: 1.55; color: var(--soft); }
.faq .siblings { font-size: 14px; }
.faq .siblings a { color: inherit; }
main.tool > .more, main.report > .more { margin-top: 40px; }

/* The bill: eight lines to scan, each a problem and its fix. */
.kicker { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.bill-title { margin: -10px 0 0; font-size: clamp(27px, 6vw, 38px); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; overflow-wrap: anywhere; }
.buybox { display: none; }
.items { list-style: none; margin: 4px 0 0; padding: 0; }
.items > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; padding: 18px 0; border-top: 1px solid var(--line); }
.items > li:last-child { border-bottom: 1px solid var(--line); }
.items .n { padding-top: 5px; font: 13px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--soft); }
.items h3, .rewrites h3 { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 700; }
.items p { margin-top: 7px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.items .label { color: var(--soft); }
.items .fix { font-weight: 600; }
.items .fix .label { font-weight: 400; }
/* A locked line: blacked out at the length of what it hides. */
.items .locked { cursor: pointer; }
.redact i { display: inline-block; height: .78em; margin: 0 .5ch 0 0; vertical-align: -.05em; background: var(--ink); opacity: .8; border-radius: 1px; }
.items .locked:hover .redact i { opacity: 1; }
.items .tag { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.rewrites { padding: 18px 0 4px; }
.rewrites ul { margin: 10px 0 0; padding-left: 20px; font-size: 17px; line-height: 1.5; font-weight: 600; }
.human { text-align: center; font-size: 15px; }
.ticket-col .more { margin: -4px 0 0; }

@media (min-width: 760px) { .faq { grid-template-columns: 1fr 1fr; } .faq .siblings { grid-column: 1 / -1; } }
@media (min-width: 980px) {
  main.tool, main.report { padding: 48px 32px 72px; }
  main.tool .cols { grid-template-columns: minmax(0, 1fr) 430px; gap: 80px; align-items: center; min-height: min(640px, calc(100vh - 150px)); }
  main.report { display: block; }
  main.report .cols { display: grid; grid-template-columns: 410px minmax(0, 1fr); gap: 72px; align-items: start; }
  main.report .ticket-col, main.report .bill-col { display: flex; }
  .ticket-col { position: sticky; top: 40px; }
  .bill-col { max-width: 620px; }
  /* Beside the paper, the button to buy sits at the head of the bill, in view from the first screen. */
  .buybox { display: flex; align-items: center; gap: 22px; padding: 16px 16px 16px 20px; border: 1px solid var(--line); border-radius: 22px; }
  .buybox[hidden] { display: none; }
  .buybox ul { flex: 1; margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.5; color: var(--soft); }
  .buybox .cta { flex: none; padding: 0 26px; width: auto; }
}