/* 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);}

/* Small phones (iPhone SE, 320px): the brand + "Get the App" button didn't fit
   on one row and pushed the page sideways. */
@media (max-width: 380px) {
  .nav .brand { font-size: 20px; letter-spacing: .1em; }
  .nav .nav-cta a { font-size: 12.5px; letter-spacing: .08em; padding: 9px 12px; }
}


/* ================================================================
   READING LAYER
   Each post carries an identical inline <style>; this file loads after
   it, so the rules below retune all 57 posts from one place. Values
   measured against the inline block they replace, not invented.
   ================================================================ */

/* ----------------------------------------------------- font fallbacks */
/* The whole site asked for 'Didot' / 'Helvetica Neue' and loaded no
   webfonts, so only macOS ever saw the editorial face — Windows and
   Android fell back to Georgia + Arial, which is most of the traffic.
   Bodoni Moda and Inter are appended *after* the local names, so a Mac
   still resolves Didot first and never downloads anything; everyone else
   gets a high-contrast Didone instead of Georgia. */
.wrap h1, .wrap h2, .wrap h3, .wrap .serif, .wrap .brand,
.wrap .jhead h1, .wrap .post-head h1 {
  font-family: 'Didot', 'Bodoni 72', 'Bodoni Moda', Georgia, 'Times New Roman', serif;
}
.wrap {
  font-family: 'Helvetica Neue', 'Inter', system-ui, -apple-system, sans-serif;
}

/* ----------------------------------------------------- contrast */
/* Two tokens measured against the #ECE5D9 ground (WCAG 2.1 ratios):
     --faint  #867C6E -> 3.28:1   used at 13–14px for post meta, figure
                                  captions and the footer line
     --bronze #8A5F22 -> 4.48:1   every in-prose link, and .eyebrow at
                                  14.3px bold
   Both sit under the 4.5:1 AA floor for text that size. Nudged to 4.85:1
   and 4.64:1 — the smallest change that clears it, so the palette reads
   as the same bronze and the quiet tone is still the quietest. */
.wrap { --faint: #6B6153; --bronze: #875D21; }

/* ----------------------------------------------------- measure */
/* 760px at 17.5px ran ~88 characters a line. 724px at 18px lands at
   ~72 — inside the 60–75 band that long-form reading wants. */
.wrap .article { max-width: 724px; }

/* ----------------------------------------------------- body copy */
.wrap .prose p,
.wrap .prose li {
  font-size: 18px;
  line-height: 1.72;
}
.wrap .prose p { margin: 0 0 20px; }
.wrap .prose li { margin: 9px 0; }
.wrap .prose > p:last-child { margin-bottom: 0; }

.wrap .lede { line-height: 1.5; }
.wrap .post-meta { letter-spacing: .08em; }

/* Heading rhythm: more air above a new section than below it, so an H2
   visibly belongs to the text that follows rather than floating between. */
.wrap .prose h2 { margin-top: 60px; margin-bottom: 14px; }
.wrap .prose h3 { margin-top: 34px; margin-bottom: 6px; }
.wrap .prose h2 + p,
.wrap .prose h3 + p { margin-top: 0; }
.wrap .prose > :first-child { margin-top: 0; }

/* ----------------------------------------------------- cards */
.wrap .tldr p { font-size: 17px; line-height: 1.66; }
.wrap .callout { font-size: 17px; line-height: 1.64; }
.wrap .toc li { font-size: 15.5px; line-height: 1.5; }
.wrap .faq p { font-size: 17px; line-height: 1.64; }


/* ================================================================
   IMAGE SLOTS
   Markup for these lives in IMAGES.md. Nothing renders until a real
   <img> is dropped in, so the classes are safe to ship empty.
   ================================================================ */

/* ----------------------------------------------------- hero */
/* Sits between .post-head and .tldr. Deliberately capped rather than
   full-bleed — a headline the reader has to scroll past an enormous
   photo to reach is a worse page, not a more premium one. */
.wrap .post-hero {
  margin: 26px 0 34px;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--panel);
}
.wrap .post-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  max-height: 420px;
  border-radius: 0;
  box-shadow: none;
}
.wrap .post-hero figcaption {
  font-size: 14px;
  color: var(--faint);
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  line-height: 1.45;
}
.wrap .post-hero figcaption b { color: var(--muted); font-weight: 600; }

/* Small labels drawn on top of a hero image (e.g. side-by-side comparisons). */
.wrap .post-hero .hero-frame { position: relative; display: block; }
.wrap .post-hero .hero-tag {
  position: absolute;
  bottom: 12px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #2b2621;
  background: rgba(255,255,255,.82);
  padding: 5px 10px;
  border-radius: 2px;
  line-height: 1;
  pointer-events: none;
}
.wrap .post-hero .hero-tag.left { left: 12px; }
.wrap .post-hero .hero-tag.right { right: 12px; }

/* Infographic heroes (labels, swatch grids) must not be cropped to 16:9. */
.wrap .post-hero.fit img { aspect-ratio: auto; max-height: none; object-fit: contain; }

/* ----------------------------------------------------- inline figure */
/* A single explaining image inside the prose. One shape for all of them,
   because mismatched heights is what made the earlier grids read messy. */
.wrap .prose figure.inline-fig {
  margin: 30px 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--panel);
}
/* 3:2 rather than 4:3 — at the full 724px measure a 4:3 figure ran 543px
   tall and dominated the section it was meant to support. */
.wrap .prose figure.inline-fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}
.wrap .prose figure.inline-fig figcaption {
  font-size: 14.5px;
  color: var(--faint);
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  line-height: 1.45;
}

/* ----------------------------------------------------- numbered steps */
/* For the how-to posts: an image per step, with the step number carried
   in the caption rather than a floating badge. */
.wrap .prose .steps { margin: 32px 0; display: grid; gap: 18px; }
.wrap .prose .steps figure {
  margin: 0;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  align-items: start;
}
.wrap .prose .steps figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: none;
}
.wrap .prose .steps figcaption { font-size: 16.5px; color: var(--muted); line-height: 1.6; }
.wrap .prose .steps figcaption b {
  display: block;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 4px;
}
.wrap .prose .steps figcaption .sn {
  display: inline-block;
  font-family: 'Helvetica Neue', Inter, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 6px;
}

/* ----------------------------------------------------- photo CTA */
/* Add `photo` to an .inline-cta and set --cta-img to put a room behind it
   instead of the flat espresso panel.

   Centring the text over the middle of the photo is what made the first
   attempt feel empty and the room look murky: it needs a heavy wash across
   the whole frame to stay readable, which kills the picture, and it leaves
   wide dead margins either side of a narrow text column. Anchoring the text
   left and fading the scrim out to the right fixes both — the copy sits on
   a genuinely dark ground while most of the room stays at full brightness. */
.wrap .inline-cta.photo {
  position: relative;
  text-align: left;
  padding: 46px 44px;
  background-color: var(--espresso);
  background-image:
    linear-gradient(95deg,
      rgba(28, 21, 14, .92) 0%,
      rgba(28, 21, 14, .86) 34%,
      rgba(28, 21, 14, .54) 60%,
      rgba(28, 21, 14, .18) 80%,
      rgba(28, 21, 14, .06) 100%),
    var(--cta-img);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* The text column is capped rather than the box padded, so the copy stays a
   comfortable measure and the room fills everything it is not using. */
.wrap .inline-cta.photo .eyebrow,
.wrap .inline-cta.photo h3,
.wrap .inline-cta.photo p { max-width: 30ch; margin-left: 0; margin-right: 0; }
/* The headline wants the tight measure; the body at 30ch broke into four
   stubby lines, so it gets a little more room. */
.wrap .inline-cta.photo p { max-width: 36ch; }
/* The headline has to break before the accent phrase: run on one line it
   reached the bright half of the room and the gold went unreadable. */
.wrap .inline-cta.photo h3 { max-width: 19ch; }
/* Same gold italic the post headlines use for their accent phrase. */
.wrap .inline-cta.photo h3 em { font-style: italic; color: var(--bronze-2); }
.wrap .inline-cta.photo h3 { margin-bottom: 12px; }
.wrap .inline-cta.photo p { margin-bottom: 24px; font-size: 16.5px; }
.wrap .inline-cta.photo .store { align-self: flex-start; }
/* A photo brings its own edges; the heavy drop shadow underneath it read as
   grubby rather than raised. */
.wrap .inline-cta.photo { box-shadow: 0 24px 60px -44px rgba(28, 21, 14, .8); }

/* Narrow: the room cannot carry text beside it, so it goes behind — but only
   the top of the frame is covered, so the furniture below stays visible. */
@media (max-width: 640px) {
  .wrap .inline-cta.photo {
    text-align: center;
    padding: 38px 24px;
    background-position: center;
    background-image:
      linear-gradient(180deg,
        rgba(28, 21, 14, .80) 0%,
        rgba(28, 21, 14, .88) 55%,
        rgba(28, 21, 14, .70) 100%),
      var(--cta-img);
  }
  .wrap .inline-cta.photo .eyebrow,
  .wrap .inline-cta.photo h3,
  .wrap .inline-cta.photo p { max-width: none; }
  .wrap .inline-cta.photo .store { align-self: center; }
}

/* ----------------------------------------------------- keep reading */
/* The four destinations were already hand-picked per post and are unchanged;
   they were just rendered as bare pills, which reads as a link row rather
   than a reason to read on. Each now carries the one-line description the
   archive page already uses. Out-specifies the pill rules above. */
.wrap .related { margin-top: 56px; padding-top: 28px; }
.wrap .related > h2 {
  font-size: 15px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-family: 'Helvetica Neue', Inter, sans-serif;
  font-weight: 700;
  color: var(--faint);
  margin: 0 0 20px;
}
.wrap .related .related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wrap .related .related-grid a {
  display: block;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
  padding: 18px 20px;
  color: var(--ink);
  transition: .16s;
}
.wrap .related .related-grid a:hover {
  border-color: var(--bronze);
  background: rgba(200, 154, 87, .1);
}
.wrap .related .related-grid a b {
  display: block;
  font-family: 'Didot', 'Bodoni 72', 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  margin-bottom: 7px;
  color: var(--ink);
}
.wrap .related .related-grid a span {
  display: block;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--muted);
}
@media (max-width: 640px) {
  .wrap .related .related-grid { grid-template-columns: 1fr; }
  .wrap .related .related-grid a { padding: 16px 18px; }
  .wrap .related .related-grid a b { font-size: 18.5px; }
}

/* ================================================================
   ARCHIVE (/blog)
   Scoped to .blogwrap / .bfilter, neither of which exists on a post.
   ================================================================ */

/* ----------------------------------------------------- topic filter */
.wrap .bfilter {
  max-width: 1040px;
  margin: 0 auto 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
}
/* Padding is tuned so all eight chips sit on one row inside the 1040px the
   grid uses; at 17px they spilled one chip onto a second line. */
.wrap .bchip {
  font: inherit;
  font-size: 14.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(247, 243, 235, .7);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
  transition: .16s;
}
.wrap .bchip:hover { background: rgba(200, 154, 87, .16); border-color: var(--bronze); color: var(--ink); }
.wrap .bchip.on { background: var(--espresso); border-color: var(--espresso); color: #F2E9DA; }
.wrap .bchip:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* ----------------------------------------------------- card hierarchy */
/* The cards were 57 blocks of identical weight. The meta line now reads as
   metadata rather than as a second heading, and the featured card gets the
   larger type it was already claiming structurally. */
.wrap .blogwrap .bpost { padding: clamp(24px, 3vw, 34px); }
.wrap .blogwrap .bpost-cat {
  font-size: 12.5px;
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--bronze);
  margin-bottom: 12px;
}
.wrap .blogwrap .bpost h2 { font-size: clamp(22px, 2.3vw, 27px); line-height: 1.18; margin: 0 0 12px; }
.wrap .blogwrap .bpost p { font-size: 17px; line-height: 1.62; margin: 0 0 20px; }
.wrap .blogwrap .bpost.feat h2 { font-size: clamp(27px, 3.4vw, 40px); }
.wrap .blogwrap .bpost.feat p { font-size: 18.5px; max-width: 60ch; }
.wrap .blogwrap .bpost-read { font-size: 13.5px; letter-spacing: .14em; }
.wrap .blogwrap .bpost:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

/* ----------------------------------------------------- card thumbnail */
/* The slot has no box of its own, so a card whose slot is still empty looks
   exactly as it did before — the images can land one at a time. */
.wrap .blogwrap .bpost-thumb { display: contents; }
.wrap .blogwrap .bpost-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 2px;
  margin-bottom: 20px;
  box-shadow: none;
}
.wrap .blogwrap .bpost.feat .bpost-thumb img { aspect-ratio: 21 / 9; max-height: 400px; }
@media (max-width: 760px) {
  .wrap .blogwrap .bpost.feat .bpost-thumb img { aspect-ratio: 3 / 2; max-height: none; }
}

/* ----------------------------------------------------- small screens */
@media (max-width: 640px) {
  .wrap .bfilter { justify-content: flex-start; gap: 7px; }
  .wrap .bchip { font-size: 13px; padding: 8px 13px; letter-spacing: .07em; }
  .wrap .prose p,
  .wrap .prose li { font-size: 17px; line-height: 1.7; }
  .wrap .prose h2 { margin-top: 44px; }
  .wrap .post-hero img { aspect-ratio: 4 / 3; max-height: 330px; }
  .wrap .prose .steps figure { grid-template-columns: 1fr; gap: 10px; }
  .wrap .prose .steps figure img { aspect-ratio: 16 / 9; }
  /* Full-width inside the page margin, rather than a shrunken desktop card. */
  .wrap .prose figure.inline-fig,
  .wrap .post-hero { border-radius: 2px; }
}