/* ==========================================================================
   ASCII Text Art — design system
   Concept: continuous-feed printer paper. Perforated tractor-feed edges,
   dot-matrix ribbon red, carbon-copy blue-ink links. Everything that looks
   like it "prints" (the generator output) stays strictly monospace.
   ========================================================================== */

:root{
  /* -- color tokens -- */
  --paper:      #EDEAE0;
  --paper-2:    #E3DFD1;   /* slightly deeper paper, for cards */
  --ink:        #201F1B;
  --ink-soft:   #55534A;
  --rule:       #C9C4B0;
  --ribbon:     #C1442D;   /* dot-matrix ribbon red — primary accent */
  --ribbon-dark:#9C3521;
  --carbon:     #2B4257;   /* carbon-copy blue-ink — links / secondary */
  --paper-rgb:  237,234,224;

  --font-display: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --radius: 3px;
  --shadow-card: 0 1px 0 var(--rule), 0 8px 20px -14px rgba(32,31,27,.35);
  --max-width: 1280px;
}

html.dark{
  --paper:      #17181A;
  --paper-2:    #1E1F21;
  --ink:        #E9E6DA;
  --ink-soft:   #A7A395;
  --rule:       #34342F;
  --ribbon:     #E2624A;
  --ribbon-dark:#C1442D;
  --carbon:     #7FA3C4;
  --paper-rgb:  23,24,26;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease, color .2s ease;
}
img{ max-width:100%; display:block; }
a{ color:var(--carbon); text-decoration-thickness:1px; }
a:hover{ color:var(--ribbon); }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em; }
h1{ font-size:clamp(2rem,4.4vw,3.4rem); }
h2{ font-size:clamp(1.4rem,2.6vw,2rem); }
h3{ font-size:1.15rem; }
p{ margin:0 0 1em; color:var(--ink-soft); max-width:64ch; }
.container{ max-width:var(--max-width); margin:0 auto; padding:0 24px; }
:focus-visible{ outline:2px solid var(--ribbon); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } html{scroll-behavior:auto;} }

/* -- perforation motif: reused as the site's signature divider -- */
.perf{
  height:14px;
  background-image: radial-gradient(circle, var(--rule) 2px, transparent 2.5px);
  background-size: 22px 14px;
  background-position: 11px center;
  position:relative;
}
.perf::after{
  content:"";
  position:absolute; left:0; right:0; top:50%;
  border-top:1px dashed var(--rule);
}
.perf.tear{ cursor:default; }

/* -- buttons -- */
.btn{
  font-family:var(--font-display);
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.02em;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  padding:.65em 1.1em;
  border-radius:var(--radius);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.5em;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--ribbon); border-color:var(--ribbon); color:#fff; }
.btn-primary:hover{ background:var(--ribbon-dark); border-color:var(--ribbon-dark); }
.btn-ghost{ border-color:var(--rule); color:var(--ink-soft); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.btn-sm{ font-size:.75rem; padding:.45em .8em; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(var(--paper-rgb),.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}
.site-header .row{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{
  font-family:var(--font-display); font-weight:800; font-size:1.05rem;
  color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:.5em;
}
.brand .dot{ color:var(--ribbon); }
.nav-desktop{ display:flex; align-items:center; gap:28px; }
.nav-desktop a{
  color:var(--ink-soft); text-decoration:none; font-size:.92rem; font-weight:600;
}
.nav-desktop a:hover, .nav-desktop a.active{ color:var(--ink); }
.nav-desktop a.active{ border-bottom:2px solid var(--ribbon); padding-bottom:4px; }
.header-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--rule); border-radius:var(--radius); background:transparent;
  color:var(--ink); cursor:pointer;
}
.icon-btn:hover{ border-color:var(--ink); }
.menu-toggle{ display:none; }

/* header search */
.search-wrap{ position:relative; }
.search-wrap input{
  width:0; opacity:0; padding:0; border:none; background:var(--paper-2);
  font-family:var(--font-mono); font-size:.85rem; color:var(--ink);
  transition:width .2s ease, opacity .2s ease, padding .2s ease;
  border-radius:var(--radius); height:38px;
}
.search-wrap.open input{ width:220px; opacity:1; padding:0 .8em; border:1px solid var(--rule); }
.search-results{
  position:absolute; top:46px; right:0; width:280px; background:var(--paper);
  border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow-card);
  max-height:320px; overflow:auto; z-index:70;
}
.search-results a{
  display:flex; justify-content:space-between; gap:10px; padding:10px 12px; text-decoration:none;
  color:var(--ink); font-size:.85rem; border-bottom:1px solid var(--rule);
}
.search-results a em{ font-style:normal; color:var(--ink-soft); font-size:.72rem; font-family:var(--font-display); }
.search-results a:hover{ background:var(--paper-2); }

@media (max-width: 880px){
  .nav-desktop{ display:none; }
  .menu-toggle{ display:flex; }
}

/* mobile drawer */
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none;
  transition:opacity .2s ease; z-index:60;
}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(320px,86vw);
  background:var(--paper); border-left:1px solid var(--rule);
  transform:translateX(100%); transition:transform .25s ease; z-index:61;
  padding:20px; display:flex; flex-direction:column; gap:4px;
}
.drawer a{
  color:var(--ink); text-decoration:none; padding:14px 6px; border-bottom:1px solid var(--rule);
  font-family:var(--font-display); font-weight:600;
}
body.drawer-open .drawer-backdrop{ opacity:1; pointer-events:auto; }
body.drawer-open .drawer{ transform:translateX(0); }
body.drawer-open{ overflow:hidden; }
.drawer-close{ align-self:flex-end; margin-bottom:12px; }

/* ==========================================================================
   Hero / printout card
   ========================================================================== */
.hero{ padding:56px 0 40px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 1.2fr; gap:48px; align-items:start; }
.eyebrow{
  font-family:var(--font-display); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ribbon); font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:"01"; color:var(--ink-soft); }
.hero p.lead{ font-size:1.08rem; max-width:46ch; }
.hero-cta{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }

.printout{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
.printout .perf{ border-radius:3px 3px 0 0; }
.printout .perf.bottom{ border-radius:0 0 3px 3px; }
.printout-body{ padding:22px; }
.printout label{
  display:block; font-family:var(--font-display); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;
}
.printout input[type=text], .printout textarea, .printout select{
  width:100%; background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius);
  color:var(--ink); font-family:var(--font-mono); font-size:.95rem; padding:.7em .8em;
}
.printout textarea{ resize:vertical; min-height:44px; }
.field-row{ display:flex; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.field-row > div{ flex:1; min-width:140px; }
.output-wrap{ position:relative; margin-top:6px; }
.ascii-output{
  font-family:var(--font-mono); font-size:.62rem; line-height:1.15;
  background:var(--ink); color:var(--paper);
  border-radius:var(--radius); padding:18px; overflow:auto; white-space:pre;
  min-height:120px; max-height:340px; margin:0;
}
html.dark .ascii-output{ background:#0B0C0D; }
.cursor-blink{
  display:inline-block; width:.5em; background:var(--ribbon); margin-left:2px;
  animation:blink 1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
.output-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }

/* ==========================================================================
   Sections / cards / grids
   ========================================================================== */
.section{ padding:52px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.section-head .eyebrow::before{ content:attr(data-n); }
.section-head p{ margin:0; }

.grid{ display:grid; gap:18px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width: 980px){ .grid-4{ grid-template-columns:repeat(2,1fr);} .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width: 620px){ .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr; } .hero-grid{ grid-template-columns:1fr; } }

.card{
  background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--radius);
  padding:18px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card); }
.card h3{ margin:0; }
.card p{ margin:0; font-size:.92rem; }
.card .preview{
  font-family:var(--font-mono); font-size:.6rem; line-height:1.1; white-space:pre;
  background:var(--ink); color:var(--paper); padding:10px; border-radius:var(--radius); overflow:hidden; max-height:96px;
}
.card .use{ font-family:var(--font-display); font-size:.75rem; font-weight:700; color:var(--carbon); }
.tag{
  display:inline-block; font-family:var(--font-display); font-size:.68rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--rule); border-radius:12px;
  padding:.2em .7em; width:fit-content;
}

/* ==========================================================================
   Tool page shell (used by every /ascii-*-generator/ etc. page)
   ========================================================================== */
.breadcrumbs{ font-family:var(--font-display); font-size:.78rem; color:var(--ink-soft); margin:20px 0; }
.breadcrumbs a{ color:var(--ink-soft); }
.breadcrumbs .sep{ margin:0 .5em; }
.tool-hero{ padding:8px 0 30px; }
.tool-hero p.lead{ font-size:1.05rem; }

.coming-soon{
  border:1px dashed var(--rule); border-radius:var(--radius); background:var(--paper-2);
  padding:26px; display:flex; flex-direction:column; gap:14px;
}
.coming-soon .mock{
  border:1px solid var(--rule); border-radius:var(--radius); background:var(--paper);
  padding:16px; opacity:.55;
}
.coming-soon .mock .bar{ height:12px; background:var(--rule); border-radius:2px; margin-bottom:8px; }
.coming-soon .mock .bar.w60{ width:60%; }
.coming-soon .mock .bar.w80{ width:80%; }
.coming-soon .mock .bar.w40{ width:40%; }
.coming-soon .flag{ display:flex; align-items:center; gap:10px; }
.coming-soon .flag .tag{ border-color:var(--ribbon); color:var(--ribbon); }

.faq{ border-top:1px solid var(--rule); }
.faq-item{ border-bottom:1px solid var(--rule); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:16px 0; font-family:var(--font-display); font-weight:700;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color:var(--ribbon); font-size:1.2rem; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item .a{ padding:0 0 16px; color:var(--ink-soft); }

.related-list{ display:flex; flex-wrap:wrap; gap:10px; }
.related-list a{
  font-family:var(--font-display); font-size:.8rem; font-weight:600; text-decoration:none;
  border:1px solid var(--rule); border-radius:14px; padding:.5em 1em; color:var(--ink-soft);
}
.related-list a:hover{ border-color:var(--ribbon); color:var(--ribbon); }

/* symbols / emoticons grids */
.chip{
  border:1px solid var(--rule); border-radius:var(--radius); background:var(--paper-2);
  padding:12px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; text-align:center;
}
.chip:hover{ border-color:var(--ribbon); }
.chip .glyph{ font-family:var(--font-mono); font-size:1.3rem; }
.chip .name{ font-size:.68rem; color:var(--ink-soft); }

/* content / legal pages */
.prose h2{ margin-top:1.6em; }
.prose ul{ color:var(--ink-soft); }
.prose{ max-width:74ch; }

/* toast */
#toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px);
  background:var(--ink); color:var(--paper); font-family:var(--font-display); font-size:.85rem;
  padding:.8em 1.3em; border-radius:var(--radius); opacity:0; pointer-events:none; transition:all .2s ease; z-index:100;
}
#toast.show{ opacity:1; transform:translate(-50%,0); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--ink); color:var(--paper); margin-top:60px; }
html.dark .site-footer{ background:#0E0F10; }
.footer-top{ padding:48px 0 30px; display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:30px; }
.footer-top h4{ font-family:var(--font-display); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#A7A395; margin-bottom:14px; }
.footer-top a{ color:#D9D6C9; text-decoration:none; display:block; margin-bottom:9px; font-size:.9rem; }
.footer-top a:hover{ color:#fff; }
.footer-top p{ color:#A7A395; font-size:.88rem; }
.footer-bottom{ border-top:1px solid #34342F; padding:18px 0; display:flex; justify-content:space-between; font-size:.8rem; color:#8A8779; flex-wrap:wrap; gap:10px; }
@media (max-width: 720px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width: 480px){ .footer-top{ grid-template-columns:1fr; } }