:root{
    --bg:          #FFFFFF;
    --panel:       #FAFAFA;
    --line:        #E2E2E2;
    --headline:    #860D06;
    --headline-dim:#B85A54;
    --body:        #747474;
    --ink:         #1E1E1E;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    background:var(--bg);
    color:var(--body);
    font-family:'Work Sans', sans-serif;
    line-height:1.6;
  }

  .wrap{ max-width:760px; margin:0 auto; padding:0 24px; }

  a{ color:var(--headline); }

  /* ---------- Top accent + header ---------- */
  .top-accent{ height:3px; background:var(--headline); }

  .site-header{
    padding:36px 0 28px;
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
  }
  .site-logo-img{
    display:block;
    height:50px;
    width:auto;
  }
  .tagline{
    font-size:13.5px;
    color:var(--body);
    margin:6px 0 0;
  }
  .site-nav{ display:flex; gap:20px; flex-wrap:wrap; }
  .site-nav a{
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--body);
    border-bottom:1px solid transparent;
    padding-bottom:2px;
    transition:color 0.15s ease, border-color 0.15s ease;
  }
  .site-nav a:hover{ color:var(--headline); border-color:var(--headline); }

  /* ---------- Section rhythm ---------- */
  section{ padding:56px 0; }
  .band{ background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

  h1{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:clamp(28px, 4.5vw, 36px);
    color:var(--ink);
    margin:0 0 20px;
    letter-spacing:-0.01em;
  }
  h2{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:clamp(22px, 3.5vw, 26px);
    color:var(--ink);
    margin:0 0 8px;
  }

  .intro p{ font-size:15.5px; color:var(--body); margin:0 0 16px; max-width:64ch; }
  .intro p:last-of-type{ margin-bottom:0; }

  .quick-answers{
    margin-top:32px;
    padding:20px 24px;
    background:var(--panel);
    border:1px solid var(--line);
    border-left:3px solid var(--headline);
    border-radius:5px;
  }
  .qa-label{
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--headline-dim);
    margin:0 0 14px;
  }
  .qa-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:10px 20px;
  }
  .qa-item{
    font-family:'Space Mono', monospace;
    font-size:13.5px;
    color:var(--ink);
    display:flex;
    align-items:baseline;
    gap:8px;
  }
  .qa-item .op{ color:var(--headline-dim); }

  /* ---------- Calculator (embedded tool) ---------- */
  .calc-card{
    width:100%;
    max-width:620px;
    margin:0 auto;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:6px;
    box-shadow:0 30px 60px -35px rgba(0,0,0,0.18);
    overflow:hidden;
  }
  .calc-header{ padding:30px 30px 22px; border-bottom:2px solid var(--line); }
  .eyebrow{
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:var(--headline);
    margin:0 0 10px;
  }
  .calc-header h3{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:clamp(24px, 4.5vw, 32px);
    margin:0;
    letter-spacing:-0.01em;
    color:var(--headline);
  }
  .calc-header h3 em{ font-style:italic; color:var(--ink); }
  .calc-sub{ font-size:14px; color:var(--body); margin:10px 0 0; max-width:44ch; line-height:1.5; }

  .calc-body{
    padding:28px 30px 30px;
    display:grid;
    grid-template-columns:1fr 108px;
    gap:28px;
    align-items:start;
  }
  @media (max-width:520px){
    .calc-body{ grid-template-columns:1fr; }
    .gauge-col{ order:-1; display:flex; justify-content:center; }
  }

  .controls{ display:flex; flex-direction:column; gap:18px; }
  .field label{
    display:block;
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--headline-dim);
    margin-bottom:7px;
  }
  .amount-row{ display:grid; grid-template-columns:100px 1fr; gap:12px; }

  input[type="text"], select{
    width:100%;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:4px;
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-size:16px;
    padding:11px 12px;
    appearance:none;
    -webkit-appearance:none;
  }
  input[type="text"]:focus, select:focus{
    outline:2px solid var(--headline);
    outline-offset:1px;
    border-color:var(--headline);
  }
  select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23860D06' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    padding-right:34px;
    cursor:pointer;
  }

  .swap-row{ display:flex; align-items:center; gap:12px; margin:2px 0; }
  .swap-line{ flex:1; height:1px; background:var(--line); }
  .swap-btn{
    background:none;
    border:1px solid var(--line);
    color:var(--headline);
    border-radius:50%;
    width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:transform 0.15s ease, border-color 0.15s ease;
    flex-shrink:0;
  }
  .swap-btn:hover{ border-color:var(--headline); transform:rotate(180deg); }
  .swap-btn svg{ width:16px; height:16px; }

  .result{
    margin-top:6px;
    padding:20px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:5px;
    border-left:3px solid var(--headline);
  }
  .result .label{
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--headline-dim);
    margin-bottom:6px;
  }
  .result .value{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:clamp(26px, 6vw, 34px);
    color:var(--ink);
    line-height:1.15;
    word-break:break-word;
  }
  .result .value .unit{
    font-size:0.5em;
    color:var(--body);
    font-family:'Work Sans', sans-serif;
    font-weight:500;
    margin-left:6px;
  }
  .result .exact{
    font-family:'Space Mono', monospace;
    font-size:12px;
    color:var(--body);
    margin-top:6px;
  }

  .gauge-col{ display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:4px; }
  .gauge-cap{
    font-family:'Space Mono', monospace;
    font-size:10px;
    letter-spacing:0.1em;
    color:var(--body);
    text-transform:uppercase;
  }

  @media (prefers-reduced-motion: reduce){
    .swap-btn, .fill-rect, .needle{ transition:none !important; }
  }

  /* ---------- Category tabs ---------- */
  .tabs{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:8px;
    padding:20px 30px 24px;
  }
  .tab{
    font-family:'Space Mono', monospace;
    font-size:10.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    background:var(--panel);
    border:1px solid var(--line);
    color:var(--body);
    border-radius:4px;
    padding:10px 3px;
    cursor:pointer;
    text-align:center;
    transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .tab:hover{ border-color:var(--headline-dim); color:var(--ink); }
  .tab.active{ background:var(--headline); border-color:var(--headline); color:#fff; }

  @media (max-width:480px){
    .tabs{ grid-template-columns:repeat(3, 1fr); padding:16px 20px 20px; }
  }

  .instrument{ display:none; }
  .instrument.active{ display:block; }

  /* ---------- How-to panel ---------- */
  .howto-card{
    width:100%;
    max-width:620px;
    margin:16px auto 0;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:6px;
    padding:20px 24px;
  }
  .howto-label{
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--headline-dim);
    margin:0 0 8px;
  }
  .howto-text{
    font-size:14px;
    color:var(--body);
    line-height:1.6;
    margin:0;
  }

  /* ---------- Recipe of the Week ---------- */
  .recipe-card{
    border:1px solid var(--line);
    border-radius:6px;
    box-shadow:0 30px 60px -35px rgba(0,0,0,0.18);
    background:var(--bg);
    overflow:hidden;
  }
  .recipe-head{ padding:30px 30px 22px; border-bottom:2px solid var(--line); }
  .recipe-head h2{
    color:var(--headline);
    font-size:clamp(26px, 4.5vw, 34px);
    margin:0 0 16px;
    letter-spacing:-0.01em;
  }
  .recipe-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px 28px;
    margin:0;
    padding:0;
    list-style:none;
  }
  .recipe-meta li{
    font-family:'Space Mono', monospace;
    font-size:12px;
    color:var(--body);
  }
  .recipe-meta span{
    display:block;
    font-size:10.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--headline-dim);
    margin-bottom:2px;
  }
  .recipe-body{
    padding:28px 30px 32px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.5fr);
    gap:36px;
  }
  @media (max-width:640px){
    .recipe-body{ grid-template-columns:1fr; gap:28px; padding:24px 20px 28px; }
    .recipe-head{ padding:24px 20px 18px; }
  }
  .recipe-body h3{ margin:0 0 12px; }
  .unit-toggle{
    display:inline-flex;
    border:1px solid var(--line);
    border-radius:4px;
    overflow:hidden;
    margin:0 0 16px;
  }
  .unit-toggle button{
    font-family:'Space Mono', monospace;
    font-size:10.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    background:var(--panel);
    color:var(--body);
    border:none;
    padding:8px 14px;
    cursor:pointer;
  }
  .unit-toggle button + button{ border-left:1px solid var(--line); }
  .unit-toggle button.active{ background:var(--headline); color:#fff; }
  .unit-toggle button:focus-visible{ outline:2px solid var(--headline); outline-offset:-2px; }
  .ingredients{ list-style:none; margin:0; padding:0; }
  .ingredients li{
    font-size:14.5px;
    color:var(--ink);
    padding:9px 0;
    border-bottom:1px solid var(--line);
  }
  .ingredients li:first-child{ border-top:1px solid var(--line); }
  .ingredients .amt{
    font-family:'Space Mono', monospace;
    font-size:13px;
    color:var(--headline);
    margin-right:6px;
  }
  .unit-note{ font-size:12px; color:var(--body); margin:12px 0 0; }
  .steps{ margin:0; padding:0; list-style:none; counter-reset:step; }
  .steps li{
    counter-increment:step;
    position:relative;
    padding:0 0 18px 40px;
    font-size:14.5px;
    color:var(--body);
    line-height:1.65;
  }
  .steps li::before{
    content:counter(step);
    position:absolute;
    left:0;
    top:0;
    width:26px;
    height:26px;
    border:1px solid var(--headline);
    border-radius:50%;
    color:var(--headline);
    font-family:'Space Mono', monospace;
    font-size:12px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .steps li:last-child{ padding-bottom:0; }

  /* ---------- Reference tables ---------- */
  h3{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:18px;
    color:var(--ink);
    margin:32px 0 6px;
  }
  h3:first-of-type{ margin-top:8px; }
  .section-intro{
    font-size:14px;
    color:var(--body);
    margin:0 0 16px;
    max-width:60ch;
  }
  .table-scroll{
    overflow-x:auto;
    border:1px solid var(--line);
    border-radius:6px;
  }
  table{
    width:100%;
    border-collapse:collapse;
    font-size:13.5px;
    min-width:420px;
  }
  thead th{
    text-align:left;
    font-family:'Space Mono', monospace;
    font-size:10.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--headline-dim);
    background:var(--panel);
    padding:10px 14px;
    border-bottom:1px solid var(--line);
    white-space:nowrap;
  }
  tbody td{
    padding:9px 14px;
    color:var(--ink);
    border-bottom:1px solid var(--line);
    white-space:nowrap;
  }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr:nth-child(even){ background:var(--panel); }

  /* ---------- FAQ ---------- */
  .faq-item{
    border-bottom:1px solid var(--line);
    padding:16px 0;
  }
  .faq-item:first-of-type{ border-top:1px solid var(--line); }
  .faq-item summary{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:16px;
    color:var(--ink);
    cursor:pointer;
    list-style:none;
    position:relative;
    padding-right:28px;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:'+';
    position:absolute;
    right:0;
    top:0;
    font-family:'Work Sans', sans-serif;
    font-weight:400;
    font-size:20px;
    color:var(--headline);
  }
  .faq-item[open] summary::after{ content:'\2212'; }
  .faq-item p{
    font-size:14.5px;
    color:var(--body);
    line-height:1.6;
    margin:10px 0 0;
    max-width:64ch;
  }

  /* ---------- Shop section ---------- */
  .shop-intro{ font-size:15px; color:var(--body); margin:0 0 6px; max-width:60ch; }
  .disclosure{
    font-size:12.5px;
    color:var(--body);
    font-style:italic;
    margin:0 0 28px;
  }

  .product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
    gap:18px;
  }
  .product-card{
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:6px;
    padding:22px 20px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .product-icon{ width:44px; height:44px; }
  .product-card h4{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:15.5px;
    color:var(--ink);
    margin:0;
    line-height:1.35;
  }
  .product-card p{
    font-size:13px;
    color:var(--body);
    line-height:1.55;
    margin:0;
    flex:1;
  }
  .product-link{
    font-family:'Space Mono', monospace;
    font-size:11.5px;
    letter-spacing:0.04em;
    color:var(--headline);
    text-decoration:none;
    border-top:1px dashed var(--line);
    padding-top:10px;
    margin-top:2px;
  }
  .product-link:hover{ text-decoration:underline; }

  /* ---------- Footer ---------- */
  .site-footer{
    padding:32px 0 40px;
    text-align:center;
  }
  .site-footer p{
    font-family:'Space Mono', monospace;
    font-size:11px;
    color:var(--body);
    margin:0 0 6px;
    letter-spacing:0.03em;
  }
  .site-footer .copyright{ color:var(--line); }


  /* ================= Multi-page additions ================= */
  .site-nav{ gap:8px 20px; }
  .crumbs{
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin:0 0 18px;
  }
  .crumbs a{ text-decoration:none; }
  .crumbs a:hover{ text-decoration:underline; }
  .page-lede{
    font-size:17px;
    color:var(--body);
    max-width:62ch;
    margin:0 0 8px;
  }
  .byline{
    font-family:'Space Mono', monospace;
    font-size:11px;
    color:var(--headline-dim);
    letter-spacing:0.04em;
    margin:0 0 30px;
  }
  .prose h2{ margin:44px 0 12px; }
  .prose h2:first-child{ margin-top:0; }
  .prose p, .prose li{ font-size:15.5px; max-width:68ch; }
  .prose p{ margin:0 0 16px; }
  .prose ul, .prose ol{ margin:0 0 18px; padding-left:22px; }
  .prose li{ margin-bottom:8px; }
  .prose strong{ color:var(--ink); font-weight:600; }
  .prose h3{ margin:28px 0 8px; }
  .callout{
    margin:24px 0;
    padding:18px 22px;
    background:var(--panel);
    border:1px solid var(--line);
    border-left:3px solid var(--headline);
    border-radius:5px;
  }
  .callout p{ margin:0; font-size:14.5px; }
  .callout .qa-label{ margin-bottom:8px; }
  .table-note{ font-size:12.5px; color:var(--body); margin:10px 0 0; max-width:68ch; }
  .prose .table-scroll{ margin:6px 0 4px; }
  .card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:16px;
    margin:8px 0 0;
  }
  .guide-card{
    display:block;
    text-decoration:none;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:6px;
    padding:20px;
    transition:border-color 0.15s ease;
  }
  .guide-card:hover{ border-color:var(--headline); }
  .guide-card .kicker{
    font-family:'Space Mono', monospace;
    font-size:10.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--headline-dim);
    margin:0 0 8px;
  }
  .guide-card h3{ margin:0 0 6px; font-size:17px; color:var(--headline); }
  .guide-card p{ margin:0; font-size:13.5px; color:var(--body); line-height:1.55; }
  .related{ margin-top:48px; padding-top:28px; border-top:1px solid var(--line); }
  .related h2{ font-size:18px; margin:0 0 12px; }
  .site-footer .footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin:0 0 12px; }
  .site-footer .footer-links a{ font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.04em; }
  .recipe-list{ display:grid; gap:16px; margin-top:8px; }
  .recipe-teaser{ display:flex; gap:20px; align-items:baseline; justify-content:space-between; flex-wrap:wrap; }
  .tools-item{ padding:28px 0; border-top:1px solid var(--line); }
  .tools-item:first-of-type{ border-top:none; padding-top:8px; }
  .tools-item h2{ margin:0 0 6px; font-size:21px; }
  .tools-item .product-link{ display:inline-block; border-top:none; padding-top:0; margin-top:4px; }
  .hero-intro .eyebrow{ margin-bottom:14px; }