/* tools/qrforge/styles.css — QR Forge
   Visual language: printed stationery. Warm paper, ink black, vermilion accent.
   Serif headlines, mono labels, hairline rules. Deliberately NOT the dark-tool look. */

:root{
  --paper:#f7f4ec;
  --paper-2:#efeade;
  --ink:#17150f;
  --ink-soft:#4a463c;
  --ink-faint:#8b8577;
  --rule:#ddd5c4;
  --rule-strong:#17150f;
  --vermilion:#c8371c;
  --vermilion-soft:#f0d9d2;
  --maxw:1080px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.62;
  /* subtle paper grain, no images */
  background-image:
    repeating-linear-gradient(0deg, rgba(23,21,15,.017) 0 1px, transparent 1px 3px);
}

a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--vermilion)}
a:hover{color:var(--vermilion)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- masthead: newspaper style ---------- */
.masthead{
  border-bottom:3px double var(--rule-strong);
  background:var(--paper);
}
.masthead-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px 24px 12px;
  display:flex;
  align-items:baseline;
  gap:18px;
  flex-wrap:wrap;
}
.brand{
  font-family:var(--serif);
  font-size:27px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:0;
  margin:0;
}
.brand em{font-style:normal;color:var(--vermilion)}
.brand:hover{color:var(--ink)}
.masthead .tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-left:auto;
}
.masthead nav{
  width:100%;
  border-top:1px solid var(--rule);
  margin-top:2px;
  padding-top:9px;
  display:flex;
  gap:22px;
  flex-wrap:wrap;
}
.masthead nav a{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border:0;
}
.masthead nav a:hover,.masthead nav a[aria-current]{color:var(--vermilion);text-decoration:underline;text-underline-offset:4px}

/* ---------- hero ---------- */
.hero{padding:46px 0 34px;border-bottom:1px solid var(--rule)}
.kicker{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--vermilion);
  margin:0 0 14px;
}
.hero h1{
  font-size:clamp(34px,5.4vw,58px);
  line-height:1.04;
  letter-spacing:-.022em;
  font-weight:700;
  margin:0 0 18px;
  max-width:19ch;
}
.hero h1 i{font-style:italic;color:var(--vermilion)}
.hero p.lede{
  font-size:20px;
  line-height:1.55;
  color:var(--ink-soft);
  max-width:56ch;
  margin:0 0 4px;
}

/* ---------- workstation: input left, code right ---------- */
.forge{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,380px);
  gap:0;
  border:1px solid var(--rule-strong);
  margin:34px 0 0;
  background:var(--paper);
}
@media (max-width:860px){ .forge{grid-template-columns:1fr} }

.panel{padding:26px 24px}
.panel + .panel{border-left:1px solid var(--rule)}
@media (max-width:860px){ .panel + .panel{border-left:0;border-top:1px solid var(--rule)} }

.panel-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  border-bottom:1px solid var(--rule);
  padding-bottom:9px;
  margin-bottom:18px;
}
.panel-head h2{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin:0;
  color:var(--ink);
  font-weight:600;
}
.panel-head .num{
  font-family:var(--mono);
  font-size:11px;
  color:var(--vermilion);
}
.panel-head .spacer{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-faint)}

/* type selector: underline tabs, not pills */
.kinds{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--rule);margin-bottom:20px}
.kinds button{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--ink-faint);padding:8px 12px 9px;cursor:pointer;
}
.kinds button:hover{color:var(--ink)}
.kinds button[aria-selected="true"]{color:var(--vermilion);border-bottom-color:var(--vermilion)}

.field{margin-bottom:16px}
.field label{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:5px;
}
.field input[type=text],.field input[type=url],.field input[type=tel],
.field input[type=email],.field input[type=number],.field textarea,.field select{
  width:100%;
  font-family:var(--mono);
  font-size:14px;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--rule-strong);
  border-radius:0;
  padding:7px 2px;
  outline:none;
}
.field textarea{resize:vertical;min-height:74px;line-height:1.5}
.field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:var(--vermilion)}
.field .hint{font-size:14px;color:var(--ink-faint);margin:6px 0 0}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){ .grid2{grid-template-columns:1fr} }

/* sliders */
.slider{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.slider label{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);flex:0 0 74px;
}
.slider input[type=range]{flex:1;accent-color:var(--vermilion);height:2px}
.slider output{font-family:var(--mono);font-size:12px;color:var(--ink);flex:0 0 40px;text-align:right}

/* ---------- the code itself ---------- */
.qr-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.qr-plate{
  width:100%;
  aspect-ratio:1;
  background:#fff;
  border:1px solid var(--rule-strong);
  display:grid;
  place-items:center;
  padding:16px;
  position:relative;
}
.qr-plate svg,.qr-plate canvas{width:100%;height:auto;display:block;image-rendering:pixelated}
.qr-plate.empty::after{
  content:"fill the fields";
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);
}
.qr-caption{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--ink-faint);text-align:center;text-transform:uppercase;
}
.qr-caption b{color:var(--ink);font-weight:600}

/* ---------- buttons: printed labels, hard edges ---------- */
.btn{
  appearance:none;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:11px 18px;
  border:1px solid var(--rule-strong);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  border-radius:0;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--vermilion);border-color:var(--vermilion);color:#fff}
.btn.accent{border-color:var(--vermilion);color:var(--vermilion)}
.btn.accent:hover{background:var(--vermilion);color:#fff}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.wide{width:100%}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.btn-row .btn{flex:1 1 auto}

/* ---------- body copy sections: editorial ---------- */
.section{padding:48px 0;border-bottom:1px solid var(--rule)}
.section:last-of-type{border-bottom:0}
.section h2{
  font-size:clamp(24px,3vw,32px);
  line-height:1.15;
  letter-spacing:-.012em;
  margin:0 0 18px;
  max-width:24ch;
}
.section h3{font-size:19px;margin:26px 0 8px}
.section p{max-width:66ch;color:var(--ink-soft);margin:0 0 14px}
.section ul,.section ol{max-width:66ch;color:var(--ink-soft);padding-left:22px}
.section li{margin-bottom:7px}
.section strong{color:var(--ink)}

/* two-column editorial */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:38px}
@media (max-width:760px){ .cols{grid-template-columns:1fr;gap:24px} }

/* spec table */
table.spec{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0 0}
table.spec th,table.spec td{
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top;
}
table.spec th{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);border-bottom:1px solid var(--rule-strong);
}
table.spec td:first-child{font-family:var(--mono);font-size:13px}

/* comparison: free vs desktop */
.versus{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule-strong)}
@media (max-width:700px){ .versus{grid-template-columns:1fr} }
.versus > div{padding:22px}
.versus > div + div{border-left:1px solid var(--rule)}
@media (max-width:700px){ .versus > div + div{border-left:0;border-top:1px solid var(--rule)} }
.versus h3{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 12px;color:var(--ink-faint);
}
.versus .pro h3{color:var(--vermilion)}
.versus ul{list-style:none;padding:0;margin:0;font-size:15px}
.versus li{padding:5px 0 5px 20px;position:relative;color:var(--ink-soft)}
.versus li::before{position:absolute;left:0;font-family:var(--mono);font-size:12px}
.versus .pro li::before{content:"+";color:var(--vermilion)}
.versus .con li::before{content:"–";color:var(--ink-faint)}

/* faq */
.faq details{border-bottom:1px solid var(--rule);padding:14px 0}
.faq summary{
  cursor:pointer;font-size:18px;font-weight:600;list-style:none;
  display:flex;gap:12px;align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"?";font-family:var(--mono);font-size:12px;color:var(--vermilion);
  border:1px solid var(--vermilion);width:19px;height:19px;flex:0 0 19px;
  display:grid;place-items:center;margin-top:3px;
}
.faq details[open] summary::before{content:"!";background:var(--vermilion);color:#fff}
.faq p{margin:10px 0 0 31px;color:var(--ink-soft)}

/* index of tools */
.index-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule-strong)}
.index-list li{border-bottom:1px solid var(--rule)}
.index-list a{
  display:flex;gap:16px;align-items:baseline;padding:14px 2px;border:0;
  color:var(--ink);
}
.index-list a:hover{background:var(--paper-2);color:var(--vermilion)}
.index-list .n{
  font-family:var(--mono);font-size:11px;color:var(--vermilion);flex:0 0 28px;
}
.index-list .t{flex:1;font-size:18px}
.index-list .d{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-faint);
  text-transform:uppercase;
}
@media (max-width:600px){ .index-list .d{display:none} }

/* pull quote */
.pull{
  border-left:3px solid var(--vermilion);
  padding:6px 0 6px 20px;
  margin:26px 0;
  font-size:22px;
  font-style:italic;
  line-height:1.45;
  color:var(--ink);
  max-width:48ch;
}

/* ------- desktop offer ------- */
.offer{
  margin:44px 0;
  border:1px solid var(--rule-strong);
  padding:0;
  display:grid;
  grid-template-columns:1fr 260px;
}
@media (max-width:700px){ .offer{grid-template-columns:1fr} }
.offer .body{padding:26px 24px}
.offer .body h2{font-size:24px;margin:0 0 10px}
.offer .body p{margin:0;color:var(--ink-soft);font-size:16px}
.offer .buy{
  border-left:1px solid var(--rule-strong);
  background:var(--paper-2);
  display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:22px;text-align:center;
}
@media (max-width:700px){ .offer .buy{border-left:0;border-top:1px solid var(--rule-strong)} }
.offer .price{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1}
.offer .price small{font-size:12px;font-family:var(--mono);letter-spacing:.1em;color:var(--ink-faint);display:block;margin-top:5px;font-weight:400}

/* footer */
footer{
  border-top:3px double var(--rule-strong);
  margin-top:0;
  padding:26px 0 44px;
}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:baseline}
footer p{
  margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);
}
footer nav{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto}
footer nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);border:0;
}
footer nav a:hover{color:var(--vermilion)}

/* status line */
.status{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--ink-faint);margin:0;min-height:18px;
}
.status.err{color:var(--vermilion)}
.status.ok{color:var(--ink)}

/* utility */
.mt0{margin-top:0}
.nowrap{white-space:nowrap}
.hidden{display:none !important}