/* Oats Wrapped Title v1.3.0 — flex layout. Lines auto-wrap around any title length */
.oat-wrapped-title{
  --line-color:#563e3c;
  --text-color:#563e3c;
  --text-size:21px;
  --weight:600;
  --tracking:0px;
  --flake-size:44px;
  --gap:clamp(.6rem, 4vw, 1rem);
  --line-weight:1px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--gap);
  width:100%;
  margin:2rem auto;
}
.oat-wrapped-title .oat-title{
  margin:0;
  color:var(--text-color);
  font-size:var(--text-size);
  font-weight:var(--weight);
  letter-spacing:var(--tracking);
  white-space:nowrap;
}
.oat-wrapped-title .oat-line{
  flex:1 1 auto;
  border-top: var(--line-weight) solid var(--line-color);
  height:0;
  min-width: 2rem; /* keeps a hint of line even on tiny screens */
}
.oat-wrapped-title .oat-flakes{
  width:var(--flake-size);
  height:var(--flake-size);
  flex:0 0 var(--flake-size);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}
.oat-wrapped-title .oat-flakes.oat-left{  background-image:var(--flake-left-url); }
.oat-wrapped-title .oat-flakes.oat-right{ background-image:var(--flake-right-url); }

/* Mobile tuning */
@media (max-width:640px){
  .oat-wrapped-title{ gap: clamp(.5rem, 3.5vw, .9rem); }
  .oat-wrapped-title .oat-line{ min-width: 1rem; }
  .oat-wrapped-title .oat-title{ font-size: clamp(18px, 4.2vw, var(--text-size)); }
  .oat-wrapped-title{ --flake-size: clamp(28px, 7vw, var(--flake-size)); }
}