:root{
      --bg:#ffffff;
      --text:#111827;
      --muted:#6b7280;
      --line:#e5e7eb;
      --soft:#f9fafb;
      --card:#ffffff;
      --accent:#111827; /* minimal: same as text */
      --radius:14px;
      --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
      --max: 860px;
    }

    *{box-sizing:border-box}

      html, body{
        max-width: 100%;
        overflow-x: hidden;
      }

    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background:var(--bg);
      color:var(--text);
      line-height:1.65;
    }

    a{color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;}
    a:hover{opacity:.85}

    .reading-progress{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      width: 100%;
      height: 4px;
      background: rgba(17, 24, 39, 0.08);
    }

    .reading-progress__bar{
      width: 0;
      height: 100%;
      background: linear-gradient(90deg, #8c6f3d, #111827);
      transition: width .12s linear;
    }

    .wrap{
      width: 100%;
      margin: 1em auto;
      padding: 28px 18px 70px;
    }

    /* Header (optional site header) */
    .sitebar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding: 18px;
      border-bottom:1px solid var(--line);
    }
    .brand{
      font-weight:650;
      letter-spacing:.2px;
      text-decoration:none;
    }
    .nav{
      display:flex; gap:14px; flex-wrap:wrap;
      font-size:14px; color:var(--muted);
    }
    .nav a{color:var(--muted); text-decoration:none}
    .nav a:hover{color:var(--text)}

    /* Breadcrumb */
    .breadcrumb{
      font-size:13px;
      color:var(--muted);
      margin: 18px 0 10px;
    }
    .breadcrumb a{color:var(--muted); text-decoration:none}
    .breadcrumb span{margin:0 6px; color:var(--line)}

    /* Article card */
    .article{
      background:var(--card);
      border:1px solid var(--line);
      border-radius: var(--radius);
      padding: 28px 22px;
      box-shadow: var(--shadow);
      margin-top: 3em;
    }

    /* Title block */
    .kicker{
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:var(--muted);
      margin:0 0 10px;
    }
    h1{
      font-size: clamp(26px, 4vw, 38px);
      line-height:1.15;
      margin: 0 0 10px;
      letter-spacing:-.02em;
    }
    .meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px 14px;
      align-items:center;
      margin: 8px 0 18px;
      color:var(--muted);
      font-size:14px;
    }
    .pill{
      border:1px solid var(--line);
      background:var(--soft);
      padding: 5px 10px;
      border-radius: 999px;
      font-size:13px;
    }

    .lead{
      font-size:18px;
      color:#111827;
      margin: 0 0 18px;
    }

    .quick-answer{
      margin: 22px 0;
      padding: 18px;
      border: 1px solid rgba(140, 111, 61, 0.28);
      border-radius: 12px;
      background:
        linear-gradient(135deg, rgba(250, 247, 239, 0.96), rgba(255, 255, 255, 0.92));
    }

    .quick-answer p{
      margin: 0;
    }

    .quick-answer__label{
      margin-bottom: 8px !important;
      color: #7a6033;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .note-link{
  margin: 18px 0 26px;
  padding-left: 14px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 8px;
  border-left: 3px solid rgba(82, 46, 22, 0.35);
  background:var(--soft);
  font-size: 0.95rem;
  color: var(--text);
}

    .note-link a{
      font-weight: 600;
      text-decoration: underline;
    }


    /* Table of contents */
    .toc{
      border:1px solid var(--line);
      border-radius: var(--radius);
      padding: 16px;
      background:var(--soft);
      margin: 18px 0 22px;
    }
    .toc strong{
      display:block;
      margin-bottom:10px;
      font-size:14px;
    }
    .toc ol{
      margin:0;
      padding-left: 18px;
      color:var(--muted);
      font-size:14px;
    }
    .toc a{color:var(--muted); text-decoration:none}
    .toc a:hover{color:var(--text); text-decoration:underline}

    /* Content typography */
    h2{
      margin-top: 28px;
      margin-bottom: 10px;
      font-size:22px;
      letter-spacing:-.01em;
    }
    h3{
      margin-top: 18px;
      margin-bottom: 8px;
      font-size:18px;
    }
    p{margin: 10px 0}
    ul, ol{margin: 10px 0 10px 18px}
    li{margin: 6px 0}

    blockquote{
      margin: 18px 0;
      padding: 12px 14px;
      border-left: 3px solid var(--line);
      background: var(--soft);
      border-radius: 10px;
      color: var(--muted);
    }

    .divider{
      height:1px;
      background: var(--line);
      margin: 26px 0;
    }

    /* Boxes */
    .box{
      border:1px solid var(--line);
      border-radius: var(--radius);
      padding: 16px;
      background: var(--soft);
      margin: 18px 0;
    }
    .box-title{
      font-weight:650;
      margin:0 0 8px;
      font-size:14px;
      letter-spacing:.01em;
    }

    .comparison-section{
      margin: 30px 0;
    }

    .comparison-grid{
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 16px;
    }

    .comparison-card{
      min-height: 156px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(17, 24, 39, .05);
    }

    .comparison-card__tag{
      display: inline-flex;
      margin-bottom: 10px;
      padding: 4px 9px;
      border: 1px solid rgba(140, 111, 61, 0.22);
      border-radius: 999px;
      color: #7a6033;
      background: rgba(250, 247, 239, .9);
      font-size: 12px;
      font-weight: 700;
    }

    .comparison-card strong{
      display: block;
      font-size: 17px;
      line-height: 1.3;
    }

    .comparison-card p{
      color: var(--muted);
      font-size: 14px;
    }

    .reader-prompt{
      margin: 18px 0;
      padding: 16px 18px;
      border-radius: 12px;
      background: #111827;
      color: #fff;
    }

    .reader-prompt p{
      margin: 0;
    }

    .reader-prompt__title{
      margin-bottom: 8px !important;
      font-weight: 700;
    }

    .grid2{
      display:grid;
      grid-template-columns: 1fr;
      gap: 14px;
      margin: 16px 0;
    }

/* ===== Ring size tool (lightweight, premium look) ===== */
.ring-tool{
  margin: 34px 0;
}

.ring-tool__card{
  background: linear-gradient(
    135deg,
    rgba(255,248,235,0.45),
    rgba(240,220,190,0.40)
  );
  border: 1px solid rgba(230,200,160,0.35);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
  border-radius: 12px;
}

.ring-tool__header{
  margin-left: 1em;
}

.ring-tool__kicker{
  margin: 1em 0 6px 0;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
  opacity: .75;
}

.ring-tool__title{
  margin: 0 0 10px 0;
  font-size: 1.35rem;
  line-height: 1.2;
}

.ring-tool__subtitle{
  margin: 0 0 14px 0;
  opacity: .9;
}

.ring-tool__tabs{
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background-color: rgba(255,255,255,0.30);
  margin-top: 14px;
}

.ring-tool__tab{
  flex: 1;
  border: 1px solid rgba(255,255,255,0.10);
  color: inherit;
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 600;
  opacity: .85;
}

.ring-tool__tab.is-active{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,1),
    var(--rt-moka-soft)
  );
  border-color: rgba(82, 46, 22, 0.28);
}

.ring-tool__panes{
  margin-top: 14px;
  margin-left: 1em;
}

.ring-tool__pane{
  display: none;
  padding: 14px 0 6px 0;
}

.ring-tool__pane.is-active{
  display: block;
}

.ring-tool__help{
  margin: 0 0 12px 0;
  opacity: .9;
}

.ring-tool__row{
  display: grid;
  gap: 8px;
  margin: 12px 0 14px 0;
}

.ring-tool__label{
  font-weight: 600;
  opacity: .95;
}

.ring-tool__input{
  width: 95%;
  padding: 12px 12px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,1),
    var(--rt-moka-soft)
  );
  border-color: rgba(82, 46, 22, 0.28);
}

.ring-tool__input:focus{
  border-color: rgba(255,255,255,0.22);
}

.ring-tool__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ring-tool__btn{
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,1),
    var(--rt-moka-soft)
  );
  border-color: rgba(82, 46, 22, 0.28);
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 700;
}

  .ring-tool__btn--ghost{
  background: rgba(82, 46, 22, 0.12);
  border: 1px solid rgba(82, 46, 22, 0.30);
  color: rgba(34, 24, 16, 0.95);
  opacity: 1;
}

.ring-tool__result{
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
}

.ring-tool__result strong{
  font-size: 1.05rem;
}

.ring-tool__footer{
  margin-top: 14px;
}

.ring-tool__note{
  margin: 0 0 1em 1em;
  font-size: .92rem;
  opacity: .85;
}

.article-hero{
  margin: 24px 0 36px;
}

.article-hero img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

.article-hero figcaption{
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
}



    @media (min-width: 760px){
      .grid2{grid-template-columns: 1fr 1fr;}
      .comparison-grid{grid-template-columns: repeat(2, 1fr);}
      .related-articles__grid{grid-template-columns: repeat(3, 1fr);}
    }

    /* Instagram embed wrapper (keeps it tidy) */
    .embed{
      border:1px solid var(--line);
      border-radius: var(--radius);
      padding: 14px;
      background: #fff;
      margin: 18px 0;
    }
    .embed-note{
      font-size:13px;
      color:var(--muted);
      margin: 0 0 10px;
    }

    /* FAQ */
    details{
      border:1px solid var(--line);
      border-radius: 12px;
      padding: 12px 14px;
      background: #fff;
      margin: 10px 0;
    }
    summary{
      cursor:pointer;
      font-weight:600;
    }
    details p{color:var(--muted); margin:10px 0 0}

    .related-articles{
      margin-top: 34px;
      padding-top: 26px;
      border-top: 1px solid var(--line);
    }

    .related-articles__header h2{
      margin-top: 0;
    }

    .related-articles__grid{
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      margin-top: 16px;
    }

    .related-card{
      display: grid;
      grid-template-rows: auto auto auto 1fr;
      min-height: 100%;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      color: var(--text);
      text-decoration: none;
      box-shadow: 0 8px 22px rgba(17, 24, 39, .06);
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }

    .related-card:hover{
      transform: translateY(-2px);
      border-color: rgba(140, 111, 61, 0.35);
      box-shadow: 0 12px 28px rgba(17, 24, 39, .1);
      opacity: 1;
    }

    .related-card img{
      width: 100%;
      aspect-ratio: 3 / 2;
      object-fit: cover;
      display: block;
      background: var(--soft);
    }

    .related-card span,
    .related-card strong,
    .related-card p{
      margin-left: 14px;
      margin-right: 14px;
    }

    .related-card span{
      margin-top: 14px;
      color: #7a6033;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .related-card strong{
      margin-top: 6px;
      line-height: 1.3;
      font-size: 16px;
    }

    .related-card p{
      margin-top: 8px;
      margin-bottom: 16px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

    /* CTA */
    .cta{
      border:1px solid var(--line);
      border-radius: var(--radius);
      padding: 18px;
      background: #fff;
      margin-top: 28px;
      display:grid;
      gap: 12px;
    }
    .cta strong{
      font-size:16px;
      letter-spacing:-.01em;
    }
    .cta p{margin:0; color:var(--muted)}
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top: 6px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 10px 14px;
      border-radius: 999px;
      border:1px solid var(--text);
      background: var(--text);
      color:#fff;
      text-decoration:none;
      font-size:14px;
      font-weight:600;
    }
    .btn:hover{opacity:.9}
    .btn.secondary{
      background:#fff;
      color:var(--text);
      border-color: var(--line);
    }

    /* Footer note */
    .footnote{
      margin-top: 14px;
      font-size:12px;
      color:var(--muted);
  }

      .ring-tool__card{ padding: 26px; }
      .ring-tool__title{ font-size: 1.15rem; margin-top: 1rem; margin-bottom: 1rem;}
      .ring-tool__row{ grid-template-columns: 1fr;}

      .ring-tool__input{ margin-top: 1.1em;}
      .ring-tool__actions{ margin-top: 1.5em;}


/*      SMARTPHONE ONLY (iOS + Android) */

          @media (max-width: 480px){
                h1{ 
                  font-size: 1.2em;
                  line-height: 1.8em;
                }

                #ic{ 
                  visibility: hidden;
                }

                .note-link a{ 
                  font-size: 14px;
                }

                .article{
                  padding: 24px 16px;
                }

                .quick-answer,
                .comparison-card,
                .reader-prompt{
                  border-radius: 10px;
                }
            }

          @media (min-width: 760px){
            .comparison-grid{grid-template-columns: repeat(2, 1fr);}
            .related-articles__grid{grid-template-columns: repeat(3, 1fr);}
          }