/* DecorIn — shared blog polish layer.
   Loaded AFTER each post's inline <style>, so equal-specificity rules here win.
   Purpose: rounded consistent imagery, and enough visual rhythm that a
   text-only post stops reading like a wall. Uses the vars each page defines
   on .wrap, so it inherits the bronze/Didot palette automatically. */

/* ---------------------------------------------------------------- imagery */
.wrap figure img,
.wrap .prose img {
  border-radius: 16px;
  box-shadow: 0 18px 44px -30px rgba(36, 28, 20, .62);
  transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s;
}

/* One uniform card shape for every image in a grid — the ragged-height
   grid was the thing that read as messy. */
.wrap .grid figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
}

/* Earlier one-off width cap is redundant now that every tile matches. */
.wrap figure.portrait { max-width: none; }

/* The image wrapper is a link, but must not pick up the prose underline.
   Needs to out-specify `.wrap .prose a:not(.store)` (0,3,1), hence the
   .prose figure a chain below. */
.wrap .prose .grid figure a,
.wrap .prose figure a,
.wrap .grid figure a,
.wrap figure a {
  display: block;
  background: none;
  padding-bottom: 0;
  cursor: zoom-in;
}
.wrap .grid figure a:hover img {
  transform: translateY(-3px);
  box-shadow: 0 26px 56px -28px rgba(36, 28, 20, .7);
}

.wrap figcaption b {
  letter-spacing: .01em;
}

/* ---------------------------------------------------------------- headings */
.wrap .prose h2 {
  position: relative;
  padding-top: 20px;
}
.wrap .prose h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bronze), var(--bronze-2));
}
.wrap .prose h3 {
  letter-spacing: .005em;
}

/* ---------------------------------------------------------------- emphasis */
/* The "highlight" — a soft bronze wash behind genuinely key sentences.
   Opt-in via class so it stays rare enough to still mean something. */
.wrap .prose .hl {
  background: linear-gradient(180deg, transparent 58%, rgba(200, 154, 87, .34) 58%);
  padding: 0 2px;
  font-weight: 600;
  color: var(--ink);
}

.wrap .prose p > strong { color: var(--espresso); }

/* ---------------------------------------------------------------- cards */
.wrap .tldr {
  border-radius: 16px;
  border-top: 3px solid var(--bronze);
}
.wrap .toc {
  border-radius: 16px;
  background: rgba(247, 243, 235, .62);
}
.wrap .callout {
  border-radius: 14px;
  border-left-width: 4px;
  box-shadow: 0 16px 40px -34px rgba(36, 28, 20, .6);
}
.wrap .inline-cta {
  border-radius: 20px;
  box-shadow: 0 30px 70px -44px rgba(34, 26, 18, .9);
}
.wrap .inline-cta .store { border-radius: 999px; }

/* ---------------------------------------------------------------- lists */
.wrap .prose ul { list-style: none; padding-left: 4px; }
.wrap .prose ul > li {
  position: relative;
  padding-left: 26px;
}
.wrap .prose ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--bronze-2);
  box-shadow: 0 0 0 3px rgba(200, 154, 87, .18);
}
.wrap .prose ol { padding-left: 4px; counter-reset: dn; list-style: none; }
.wrap .prose ol > li {
  position: relative;
  padding-left: 38px;
  counter-increment: dn;
}
.wrap .prose ol > li::before {
  content: counter(dn);
  position: absolute;
  left: 0;
  top: .08em;
  width: 25px;
  height: 25px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: 'Helvetica Neue', Inter, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--espresso);
  background: rgba(200, 154, 87, .28);
}
/* The TOC keeps its own plain numbering. */
.wrap .toc ol { list-style: decimal; counter-reset: none; padding-left: 20px; }
.wrap .toc ol > li { padding-left: 0; counter-increment: none; }
.wrap .toc ol > li::before { content: none; }

/* ---------------------------------------------------------------- tables */
.wrap .tbl-wrap {
  border-radius: 14px;
  box-shadow: 0 18px 44px -38px rgba(36, 28, 20, .6);
}
.wrap table.cost tbody tr:nth-child(even) { background: rgba(200, 154, 87, .055); }
.wrap table.cost tbody tr { transition: background .16s; }
.wrap table.cost tbody tr:hover { background: rgba(200, 154, 87, .13); }

.wrap .verdict { border-radius: 999px; }

/* ---------------------------------------------------------------- links */
.wrap .prose a:not(.store) {
  background: linear-gradient(90deg, var(--bronze-2), var(--bronze-2)) 0 100% / 100% 1px no-repeat;
  padding-bottom: 1px;
  transition: background-size .2s;
}
.wrap .prose a:not(.store):hover { background-size: 100% 2px; }

.wrap .related { border-top-width: 1px; }
.wrap .related-links a,
.wrap .related-grid a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  background: rgba(247, 243, 235, .7);
  transition: .16s;
}
.wrap .related-links a:hover,
.wrap .related-grid a:hover {
  background: rgba(200, 154, 87, .16);
  border-color: var(--bronze);
}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  .wrap figure img,
  .wrap table.cost tbody tr,
  .wrap .prose a:not(.store) { transition: none; }
  .wrap .grid figure a:hover img { transform: none; }
}

/* ---------------------------------------------------------------- small */
@media (max-width: 640px) {
  .wrap .grid figure img { aspect-ratio: 4 / 5; }
  .wrap .prose h2 { padding-top: 16px; }
}

/* Breadcrumb line above the headline — removed across all posts. */
.wrap .crumb { display: none; }

/* Before / after proof pairs. Real app output, so the "after" carries the same
   free-tier decorin.ai watermark a free design gets. */
.ba{margin:30px 0;}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.ba figure{margin:0;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--panel);}
.ba img{display:block;width:100%;height:auto;}
.ba figcaption{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding:9px 12px;border-top:1px solid var(--line);}
.ba .note{font-size:15px;color:var(--muted);margin:10px 0 0;font-style:italic;}
.ba .note b{font-style:normal;color:var(--ink);}