/* enoumen.com — a reading-first design.
 *
 * NOT the djamgatech stylesheet. That one is built for an app dashboard:
 * glass panels, gradient buttons, card grids. A 578-post blog with a 15 KB
 * median article wants the opposite — a comfortable measure, a serif body,
 * and almost no chrome.
 *
 * The markup is fixed (build_wp_static.py emits it), so everything here works
 * by restyling the class names that template already produces:
 *   body.dashboard-layout > header.site-head + main.main-content
 *   article > header.tutorial-header > h1.text-gradient
 *   div.glass-panel.step-card.wp-content   <- the article body
 *
 * The imported content carries ~21,000 <br> tags from WordPress. Left alone
 * they shred the vertical rhythm, so consecutive ones are collapsed below.
 */

:root {
  --ink:        #16181d;
  --ink-soft:   #4a5160;
  --ink-faint:  #79808f;
  --paper:      #fbfaf8;
  --paper-2:    #ffffff;
  --rule:       #e6e2db;
  --accent:     #0b5fff;
  --accent-2:   #0847c4;
  --mark:       #fff3c4;
  --measure:    68ch;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", "Source Serif Pro",
           Georgia, Cambria, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:       #e8e6e3;
    --ink-soft:  #b0b6c0;
    --ink-faint: #858c99;
    --paper:     #101216;
    --paper-2:   #161920;
    --rule:      #272b34;
    --accent:    #7aa7ff;
    --accent-2:  #a8c4ff;
    --mark:      #4a4326;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 640px) { body { font-size: 17.5px; line-height: 1.68; } }

/* ---------------------------------------------------------------- header */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-head-in {
  max-width: 940px; margin: 0 auto; padding: .8rem 1.4rem;
  display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap;
}
.site-name {
  font-family: var(--sans); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -.015em; color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.site-name:hover { color: var(--accent); }
.site-nav { margin-left: auto; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--sans); font-size: .88rem; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
}
.site-nav a:hover { color: var(--accent); }
@media (max-width: 560px) {
  .site-head-in { padding: .7rem 1rem; gap: .8rem; }
  .site-nav { margin-left: 0; width: 100%; gap: 1rem; }
  .site-nav a { font-size: .82rem; }
}

/* ------------------------------------------------------------- structure */

main.main-content {
  max-width: 100% !important;      /* template sets an inline 860px */
  padding: 0;
  margin: 0;
}
article, main.main-content > p {
  max-width: 780px; margin: 0 auto; padding: 0 1.4rem;
}

.tutorial-header {
  max-width: 780px; margin: 0 auto; padding: 3.2rem 1.4rem 0;
  border: 0;
}
h1, .text-gradient {
  font-family: var(--sans);
  font-size: clamp(1.95rem, 4.6vw, 2.9rem) !important;
  line-height: 1.14; letter-spacing: -.028em; font-weight: 800;
  color: var(--ink); margin: 0 0 .6rem !important;
  background: none; -webkit-text-fill-color: currentColor;
}
.tutorial-header p {
  font-family: var(--sans); font-size: .84rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0;
}
.tutorial-header time { font-variant-numeric: tabular-nums; }

/* the article body -------------------------------------------------------- */

.wp-content {
  max-width: var(--measure);
  margin: 2rem auto 0;
  background: none; border: 0; box-shadow: none; padding: 0;
  border-radius: 0;
}
.wp-content > *:first-child { margin-top: 0; }

.wp-content p { margin: 0 0 1.35em; }
.wp-content h2 {
  font-family: var(--sans); font-weight: 750; letter-spacing: -.02em;
  font-size: 1.5rem; line-height: 1.25; margin: 2.6rem 0 .8rem;
  padding-top: 1.6rem; border-top: 1px solid var(--rule);
}
.wp-content h3 {
  font-family: var(--sans); font-weight: 700; letter-spacing: -.015em;
  font-size: 1.18rem; line-height: 1.3; margin: 2rem 0 .6rem;
}
.wp-content h4, .wp-content h5, .wp-content h6 {
  font-family: var(--sans); font-weight: 650; font-size: 1.02rem;
  margin: 1.6rem 0 .5rem;
}

.wp-content a { color: var(--accent); text-decoration: underline;
  text-underline-offset: .16em; text-decoration-thickness: .07em; }
.wp-content a:hover { color: var(--accent-2); text-decoration-thickness: .13em; }

.wp-content ul, .wp-content ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.wp-content li { margin: .35em 0; }
.wp-content li > ul, .wp-content li > ol { margin: .35em 0; }

.wp-content blockquote {
  margin: 1.8rem 0; padding: .2rem 0 .2rem 1.4rem;
  border-left: 3px solid var(--accent); color: var(--ink-soft);
  font-style: italic;
}
.wp-content blockquote p:last-child { margin-bottom: 0; }

.wp-content img {
  max-width: 100%; height: auto; display: block;
  border-radius: 10px; margin: 1.6rem auto;
}
.wp-content figure { margin: 2rem 0; }
.wp-content figure img { margin: 0 auto; }
.wp-content figcaption {
  font-family: var(--sans); font-size: .84rem; color: var(--ink-faint);
  text-align: center; margin-top: .6rem; line-height: 1.5;
}

.wp-content code {
  font-family: var(--mono); font-size: .87em;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 5px; padding: .1em .35em;
}
.wp-content pre {
  font-family: var(--mono); font-size: .84rem; line-height: 1.55;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 10px; padding: 1rem 1.1rem; overflow-x: auto;
  margin: 1.6rem 0;
}
.wp-content pre code { background: none; border: 0; padding: 0; font-size: inherit; }

.wp-content table {
  width: 100%; border-collapse: collapse; margin: 1.8rem 0;
  font-family: var(--sans); font-size: .92rem; display: block; overflow-x: auto;
}
.wp-content th, .wp-content td {
  border: 1px solid var(--rule); padding: .55rem .7rem; text-align: left;
  vertical-align: top;
}
.wp-content th { background: var(--paper-2); font-weight: 650; }

.wp-content hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4rem 0; }
.wp-content mark { background: var(--mark); padding: 0 .15em; }

/* WordPress imports carry runs of <br>. Hiding consecutive ones restores a
   sane rhythm without touching the 21,000 tags in the content itself. */
.wp-content br + br { display: none; }

.wp-content iframe,
.wp-content .video-embed iframe {
  max-width: 100%; border: 0; border-radius: 10px;
}
.wp-content .video-embed { margin: 1.8rem 0; aspect-ratio: 16/9; }
.wp-content .video-embed iframe { width: 100%; height: 100%; }

/* AdSense units embedded in the imported posts, plus Auto ads. Give them
   breathing room so they read as separate from the article. */
.wp-content ins.adsbygoogle { display: block; margin: 2rem auto; }

/* ------------------------------------------------- listings & components */

main.main-content ul { list-style: none; }
.wp-content ul { list-style: disc; }

/* the homepage / archive link lists */
main.main-content > div > ul li a,
.wp-content > ul li a { font-family: var(--sans); }

/* buttons and category chips */
.btn-modern {
  display: inline-block; font-family: var(--sans); font-size: .9rem;
  font-weight: 600; text-decoration: none; border-radius: 8px;
  padding: .5rem .95rem; border: 1px solid var(--rule);
  color: var(--ink); background: var(--paper-2); transition: .15s ease;
  line-height: 1.3;
}
.btn-modern:hover { border-color: var(--accent); color: var(--accent);
  transform: translateY(-1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2);
  color: #fff; }
.btn-secondary { background: var(--paper-2); }
.btn-outline { background: transparent; }

/* ---------------------------------------------------------------- footer */

footer {
  margin-top: 5rem; border-top: 1px solid var(--rule);
  background: var(--paper-2); font-family: var(--sans);
  color: var(--ink-faint);
}
footer a { color: var(--ink-soft); text-decoration: none; }
footer a:hover { color: var(--accent); }

/* ------------------------------------------------------------------ misc */

::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

@media print {
  .site-head, footer, .adsbygoogle { display: none; }
  body { font-size: 11pt; background: #fff; color: #000; }
}