@font-face {
  font-family: 'Caveat';
  src: url('assets/fonts/lettering/caveat.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Dancing Script';
  src: url('assets/fonts/lettering/dancingscript.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Allura';
  src: url('assets/fonts/lettering/allura.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Great Vibes';
  src: url('assets/fonts/lettering/greatvibes.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/lettering/cormorantgaramond.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Courier Prime';
  src: url('assets/fonts/lettering/courierprime.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.lettering{--letter-paper:#fffdf9;border-top:1px solid var(--line);margin:0 0 56px;padding-top:28px;scroll-margin-top:100px}
.lettering [hidden]{display:none!important}.lettering-title{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:22px}.lettering h2{font:400 34px/1.2 'Cormorant Garamond',Georgia,serif;margin:0}.lettering-title p{font-size:14px;margin:0;color:#655c54}.lettering-workspace{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);border:1px solid var(--line);background:var(--letter-paper)}
.lettering-controls{padding:26px;min-width:0}.lettering label,.lettering legend{font-size:14px!important;font-family:'DM Sans',sans-serif}.lettering .lettering-text{min-height:92px;resize:vertical;background:white;margin-top:9px}.lettering-text-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.lettering-count{font-size:12px;color:#655c54}.lettering .lettering-fonts-field{margin-top:24px}.lettering .lettering-fonts-field>label{display:block}.lettering .lettering-region{display:block;margin:24px 0 18px}.lettering-adjust{display:grid;grid-template-columns:1fr 1fr;gap:18px}.lettering-adjust label>span{display:flex;justify-content:space-between;gap:8px}.lettering input[type=range]{display:block;width:100%;height:26px;padding:0;margin:10px 0 0;border:0;accent-color:#352b23;background:transparent;cursor:pointer}.lettering-adjust output{color:#655c54}.lettering button{font:400 14px/1.4 'DM Sans',sans-serif;color:var(--ink);cursor:pointer;min-height:44px}.lettering-reset{padding:8px 0;margin-top:10px;border:0;border-bottom:1px solid #82776c;background:none}.lettering-preview{min-width:0;border-left:1px solid var(--line);background:#eee9e3;display:flex;flex-direction:column;position:relative}.lettering-preview-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;font-size:12px;letter-spacing:.06em;background:#f5f1eb}.lettering-preview-bar span:last-child{letter-spacing:0;text-align:right;color:#655c54}.lettering-canvas-wrap{position:relative;flex:1;display:grid;place-items:center;min-height:360px;padding:16px}.lettering canvas{display:block;max-width:100%;width:auto;max-height:520px;height:auto;touch-action:none;cursor:grab}.lettering canvas:active{cursor:grabbing}.lettering-empty{position:absolute;inset:16px;display:grid;place-content:center;text-align:center;background:#eee9e3;padding:24px;pointer-events:none;font:400 25px/1.4 Georgia,serif}.lettering-caption{font-size:13px;line-height:1.5;text-align:center;padding:0 20px 16px;margin:0;color:#564c42}.lettering-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}.lettering-bottom p{font-size:14px;color:#655c54;line-height:1.6;max-width:440px;margin:0}.lettering-actions{display:flex;gap:10px;flex-shrink:0}.lettering-actions button{padding:12px 16px;border:1px solid #302923;background:transparent}.lettering-actions .lettering-continue{background:#302923;color:white}.lettering button:disabled{opacity:.45;cursor:not-allowed}.lettering-status{font-size:14px;line-height:1.6;margin:12px 0}.lettering-status:empty{display:none}.lettering-status[data-error=true]{color:#9b2924}.lettering-gallery{margin-top:34px}.lettering-gallery h3{font:400 25px/1.3 'Cormorant Garamond',Georgia,serif;margin:0 0 8px}.lettering-gallery>p{font-size:14px;color:#655c54;line-height:1.6;margin:0 0 18px}.lettering-examples{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.lettering-example{margin:0;min-width:0}.lettering-example>a{display:block}.lettering-example img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#e9e2d9}.lettering-example figcaption{padding:12px 0 0;font-size:14px;line-height:1.5}.lettering-example button{display:block;border:0;background:none;border-bottom:1px solid #a49a8e;padding:6px 0;margin-top:4px;font-size:13px}.design-heading:has(+.lettering){margin-bottom:26px}.design-heading:has(+.lettering) h1{font-size:clamp(32px,4vw,48px)}
@media(max-width:760px){.lettering-title{align-items:flex-start;flex-direction:column;gap:10px}.lettering-workspace{grid-template-columns:1fr}.lettering-controls{padding:20px}.lettering-preview{border-left:0;border-top:1px solid var(--line)}.lettering-canvas-wrap{min-height:280px}.lettering canvas{max-height:470px}.lettering-bottom{align-items:stretch;flex-direction:column;gap:14px}.lettering-actions{display:grid;grid-template-columns:1fr 1fr}.lettering-examples{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.lettering h2{font-size:30px}.lettering-preview-bar{padding:14px 16px}.lettering{margin-bottom:40px}}
@media(prefers-reduced-motion:reduce){.lettering *{scroll-behavior:auto!important}}
.lettering-reference-gallery{margin-top:26px;border-top:1px solid var(--line);padding-top:18px}.lettering-reference-gallery summary{cursor:pointer;font-size:16px;padding:8px 0}.lettering-reference-gallery .lettering-examples{margin-top:18px}
.lettering-font-examples-link{display:inline-block;margin-top:15px;text-decoration:underline;text-underline-offset:4px;font-size:14px;line-height:1.6}.lettering-font-references{margin-top:34px;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);scroll-margin-top:100px}.lettering-reference-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}.lettering-font-references h3{font:400 28px/1.3 'Cormorant Garamond',Georgia,serif;margin:0}.lettering-reference-heading>span{font-size:13px;color:#655c54}.lettering-font-references>p{font-size:14px;line-height:1.7;max-width:780px;margin:12px 0 20px;color:#655c54}.lettering-font-reference-strip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,24%,300px);gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;padding:4px 4px 18px}.lettering-font-reference{margin:0;scroll-snap-align:start;min-width:0}.lettering-font-reference a{display:block}.lettering-font-reference img{width:100%;height:auto;aspect-ratio:2480/3508;object-fit:contain;display:block;background:#e9e2d9}.lettering-font-reference figcaption{padding:12px 2px 0;line-height:1.5}.lettering-font-reference strong{display:block;font-size:14px;font-weight:500;overflow-wrap:anywhere}.lettering-font-reference figcaption>span{display:block;font-size:12px;color:#655c54;margin-top:5px}
@media(max-width:760px){.lettering-workspace{display:flex;flex-direction:column}.lettering-controls{display:contents}.lettering-text-row{order:0;margin:20px 20px 0}.lettering .lettering-text{order:1;margin:10px 20px 20px;width:calc(100% - 40px)}.lettering-preview{order:2}.lettering-canvas-wrap{min-height:0;padding:12px}.lettering canvas{max-height:330px}.lettering .lettering-fonts-field{order:3;margin:20px}.lettering .lettering-region{order:4;margin:0 20px 20px}.lettering-adjust{order:5;margin:0 20px}.lettering-reset{order:6;margin:12px 20px 20px;align-self:flex-start}}

.lettering-font-picker{position:relative;margin-top:8px}
.lettering .lettering-style-trigger{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;align-items:center;gap:12px;width:100%;min-height:72px;padding:8px 14px;background:#fff;border:1px solid #aaa097;text-align:left}
.lettering-style-sample{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:34px;font-weight:400;line-height:1.65;letter-spacing:normal;padding:0 7px}
.lettering-style-number{font:400 12px/1.5 'DM Sans',sans-serif;color:#655c54;white-space:nowrap}
.lettering-style-arrow{font:20px/1 'DM Sans',sans-serif;text-align:center}
.lettering-style-trigger[aria-expanded=true] .lettering-style-arrow{transform:rotate(180deg)}
.lettering-style-list{position:absolute;z-index:25;top:calc(100% + 5px);left:0;right:0;max-height:360px;overflow-y:auto;overscroll-behavior:contain;background:#fffdf9;border:1px solid #aaa097;box-shadow:0 8px 24px #30292320;scrollbar-width:thin}
.lettering-font-picker[data-upwards=true] .lettering-style-list{top:auto;bottom:calc(100% + 5px)}
.lettering-style-option{position:relative;min-height:84px;padding:8px 36px 10px 14px;border-bottom:1px solid #e5ded6;cursor:pointer}
.lettering-style-option:last-child{border-bottom:0}
.lettering-style-option:hover,.lettering-style-option[data-active=true]{background:#f2eee8}
.lettering-style-option[aria-selected=true]{box-shadow:inset 3px 0 #302923}
.lettering-style-meta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.lettering-style-hint{font:400 11px/1.5 'DM Sans',sans-serif;color:#76604b}
.lettering-style-check{position:absolute;right:14px;top:26px;font:16px/1.5 'DM Sans',sans-serif}
@media(max-width:760px){.lettering-style-sample{font-size:30px}.lettering .lettering-style-trigger{gap:8px;min-height:68px}}