.latte-guide-hero{background:#e8e1d6}
.latte-guide-hero .manual-hero-visual{background:#4a4139}
.latte-guide-hero .manual-hero-visual:after{content:"POUR\A LOW";white-space:pre;line-height:.82;text-align:center;background:#aa5636}
.latte-guide-hero .manual-hero-visual img{object-position:50% 60%;filter:saturate(.88) contrast(1.02)}
.latte-foundation-section{background:var(--paper)}
.latte-foundation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.latte-foundation-grid article{min-height:260px;padding:30px;background:#f0ece4}
.latte-foundation-grid span,.latte-practice-grid span{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--rust)}
.latte-foundation-grid h3,.latte-practice-grid h3{margin:22px 0 12px;font-family:Georgia,serif;font-size:27px;line-height:1.05}
.latte-foundation-grid p,.latte-practice-grid p{margin:0;line-height:1.7;color:#595a53}
.latte-pour-rhythm{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:14px;align-items:stretch;margin-top:24px;padding:28px;background:#262722;color:#fff}
.latte-pour-rhythm div{padding:20px;background:rgba(255,255,255,.07)}
.latte-pour-rhythm span{display:block;margin-bottom:14px;font-size:11px;letter-spacing:.14em;color:#e2bd79}
.latte-pour-rhythm strong{font-family:Georgia,serif;font-size:24px}
.latte-pour-rhythm p{margin:10px 0 0;line-height:1.55;font-size:13px;color:#d1d2cc}
.latte-pour-rhythm>i{align-self:center;font-style:normal;font-size:26px;color:#e2bd79}
.latte-foundation-note{margin-bottom:0}
.latte-pattern-section{padding-block:110px}
.latte-heart-section{background:#aa5636;color:#fff}
.latte-tulip-section{background:#e8e1d6}
.latte-rosetta-section{background:#30332e;color:#fff}
.latte-pattern-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:48px}
.latte-pattern-heading>div{max-width:760px}
.latte-pattern-heading h2{margin:13px 0;font-family:Georgia,serif;font-size:clamp(54px,6vw,88px);line-height:.9;letter-spacing:-.05em}
.latte-pattern-heading>div>p:last-child{margin-bottom:0;line-height:1.75;font-size:17px}
.latte-heart-section .latte-pattern-heading>div>p:last-child,.latte-rosetta-section .latte-pattern-heading>div>p:last-child{color:#f3e8dc}
.pattern-level{padding:9px 12px;border:1px solid currentColor;font-size:10px;font-weight:700;letter-spacing:.14em;white-space:nowrap}
.latte-technique-grid{display:grid;grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr);gap:1px;background:rgba(27,28,24,.16);border:1px solid rgba(27,28,24,.16)}
.latte-heart-section .latte-technique-grid,.latte-rosetta-section .latte-technique-grid{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.2)}
.latte-technique-grid-reverse .pattern-diagram{order:2}
.latte-technique-grid-reverse .pattern-steps-wrap{order:1}
.pattern-diagram{min-height:460px;display:grid;place-items:center;padding:40px;background:#f5eee4}
.latte-heart-section .pattern-diagram{background:#8e4028}
.latte-rosetta-section .pattern-diagram{background:#222520}
.pattern-diagram svg{width:min(100%,420px);height:auto;filter:drop-shadow(0 18px 18px rgba(0,0,0,.18))}
.pattern-steps-wrap{padding:14px 42px;background:rgba(251,250,246,.78)}
.latte-heart-section .pattern-steps-wrap,.latte-rosetta-section .pattern-steps-wrap{background:rgba(0,0,0,.12)}
.pattern-steps{margin:0;padding:0;list-style:none}
.pattern-steps li{display:grid;grid-template-columns:60px 1fr;gap:18px;padding:28px 0;border-bottom:1px solid rgba(27,28,24,.16)}
.latte-heart-section .pattern-steps li,.latte-rosetta-section .pattern-steps li{border-color:rgba(255,255,255,.2)}
.pattern-steps li>span{font-family:Georgia,serif;font-size:30px;color:var(--rust)}
.latte-heart-section .pattern-steps li>span{color:#f0c478}
.latte-rosetta-section .pattern-steps li>span{color:#d9c29a}
.pattern-steps h3{margin:0 0 9px;font-family:Georgia,serif;font-size:28px;line-height:1.06}
.pattern-steps p{margin:0;line-height:1.75;color:#55564f}
.latte-heart-section .pattern-steps p,.latte-rosetta-section .pattern-steps p{color:#ece7df}
.latte-tip{margin:24px 0 12px;padding:15px 17px;background:#eee7dc;line-height:1.65;font-size:13px;color:#4f504a}
.latte-heart-section .latte-tip{background:rgba(255,255,255,.13);color:#fff}
.latte-rosetta-section .latte-tip{background:rgba(255,255,255,.1);color:#fff}
.latte-practice-section{background:var(--paper)}
.latte-practice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.latte-practice-grid article{min-height:215px;padding:28px;background:#e9e1d5}
.latte-troubleshoot{margin-top:28px;border:1px solid var(--line)}
.latte-troubleshoot-row{display:grid;grid-template-columns:.82fr .82fr 1.45fr;border-top:1px solid var(--line)}
.latte-troubleshoot-row:first-child{border-top:0}
.latte-troubleshoot-row>*{padding:20px 22px;border-left:1px solid var(--line);line-height:1.6;color:#575851}
.latte-troubleshoot-row>*:first-child{border-left:0}
.latte-troubleshoot-head{background:#262722}
.latte-troubleshoot-head>*{font-size:11px;letter-spacing:.1em;color:#fff}
.latte-source-section{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;margin-top:80px;padding:42px;border:1px solid var(--line);background:#e9e1d5}
.latte-source-section h2{margin:12px 0;font-family:Georgia,serif;font-size:clamp(34px,3.5vw,52px);line-height:1}
.latte-source-section>div>p:last-child{margin:0;line-height:1.75;color:#5b5c55}
.latte-source-links{display:grid;gap:12px}
.latte-source-links a{display:grid;gap:10px;padding:22px;border:1px solid var(--line);background:var(--paper);transition:.2s}
.latte-source-links a:hover{background:#262722;color:#fff;transform:translateY(-2px)}
.latte-source-links span{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--rust)}
.latte-source-links strong{font-family:Georgia,serif;font-size:25px;line-height:1.08}
.latte-source-links small{font-size:13px}
.latte-cta{margin-bottom:0}
@media(max-width:980px){
  .latte-foundation-grid,.latte-practice-grid{grid-template-columns:1fr}
  .latte-pour-rhythm{grid-template-columns:1fr;gap:10px}
  .latte-pour-rhythm>i{justify-self:center;transform:rotate(90deg)}
  .latte-pattern-heading{display:block}
  .pattern-level{display:inline-block;margin-top:20px}
  .latte-technique-grid,.latte-technique-grid-reverse{grid-template-columns:1fr}
  .latte-technique-grid-reverse .pattern-diagram,.latte-technique-grid-reverse .pattern-steps-wrap{order:initial}
  .pattern-diagram{min-height:350px}
  .latte-source-section{grid-template-columns:1fr;gap:30px}
}
@media(max-width:650px){
  .latte-foundation-grid article,.latte-practice-grid article{padding:24px}
  .latte-pattern-section{padding-block:72px}
  .pattern-diagram{min-height:280px;padding:22px}
  .pattern-steps-wrap{padding:8px 24px}
  .pattern-steps li{grid-template-columns:42px 1fr;gap:12px;padding:24px 0}
  .pattern-steps li>span{font-size:25px}
  .pattern-steps h3{font-size:25px}
  .latte-troubleshoot{border:0}
  .latte-troubleshoot-head{display:none}
  .latte-troubleshoot-row{grid-template-columns:1fr;margin-bottom:18px;border:1px solid var(--line)}
  .latte-troubleshoot-row>*{border-left:0;border-top:1px solid var(--line)}
  .latte-troubleshoot-row>*:first-child{border-top:0}
  .latte-source-section{margin-top:56px;padding:28px 22px}
}
@media print{
  .latte-guide-hero,.latte-heart-section,.latte-tulip-section,.latte-rosetta-section,.latte-practice-section{background:#fff!important;color:#111!important}
  .latte-heart-section .latte-pattern-heading>div>p:last-child,.latte-rosetta-section .latte-pattern-heading>div>p:last-child,.latte-heart-section .pattern-steps p,.latte-rosetta-section .pattern-steps p{color:#333!important}
  .latte-technique-grid,.latte-heart-section .latte-technique-grid,.latte-rosetta-section .latte-technique-grid{border-color:#999!important;background:#fff!important}
  .pattern-diagram,.latte-heart-section .pattern-diagram,.latte-rosetta-section .pattern-diagram,.pattern-steps-wrap,.latte-heart-section .pattern-steps-wrap,.latte-rosetta-section .pattern-steps-wrap{background:#fff!important;color:#111!important}
  .latte-tip,.latte-heart-section .latte-tip,.latte-rosetta-section .latte-tip{background:#f2f2f2!important;color:#111!important}
  .latte-pour-rhythm{grid-template-columns:repeat(4,1fr);padding:0;background:#fff;color:#111}
  .latte-pour-rhythm div{background:#f2f2f2}
  .latte-pour-rhythm p{color:#333}
  .latte-pour-rhythm>i{display:none}
  .latte-source-section{grid-template-columns:1fr 1fr;margin-top:16mm;padding:7mm;background:#fff}
}