/* retatrutidereddit.com - original 'paper ledger' stylesheet.
   Ink teal on warm paper. Right-hand data rail on article pages, ruled
   tables, terracotta note blocks. */

:root{
  --brand:#12494f; --brand-hi:#1d6b73; --brand-deep:#0b3236; --brand-tint:#eaf1f1;
  --accent:#c2603a; --accent-tint:#fbeee6;
  --ink:#17262b; --ink-soft:#5f6f74; --line:#e2ddd2;
  --paper:#ffffff; --paper-warm:#faf8f4;
  --radius:12px; --max:1180px;
  --sans:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --serif:'Iowan Old Style',Charter,'Palatino Linotype','Book Antiqua',Georgia,serif;
  --mono:'Consolas','SF Mono','Courier New',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper-warm);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.74}
img{max-width:100%;height:auto}
a{color:var(--brand-deep);text-decoration:none}
a:hover{color:var(--accent);text-decoration:underline}
h1,h2,h3,h4{line-height:1.3;color:var(--ink)}
h1{font-family:var(--serif);font-size:clamp(1.65rem,3.4vw,2.5rem);
  margin:0 0 14px;letter-spacing:-.015em}
h2{font-family:var(--serif);font-size:1.3rem;margin:0 0 10px}
h3{font-size:1.05rem;margin:1.35em 0 .4em}
p{margin:.65em 0}

/* ---------------- masthead: paper bar, ruled underline, serif wordmark ----- */
.masthead{background:var(--paper);border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(18,73,79,.14)}
.masthead::after{content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--brand) 0%,var(--brand-hi) 60%,var(--accent) 100%)}
.masthead-in{max-width:var(--max);margin:0 auto;padding:12px 22px 0}
.masthead-top{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand-mark{width:40px;height:40px;flex:0 0 40px;border-radius:10px;
  background:var(--brand);display:flex;align-items:center;justify-content:center}
.brand-mark svg{width:26px;height:26px;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.14}
.brand-text b{font-family:var(--serif);font-size:1.22rem;letter-spacing:-.01em}
.brand-text i{font-style:normal;font-size:11.5px;letter-spacing:.14em;
  text-transform:lowercase;color:var(--ink-soft)}
.brand-tag{margin:6px 0 10px;font-size:13px;color:var(--ink-soft);max-width:70ch}

/* nav: plain words with a sliding underline, no pills */
.railnav{margin-top:6px}
.railnav-in{display:flex;gap:26px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:9px 0 0}
.railnav-in a{font-size:14.5px;color:var(--ink-soft);padding-bottom:7px;
  border-bottom:2px solid transparent}
.railnav-in a:hover,.railnav-in a.on{color:var(--brand-deep);
  border-bottom-color:var(--accent);text-decoration:none}
.nav-toggle{display:none}

/* ---------------- first-screen notice ------------------------------------ */
.notice{max-width:var(--max);margin:16px auto 0;padding:11px 18px;
  background:var(--accent-tint);border:1px solid #ecd8c9;
  border-left:4px solid var(--accent);border-radius:8px;
  font-size:13.4px;line-height:1.62;color:#6b3a22}
.notice b{color:#6b3a22}

/* ---------------- layout: article + right-hand data rail ------------------ */
main.page{max-width:var(--max);margin:26px auto;padding:0 22px}
main.page-wide{max-width:calc(var(--max) + 80px)}
.wrap{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:44px;align-items:start}
.wrap > .col{min-width:0}
.datarail{position:sticky;top:18px;font-size:13.4px;color:var(--ink-soft)}
.datarail h4{font-size:11.5px;letter-spacing:.13em;text-transform:lowercase;
  color:var(--ink-soft);margin:0 0 10px;font-weight:400}
.datarail .toc{border-left:2px solid var(--line);padding-left:14px;margin:0 0 22px}
.datarail .toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.datarail .toc li{counter-increment:t;margin:0 0 7px}
.datarail .toc li::before{content:counter(t,decimal-leading-zero) " ";
  font-family:var(--mono);font-size:11px;color:var(--accent)}
.datarail .toc a{color:var(--ink-soft)}
.datarail .toc a:hover{color:var(--brand-deep)}
.datarail .panel{background:var(--paper);border:1px solid var(--line);
  border-radius:10px;padding:13px 15px;margin:0 0 18px}
.datarail .panel dl{margin:0}
.datarail .panel dt{font-size:11.5px;color:var(--ink-soft);margin-top:9px}
.datarail .panel dt:first-child{margin-top:0}
.datarail .panel dd{margin:2px 0 0;font-family:var(--mono);font-size:13px;
  color:var(--brand-deep)}

/* ---------------- content blocks ----------------------------------------- */
.crumbs{font-size:12.6px;color:var(--ink-soft);margin:0 0 14px}
.crumbs a{color:var(--ink-soft)}
.crumbs .sep{margin:0 7px;color:var(--line)}
.crumbs .cur{color:var(--ink)}
.byline{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.6px;
  color:var(--ink-soft);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:9px 0;margin:0 0 22px}
.byline b{color:var(--ink)}
.subtitle{font-size:17px;color:var(--ink-soft);margin:0 0 20px;
  font-family:var(--serif)}
.lede{font-family:var(--serif);font-size:19px;line-height:1.62;color:var(--ink)}

.blk{margin:0 0 30px}
.blk > h2{border-top:1px solid var(--line);padding-top:20px}
.ticks{margin:.55em 0;padding-left:1.15em}
.ticks li{margin:.36em 0}
.note{margin:16px 0;padding:12px 16px;background:var(--paper);
  border-left:3px solid var(--accent);border-radius:0 8px 8px 0;
  font-size:14.6px;line-height:1.66}
.note.data{border-left-color:var(--brand);background:var(--brand-tint)}
.note b{font-weight:500}

table.data{width:100%;border-collapse:collapse;margin:14px 0 4px;font-size:14.4px}
table.data caption{caption-side:top;text-align:left;font-size:12.4px;
  color:var(--ink-soft);padding-bottom:8px}
table.data th,table.data td{border-bottom:1px solid var(--line);
  padding:9px 11px;text-align:left;vertical-align:top}
table.data thead th{background:var(--brand-tint);color:var(--brand-deep);
  font-weight:500;font-size:13px;border-bottom:1px solid #cfd9d9}
table.data tbody tr:nth-child(even){background:#f6f5f1}
table.data td:first-child{font-family:var(--mono);font-size:13.2px}

figure.fig{margin:22px 0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px}
figure.fig img{display:block;width:100%;border-radius:8px}
figure.fig figcaption{font-size:12.6px;color:var(--ink-soft);
  margin-top:10px;line-height:1.6}

.faq{margin:0 0 26px}
.faq .q{font-weight:500;margin:16px 0 4px;font-size:15.6px}
.faq .a{margin:0;color:var(--ink-soft)}
.refs{list-style:none;margin:10px 0 0;padding:0;font-size:13.4px}
.refs li{margin:0 0 8px;padding-left:20px;position:relative;color:var(--ink-soft)}
.refs li::before{content:"[" counter(r) "]";counter-increment:r;
  position:absolute;left:0;font-family:var(--mono);font-size:11.4px;color:var(--accent)}
.refs{counter-reset:r}

.authorbox{display:flex;gap:14px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px;
  margin:26px 0 0;font-size:13.8px}
.authorbox .avatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;
  background:var(--brand-tint);color:var(--brand-deep);display:flex;
  align-items:center;justify-content:center;font-weight:500;font-size:14px}
.ab-body{color:var(--ink-soft)}

/* ---------------- home ---------------------------------------------------- */
.hero{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 28px;margin-bottom:26px}
.hero h1{margin-top:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:16px;margin:6px 0 26px}
.card{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:17px 19px}
.card h3{margin:0 0 7px;font-family:var(--serif);font-size:1.06rem}
.card h3 a{color:var(--brand-deep)}
.card p{margin:0;font-size:13.8px;color:var(--ink-soft)}

/* ---------------- footer -------------------------------------------------- */
.site-footer{margin-top:44px;background:var(--brand-deep);color:#cfe0e0}
.foot-in{max-width:var(--max);margin:0 auto;padding:30px 22px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px}
.site-footer h4{margin:0 0 9px;font-size:12px;letter-spacing:.13em;
  text-transform:lowercase;color:#8fb3b6;font-weight:400}
.site-footer a{display:block;color:#d9e8e8;font-size:13.6px;margin:0 0 5px}
.site-footer a:hover{color:#fff}
.foot-legal{max-width:var(--max);margin:0 auto;padding:0 22px 26px;
  font-size:12.6px;color:#9dbfbf;line-height:1.65}
.foot-legal .fine{display:block;margin-top:7px;color:#7fa3a6}

/* ---------------- misc ---------------------------------------------------- */
.wa-strip{margin:22px 0 0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:15px 17px;font-size:14px}
.wa-btn{display:inline-block;margin-top:8px;background:var(--brand);color:#fff;
  padding:8px 15px;border-radius:8px;font-size:13.6px}
.wa-btn:hover{background:var(--brand-deep);color:#fff;text-decoration:none}
.side-box{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;margin:16px 0;font-size:14px}
.updated-line{font-size:12.4px;color:var(--ink-soft)}

@media (max-width:980px){
  .wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .datarail{position:static;order:-1;margin-bottom:22px}
  .datarail .toc{border-left:0;border-top:2px solid var(--line);padding:12px 0 0}
}
@media (max-width:720px){
  body{font-size:16px}
  .masthead-in{padding:10px 16px 0}
  main.page{padding:0 16px}
  .railnav-in{gap:17px;font-size:14px}
  .hero{padding:20px}
  .nav-toggle{display:block;background:none;border:1px solid var(--line);
    border-radius:8px;width:40px;height:34px;cursor:pointer;margin-left:auto}
  .nav-toggle span{display:block;height:2px;background:var(--ink);
    margin:5px auto;width:17px}
  .railnav-in{display:none}
  .railnav-in.open{display:flex}
}
/* ---- migrated directory compatibility layer ---- */
table.data{border-collapse: collapse; width: 100%; max-width: 780px; margin: 14px 0 22px;
  font-family: Verdana, Geneva, sans-serif; font-size: 13.5px; background: var(--paper);}
table.data th, table.data td{border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top;}
table.data th{background: var(--brand-tint); color: var(--brand-deep);}
.avatar{width: 52px; height: 52px; border-radius: 50%; flex: 0 0 52px;
  background: linear-gradient(135deg, #6faf5a, #3f7d3a); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: Verdana, Geneva, sans-serif; font-weight: 700; font-size: 17px;}
/* ---------- vendor directory (/vendors/) - layout cloned from the reference
   design (peptidecertify/vendors); colors remapped to the zesty palette ---------- */
.page .subtitle{color: var(--ink-soft); font-size: 16px; margin-top: 8px; max-width: 820px;}
.vd-disclaimer{background: var(--accent-tint); border: 1px solid #ecc98c; border-left: 4px solid #c8862c; border-radius: 8px; padding: 14px 16px; font-size: 13.5px; color: var(--ink); margin: 18px 0;}
.vd-disclaimer p{margin: 0;}
.vd-disclaimer b{color: #8a5a12;}
.vd-tabs{display: flex; gap: 8px; margin: 22px 0 14px; flex-wrap: wrap;}
.vd-tab{border: 1px solid var(--line); background: var(--paper); border-radius: 8px; padding: 8px 18px; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: 700; color: var(--ink-soft); cursor: pointer;}
.vd-tab.on{background: var(--ink); border-color: var(--ink); color: #fff;}
.vd-search{position: relative; max-width: 640px; margin: 0 0 12px;}
.vd-search input{width: 100%; padding: 12px 14px 12px 40px; border: none; border-bottom: 2px solid var(--line); background: transparent; font-family: Verdana, Geneva, sans-serif; font-size: 16px; outline: none;}
.vd-search input:focus{border-bottom-color: var(--brand);}
.vd-search svg{position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--ink-soft);}
.vd-chiprow{display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px;}
.vd-chiprow .lbl{font-family: Verdana, Geneva, sans-serif; font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin-right: 4px;}
.vd-chip{border: 1px solid var(--line); background: var(--paper); border-radius: 6px; padding: 5px 12px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-weight: 700; color: var(--ink-soft); cursor: pointer;}
.vd-chip.on{background: var(--ink); border-color: var(--ink); color: #fff;}
.vd-chip.loc.on{background: var(--brand); border-color: var(--brand);}
.vd-count{font-family: Verdana, Geneva, sans-serif; font-size: 11.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; margin: 10px 0 6px;}
.vd-list{border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper);}
.vd-cat{padding: 8px 16px; background: var(--brand-tint); font-family: Verdana, Geneva, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-deep);}
.vd-item{border-top: 1px solid var(--line);}
.vd-row{display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; background: none; border: none; text-align: left; font: inherit; cursor: pointer;}
.vd-row:hover{background: var(--brand-tint);}
.vd-arrow{color: var(--ink-soft); transition: transform .15s; flex-shrink: 0;}
.vd-item.open .vd-arrow{transform: rotate(90deg);}
.vd-name{flex: 1; min-width: 0; font-weight: 600; color: var(--ink); font-size: 15px;}
.vd-name small{color: var(--ink-soft); font-weight: 400; white-space: nowrap; font-size: 13px;}
.vd-sup{font-size: 12px; color: var(--ink-soft); flex-shrink: 0;}
.vd-from{text-align: right; min-width: 86px; flex-shrink: 0;}
.vd-from em{display: block; font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft);}
.vd-from b{font-size: 15px;}
.vd-detail{display: none; border-top: 1px solid var(--line); background: var(--paper-warm); padding: 12px 16px;}
.vd-item.open .vd-detail{display: block;}
/* neutralize the site-wide table look inside quote tables */
.vd-detail table{width: 100%; border-collapse: collapse; font-size: 13px; background: transparent; border: none; border-radius: 0; margin: 0;}
.vd-detail th{text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); padding: 6px 8px; border-bottom: 1px solid var(--line); background: transparent; font-weight: 700;}
.vd-detail td{padding: 7px 8px; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: top;}
.vd-detail tr:last-child td{border-bottom: none;}
.vd-detail td.p{text-align: right; font-weight: 700; color: var(--ink); white-space: nowrap;}
.vd-detail .none{color: var(--ink-soft); font-size: 13px; padding: 8px 0;}
.vd-vendor{border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 16px 18px;}
.vd-vendor h3{font-size: 16px; margin-bottom: 2px;}
.vd-vendor .loc{font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: var(--brand-deep); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px;}
.vd-vendor p{font-size: 13.5px; color: var(--ink-soft); margin-bottom: 8px;}
.vd-vendor .contact{font-size: 13px; display: flex; flex-wrap: wrap; gap: 10px; color: var(--ink-soft);}
/* WhatsApp elements (tab bar icon + vendor card footer) */
.vd-tab.wa{display: inline-flex; align-items: center; gap: 7px; color: #25d366; border-color: #25d366; text-decoration: none; font-size: 13px; padding: 8px 14px; font-weight: 700;}
.vd-tab.wa:hover{background: #25d366; color: #fff; text-decoration: none;}
.vd-vfoot{display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px;}
.vd-vfoot .vpl{font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap;}
.vd-vfoot .vpl:hover{color: var(--brand-deep);}
.vd-vfoot .vd-wa{display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #25d366; text-decoration: none; white-space: nowrap;}
.vd-vfoot .vd-wa:hover{text-decoration: underline;}
/* vendor filter bar (View price list linkage) */
.vd-vbar{display: flex; align-items: center; gap: 10px; background: var(--brand-tint); border: 1px solid var(--brand); border-radius: 8px; padding: 8px 14px; font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; flex-wrap: wrap;}
.vd-vbar b{color: var(--brand-deep);}
.vd-vbar-x{border: none; background: var(--ink); color: #fff; border-radius: 5px; padding: 3px 10px; font-family: Verdana, Geneva, sans-serif; font-size: 11px; font-weight: 700; cursor: pointer; margin-left: auto;}
.vd-vbar-x:hover{background: var(--brand-deep);}
/* quote table WhatsApp column */
.vd-detail th.wac, .vd-detail td.wac{text-align: center; white-space: nowrap;}
.vd-detail td.wac a{display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: #25d366; background: rgba(37,211,102,.1); transition: background .15s;}
.vd-detail td.wac a:hover{background: #25d366; color: #fff;}
/* prose + sidebar layout under the directory */
.cols{display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 32px; align-items: start; margin-top: 24px;}
.prose h3{font-size: 17px; margin: 20px 0 8px;}
.prose p{margin: 0 0 14px; color: var(--ink-soft);}
aside .side-box{background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px;}
aside .side-box h4{font-family: Verdana, Geneva, sans-serif; font-size: 14px; margin-bottom: 10px; letter-spacing: .2px;}
aside .side-box ul{list-style: none; font-size: 13.5px; padding-left: 0; margin: 0;}
aside .side-box li{margin-bottom: 7px; padding-left: 14px; position: relative;}
aside .side-box li::before{content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand);}
.wa-cta{background: linear-gradient(135deg, var(--brand-deep), var(--brand)); color: #fff; border-radius: 10px; padding: 18px; margin-bottom: 16px;}
.wa-cta h4{font-size: 15px; margin-bottom: 6px; color: #fff;}
.wa-cta p{font-size: 13px; opacity: .92; margin-bottom: 12px;}
.wa-cta a{display: inline-block; background: #fff; color: var(--brand-deep); font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 8px; font-family: Verdana, Geneva, sans-serif;}
.wa-cta a:hover{text-decoration: none; background: var(--brand-tint);}
.author-box{display: flex; gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 24px 0; font-size: 13.5px;}
.author-box .avatar{width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-deep); display: flex; align-items: center; justify-content: center; font-family: Verdana, Geneva, sans-serif; font-weight: 800; font-size: 15px;}
.author-box b{display: block; font-size: 14px;}
.author-box .role{color: var(--ink-soft); font-size: 12px;}
.updated-line{font-size: 12.5px; color: var(--ink-soft); margin-top: 14px;}
.cols{grid-template-columns: minmax(0,1fr);}
.vd-sup{display: none;}
.vd-name small{display: none;}
.vd-detail{overflow-x: visible;}
.vd-detail table{font-size: 11px;}
.vd-detail th{padding: 6px 5px; font-size: 9px; white-space: normal;}
.vd-detail td{padding: 6px 5px; overflow-wrap: anywhere; word-break: break-word;}
.vd-detail td.p{white-space: normal;}
.vd-detail td.wac a{width: 24px; height: 24px;}
.vd-tab.wa span{display: none;}
.vdmain{max-width:none;padding:0}
.vdmain > h1{font-family:var(--serif)}