:root{--paper:#f4f1ea;--ink:#252522;--muted:#6d6b65;--line:#d5d0c6;--accent:#a85842;--serif:'DM Serif Display',Georgia,serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 'DM Sans',sans-serif}.page{width:100%;padding:0 clamp(24px,4vw,88px)}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit;border:0;background:transparent;cursor:pointer}a,button,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}a:hover,button:hover{color:var(--accent)}[hidden]{display:none!important}p,h1,h2,h3{margin:0}header{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:24px 0}.brand{display:flex;gap:10px;align-items:center}.brand img{width:31px;height:31px;object-fit:contain}.brand span{font:32px/1 var(--serif);letter-spacing:-.05em}nav{display:flex;gap:32px;align-items:center;font-size:14px}.login{border:1px solid #bbb4a7;border-radius:40px;padding:8px 19px;font-size:14px}.eyebrow{font:500 11px/1.5 'IBM Plex Mono',monospace;letter-spacing:.16em;color:var(--muted)}.atelier-hero{padding:48px 0 60px}.hero-topline{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:28px}h1{font-size:clamp(62px,7.7vw,148px);font-weight:500;line-height:.99;letter-spacing:-.07em}h1 em{font-family:var(--serif);font-weight:400;letter-spacing:-.045em;color:var(--accent)}.hero-bottom{display:grid;grid-template-columns:1fr 1fr auto;gap:40px;align-items:center;margin-top:40px}.explore-link{display:flex;align-items:center;gap:17px;font-size:16px}.explore-circle{width:70px;height:70px;border:1px solid #b4aa99;border-radius:50%;display:grid;place-items:center;font-size:32px;transition:background .2s}.explore-link:hover .explore-circle{background:#e7dfd1}.hero-bottom>p{font-size:17px;line-height:1.55;color:#5f5d57}.hero-signature{max-width:220px}.color-dot{display:inline-block;width:25px;height:25px;border-radius:50%;background:#65775c;margin-right:6px}.color-dot:nth-child(2){background:#bd7964}.color-dot:nth-child(3){background:#d4b26e}.hero-signature small{display:block;font-size:12px;color:var(--muted);margin-top:9px}.collection-heading{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:30px}.collection-heading .eyebrow{margin-bottom:14px}h2{font-weight:500;font-size:clamp(34px,3.6vw,65px);line-height:1.1;letter-spacing:-.05em}h2 em{font:italic 400 1.05em var(--serif);letter-spacing:-.04em}.collection-heading>p{font-size:15px;color:var(--muted);max-width:300px;padding-bottom:5px}.catalog-toolbar{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:15px 0}.filters{display:flex;align-items:center;flex-wrap:wrap}.topics{gap:27px}.topics button{padding:4px 0;font-size:15px;color:var(--muted)}.topics [aria-pressed=true]{color:var(--ink);box-shadow:0 1px 0 var(--ink)}.search{width:230px}.search input{background:transparent;border:0;border-bottom:1px solid #b8b0a3;border-radius:0;width:100%;padding:8px 0;font-size:15px}.sizes{gap:10px;margin:4px 0 34px}.sizes button{padding:7px 15px;border:1px solid #c8c0b2;border-radius:30px;font-size:12px;white-space:nowrap}.sizes [aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.sizes button:disabled{color:#9d988d;border-color:#e0dbd2;cursor:default}.sizes small{font:inherit}.sizes small:before{content:' · '}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start}.card{padding:0;text-align:left;display:block;width:100%;min-width:0;align-self:start}.card:nth-child(3n+2){margin-top:60px}.card:last-child:nth-child(3n+1){grid-column:2}.art-surface{display:block;aspect-ratio:1;overflow:hidden;border-radius:22px}.art-surface img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;image-rendering:pixelated;display:block;transition:transform .3s}.card:hover .art-surface img{transform:scale(1.025)}.card-copy{padding:16px 48px 4px 2px;position:relative}.art-index{display:block;font:10px/1.5 'IBM Plex Mono';color:#8c8375;margin-bottom:5px}.card h3{font:400 clamp(23px,2vw,36px)/1.12 var(--serif);letter-spacing:-.035em;margin:0 0 9px}.card p{font:11px/1.5 'IBM Plex Mono';color:var(--muted)}.round-arrow{width:34px;height:34px;border:1px solid #beb4a3;border-radius:50%;display:grid;place-items:center;font-size:22px;position:absolute;right:2px;bottom:7px}.catalog{padding-bottom:70px}.show-all{display:block;margin:30px auto 0;border-bottom:1px solid;padding:0;font-size:15px}.resume{padding:0 0 42px}.resume h2{font:400 31px var(--serif);margin-bottom:18px}#resume-list{display:grid;grid-template-columns:1fr 1fr;gap:32px}.resume-item{display:flex;align-items:center;gap:16px}.resume-item img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;border-radius:12px}.resume-item>div:not([hidden]){min-width:0;flex:1}.resume-item h3{font-size:16px;font-weight:500}.resume-meta{font:10px 'IBM Plex Mono';color:var(--muted);margin:5px 0}.resume-progress{display:flex;align-items:center;gap:10px;font:10px 'IBM Plex Mono'}.resume-progress progress{width:100%;height:6px;accent-color:var(--accent)}.resume-item>button{font-size:12px;white-space:nowrap}.journey{display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding:66px 0}.journey-intro .eyebrow{margin-bottom:24px}.journey-intro h2{font-size:clamp(40px,4vw,72px)}.journey-intro>p:last-child{font-size:18px;line-height:1.7;max-width:400px;color:var(--muted);margin-top:28px}.journey-steps article{display:flex;gap:26px;padding:26px 0;border-bottom:1px solid var(--line)}.journey-steps article:first-child{padding-top:0}.journey-steps article:last-child{border:0}.journey-steps article>span{font:italic 400 30px var(--serif);color:var(--accent);min-width:35px}.journey-steps h3{font:400 30px/1.2 var(--serif);letter-spacing:-.03em;margin-bottom:10px}.journey-steps p{font-size:16px;line-height:1.65;color:var(--muted);max-width:460px}.quiet-note{text-align:center;padding:70px 0 80px}.quiet-note>p:nth-child(2){font:400 clamp(40px,4.5vw,80px)/1.08 var(--serif);letter-spacing:-.035em;margin:23px 0}.quiet-note em{color:var(--accent)}.quiet-note>span{display:block;max-width:490px;margin:auto;font-size:14px;line-height:1.6;color:var(--muted)}.faq{display:grid;grid-template-columns:1fr 1.3fr;gap:7vw;padding:50px 0 70px}.faq h2{font-size:clamp(40px,4vw,65px);font-family:var(--serif);font-weight:400}.faq details{border-bottom:1px solid var(--line)}summary{list-style:none;padding:17px 30px 17px 0;position:relative;font-size:18px;cursor:pointer}summary::-webkit-details-marker{display:none}summary:after{content:'+';position:absolute;right:0;font-weight:400}details[open] summary:after{content:'−'}.faq details p{font-size:16px;color:var(--muted);padding:0 30px 20px 0;line-height:1.65}footer{background:#292d27;color:#f0eee5;margin:0 calc(-1 * clamp(24px,4vw,88px));padding:50px clamp(24px,4vw,88px) 20px;border-radius:50px 50px 0 0}.footer-invitation{display:flex;justify-content:space-between;align-items:center;padding-bottom:55px}.footer-invitation p{font:400 clamp(50px,6vw,106px)/1.03 var(--serif);letter-spacing:-.04em}.footer-invitation em{color:#c1b49b}.footer-invitation>a{width:100px;height:100px;border:1px solid #858b7c;border-radius:50%;display:grid;place-items:center;font-size:54px}.footer-top{display:flex;justify-content:space-between;align-items:center;gap:25px;padding-bottom:25px;border-bottom:1px solid #565c4f}.footer-top>span{font-size:13px;color:#bec2b7}.footer-top nav{font-size:14px}.legal{display:flex;gap:24px;padding-top:18px;font-size:11px;color:#b6bcae}.legal>span{margin-right:auto}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

dialog{background:var(--paper);color:var(--ink);border:1px solid #333;width:min(1400px,96vw);max-height:95vh;padding:26px}dialog::backdrop{background:#101114b0}.paint-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.paint-head h2{font-size:30px;margin:0}.paint-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:30px}.canvas-scroll{overflow:auto;max-height:72vh;background:#ddd;display:block}#board{display:block;touch-action:none;image-rendering:pixelated}aside img{width:130px;height:130px;object-fit:cover}aside p,aside label{font-size:16px}#palette{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}#palette button{width:46px;height:46px;padding:0;font-size:17px;text-shadow:0 0 3px white;color:black;border:2px solid #999}#palette button[aria-pressed=true]{outline:3px solid var(--blue);outline-offset:2px}aside>button{margin:6px 0;width:100%}
@media(min-width:1800px){.hero-bottom>p{font-size:20px}.collection-heading>p{font-size:18px}.card h3{font-size:38px}.card p{font-size:13px}.topics button{font-size:17px}.sizes button{font-size:14px}}
@media(max-width:1100px){.hero-bottom{grid-template-columns:1fr 1fr;gap:25px}.hero-signature{display:none}.topics{gap:20px}.card h3{font-size:27px}.grid{gap:28px 24px}.card:nth-child(3n+2){margin-top:45px}.journey{gap:5vw}.footer-top>span{display:none}}
@media(max-width:760px){header{flex-wrap:wrap;gap:16px;padding:21px 0}.brand span{font-size:28px}header nav{order:3;width:100%;justify-content:center;gap:26px;font-size:13px}.login{margin-left:auto}.atelier-hero{padding:30px 0 45px}.hero-topline>span{display:none}.eyebrow{font-size:10px}h1{font-size:clamp(51px,8.6vw,70px);letter-spacing:-.065em}.hero-bottom{margin-top:28px;gap:22px}.hero-bottom>p{font-size:14px}.explore-link{font-size:14px;gap:12px}.explore-circle{width:54px;height:54px;font-size:26px}.collection-heading{display:block}.collection-heading>p{margin-top:16px;font-size:14px}.catalog-toolbar{flex-wrap:wrap;gap:18px}.search{width:100%}.topics{gap:22px}.topics button{font-size:14px}.sizes{gap:8px;margin-bottom:25px}.sizes button{font-size:11px;padding:7px 12px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 20px}.card:nth-child(3n+2){margin-top:0}.card:nth-child(2n){margin-top:40px}.card:last-child:nth-child(3n+1){grid-column:auto}.art-surface{border-radius:15px}.card h3{font-size:25px}.card-copy{padding:12px 30px 3px 0}.round-arrow{width:25px;height:25px;font-size:17px}.card p{font-size:10px}.catalog{padding-bottom:35px}#resume-list{grid-template-columns:1fr}.journey{grid-template-columns:1fr;gap:35px;padding:45px 0}.journey-intro h2{font-size:48px}.journey-intro>p:last-child{font-size:17px;max-width:100%;margin-top:20px}.journey-steps h3{font-size:29px}.quiet-note{padding:45px 0 55px}.quiet-note>p:nth-child(2){font-size:46px}.faq{grid-template-columns:1fr;gap:25px;padding:35px 0 50px}.faq h2{font-size:46px}.faq h2 br{display:none}.faq h2 em{margin-right:8px}summary{font-size:17px}.footer-invitation p{font-size:65px}.footer-invitation>a{width:70px;height:70px;font-size:37px}.footer-top{flex-wrap:wrap}.footer-top nav{gap:25px;font-size:13px}.paint-layout{grid-template-columns:1fr 210px}}
@media(max-width:480px){.page{padding:0 20px}h1{font-size:clamp(42px,9.3vw,51px)}.hero-topline{margin-bottom:22px}.hero-bottom{grid-template-columns:1fr;gap:23px}.hero-bottom>p br{display:none}.hero-bottom>p{font-size:16px;max-width:290px}.explore-circle{width:52px;height:52px}.atelier-hero{padding-bottom:45px}.collection-heading h2{font-size:37px}.collection-heading h2 em{display:block}.topics{gap:18px}.topics button{font-size:13px}.sizes button{font-size:10px;padding:7px 10px}.grid{gap:22px 14px}.card:nth-child(2n){margin-top:30px}.card h3{font-size:22px}.card-copy{padding-right:0}.card .round-arrow{display:none}.card p{font-size:9px}.art-surface{border-radius:12px}.journey-intro h2{font-size:42px}.journey-steps article{gap:17px}.journey-steps h3{font-size:26px}.journey-steps p{font-size:15px}.quiet-note>p:nth-child(2){font-size:36px}.quiet-note>span{font-size:13px}.faq h2{font-size:39px}footer{margin:0 -20px;padding:35px 20px 20px;border-radius:30px 30px 0 0}.footer-invitation{padding-bottom:35px}.footer-invitation p{font-size:48px}.footer-invitation>a{width:55px;height:55px;font-size:30px}.footer-top .brand span{font-size:28px}.footer-top{gap:22px}.legal{gap:14px;font-size:10px}.paint-layout{grid-template-columns:1fr}.paint-head h2{font-size:22px}.canvas-scroll{max-height:50vh}dialog{padding:16px}.paint-head{gap:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.art-surface img,.explore-circle{transition:none}}
.paint-layout aside{max-height:72vh;overflow-y:auto;padding-right:5px}#palette{padding:4px}#reference{image-rendering:pixelated}#download:disabled,#undo:disabled{opacity:.45;cursor:wait}@media(max-width:480px){.paint-layout aside{max-height:none;overflow:visible}}
#board{margin:0 auto}.canvas-scroll{min-width:0}
/* Atelier layout from the approved reference. */
.page{--blue:#073bfa;background:#f4f0e5;color:#101010;font-family:"IBM Plex Mono",monospace}
.page header{border-bottom:1px solid;padding-block:20px}
.page header nav,.page .login,.page .brand{font-weight:700}
.page .login{border:0;padding:0}
.page .brand span{font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:-.045em}
.page h1,.page h2,.footer-invitation p{font-family:"DM Sans",sans-serif;font-weight:700;letter-spacing:-.065em;line-height:1}
.page h2{font-size:clamp(32px,5vw,74px);margin:0}
.atelier-hero,.journey{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:5%;align-items:start;padding:clamp(28px,4vw,65px) 0;border-bottom:1px solid}
.atelier-hero h1{font-size:clamp(38px,6.2vw,100px);margin:clamp(20px,3vw,45px) 0 20px}
.atelier-hero p:not(.eyebrow){font-size:clamp(14px,1.7vw,24px);line-height:1.45}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 26px;margin-top:26px;font-weight:700}
.blue-button{background:var(--blue);color:#fff;padding:14px 20px}
.pixel{display:inline-block;background:#ff6556;width:.29em;height:.29em;margin-left:.13em}
.pixel.pair{box-shadow:-.25em -.25em var(--blue);margin-left:.4em}
.demo-art{position:relative;aspect-ratio:1.06;border:2px solid;overflow:hidden}
.demo-art img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.demo-grid{position:absolute;inset:0 auto 0 0;width:46%;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(10,1fr);background:#f4f0e5e8}
.demo-grid span{display:grid;place-items:center;border:1px solid #26262625;font-size:clamp(9px,1.5vw,21px)}
.swatches{display:flex;justify-content:center;gap:4%;margin-top:12px}
.swatches i{width:10%;aspect-ratio:1;background:var(--swatch);border:1px solid #0004}
.resume,.catalog,.faq{padding:clamp(22px,3.5vw,52px) 0;border-bottom:1px solid}
.resume-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.resume-heading p{font-size:12px}
.page #resume-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.resume-item{border:1px solid;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:12px}
.resume-item button{grid-column:1/-1;border-top:1px solid;margin:0 -12px -12px;padding:8px;text-align:center}
.resume-item img{border-radius:4px}
.resume-progress progress{accent-color:var(--blue)}
.catalog{position:relative}
.collection-heading{margin:0 0 14px}
.collection-heading .eyebrow{margin-bottom:10px}
.catalog-toolbar{margin:0 0 12px}
.search{border:1px solid;padding:8px 12px}
.search input{border:0}
.sizes button,.show-all{border-radius:0;border:1px solid;color:inherit}
.sizes button[aria-pressed=true]{background:transparent;color:var(--blue);border-color:var(--blue)}
.page .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 14px}
.page .card{margin:0;grid-column:auto}
.art-surface{border-radius:0;aspect-ratio:1.15}
.art-surface img{height:100%;width:100%;object-fit:cover}
.art-index{display:none}
.card h3,.journey-steps h3{font-family:inherit;font-weight:700;letter-spacing:-.045em;font-size:clamp(13px,1.65vw,24px)}
.round-arrow{border:0;color:var(--blue)}
.show-all{padding:10px 18px}
.journey{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.journey-steps article{padding:12px 0}
.journey-steps article>span{border:1px solid;color:inherit;padding:8px}
.faq{grid-template-columns:1fr 1fr;gap:5%}
.faq-title{display:flex;align-items:center;gap:5%;border-right:1px solid}
.faq-title img{width:30%;object-fit:contain}
.faq-title h2{font-size:clamp(27px,4.2vw,58px)}
.page footer{background:transparent;color:inherit;border-radius:0;padding:0;margin:0}
.footer-invitation{background:var(--blue);color:white;padding:20px 4%;margin:0 calc(-1 * clamp(24px,4vw,88px)) 16px}
.footer-invitation p{font-size:clamp(30px,5vw,75px)}
.footer-invitation>a{display:block;width:auto;height:auto;border-radius:0;background:#f4f0e5;color:#111;padding:10px 16px;font:700 clamp(12px,1.8vw,22px) "IBM Plex Mono",monospace}
.atelier-footer{border-top:1px solid;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;padding:18px 0;gap:16px}
.atelier-footer>div+div{border-left:1px solid;padding-left:16px}
.atelier-footer a:not(.brand),.atelier-footer strong{display:block;font-size:13px}
.atelier-footer p{font-size:12px;max-width:26ch}
.atelier-wordmark{display:block;width:100%;margin-top:12px}
@media(min-width:680px){.catalog .search{position:absolute;right:0;top:clamp(45px,6vw,95px);width:26%}.catalog-toolbar{width:58%}.sizes{justify-content:flex-end;margin-top:-40px}}
@media(max-width:679px){.page #resume-list{grid-template-columns:1fr}.resume-heading{display:block}.atelier-hero,.journey,.faq{grid-template-columns:1fr;gap:22px}.page .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.demo{max-width:360px}.faq-title{border:0}.footer-invitation{margin-inline:0}.atelier-footer{grid-template-columns:1fr 1fr}.sizes{justify-content:flex-start}}
.page{overflow-x:clip}
.demo{min-width:0;width:100%}
.demo-art img{max-width:100%}
@media(min-width:680px) and (max-width:1050px){.sizes{margin-top:0;justify-content:flex-start}.catalog-toolbar{width:100%}.catalog .search{position:static;width:min(100%,240px)}}

/* Match the painting viewport to the square board at 100% zoom. */
#painter {
  --board-edge: min(72dvh, calc(96vw - 374px), 1000px);
  width: min(96vw, calc(var(--board-edge) + 374px));
}
#painter .paint-layout {
  grid-template-columns: minmax(0, var(--board-edge)) minmax(0, 1fr);
  align-items: start;
}
#painter .canvas-scroll {
  aspect-ratio: 1;
  max-height: none;
  background: var(--paper);
}
#painter .paint-layout aside { max-height: var(--board-edge); }
#painter #close {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #25252540;
  border-radius: 10px;
  background: #fff7;
  color: var(--ink);
  font: 400 29px/1 sans-serif;
  cursor: pointer;
}
#painter #close:hover { background: #25252512; }
#painter #close:focus-visible { outline: 2px solid #073bfa; outline-offset: 3px; }
@media (max-width: 760px) {
  #painter { --board-edge: min(62dvh, calc(96vw - 290px)); width: 96vw; }
}
@media (max-width: 580px) {
  #painter { --board-edge: calc(96vw - 34px); padding: 16px; }
  #painter .paint-layout { grid-template-columns: minmax(0, 1fr); }
  #painter .paint-layout aside { max-height: none; }
}

#painter .canvas-scroll {
  box-sizing: border-box;
  border: 3px solid #252525;
  box-shadow: 0 0 0 1px #25252526, 0 5px 14px #25252518;
}
#painter #board {
  outline: 1px solid #25252538;
  outline-offset: -1px;
}
#painter { caret-color: transparent; }
#palette button {
  position: relative;
  user-select: none;
}
#palette button[aria-pressed="true"] { outline: none; }
#palette button[aria-pressed="true"]::after {
  content: "✓" / "";
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  color: #171717;
  font: 700 11px/1 system-ui, sans-serif;
}
#palette button:focus-visible,
#palette button[aria-pressed="true"]:focus-visible {
  outline: 2px dashed #252525;
  outline-offset: 2px;
}

.paint-stage { min-width: 0; }
.paint-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
.paint-tools label { display: flex; align-items: center; gap: 8px; font-size: .875rem; }
.paint-tools input { width: clamp(84px, 20vw, 150px); accent-color: #073bfa; }
#pan-mode { min-height: 44px; padding: 0 14px; border: 1px solid #25252540; border-radius: 8px; }
#pan-mode[aria-pressed="true"] { color: white; background: #073bfa; }
#painter .canvas-scroll.is-panning #board { touch-action: pan-x pan-y; cursor: grab; }
#painter #board[hidden] { display: none; }

#board-loading:not([hidden]) {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 12px;
  text-align: center;
  font: 700 16px/1.4 'IBM Plex Mono', monospace;
}

#board-loading::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #6784ff;
  box-shadow: -12px 0 #0739ff, 12px 0 #a6b6ff;
}
#painter { --board-edge: min(65dvh, calc(96vw - 374px), 1000px); }
@media (max-width: 760px) {
  #painter { --board-edge: min(56dvh, calc(96vw - 290px)); }
}
@media (max-width: 580px) {
  #painter { --board-edge: calc(96vw - 34px); }
}
.paint-modes { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: #2525250c; }
.paint-modes button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; }
.paint-modes button[aria-pressed="true"] { color: white; background: #073bfa; }

.faq-title h2 { min-width: 0; }
@media (max-width: 760px) {
  .faq-title h2 br { display: initial; }
  .faq-title h2 { font-size: clamp(22px, 6vw, 40px); overflow-wrap: anywhere; }
  .faq-title img { flex: 0 0 30%; min-width: 0; }
}

/* Homepage footer styles, scoped to the workshop footer. */
.page .footer { margin-top:110px;border-top:2px solid var(--ink);padding-top:42px }
.page .footer .footer-top { display:grid;grid-template-columns:1.3fr 1fr 1.02fr 1.02fr .95fr;gap:35px }
.page .footer .footer-brand .brand span { font-size:49px }
.page .footer .footer-brand>p { font-size:16px;line-height:1.5;margin:16px 0 22px }
.page .footer nav h2 { font-family:Anton,Impact,sans-serif;font-size:32px;font-weight:400;line-height:1.2;letter-spacing:-.025em;margin:8px 0 27px;white-space:nowrap }
.page .footer .footer-top nav { display:flex;flex-direction:column;align-items:flex-start;gap:21px }
.page .footer .footer-top nav h2 { margin-bottom:7px }
.page .footer nav a, .page .footer nav button { font-size:15px;line-height:1.55;text-align:left }
.page .footer nav button { padding:0;background:none;border:0 }
.page .footer nav a:hover, .page .footer nav button:hover { text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:6px }
.page .footer .footer-pencil { display:flex;gap:16px;align-items:center;margin-left:20px }
.page .footer .footer-pencil svg { width:100px;height:100px;stroke:var(--blue);fill:none;stroke-width:2 }
.page .footer .footer-pencil>span { display:flex;flex-direction:column;gap:8px }
.page .footer .footer-pencil i { width:26px;height:26px;border:2px solid var(--ink) }
.page .footer .footer-pencil i:nth-child(2) { background:var(--blue) }
.page .footer .footer-wordmark { display:block;width:100%;height:auto;margin:42px 0 34px }
.page .footer .footer-bottom { border-top:1px solid var(--ink);padding-top:17px;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:14px }
.page .footer .footer-bottom nav { display:flex;gap:30px }
.page .footer .footer-bottom nav button { font-size:14px }
@media(max-width:1200px) {
.page .footer .footer-top { gap:22px }
.page .footer nav h2 { font-size:25px }
.page .footer nav a, .page .footer nav button { font-size:12px }
.page .footer .footer-brand .brand span { font-size:37px }
.page .footer .footer-brand>p { font-size:13px }
.page .footer .footer-pencil svg { width:75px;height:75px }
.page .footer .footer-pencil i { width:20px;height:20px }
}
@media(max-width:800px) {
.page .footer { margin-top:70px;padding-top:28px }
.page .footer .footer-top { grid-template-columns:1fr 1fr;gap:30px 22px }
.page .footer .footer-brand { grid-column:1/-1 }
.page .footer .footer-brand>p { max-width:330px;font-size:14px }
.page .footer .footer-pencil { display:none }
.page .footer .footer-top nav { gap:16px }
.page .footer nav h2 { font-size:26px;white-space:normal }
.page .footer nav a, .page .footer nav button { font-size:13px }
.page .footer .footer-wordmark { margin:32px 0 24px }
.page .footer .footer-bottom { flex-direction:column;align-items:flex-start;gap:17px;font-size:12px }
.page .footer .footer-bottom nav { flex-wrap:wrap;gap:12px 20px }
.page .footer .footer-bottom nav button { font-size:11px }
}

.page .footer { margin: 0; padding: 42px 0 20px; border-top: 2px solid var(--ink); }
.page .footer .footer-top nav { grid-column: auto; }
.page .footer .brand span { font-family: Anton, Impact, sans-serif; }
.page .footer .footer-bottom { flex-wrap: wrap; }
@media (max-width: 800px) { .page .footer { padding-top: 28px; } }