/* Atelier: a folha mantém-se nítida enquanto o desenho ganha detalhe. */
.drawing--animated{grid-template-columns:minmax(260px,.48fr) minmax(0,1fr);gap:clamp(32px,4vw,70px);align-items:start;padding-top:110px;padding-bottom:110px;scroll-margin-top:70px}
.drawing--animated .h2{font-size:clamp(48px,5.2vw,86px)}
.drawing--animated .drawing-copy>p:not(.eyebrow){font-size:15px;margin-top:24px;max-width:380px}
.drawing-steps{list-style:none;padding:0;margin:36px 0 0;border-top:1px solid #f4eee726}
.drawing-steps li{border-bottom:1px solid #f4eee726}
.drawing-steps button{width:100%;display:grid;grid-template-columns:25px 1fr;column-gap:10px;row-gap:5px;background:none;border:0;color:inherit;text-align:left;padding:13px 0;cursor:pointer;opacity:.42;transition:opacity .3s}
.drawing-steps button:hover,.drawing-steps .is-active button,.drawing-steps .is-done button{opacity:1}
.drawing-steps button>span{font:500 10px/1.6 var(--sans);color:#d3b9af;grid-row:span 2}
.drawing-steps strong{font:400 clamp(22px,2vw,30px)/1 var(--serif)}
.drawing-steps small{font:400 11px/1.5 var(--sans);color:#d9c9c2}
.drawing-steps .is-active button>span{color:#fff}
.drawing-steps .is-active{border-bottom-color:#d3b9af}
.drawing--animated .drawing-copy>.drawing-credit{font-size:11px;color:#baa39b;line-height:1.7;margin-top:30px}
.drawing-player{--drawing-ink:#f4eee7;--drawing-muted:#d3b9af;--drawing-line:#f4eee726;margin:0;background:transparent;color:var(--drawing-ink);padding:20px;min-width:0}
.drawing-topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--drawing-line)}
.drawing-topbar .sheet-kicker{font:500 9px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.drawing-status{font:400 10px/1.3 var(--sans);color:var(--drawing-muted);text-align:right}
.drawing-tabs{display:flex;gap:20px;padding:8px 0;margin-bottom:6px}
.drawing-tabs button{background:none;border:0;border-bottom:1px solid transparent;color:var(--drawing-muted);font:500 11px/1.3 var(--sans);padding:12px 0;cursor:pointer}
.drawing-tabs button[aria-pressed=true]{color:var(--drawing-ink);border-color:var(--drawing-ink)}
.drawing-board{position:relative;height:clamp(450px,43vw,710px);overflow:hidden;background:transparent}
/* Inverte também a planta final: o papel desaparece sobre o fundo da secção. */
.drawing-board canvas,.drawing-static{filter:grayscale(1) invert(1) sepia(.2);mix-blend-mode:screen}
.drawing-board canvas{display:block;width:100%;height:100%;opacity:0}
.drawing-player.is-ready canvas{opacity:1}
.drawing-static{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .3s}
.drawing-player.is-ready .drawing-static{opacity:0;pointer-events:none}
.drawing-view{position:absolute;top:14px;right:14px;display:flex;background:var(--wine);border:1px solid var(--drawing-line);padding:3px;gap:2px}
.drawing-view button{font:500 9px/1 var(--sans);border:0;padding:10px 11px;background:none;color:var(--drawing-muted);cursor:pointer}
.drawing-view button[aria-pressed=true]{background:var(--drawing-ink);color:var(--wine)}
.drawing-coordinate{position:absolute;left:16px;bottom:12px;font:500 8px/1 var(--sans);letter-spacing:.13em;color:var(--drawing-muted);text-transform:uppercase}
.drawing-player figcaption{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--drawing-line);margin-top:16px;padding-top:12px;font:400 9px/1.5 var(--sans);color:var(--drawing-muted)}
.drawing--animated :focus-visible{outline-color:#d3b9af}
.drawing-player :focus-visible{outline-color:var(--drawing-muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1200px){.drawing-copy{position:sticky;top:105px}}
@media(max-width:1100px) and (min-width:861px){.drawing--animated{grid-template-columns:260px 1fr;gap:28px}.drawing-player{padding:14px}.drawing-board{height:580px}.drawing-tabs{gap:12px}.drawing-topbar .sheet-kicker{max-width:150px}}
@media(max-width:860px){
  .drawing--animated{grid-template-columns:1fr;padding:80px var(--gutter);gap:28px}
  .drawing--animated .h2{font-size:clamp(52px,10vw,76px)}
  .drawing--animated .drawing-copy>p:not(.eyebrow){max-width:540px}
  .drawing-steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;gap:0 16px}
  .drawing-steps button{grid-template-columns:1fr;gap:6px;min-height:66px;padding:10px 0}
  .drawing-steps button>span{grid-row:auto;font-size:9px}
  .drawing-steps strong{font-size:22px}
  .drawing-steps small{display:none}
  .drawing--animated .drawing-copy>.drawing-credit{display:none}
  .drawing-player{padding:14px}
  .drawing-board{height:clamp(440px,105vw,640px)}
  .drawing-tabs{gap:22px}
  .drawing-player figcaption{flex-direction:column;gap:2px}
}
@media(max-width:400px){.drawing-tabs{gap:14px}.drawing-tabs button{font-size:10px}.drawing-topbar .sheet-kicker{max-width:150px}.drawing-view button{padding:10px 8px}.drawing-steps strong{font-size:20px}}