
<style>
    :root {<br />
      --ink:        #18130f;<br />
      --body:       #3d352e;<br />
      --muted:      #7a6f65;<br />
      --cream:      #f8f4ee;<br />
      --parchment:  #f0ebe1;<br />
      --brass:      #b5892b;<br />
      --brass-lt:   #d4a84b;<br />
      --walnut:     #7a4f2e;<br />
      --charcoal:   #252220;<br />
      --rule:       rgba(181,137,43,.22);<br />
      --shadow:     rgba(24,19,15,.10);<br />
    }</p>
<p>    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }<br />
    html { scroll-behavior: smooth; }</p>
<p>    body {<br />
      background: var(--cream);<br />
      color: var(--body);<br />
      font-family: 'Jost', sans-serif;<br />
      font-weight: 300;<br />
      font-size: 17.5px;<br />
      line-height: 1.85;<br />
    }</p>
<p>    /* ─── TOP BAR ─── */<br />
    .topbar {<br />
      background: var(--charcoal);<br />
      text-align: center;<br />
      padding: 11px 20px;<br />
      font-size: 11px;<br />
      letter-spacing: .22em;<br />
      text-transform: uppercase;<br />
      color: var(--brass-lt);<br />
      font-weight: 500;<br />
    }</p>
<p>    /* ─── MASTHEAD ─── */<br />
    .masthead {<br />
      background: var(--charcoal);<br />
      padding: 70px 24px 60px;<br />
      text-align: center;<br />
      position: relative;<br />
      overflow: hidden;<br />
    }<br />
    .masthead::before {<br />
      content: '';<br />
      position: absolute; inset: 0;<br />
      background:<br />
        radial-gradient(ellipse 55% 60% at 70% 30%, rgba(181,137,43,.16) 0%, transparent 70%),<br />
        radial-gradient(ellipse 40% 50% at 15% 80%, rgba(122,79,46,.13) 0%, transparent 65%);<br />
      pointer-events: none;<br />
    }<br />
    .masthead-category {<br />
      display: inline-block;<br />
      font-size: 10.5px;<br />
      letter-spacing: .3em;<br />
      text-transform: uppercase;<br />
      color: var(--brass-lt);<br />
      font-weight: 500;<br />
      margin-bottom: 22px;<br />
    }<br />
    .masthead h1 {<br />
      font-family: 'Cormorant Garamond', serif;<br />
      font-size: clamp(2.2rem, 5.5vw, 3.8rem);<br />
      font-weight: 700;<br />
      line-height: 1.15;<br />
      color: #f4efe6;<br />
      max-width: 800px;<br />
      margin: 0 auto 22px;<br />
    }<br />
    .masthead h1 em { font-style: italic; color: var(--brass-lt); }<br />
    .masthead-sub {<br />
      font-size: 1rem;<br />
      color: rgba(244,239,230,.62);<br />
      max-width: 520px;<br />
      margin: 0 auto 36px;<br />
      line-height: 1.7;<br />
    }<br />
    .masthead-meta {<br />
      display: flex;<br />
      align-items: center;<br />
      justify-content: center;<br />
      gap: 20px;<br />
      font-size: 11.5px;<br />
      letter-spacing: .12em;<br />
      text-transform: uppercase;<br />
      color: rgba(244,239,230,.4);<br />
    }<br />
    .masthead-meta span { color: var(--brass); }<br />
    .meta-dot { width: 3px; height: 3px; background: var(--brass); border-radius: 50%; opacity: .5; }</p>
<p>    /* ─── LAYOUT ─── */<br />
    .container {<br />
      max-width: 820px;<br />
      margin: 0 auto;<br />
      padding: 0 24px;<br />
    }</p>
<p>    /* ─── TOC ─── */<br />
    .toc-wrap { margin: 56px auto; max-width: 820px; padding: 0 24px; }<br />
    .toc {<br />
      background: var(--parchment);<br />
      border: 1px solid var(--rule);<br />
      padding: 36px 40px;<br />
    }<br />
    .toc-head {<br />
      font-family: 'Cormorant Garamond', serif;<br />
      font-size: 1.05rem;<br />
      font-weight: 600;<br />
      letter-spacing: .08em;<br />
      text-transform: uppercase;<br />
      color: var(--ink);<br />
      margin-bottom: 22px;<br />
      display: flex;<br />
      align-items: center;<br />
      gap: 12px;<br />
    }<br />
    .toc-head::after { content: ''; flex: 1; height: 1px; background: var(--rule); }<br />
    .toc ol {<br />
      display: grid;<br />
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));<br />
      gap: 5px 40px;<br />
      padding-left: 20px;<br />
    }<br />
    .toc li { font-size: .9rem; }<br />
    .toc a { color: var(--walnut); text-decoration: none; transition: color .2s; }<br />
    .toc a:hover { color: var(--brass); }</p>
<p>    /* ─── ARTICLE BODY ─── */<br />
    .article { padding-bottom: 100px; }</p>
<p>    /* Intro paragraph */<br />
    .intro {<br />
      margin: 52px auto;<br />
      max-width: 820px;<br />
      padding: 0 24px;<br />
    }<br />
    .intro p {<br />
      font-family: 'Cormorant Garamond', serif;<br />
      font-size: 1.32rem;<br />
      line-height: 1.75;<br />
      color: var(--ink);<br />
      font-weight: 400;<br />
    }</p>
<p>    /* ─── SECTION ─── */<br />
    .post-section {<br />
      max-width: 820px;<br />
      margin: 0 auto 72px;<br />
      padding: 0 24px;<br />
    }</p>
<p>    .post-section h2 {<br />
      font-family: 'Cormorant Garamond', serif;<br />
      font-size: clamp(1.6rem, 3vw, 2.1rem);<br />
      font-weight: 700;<br />
      color: var(--ink);<br />
      line-height: 1.25;<br />
      margin-bottom: 18px;<br />
      padding-top: 8px;<br />
    }</p>
<p>    .post-section h3 {<br />
      font-family: 'Cormorant Garamond', serif;<br />
      font-size: 1.3rem;<br />
      font-weight: 600;<br />
      color: var(--ink);<br />
      margin: 28px 0 12px;<br />
    }</p>
<p>    .post-section p {<br />
      color: var(--body);<br />
      margin-bottom: 18px;<br />
      font-size: 1rem;<br />
    }</p>
<p>    .post-section p:last-child { margin-bottom: 0; }</p>
<p>    .section-number {<br />
      display: block;<br />
      font-family: 'Cormorant Garamond', serif;<br />
      font-size: .8rem;<br />
      letter-spacing: .3em;<br />
      text-transform: uppercase;<br />
      color: var(--brass);<br />
      font-weight: 600;<br />
      margin-bottom: 8px;<br />
    }</p>
<p>    /* ─── IMAGES ─── */<br />
    .img-full {<br />
      width: 100%;<br />
      height: 420px;<br />
      object-fit: cover;<br />
      display: block;<br />
      margin: 28px 0;<br />
    }</p>
<p>    .img-pair {<br />
      display: grid;<br />
      grid-template-columns: 1fr 1fr;<br />
      gap: 12px;<br />
      margin: 28px 0;<br />
    }</p>
<p>    .img-pair img {<br />
      width: 100%;<br />
      height: 320px;<br />
      object-fit: cover;<br />
      object-position: center top;<br />
      display: block;<br />
    }</p>
<p>    .img-caption {<br />
      font-size: .8rem;<br />
      letter-spacing: .06em;<br />
      color: var(--muted);<br />
      text-align: center;<br />
      margin-top: -18px;<br />
      margin-bottom: 22px;<br />
    }</p>
<p>    /* ─── PULL QUOTE ─── */<br />
    .pull-quote {<br />
      border-left: 3px solid var(--brass);<br />
      margin: 36px 0;<br />
      padding: 4px 0 4px 28px;<br />
      font-family: 'Cormorant Garamond', serif;<br />
      font-style: italic;<br />
      font-size: 1.35rem;<br />
      color: var(--ink);<br />
      line-height: 1.6;<br />
    }</p>
<p>    /* ─── HIGHLIGHT BOX ─── */<br />
    .highlight {<br />
      background: var(--charcoal);<br />
      color: #f4efe6;<br />
      padding: 36px 40px;<br />
      margin: 36px 0;<br />
      position: relative;<br />
      overflow: hidden;<br />
    }<br />
    .highlight::before {<br />
      content: '';<br />
      position: absolute; top: 0; right: 0;<br />
      width: 160px; height: 160px;<br />
      background: radial-gradient(circle at 100% 0%, rgba(181,137,43,.2) 0%, transparent 70%);<br />
      pointer-events: none;<br />
    }<br />
    .highlight-label {<br />
      font-size: 10px;<br />
      letter-spacing: .3em;<br />
      text-transform: uppercase;<br />
      color: var(--brass-lt);<br />
      font-weight: 500;<br />
      margin-bottom: 12px;<br />
      display: block;<br />
    }<br />
    .highlight p { color: rgba(244,239,230,.8); margin-bottom: 0; font-size: .975rem; }<br />
    .highlight strong { color: var(--brass-lt); }</p>
<p>    /* ─── TAG LIST ─── */<br />
    .tag-list {<br />
      display: flex;<br />
      flex-wrap: wrap;<br />
      gap: 10px;<br />
      margin: 20px 0;<br />
    }<br />
    .tag {<br />
      background: var(--parchment);<br />
      border: 1px solid var(--rule);<br />
      padding: 6px 18px;<br />
      font-size: .85rem;<br />
      font-weight: 500;<br />
      color: var(--ink);<br />
    }</p>
<p>    /* ─── COLOR SWATCHES ─── */<br />
    .swatches {<br />
      display: grid;<br />
      grid-template-columns: repeat(5, 1fr);<br />
      gap: 10px;<br />
      margin: 24px 0;<br />
    }<br />
    .swatch { overflow: hidden; border: 1px solid rgba(0,0,0,.07); }<br />
    .swatch-bg { height: 64px; }<br />
    .swatch-label {<br />
      background: var(--parchment);<br />
      padding: 8px 10px;<br />
      font-size: .78rem;<br />
      font-weight: 500;<br />
      color: var(--ink);<br />
      line-height: 1.3;<br />
    }<br />
    .swatch-sub { font-size: .7rem; color: var(--muted); margin-top: 2px; }</p>
<p>    /* ─── RULE ─── */<br />
    .rule {<br />
      display: flex;<br />
      align-items: center;<br />
      gap: 18px;<br />
      max-width: 820px;<br />
      margin: 56px auto;<br />
      padding: 0 24px;<br />
      color: var(--brass);<br />
      opacity: .45;<br />
    }<br />
    .rule::before, .rule::after { content: ''; flex: 1; height: 1px; background: var(--brass); }<br />
    .rule-glyph { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; }</p>
<p>    /* ─── MISTAKES ─── */<br />
    .mistake-list { list-style: none; padding: 0; margin: 20px 0; }<br />
    .mistake-list li {<br />
      display: flex;<br />
      align-items: flex-start;<br />
      gap: 16px;<br />
      padding: 15px 0;<br />
      border-bottom: 1px solid rgba(0,0,0,.07);<br />
      font-size: .96rem;<br />
      color: var(--body);<br />
    }<br />
    .mistake-list li:last-child { border-bottom: none; }<br />
    .no-icon {<br />
      flex-shrink: 0;<br />
      width: 20px; height: 20px;<br />
      background: #c04444;<br />
      border-radius: 50%;<br />
      display: flex; align-items: center; justify-content: center;<br />
      color: #fff;<br />
      font-size: .65rem;<br />
      font-weight: 700;<br />
      margin-top: 3px;<br />
    }</p>
<p>    /* ─── RELATED ─── */<br />
    .related {<br />
      background: var(--parchment);<br />
      border: 1px solid var(--rule);<br />
      padding: 36px 40px;<br />
      margin: 64px auto;<br />
      max-width: 820px;<br />
    }<br />
    .related h3 {<br />
      font-family: 'Cormorant Garamond', serif;<br />
      font-size: 1.1rem;<br />
      font-weight: 600;<br />
      letter-spacing: .06em;<br />
      text-transform: uppercase;<br />
      color: var(--ink);<br />
      margin-bottom: 16px;<br />
    }<br />
    .related ul { list-style: none; padding: 0; }<br />
    .related li { padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: .95rem; }<br />
    .related li:last-child { border-bottom: none; }<br />
    .related a { color: var(--walnut); text-decoration: none; transition: color .2s; }<br />
    .related a:hover { color: var(--brass); }</p>
<p>    /* ─── FAQ ─── */<br />
    .faq-section { max-width: 820px; margin: 0 auto 80px; padding: 0 24px; }<br />
    .faq-section h2 {<br />
      font-family: 'Cormorant Garamond', serif;<br />
      font-size: 2rem;<br />
      font-weight: 700;<br />
      color: var(--ink);<br />
      margin-bottom: 32px;<br />
    }<br />
    .faq-item { border-bottom: 1px solid var(--rule); padding: 26px 0; }<br />
    .faq-item:first-of-type { border-top: 1px solid var(--rule); }<br />
    .faq-q {<br />
      font-family: 'Cormorant Garamond', serif;<br />
      font-size: 1.12rem;<br />
      font-weight: 700;<br />
      color: var(--ink);<br />
      margin-bottom: 10px;<br />
    }<br />
    .faq-a { font-size: .96rem; color: var(--muted); line-height: 1.8; }</p>
<p>    /* ─── FOOTER ─── */<br />
    footer {<br />
      background: var(--charcoal);<br />
      color: rgba(244,239,230,.45);<br />
      text-align: center;<br />
      padding: 52px 24px;<br />
      font-size: .85rem;<br />
    }<br />
    footer .logo {<br />
      font-family: 'Cormorant Garamond', serif;<br />
      font-size: 1.5rem;<br />
      font-style: italic;<br />
      color: var(--brass-lt);<br />
      margin-bottom: 12px;<br />
      display: block;<br />
    }</p>
<p>    /* ─── SCROLL REVEAL ─── */<br />
    .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }<br />
    .reveal.in { opacity: 1; transform: translateY(0); }</p>
<p>    @media (max-width: 640px) {<br />
      .img-pair { grid-template-columns: 1fr; }<br />
      .img-pair img { height: 260px; }<br />
      .swatches { grid-template-columns: repeat(3, 1fr); }<br />
      .toc { padding: 24px 20px; }<br />
      .toc ol { grid-template-columns: 1fr; }<br />
      .highlight { padding: 26px 22px; }<br />
    }<br />
  </style>