@charset "utf-8";

/*
Theme Name: Doodlia - Illustrator & Character Designer HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Section Titles
   1.4 Buttons & Links
   1.5 Forms
   1.6 Shared Pieces
2. Preloader
   2.1 Mascot Wave
3. Header
   3.1 Main Menu
   3.2 Home Mega Menu
   3.3 Sticky Header
   3.4 Side Header
   3.5 Split Header
4. Offcanvas Menu
5. Custom Select
6. Language & Currency Pickers
7. Components
   7.1 Arrows & Tabs
   7.2 Accordion
   7.3 Chips, Steppers & Panels
   7.4 Work Tiles
   7.5 Product Cards
   7.6 Team Cards
   7.7 Post Cards
   7.8 Voices
   7.9 Stickers & Frames
8. Signature Rig
   8.1 Pencil Cursor
9. Home 01 - The Studio
   9.1 Grounds: Sun And Paper
   9.2 The Sticker Masthead
   9.3 Intro
   9.4 The Work By Series
   9.5 Statement
   9.6 The Turnaround
   9.7 The Quote Band
   9.8 The Studio, Staggered
   9.9 Video Band
   9.10 Numerals
   9.11 The Shop Row
   9.12 Voices
   9.13 Awards & Fairs
10. Home 02 - The Shop
   10.1 Split Hero
   10.2 Kinds Strip
   10.3 Shop Grid
   10.4 The Sketch Develops
   10.5 Sizes
   10.6 The Drop
   10.7 The Sticker Club
   10.8 Before You Order
11. Home 03 - Commissions
   11.1 Inline Sticker Hero
   11.2 Queue Strip
   11.3 Series Word List
   11.4 The Laptop Lid
   11.5 Tiers
   11.6 Steps
   11.7 Voices And The Start Band
12. Inner Pages
   12.1 Sidebar & Widgets
   12.2 Pagination & Pieces
13. The Work
   13.1 All Work
   13.2 The Series
   13.3 Piece Details
   13.4 Piece Details 02
14. Commissions
   14.1 The Builder
   14.2 The Request Wizard
   14.3 Usage Grid
15. The Studio
   15.1 About Juno
   15.2 The Studio
   15.3 Team Profile
   15.4 What I Draw
   15.5 Character Design
16. Shop
   16.1 Shop Grid
   16.2 Product Page
   16.3 Bag, Checkout & Wishlist
17. Notes & Account
   17.1 Process Notes List
   17.2 Note Details
   17.3 Account Pages
   17.4 Coming Soon & 404
18. Contact & Dashboard
   18.1 Contact
   18.2 My Account
19. Subheader
20. Footer
*/

/*======================
1. General
========================*/
:root {
  /* the art's inks: stickers, numerals, the Riso layer (the same in both themes) */
  --dl-sun: #FFD23F;
  --dl-tomato: #FF4B23;
  --dl-bubble: #FF8DC7;
  --dl-sky: #1EB4E6;
  --dl-leaf: #17A86B;
  --dl-grape: #5A35E0;
  --dl-ink: #000000;
  --dl-ink-rgb: 0, 0, 0;
  --dl-white: #FFFFFF;
  /* semantic: black is the default (the base's own ground); [data-theme="light"] is its light switch */
  --dl-bg: #000000;
  --dl-bg-rgb: 0, 0, 0;
  --dl-band: #0E0E0E;
  --dl-surface: #0A0A0A;
  --dl-raised: #161616;
  --dl-plate: #FFFFFF;
  --dl-plate-2: #EEEEEE;
  --dl-heading: #FFFFFF;
  --dl-heading-rgb: 255, 255, 255;
  --dl-text: rgba(255, 255, 255, 0.78);
  --dl-muted: rgba(255, 255, 255, 0.62);
  /* the base's hairline frames */
  --dl-line: rgba(255, 255, 255, 0.42);
  --dl-line-2: rgba(255, 255, 255, 0.14);
  --dl-field: #151515;
  --dl-primary: #FFFFFF;
  --dl-on-primary: #000000;
  /* doodle pink: prices, the live marks, active states */
  --dl-pop: #FF4F8B;
  --dl-pop-rgb: 255, 79, 139;
  --dl-on-pop: #000000;
  --dl-ok: #4FD08F;
  --dl-warn: #FFC44D;
  --dl-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  --dl-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --dl-boing: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* type */
  --dl-ff-body: 'Kanit', 'Helvetica Neue', Arial, sans-serif;
  --dl-ff-mono: 'Roboto Mono', 'SFMono-Regular', Consolas, monospace;
  --dl-fs-h1: clamp(42px, 5.2vw, 84px);
  --dl-fs-h2: clamp(32px, 3.3vw, 54px);
  --dl-fs-h3: clamp(20px, 1.55vw, 26px);
  --dl-fs-h4: 19px;
  --dl-fs-h5: 17px;
  --dl-fs-h6: 15px;
  /* the boxes' inset from the window edge (the base's framed grid) */
  --dl-gutter: 22px;
  /* WebGL Riso Grain: two inks and the paper */
  --gl-1: #FF4F8B;
  --gl-2: #1E6BFF;
  --gl-3: #000000;
  --gl-alpha: 0.55;
}
[data-theme="light"] {
  --dl-bg: #FFFFFF;
  --dl-bg-rgb: 255, 255, 255;
  --dl-band: #F5F4F0;
  --dl-surface: #FFFFFF;
  --dl-raised: #F4F4F4;
  --dl-plate: #F2F2F2;
  --dl-plate-2: #E8E8E8;
  --dl-heading: #000000;
  --dl-heading-rgb: 0, 0, 0;
  --dl-text: rgba(0, 0, 0, 0.74);
  --dl-muted: rgba(0, 0, 0, 0.62);
  --dl-line: rgba(0, 0, 0, 0.55);
  --dl-line-2: rgba(0, 0, 0, 0.12);
  --dl-field: #F2F2F2;
  --dl-primary: #000000;
  --dl-on-primary: #FFFFFF;
  --dl-pop: #C8175A;
  --dl-pop-rgb: 200, 23, 90;
  --dl-on-pop: #FFFFFF;
  --dl-ok: #147A49;
  --dl-warn: #8A5A00;
  --dl-shadow: 0 18px 44px rgba(0, 0, 0, 0.1);
  --gl-1: #FF4F8B;
  --gl-2: #1E6BFF;
  --gl-3: #FFFFFF;
  --gl-alpha: 0.5;
}
/* bands that stay black in both themes (the footer, the night boxes) */
.is-night {
  --dl-bg: #000000;
  --dl-bg-rgb: 0, 0, 0;
  --dl-band: #0E0E0E;
  --dl-surface: #0A0A0A;
  --dl-raised: #161616;
  --dl-plate: #FFFFFF;
  --dl-heading: #FFFFFF;
  --dl-heading-rgb: 255, 255, 255;
  --dl-text: rgba(255, 255, 255, 0.78);
  --dl-muted: rgba(255, 255, 255, 0.62);
  --dl-line: rgba(255, 255, 255, 0.42);
  --dl-line-2: rgba(255, 255, 255, 0.14);
  --dl-field: #151515;
  --dl-primary: #FFFFFF;
  --dl-on-primary: #000000;
  --dl-pop: #FF4F8B;
  --dl-pop-rgb: 255, 79, 139;
  --dl-on-pop: #000000;
  --dl-ok: #4FD08F;
  --gl-3: #000000;
  background-color: #000000;
  color: var(--dl-text);
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--dl-bg);
  color: var(--dl-text);
  font-family: var(--dl-ff-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease;
}
body.oc-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--dl-ease), background-color 0.3s var(--dl-ease);
}
a:hover {
  color: var(--dl-pop);
}
::selection {
  background: var(--dl-sun);
  color: #000000;
}
:focus-visible {
  outline: 2px solid var(--dl-pop);
  outline-offset: 3px;
}

/*----- 1.1 Typography -----*/
/* the base's voice: Kanit capitals, heavy words and thin words in one line; Roboto Mono for the labels */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--dl-heading);
  font-family: var(--dl-ff-body);
  font-weight: 700;
  text-transform: uppercase;
}
h1 {
  font-size: var(--dl-fs-h1);
  line-height: 1.02;
}
h2 {
  font-size: var(--dl-fs-h2);
  line-height: 1.05;
}
h3 {
  font-size: var(--dl-fs-h3);
  line-height: 1.15;
}
h4 {
  font-size: var(--dl-fs-h4);
  line-height: 1.25;
}
h5 {
  font-size: var(--dl-fs-h5);
  line-height: 1.3;
}
h6 {
  font-size: var(--dl-fs-h6);
  line-height: 1.35;
  letter-spacing: 0.02em;
}
/* a heading at its outline level that looks like another level */
.dl-h1 {
  font-size: var(--dl-fs-h1);
  line-height: 1.02;
}
.dl-h2 {
  font-size: var(--dl-fs-h2);
  line-height: 1.05;
}
.dl-h3 {
  font-size: var(--dl-fs-h3);
  line-height: 1.15;
}
.dl-h4 {
  font-size: var(--dl-fs-h4);
  line-height: 1.25;
}
.dl-h5 {
  font-size: var(--dl-fs-h5);
  line-height: 1.3;
}
.dl-h6 {
  font-size: var(--dl-fs-h6);
  line-height: 1.35;
  letter-spacing: 0.02em;
}
/* the thin word in a heavy title (the base's signature) */
h1 em,
h2 em,
h3 em,
.dl-h1 em,
.dl-h2 em {
  font-style: normal;
  font-weight: 200;
}
/* set lines: a title's lines never re-wrap */
.line {
  display: block;
  white-space: nowrap;
}
p {
  margin: 0 0 18px;
}
p:last-child {
  margin-bottom: 0;
}
.dl-lead {
  font-size: 18.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--dl-text);
}
.dl-mono {
  font-family: var(--dl-ff-mono);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.dl-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* a small character sticker set between the words of a title */
.dl-inline {
  display: inline-block;
  width: auto;
  height: 0.95em;
  margin: 0 0.12em;
  vertical-align: -0.12em;
}

/*----- 1.2 Spacing & Grounds -----*/
.sec-pt-120 {
  padding-top: 120px;
}
.sec-pb-120 {
  padding-bottom: 120px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
.dl-bg-band {
  background-color: var(--dl-band);
}
/* the base's framed box: a hairline rectangle inset from the window edge */
.dl-box {
  position: relative;
  margin-inline: var(--dl-gutter);
  border: 1px solid var(--dl-line);
}
.dl-box.is-grain {
  isolation: isolate;
  overflow: clip;
}
/* a band over a wide illustration: the art under a black wash from the copy side, white copy */
.dl-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #000000;
  --dl-heading: #FFFFFF;
  --dl-heading-rgb: 255, 255, 255;
  --dl-text: rgba(255, 255, 255, 0.86);
  --dl-muted: rgba(255, 255, 255, 0.72);
  --dl-line: rgba(255, 255, 255, 0.5);
  --dl-line-2: rgba(255, 255, 255, 0.2);
  --dl-primary: #FFFFFF;
  --dl-on-primary: #000000;
  --dl-pop: #FF4F8B;
  --dl-on-pop: #000000;
  color: var(--dl-text);
}
.dl-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dl-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.66) 46%, rgba(0, 0, 0, 0.22) 100%);
}
.dl-photo-band.is-center::after {
  background: radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.56) 60%, rgba(0, 0, 0, 0.46) 100%);
}

/*----- 1.3 Section Titles -----*/
/* the base's section head: a mono label after a small square, the heavy-and-thin caps title, a quiet lead */
.dl-title {
  margin-bottom: 58px;
}
.dl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--dl-heading);
  font-family: var(--dl-ff-mono);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.4;
}
.dl-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  background: var(--dl-pop);
}
.dl-title h2 {
  max-width: 980px;
}
.dl-title .dl-lead {
  max-width: 640px;
  margin: 24px 0 0;
}
.dl-title.text-center h2,
.dl-title.text-center .dl-lead {
  margin-left: auto;
  margin-right: auto;
}
.dl-title.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.dl-title.is-split .dl-lead {
  max-width: 470px;
  margin: 0;
}

/*----- 1.4 Buttons & Links -----*/
/* the base's hard-shadow button: a white face, a second outline knocked 5px down and right;
   house physics: it presses into its shadow, the arrow slides out and its twin slides in */
.dl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 54px;
  padding: 0 30px;
  border: 1px solid var(--dl-primary);
  border-radius: 0;
  background: var(--dl-primary);
  color: var(--dl-on-primary);
  font-family: var(--dl-ff-body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 5px 5px 0 -1px var(--dl-bg), 5px 5px 0 0 var(--dl-primary);
  transition: background-color 0.3s var(--dl-ease), color 0.3s var(--dl-ease), box-shadow 0.25s var(--dl-ease), transform 0.25s var(--dl-ease), border-color 0.3s ease;
}
.dl-btn i {
  position: relative;
  font-size: 12px;
  transition: transform 0.4s var(--dl-ease), opacity 0.3s ease;
}
.dl-btn i.fa-arrow-right::after {
  content: "061";
  position: absolute;
  left: -24px;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.dl-btn:hover {
  color: var(--dl-on-primary);
  box-shadow: 0 0 0 -1px var(--dl-bg), 0 0 0 0 var(--dl-primary);
  transform: translate(5px, 5px);
}
.dl-btn:hover i.fa-arrow-right {
  transform: translateX(24px);
}
.dl-btn:hover i.fa-arrow-right::after {
  opacity: 1;
}
.dl-btn:hover i.fa-arrow-right::before {
  opacity: 0;
}
/* the pink face (the commission calls) */
.dl-btn.is-pop {
  border-color: var(--dl-pop);
  background: var(--dl-pop);
  color: var(--dl-on-pop);
  box-shadow: 5px 5px 0 -1px var(--dl-bg), 5px 5px 0 0 var(--dl-heading);
}
.dl-btn.is-pop:hover {
  color: var(--dl-on-pop);
  box-shadow: 0 0 0 -1px var(--dl-bg), 0 0 0 0 var(--dl-heading);
}
/* tonal: a soft face, no outline, no shadow */
.dl-btn.is-tonal {
  border-color: transparent;
  background: rgba(var(--dl-heading-rgb), 0.1);
  color: var(--dl-heading);
  box-shadow: none;
}
.dl-btn.is-tonal i {
  color: var(--dl-pop);
}
.dl-btn.is-tonal:hover {
  background: var(--dl-primary);
  color: var(--dl-on-primary);
  transform: translateY(-2px);
}
.dl-btn.is-tonal:hover i {
  color: inherit;
}
.dl-btn.is-sm {
  height: 44px;
  padding: 0 18px;
  font-size: 12.5px;
  box-shadow: 4px 4px 0 -1px var(--dl-bg), 4px 4px 0 0 var(--dl-primary);
}
.dl-btn.is-sm:hover {
  box-shadow: 0 0 0 -1px var(--dl-bg), 0 0 0 0 var(--dl-primary);
  transform: translate(4px, 4px);
}
.dl-btn.is-sm.is-tonal,
.dl-btn.is-sm.is-tonal:hover {
  box-shadow: none;
}
.dl-btn.is-sm.is-tonal:hover {
  transform: translateY(-2px);
}
.dl-btn.is-block {
  width: 100%;
}
.dl-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
/* "read more": caps with the base's short dash after them */
.dl-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--dl-heading);
  font-family: var(--dl-ff-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.dl-more::after {
  content: "";
  width: 14px;
  height: 2px;
  background: currentColor;
  transition: width 0.35s var(--dl-ease), background-color 0.3s ease;
}
.dl-more:hover {
  color: var(--dl-pop);
}
.dl-more:hover::after {
  width: 30px;
}
.dl-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
}

/*----- 1.5 Forms -----*/
.dl-field {
  position: relative;
  margin-bottom: 20px;
}
.dl-field label,
.dl-label {
  display: block;
  margin-bottom: 8px;
  color: var(--dl-heading);
  font-family: var(--dl-ff-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
/* tonal fields: a soft face, no outline; the focus draws a pink line under them */
.dl-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 48px 0 20px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: var(--dl-field);
  color: var(--dl-heading);
  font-family: var(--dl-ff-body);
  font-size: 16px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.dl-bg-band .dl-input {
  background: var(--dl-raised);
}
textarea.dl-input {
  height: 170px;
  padding-top: 16px;
  resize: vertical;
}
.dl-input::placeholder {
  color: var(--dl-muted);
}
.dl-input:focus {
  border-bottom-color: var(--dl-pop);
  outline: 0;
}
.dl-input.is-invalid {
  border-bottom-color: var(--dl-tomato);
}
.dl-input[type="date"] {
  color-scheme: dark;
}
[data-theme="light"] .dl-input[type="date"] {
  color-scheme: light;
}
.is-night .dl-input[type="date"] {
  color-scheme: dark;
}
.dl-field > i {
  position: absolute;
  right: 20px;
  top: 50px;
  color: var(--dl-pop);
  font-size: 14px;
  pointer-events: none;
}
.dl-field.is-area > i {
  top: 54px;
}
.form-status {
  min-height: 0;
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--dl-muted);
}
.form-status.is-ok {
  color: var(--dl-ok);
}
.form-status.is-error {
  color: var(--dl-pop);
}
.dl-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  cursor: pointer;
}
.dl-check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  accent-color: var(--dl-pop);
}
.dl-range {
  width: 100%;
  accent-color: var(--dl-pop);
}

/*----- 1.6 Shared Pieces -----*/
/* buttons start bare; each control draws its own face */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
/* the base's social line: short mono abbreviations */
.dl-social {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dl-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--dl-heading-rgb), 0.1);
  color: var(--dl-heading);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--dl-boing);
}
.dl-social a:hover {
  background: var(--dl-sun);
  color: #000000;
  transform: translateY(-3px) rotate(-8deg);
}
/* a round portrait beside a name */
.dl-face {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.dl-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #000000;
  font-size: 22px;
  box-shadow: 6px 6px 0 0 var(--dl-pop);
  transition: transform 0.4s var(--dl-boing), box-shadow 0.3s ease;
}
.dl-play i {
  margin-left: 5px;
}
.dl-play:hover {
  color: #000000;
  box-shadow: 0 0 0 0 var(--dl-pop);
  transform: scale(1.06) rotate(-6deg);
}
/* live signals: a round dot and its line */
.dl-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dl-muted);
}
[data-state="open"] > .dl-dot,
.dl-dot.is-on {
  background: var(--dl-ok);
  box-shadow: 0 0 0 4px rgba(79, 208, 143, 0.18);
}
[data-state="few"] > .dl-dot {
  background: var(--dl-sun);
  box-shadow: 0 0 0 4px rgba(255, 210, 63, 0.18);
}
[data-state="full"] > .dl-dot,
[data-state="closed"] > .dl-dot {
  background: var(--dl-pop);
  box-shadow: 0 0 0 4px rgba(var(--dl-pop-rgb), 0.18);
}
.dl-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--dl-ff-mono);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--dl-heading);
}
.dl-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--dl-sun);
  font-size: 12px;
}
[data-theme="light"] .dl-stars {
  color: #D99A00;
}
/* a small mono tag (New, Best Seller, Sold Out) */
.dl-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--dl-pop);
  font-family: var(--dl-ff-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
/* label / value rows (never bullet pills) */
.dl-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dl-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--dl-line-2);
  font-size: 15px;
}
.dl-rows li:first-child {
  border-top: 1px solid var(--dl-line-2);
}
.dl-rows li > span {
  color: var(--dl-muted);
  font-family: var(--dl-ff-mono);
  font-size: 13px;
}
.dl-rows li > b {
  color: var(--dl-heading);
  font-size: 15px;
  font-weight: 500;
  text-align: end;
}
.dl-price {
  white-space: nowrap;
}
.dl-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border: 1px solid #FFFFFF;
  background: #000000;
  color: #FFFFFF;
  font-size: 15px;
  box-shadow: 5px 5px 0 0 var(--dl-pop);
  transform: translate(-50%, 180%);
  transition: transform 0.5s var(--dl-boing);
}
.dl-toast i {
  color: var(--dl-sun);
}
.dl-toast.is-shown {
  transform: translate(-50%, 0);
}
.dl-back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--dl-primary);
  background: var(--dl-primary);
  color: var(--dl-on-primary);
  box-shadow: 4px 4px 0 -1px var(--dl-bg), 4px 4px 0 0 var(--dl-primary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s var(--dl-ease), box-shadow 0.25s ease;
}
.dl-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.dl-back-top:hover {
  color: var(--dl-on-primary);
  box-shadow: 0 0 0 -1px var(--dl-bg), 0 0 0 0 var(--dl-primary);
  transform: translate(4px, 4px);
}
/* WebGL layers sit under a section's content */
.dl-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.dl-gl.is-on {
  opacity: 1;
}
/* the illustrated icons: inked drawings die-cut like stickers */
.dl-ico {
  display: inline-flex;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}
.dl-ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* avatar group: overlapping round faces, a +N, two short lines */
.dl-avatars {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.dl-avatars .faces {
  display: inline-flex;
}
.dl-avatars .faces img,
.dl-avatars .faces .more {
  width: 48px;
  height: 48px;
  margin-inline-start: -13px;
  border: 3px solid var(--dl-bg);
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.dl-avatars .faces img:first-child {
  margin-inline-start: 0;
}
.dl-avatars .faces .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dl-sun);
  color: #000000;
  font-family: var(--dl-ff-mono);
  font-size: 12px;
  font-weight: 500;
}
.dl-avatars .txt {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  font-size: 14px;
  color: var(--dl-muted);
}
.dl-avatars .txt b {
  color: var(--dl-heading);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}
.dl-bg-band .dl-avatars .faces img,
.dl-bg-band .dl-avatars .faces .more {
  border-color: var(--dl-band);
}
/* the real review average and count */
.dl-review {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.dl-review > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(var(--dl-heading-rgb), 0.1);
  color: var(--dl-heading);
  font-size: 18px;
}
.dl-review .rv-score {
  color: var(--dl-heading);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}
.dl-review .rv-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dl-review small {
  color: var(--dl-muted);
  font-family: var(--dl-ff-mono);
  font-size: 12.5px;
}
/* an art plate: a white board behind a drawing, the drawing contained, never cropped */
.dl-plate {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--dl-plate);
}
.dl-plate > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.7s var(--dl-ease);
}
/* a scattered confetti sticker (decor) */
.dl-decor {
  position: absolute;
  z-index: 2;
  width: 46px;
  height: auto;
  pointer-events: none;
}

/*======================
2. Preloader
========================*/
/*----- 2.1 Mascot Wave -----*/
/* the black panel with the wordmark and a scribble line; Doodle in front of it, cut off by the bottom edge */
.dl-preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  overflow: hidden;
  pointer-events: none;
}
.js .dl-preloader {
  pointer-events: auto;
}
.no-js .dl-preloader {
  display: none;
}
.pre-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
}
/* the panel's hem: a hairline and the base's small squares along it, where Doodle grabs */
.pre-panel::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  height: 1px;
  background: rgba(255, 255, 255, 0.42);
}
.pre-mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: -16vh;
}
.pre-mark .pre-logo {
  width: 280px;
  height: auto;
}
.pre-scribble {
  display: block;
  width: 180px;
  height: 3px;
  background: #FFD23F;
  transform-origin: left center;
}
.pre-mark small {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--dl-ff-mono);
  font-size: 13px;
}
.pre-bit {
  position: absolute;
  width: 34px;
  height: auto;
}
.pre-bit.is-1 {
  left: -54px;
  top: -18px;
}
.pre-bit.is-2 {
  right: -48px;
  top: -30px;
  width: 26px;
}
.pre-bit.is-3 {
  right: -30px;
  bottom: 6px;
  width: 22px;
}
.pre-doodle {
  position: absolute;
  left: 50%;
  bottom: -40px;
  width: 300px;
  margin-left: -150px;
  transform-origin: 50% 100%;
}
.pre-doodle img {
  display: block;
  width: 100%;
  height: auto;
}
.pre-doodle img + img {
  position: absolute;
  inset: 0;
}
/* the waving arm swings round the shoulder (308, 300 of the 400 x 520 drawing) */
.pre-doodle .dd-arm {
  transform-origin: 77% 57.7%;
}

/*======================
3. Header
========================*/
/* The base's framed header: one hairline box inset from the window, cut into cells by hairlines - the logo, the live
   commission queue, the menu, the switches, the commission call and the menu mark. Three layouts: bar (the default;
   on Home 01 it sits under the sticker masthead), side (Home 02, the base's divided panel) and split (Home 03, the
   logo in the middle of the menu). */
.dl-header {
  position: relative;
  z-index: 1000;
  padding-top: 22px;
}
.header-frame {
  display: flex;
  align-items: stretch;
  height: 78px;
  margin-inline: var(--dl-gutter);
  border: 1px solid var(--dl-line);
  background: var(--dl-bg);
  transition: box-shadow 0.4s ease, background-color 0.4s ease;
}
.hd-cell {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: 0 22px;
}
.hd-cell + .hd-cell {
  border-inline-start: 1px solid var(--dl-line);
}
.dl-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.dl-logo img {
  height: 40px;
  width: auto;
}
.dl-logo .logo-main {
  display: none;
}
[data-theme="light"] .dl-logo .logo-main {
  display: block;
}
[data-theme="light"] .dl-logo .logo-light {
  display: none;
}
.hd-logo {
  padding: 0 22px;
}
/* the commission queue, live: slots left this month (from 1960 up; the offcanvas carries it below) */
.hd-live {
  display: none;
  gap: 10px;
  color: var(--dl-heading);
  font-family: var(--dl-ff-mono);
  font-size: 13px;
  white-space: nowrap;
}
.hd-live:hover {
  color: var(--dl-pop);
}
.hd-nav {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}
/* the currency lives in the offcanvas below 1960 */
.hd-actions .dl-cur {
  display: none;
}
.hd-actions {
  gap: 8px;
  padding: 0 16px;
}
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--dl-heading);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.35s var(--dl-boing);
}
.header-icon:hover {
  background: rgba(var(--dl-heading-rgb), 0.1);
  color: var(--dl-heading);
  transform: rotate(-8deg);
}
.header-icon .count {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--dl-sun);
  color: #000000;
  font-family: var(--dl-ff-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 19px;
  text-align: center;
}
.header-icon .count:empty {
  display: none;
}
/* the base's smiley switch: a pill with the moon and the sun at its ends and a grinning knob */
.dl-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 58px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--dl-line);
  border-radius: 20px;
  color: var(--dl-muted);
  font-size: 12px;
  cursor: pointer;
}
.dl-theme-toggle .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--dl-sun);
  color: #000000;
  font-size: 15px;
  transition: transform 0.45s var(--dl-boing);
}
[data-theme="light"] .dl-theme-toggle .knob {
  transform: translateX(28px) rotate(360deg);
}
.dl-theme-toggle:hover .knob {
  box-shadow: 0 0 0 4px rgba(255, 210, 63, 0.25);
}
.hd-cta {
  padding: 0 20px 0 18px;
}
.hd-cta .dl-btn {
  white-space: nowrap;
}
.hd-menu {
  padding: 0;
}
/* the base's menu mark: three bars, the middle one shorter */
.dl-menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 78px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.dl-menu-toggle span {
  display: block;
  width: 30px;
  height: 3px;
  background: var(--dl-heading);
  transition: width 0.3s var(--dl-ease), background-color 0.3s ease;
}
.dl-menu-toggle span:nth-child(2) {
  width: 22px;
}
.dl-menu-toggle:hover span {
  width: 22px;
  background: var(--dl-pop);
}
.dl-menu-toggle:hover span:nth-child(2) {
  width: 30px;
}

/*----- 3.1 Main Menu -----*/
/* caps, Kanit semibold, a small square before the current page (the base's own mark); no underline */
.dl-nav > ul {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dl-nav li {
  position: relative;
}
.dl-nav > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 28px 11px;
  color: var(--dl-heading);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* the square sits in the link's own padding, so the menu row stays as wide as its words */
.dl-nav > ul > li > a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  background: var(--dl-pop);
  transform: scale(0);
  transition: transform 0.35s var(--dl-boing);
}
.dl-nav > ul > li > a i {
  display: none;
}
.dl-nav > ul > li:hover > a,
.dl-nav > ul > li.active > a {
  color: var(--dl-heading);
}
.dl-nav > ul > li:hover > a::before,
.dl-nav > ul > li.active > a::before {
  transform: scale(1);
}
.dl-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -10px;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
  border: 1px solid var(--dl-line);
  background: var(--dl-bg);
  box-shadow: 6px 6px 0 0 rgba(var(--dl-heading-rgb), 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--dl-ease), transform 0.35s var(--dl-ease), visibility 0.3s;
}
/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.dl-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 22px;
}
.dl-nav li:hover > .sub-menu,
.dl-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dl-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 24px;
  color: var(--dl-text);
  font-size: 15.5px;
  font-weight: 400;
  white-space: nowrap;
  transition: color 0.3s var(--dl-ease), padding 0.35s var(--dl-ease);
}
.dl-nav .sub-menu a i {
  font-size: 9px;
  color: var(--dl-muted);
}
.dl-nav .sub-menu li:hover > a,
.dl-nav .sub-menu li.active > a {
  padding-left: 32px;
  color: var(--dl-heading);
}
.dl-nav .sub-menu li.active > a {
  color: var(--dl-pop);
}
.dl-nav .sub-menu .sub-menu {
  top: -15px;
  left: 100%;
}
.dl-nav .sub-menu .sub-menu::before {
  left: -14px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 14px;
  height: auto;
}

/*----- 3.2 Home Mega Menu -----*/
.dl-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -24px;
  z-index: 50;
  width: 760px;
  padding: 22px;
  border: 1px solid var(--dl-line);
  background: var(--dl-bg);
  box-shadow: 6px 6px 0 0 rgba(var(--dl-heading-rgb), 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--dl-ease), transform 0.35s var(--dl-ease), visibility 0.3s;
}
.dl-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 22px;
}
.dl-nav li:hover > .mega-menu,
.dl-nav li:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.mega-card {
  display: block;
  color: var(--dl-heading);
}
.mega-card .shot {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--dl-line);
}
.mega-card .shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.7s var(--dl-ease);
}
.mega-card:hover .shot img {
  transform: scale(1.05);
}
.mega-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 12px;
}
.mega-meta small {
  color: var(--dl-muted);
  font-family: var(--dl-ff-mono);
  font-size: 12px;
}
.mega-meta b {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}
.mega-card.is-current .mega-meta b,
.mega-card:hover .mega-meta b {
  color: var(--dl-pop);
}

/*----- 3.3 Sticky Header -----*/
/* bar and split: the frame drops to the top of the window and stays; on Home 01 the bar rides up from under the masthead */
.dl-header.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.dl-header-spacer {
  height: 0;
}
.dl-header.is-sticky {
  padding-top: 10px;
}
.dl-header.is-sticky .header-frame {
  box-shadow: 0 0 0 10px var(--dl-bg);
}
.dl-header.is-below {
  position: sticky;
  top: 0;
}
.dl-header.is-below.is-sticky {
  padding-top: 10px;
}

/*----- 3.4 Side Header -----*/
/* Home 02: the base's divided panel - a fixed column on the left, the illustration behind it, the menu stacked */
.header-style-side {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1000;
  width: 300px;
  padding: 0;
  border-inline-end: 1px solid var(--dl-line);
  background: #2E2738;
  overflow: visible;
}
.header-style-side .side-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}
.header-style-side::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.72) 100%);
}
.side-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 40px 34px 34px;
  --dl-heading: #FFFFFF;
  --dl-heading-rgb: 255, 255, 255;
  --dl-text: rgba(255, 255, 255, 0.86);
  --dl-muted: rgba(255, 255, 255, 0.72);
  --dl-line: rgba(255, 255, 255, 0.42);
  color: var(--dl-text);
}
.side-inner .dl-logo .logo-light {
  display: block;
}
.side-inner .dl-logo .logo-main {
  display: none;
}
.side-nav {
  margin-top: 70px;
}
.side-nav > ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.side-nav > ul > li {
  position: relative;
}
.side-nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.side-nav > ul > li > a i {
  display: none;
}
.side-nav > ul > li > a::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--dl-sun);
  transform: scale(0);
  transition: transform 0.35s var(--dl-boing);
}
.side-nav > ul > li:hover > a::before,
.side-nav > ul > li.active > a::before {
  transform: scale(1);
}
/* the sub-menus fly out to the right of the panel */
.side-nav .sub-menu,
.side-nav .mega-menu {
  top: -16px;
  left: calc(100% + 34px);
}
.side-nav .sub-menu::before,
.side-nav .mega-menu::before {
  left: -40px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 40px;
  height: auto;
}
.side-foot {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: auto;
}
.side-foot .side-acts {
  display: flex;
  align-items: center;
  gap: 8px;
}
.side-foot .side-acts .header-icon {
  color: #FFFFFF;
}
.side-foot .side-acts .dl-theme-toggle {
  border-color: rgba(255, 255, 255, 0.42);
  color: rgba(255, 255, 255, 0.7);
}
.side-mono {
  display: flex;
  gap: 18px;
  font-family: var(--dl-ff-mono);
  font-size: 13.5px;
  color: #FFFFFF;
}
.side-mono a:hover {
  color: var(--dl-sun);
}
.side-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--dl-ff-mono);
  font-size: 13px;
  color: #FFFFFF;
}
body.has-side-header .main-root,
body.has-side-header .dl-footer-wrap {
  margin-inline-start: 300px;
}
/* the bar that stands in for the panel below 1200 */
.side-bar {
  display: none;
}

/*----- 3.5 Split Header -----*/
/* Home 03: the logo cell in the middle, the menu split either side of it */
.header-style-split .hd-nav.is-left {
  justify-content: flex-end;
}
.header-style-split .hd-nav.is-right {
  justify-content: flex-start;
}
.header-style-split .hd-logo {
  justify-content: center;
  padding: 0 34px;
}

/*======================
4. Offcanvas Menu
========================*/
/* a black column from the right, framed like the header: the logo, the live queue, every page by group, contact */
.dl-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  border-inline-start: 1px solid var(--dl-line);
  background: var(--dl-bg);
  transform: translateX(105%);
  transition: transform 0.6s var(--dl-ease);
  overflow-y: auto;
}
.dl-offcanvas.open {
  transform: none;
}
.dl-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.dl-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  border-bottom: 1px solid var(--dl-line);
}
.offcanvas-head .dl-logo img {
  height: 38px;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(var(--dl-heading-rgb), 0.1);
  color: var(--dl-heading);
  font-size: 18px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--dl-boing);
}
.offcanvas-close:hover {
  background: var(--dl-sun);
  color: #000000;
  transform: rotate(90deg);
}
.oc-live {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--dl-line);
  color: var(--dl-heading);
  font-family: var(--dl-ff-mono);
  font-size: 13px;
}
.offcanvas-nav {
  flex: 1;
  padding: 10px 28px 26px;
}
.oc-group {
  border-bottom: 1px solid var(--dl-line-2);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  color: var(--dl-heading);
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
}
.oc-group > button i {
  color: var(--dl-pop);
  font-size: 13px;
  transition: transform 0.35s var(--dl-boing);
}
.oc-group.is-open > button i {
  transform: rotate(45deg);
}
.oc-group ul {
  display: none;
  padding: 0 0 14px;
}
.oc-group.is-open ul {
  display: block;
}
.oc-group ul a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--dl-text);
  font-size: 16px;
}
.oc-group ul a::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--dl-line-2);
  transition: background-color 0.3s ease;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  color: var(--dl-heading);
}
.oc-group ul a:hover::before,
.oc-group ul a.is-current::before {
  background: var(--dl-pop);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 28px 30px;
  border-top: 1px solid var(--dl-line);
}
.offcanvas-foot .label {
  color: var(--dl-pop);
  font-family: var(--dl-ff-mono);
  font-size: 13px;
}
.oc-phone {
  color: var(--dl-heading);
  font-size: 24px;
  font-weight: 600;
}
.oc-mail {
  color: var(--dl-text);
  font-family: var(--dl-ff-mono);
  font-size: 14px;
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.dl-select {
  position: relative;
}
.dl-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.dl-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 58px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--dl-field);
  font-size: 15px;
  text-align: left;
  color: var(--dl-heading);
  transition: border-color 0.3s var(--dl-ease);
}
.dl-select.is-open .select-button,
.dl-select .select-button:hover {
  border-color: var(--dl-pop);
}
.dl-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dl-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--dl-pop);
  transition: transform 0.35s var(--dl-ease);
}
.dl-select.is-open .select-button i {
  transform: rotate(180deg);
}
.dl-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background-color: var(--dl-surface);
  border-top: 2px solid var(--dl-pop);
  box-shadow: var(--dl-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--dl-ease), transform 0.3s var(--dl-ease), visibility 0.3s;
}
.dl-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 2px solid var(--dl-pop);
  transform: translateY(-10px);
}
.dl-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dl-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--dl-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--dl-ease), color 0.2s var(--dl-ease);
}
.dl-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dl-pop);
}
.dl-select .select-option .option-meta.is-none {
  color: var(--dl-muted);
}
.dl-select .select-option.is-focused,
.dl-select .select-option:hover {
  background-color: var(--dl-plate);
}
.dl-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.dl-select .select-option.is-selected {
  color: var(--dl-pop);
}
.dl-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--dl-pop);
}
.dl-select.is-compact .select-button {
  height: 46px;
  border: 0;
  border-radius: 0;
  background: var(--dl-plate);
  font-size: 14px;
  font-weight: 600;
}

/*======================
6. Language & Currency Pickers
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. Tonal faces, framed menus. */
.dl-lang,
.dl-cur {
  position: relative;
  flex-shrink: 0;
}
.dl-lang .lang-btn,
.dl-cur .cur-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 20px;
  background: rgba(var(--dl-heading-rgb), 0.08);
  color: var(--dl-heading);
  font-family: var(--dl-ff-mono);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dl-lang .lang-btn:hover,
.dl-lang .lang-btn[aria-expanded="true"],
.dl-cur .cur-btn:hover,
.dl-cur .cur-btn[aria-expanded="true"] {
  background: var(--dl-primary);
  color: var(--dl-on-primary);
}
.dl-lang .lang-btn > i,
.dl-cur .cur-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.dl-lang .lang-btn[aria-expanded="true"] > i,
.dl-cur .cur-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.dl-cur .cur-btn b {
  font-weight: 500;
  color: var(--dl-pop);
}
.dl-cur .cur-btn:hover b,
.dl-cur .cur-btn[aria-expanded="true"] b {
  color: inherit;
}
.dl-lang .flag {
  flex-shrink: 0;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
}
.dl-lang.is-up .lang-btn,
.dl-cur.is-up .cur-btn {
  height: 44px;
  padding: 0 15px;
}
.dl-lang .lang-menu,
.dl-cur .cur-menu {
  position: absolute;
  top: calc(100% + 14px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border: 1px solid var(--dl-line);
  background: var(--dl-bg);
  box-shadow: 6px 6px 0 0 rgba(var(--dl-heading-rgb), 0.12);
  font-family: var(--dl-ff-body);
  text-align: start;
  white-space: normal;
}
.dl-cur .cur-menu {
  width: 232px;
}
.dl-lang.is-up .lang-menu,
.dl-cur.is-up .cur-menu {
  top: auto;
  bottom: calc(100% + 12px);
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.dl-lang .lang-menu[hidden],
.dl-cur .cur-menu[hidden] {
  display: none;
}
.dl-lang .lang-group,
.dl-cur .lang-group {
  margin: 6px 10px;
  color: var(--dl-muted);
  font-family: var(--dl-ff-mono);
  font-size: 12px;
}
.dl-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dl-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--dl-line-2);
}
.dl-lang .lang-item,
.dl-cur .cur-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  color: var(--dl-heading);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  text-align: start;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}
.dl-lang .lang-item small {
  margin-inline-start: auto;
  color: var(--dl-muted);
  font-family: var(--dl-ff-mono);
  font-size: 11.5px;
}
.dl-lang .lang-item i,
.dl-cur .cur-item i {
  width: 12px;
  font-size: 11px;
  color: var(--dl-pop);
  opacity: 0;
}
.dl-cur .cur-item i {
  margin-inline-start: auto;
}
.dl-cur .cur-item b {
  width: 18px;
  color: var(--dl-pop);
  font-family: var(--dl-ff-mono);
  font-weight: 500;
}
.dl-lang .lang-item:hover,
.dl-lang .lang-item[aria-pressed="true"],
.dl-cur .cur-item:hover,
.dl-cur .cur-item[aria-pressed="true"] {
  background: rgba(var(--dl-heading-rgb), 0.08);
}
.dl-lang .lang-item[aria-pressed="true"] i,
.dl-cur .cur-item[aria-pressed="true"] i {
  opacity: 1;
}
.dl-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--dl-line-2);
  color: var(--dl-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/*======================
7. Components
========================*/
/*----- 7.1 Arrows & Tabs -----*/
/* the base's slider arrows: a bare white arrow, no disc; it nudges toward where it goes */
.slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 0;
  background: transparent;
  color: var(--dl-heading);
  font-size: 22px;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.35s var(--dl-boing), opacity 0.3s ease;
}
.slider-arrow:hover {
  color: var(--dl-pop);
}
[class*="-prev"].slider-arrow:hover {
  transform: translateX(-5px);
}
[class*="-next"].slider-arrow:hover {
  transform: translateX(5px);
}
.slider-arrow.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
  transform: none;
}
.rail-arrows {
  display: flex;
  gap: 6px;
  margin-top: 26px;
}
/* the base's dash pagination: short white dashes, the active one longer */
.hero-dashes,
.dl-dashes {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.hero-dashes .swiper-pagination-bullet,
.dl-dashes .swiper-pagination-bullet {
  width: 14px;
  height: 3px;
  margin: 0;
  border-radius: 0;
  background: var(--dl-heading);
  opacity: 0.4;
  transition: width 0.4s var(--dl-ease), opacity 0.3s ease;
}
.hero-dashes .swiper-pagination-bullet-active,
.dl-dashes .swiper-pagination-bullet-active {
  width: 30px;
  opacity: 1;
}
/* filter tabs: tonal pills, the current one inverted */
.dl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dl-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 22px;
  background: rgba(var(--dl-heading-rgb), 0.08);
  color: var(--dl-heading);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.35s var(--dl-boing);
}
.dl-tabs button small {
  color: var(--dl-muted);
  font-family: var(--dl-ff-mono);
  font-size: 11.5px;
}
.dl-tabs button:hover {
  background: rgba(var(--dl-heading-rgb), 0.16);
  transform: rotate(-2deg);
}
.dl-tabs button.is-active {
  background: var(--dl-primary);
  color: var(--dl-on-primary);
}
.dl-tabs button.is-active small {
  color: inherit;
}
.is-hidden {
  display: none !important;
}
.grid-empty {
  padding: 40px 0;
  color: var(--dl-muted);
  font-family: var(--dl-ff-mono);
  text-align: center;
}

/*----- 7.2 Accordion -----*/
.dl-accordion {
  border-top: 1px solid var(--dl-line-2);
}
.acc-item {
  border-bottom: 1px solid var(--dl-line-2);
}
.acc-title {
  margin: 0;
  font-size: inherit;
  text-transform: none;
}
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  color: var(--dl-heading);
  font-size: 18px;
  font-weight: 600;
  text-align: start;
  text-transform: uppercase;
}
.acc-head i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(var(--dl-heading-rgb), 0.08);
  color: var(--dl-pop);
  font-size: 13px;
  transition: transform 0.4s var(--dl-boing), background-color 0.3s ease;
}
.acc-item.is-open .acc-head i {
  transform: rotate(135deg);
  background: var(--dl-sun);
  color: #000000;
}
.acc-body {
  padding: 0 60px 24px 0;
}
.acc-body p {
  margin: 0;
}

/*----- 7.3 Chips, Steppers & Panels -----*/
/* a choice chip: a radio or a checkbox dressed as a tonal card, ticked by inverting */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-choice {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.chip-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip-choice > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 16px;
  border-radius: 22px;
  background: rgba(var(--dl-heading-rgb), 0.08);
  color: var(--dl-heading);
  font-size: 14.5px;
  line-height: 1.3;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.35s var(--dl-boing);
}
.chip-choice > span b {
  font-weight: 500;
}
.chip-choice > span small {
  color: var(--dl-muted);
  font-family: var(--dl-ff-mono);
  font-size: 12px;
}
.chip-choice:hover > span {
  transform: rotate(-2deg);
}
.chip-choice input:checked + span {
  background: var(--dl-primary);
  color: var(--dl-on-primary);
}
.chip-choice input:checked + span small {
  color: inherit;
  opacity: 0.7;
}
.chip-choice input:focus-visible + span {
  outline: 2px solid var(--dl-pop);
  outline-offset: 2px;
}
/* card chips: the builder's bigger choices, square */
.chip-choice.is-card {
  display: flex;
}
.chip-choice.is-card > span {
  width: 100%;
  min-height: 86px;
  padding: 16px 18px;
  border-radius: 0;
  border: 1px solid var(--dl-line-2);
  background: transparent;
}
.chip-choice.is-card input:checked + span {
  border-color: var(--dl-primary);
  box-shadow: 4px 4px 0 0 var(--dl-pop);
}
.dl-qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 30px;
  background: rgba(var(--dl-heading-rgb), 0.08);
}
.dl-qty button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--dl-heading);
  font-size: 12px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dl-qty button:hover {
  background: var(--dl-primary);
  color: var(--dl-on-primary);
}
.dl-qty b,
.dl-qty input {
  min-width: 34px;
  border: 0;
  background: transparent;
  color: var(--dl-heading);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}
.dl-qty.is-sm button {
  width: 30px;
  height: 30px;
}
.dl-panel {
  padding: 40px;
  border: 1px solid var(--dl-line);
  background: var(--dl-surface);
}
.dl-newsletter {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 18px;
}
.dl-newsletter input {
  flex: 1 1 200px;
  min-width: 0;
  height: 46px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--dl-line);
  background: transparent;
  color: var(--dl-heading);
  font-family: var(--dl-ff-body);
  font-size: 15px;
}
.dl-newsletter input::placeholder {
  color: var(--dl-muted);
}
.dl-newsletter input:focus {
  border-bottom-color: var(--dl-pop);
  outline: 0;
}
.dl-newsletter button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  color: var(--dl-heading);
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
}
.dl-newsletter button::after {
  content: "";
  width: 14px;
  height: 2px;
  background: currentColor;
  transition: width 0.35s var(--dl-ease);
}
.dl-newsletter button:hover {
  color: var(--dl-pop);
}
.dl-newsletter button:hover::after {
  width: 26px;
}
.dl-newsletter .form-status {
  flex-basis: 100%;
}

/*----- 7.4 Work Tiles -----*/
/* the base's double frame: the hairline, a black margin, the white plate; the title in caps, the series in mono */
.work-tile {
  position: relative;
}
.wt-frame {
  display: block;
  padding: 12px;
  border: 1px solid var(--dl-line);
}
.wt-plate {
  aspect-ratio: 1 / 1;
}
.wt-plate.is-tall {
  aspect-ratio: 1 / 1;
}
.wt-plate.is-tall img {
  object-fit: cover;
}
.wt-plate.is-wide img {
  object-fit: cover;
}
.work-tile:hover .wt-plate img {
  transform: scale(1.05) rotate(-1.5deg);
}
.wt-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 2px 0;
}
.wt-meta h3 a:hover {
  color: var(--dl-pop);
}
.wt-meta .dl-mono {
  color: var(--dl-muted);
  font-size: 12.5px;
}
.wt-zoom {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000000;
  color: #FFFFFF;
  font-size: 13px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.4s var(--dl-boing), background-color 0.3s ease;
}
.work-tile:hover .wt-zoom,
.wt-zoom:focus-visible {
  opacity: 1;
  transform: none;
}
.wt-zoom:hover {
  background: var(--dl-sun);
  color: #000000;
}
/* the doodle frame: a hand-drawn scribble drawn round a card on hover (main.js), boiling at 12 fps */
.dl-doodle-hover {
  position: relative;
}
.dl-doodle-hover > .doodle-frame {
  position: absolute;
  left: -14px;
  top: -14px;
  z-index: 5;
  width: calc(100% + 28px);
  height: calc(100% + 28px);
  pointer-events: none;
}

/*----- 7.5 Product Cards -----*/
.product-card {
  position: relative;
  height: 100%;
}
.pc-media {
  position: relative;
}
.pc-plate {
  aspect-ratio: 1 / 1.05;
}
.product-card.is-print .pc-plate {
  padding: 12%;
  background: var(--dl-plate-2);
}
.product-card.is-print .pc-plate img {
  border: 10px solid #FFFFFF;
  background: #FFFFFF;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  object-fit: contain;
}
.product-card.is-sticker .pc-plate {
  padding: 14%;
  background: var(--dl-plate-2);
}
.product-card.is-sticker .pc-plate img {
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.2));
}
.product-card.is-tee .pc-plate img {
  object-fit: cover;
}
.product-card:hover .pc-plate img {
  transform: translateY(-6px) rotate(-2deg);
}
.pc-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 6px 10px;
  background: #000000;
  color: #FFFFFF;
  font-family: var(--dl-ff-mono);
  font-size: 11.5px;
  line-height: 1;
}
.pc-badge.is-sale {
  background: var(--dl-sun);
  color: #000000;
}
.pc-wish {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #000000;
  font-size: 14px;
  transition: transform 0.4s var(--dl-boing), background-color 0.3s ease, color 0.3s ease;
}
.pc-wish:hover {
  transform: scale(1.1) rotate(-10deg);
}
.pc-wish.is-on {
  background: var(--dl-pop);
  color: #FFFFFF;
}
.pc-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
}
.pc-kind {
  color: var(--dl-muted);
  font-size: 12.5px;
}
.pc-body h3 a:hover {
  color: var(--dl-pop);
}
.size-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.size-chip {
  min-width: 40px;
  height: 32px;
  padding: 0 10px;
  border-radius: 16px;
  background: rgba(var(--dl-heading-rgb), 0.08);
  color: var(--dl-heading);
  font-family: var(--dl-ff-mono);
  font-size: 12px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.size-chip:hover {
  background: rgba(var(--dl-heading-rgb), 0.18);
}
.size-chip.is-on {
  background: var(--dl-primary);
  color: var(--dl-on-primary);
}
.pc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.pc-price {
  color: var(--dl-heading);
  font-size: 20px;
  font-weight: 600;
}
.pc-price s {
  margin-inline-end: 6px;
  color: var(--dl-muted);
  font-size: 15px;
  font-weight: 400;
}
.pc-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--dl-primary);
  background: var(--dl-primary);
  color: var(--dl-on-primary);
  font-size: 15px;
  box-shadow: 4px 4px 0 -1px var(--dl-bg), 4px 4px 0 0 var(--dl-primary);
  transition: transform 0.25s var(--dl-ease), box-shadow 0.25s var(--dl-ease);
}
.pc-add:hover {
  box-shadow: 0 0 0 -1px var(--dl-bg), 0 0 0 0 var(--dl-primary);
  transform: translate(4px, 4px);
}

/*----- 7.6 Team Cards -----*/
.team-card .tc-photo {
  display: block;
  aspect-ratio: 4 / 4.6;
  overflow: visible;
}
.team-card .tc-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.7s var(--dl-ease), filter 0.5s ease;
}
.team-card:hover .tc-photo img {
  transform: rotate(-1.5deg);
}
.team-card h3 {
  margin: 22px 0 6px;
}
.team-card h3 a:hover {
  color: var(--dl-pop);
}
.tc-role {
  display: block;
  margin-bottom: 14px;
  color: var(--dl-heading);
  font-size: 13px;
}
.team-card p {
  font-size: 15px;
}

/*----- 7.7 Post Cards -----*/
.post-card .pcd-img {
  display: block;
  aspect-ratio: 16 / 10.5;
}
.post-card .pcd-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--dl-ease);
}
.post-card:hover .pcd-img img {
  transform: scale(1.04);
}
.pcd-body {
  padding-top: 22px;
}
.pcd-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--dl-heading);
  font-size: 13px;
}
.pcd-meta::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--dl-pop);
}
.post-card h3 {
  margin-bottom: 18px;
}
.post-card h3 a:hover {
  color: var(--dl-pop);
}

/*----- 7.8 Voices -----*/
.voice {
  margin: 0;
}
.voice blockquote {
  margin: 0;
}
.voice-q {
  color: var(--dl-heading);
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}
.voice figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}
.voice figcaption > span:not(.dl-stars) {
  display: flex;
  flex-direction: column;
}
.voice figcaption b {
  color: var(--dl-heading);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
}
.voice figcaption small {
  color: var(--dl-muted);
  font-family: var(--dl-ff-mono);
  font-size: 12.5px;
}
.voice figcaption .dl-stars {
  margin-inline-start: 6px;
}

/*----- 7.9 Stickers & Frames -----*/
/* a die-cut sticker set on the page, tilted, with a soft shadow under it */
.dl-sticker {
  position: absolute;
  z-index: 2;
  height: auto;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}
.dl-frame-box {
  position: relative;
  border: 1px solid var(--dl-line);
}

/*======================
8. Signature Rig
========================*/
/*----- 8.1 Pencil Cursor -----*/
/* the pencil's graphite tip sits on the pointer: the 56px glyph is drawn with its tip at (3.7, 52.3) */
.dl-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 6000;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.dl-cursor.is-on {
  opacity: 1;
}
.dl-cursor.is-off {
  opacity: 0;
}
.dl-cursor .pc-tip {
  position: absolute;
  left: -3.7px;
  top: -52.3px;
  display: block;
  width: 56px;
  height: 56px;
  transform-origin: 3.7px 52.3px;
}
.dl-cursor img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.35));
}
html.has-pencil,
html.has-pencil body,
html.has-pencil a,
html.has-pencil button,
html.has-pencil label,
html.has-pencil [role="tab"] {
  cursor: none;
}
html.has-pencil input,
html.has-pencil textarea,
html.has-pencil select,
html.has-pencil .lang-menu,
html.has-pencil .cur-menu {
  cursor: auto;
}
/* the doodle frame's ink, per theme */
:root {
  --dl-doodle: #FFD23F;
}
[data-theme="light"] {
  --dl-doodle: #C8175A;
}
.is-sun,
.is-paper {
  --dl-doodle: #C8175A;
}
.is-night {
  --dl-doodle: #FFD23F;
}

/*======================
9. Home 01 - The Studio
========================*/
/*----- 9.1 Grounds: Sun And Paper -----*/
/* a colour band: sun yellow with black ink (the commission call) */
.is-sun {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--dl-sun);
  --dl-heading: #000000;
  --dl-heading-rgb: 0, 0, 0;
  --dl-text: rgba(0, 0, 0, 0.8);
  --dl-muted: rgba(0, 0, 0, 0.66);
  --dl-line: rgba(0, 0, 0, 0.6);
  --dl-line-2: rgba(0, 0, 0, 0.18);
  --dl-primary: #000000;
  --dl-on-primary: #FFFFFF;
  --dl-bg: #FFD23F;
  --dl-pop: #B0124E;
  --dl-ok: #0D6B3D;
  color: var(--dl-text);
}
.is-sun .dl-eyebrow::before {
  background: #000000;
}
.is-sun [data-state] > .dl-dot {
  background: #000000;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.14);
}
/* the paper band: white ground, black ink (the base's art plates, made a whole band) */
.is-paper {
  background: #FFFFFF;
  --dl-heading: #000000;
  --dl-heading-rgb: 0, 0, 0;
  --dl-text: rgba(0, 0, 0, 0.74);
  --dl-muted: rgba(0, 0, 0, 0.62);
  --dl-line: rgba(0, 0, 0, 0.55);
  --dl-line-2: rgba(0, 0, 0, 0.12);
  --dl-primary: #000000;
  --dl-on-primary: #FFFFFF;
  --dl-bg: #FFFFFF;
  --dl-pop: #C8175A;
  color: var(--dl-text);
}
[data-theme="light"] .is-paper {
  background: #F5F4F0;
  --dl-bg: #F5F4F0;
}

/*----- 9.2 The Sticker Masthead -----*/
/* above the framed bar, as in the base: a slider of sticker parades on the black */
.dl-masthead {
  position: relative;
  padding: 46px 0 34px;
}
.mh-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 0 110px;
}
.parade {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}
.pr-sticker {
  flex-shrink: 0;
  width: 150px;
  height: auto;
  margin: 0 -8px;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.4));
}
.pr-sticker.is-1 {
  width: 128px;
  transform: rotate(-8deg);
}
.pr-sticker.is-2 {
  width: 160px;
  transform: rotate(6deg) translateY(-14px);
}
.pr-sticker.is-3 {
  width: 150px;
  transform: rotate(-4deg) translateY(18px);
}
.pr-sticker.is-4 {
  width: 172px;
  transform: rotate(3deg);
}
.pr-sticker.is-5 {
  width: 146px;
  transform: rotate(-7deg) translateY(-10px);
}
.pr-sticker.is-6 {
  width: 156px;
  transform: rotate(8deg) translateY(16px);
}
.pr-sticker.is-7 {
  width: 132px;
  transform: rotate(-3deg) translateY(-6px);
}
.pr-bit {
  flex-shrink: 0;
  width: 40px;
  height: auto;
  margin: 0 6px;
}
.pr-bit.is-1 {
  transform: translateY(-50px);
}
.pr-bit.is-2 {
  width: 54px;
  transform: translateY(56px) rotate(14deg);
}
.pr-bit.is-3 {
  width: 32px;
  transform: translateY(-40px);
}
.pr-bit.is-4 {
  width: 64px;
  transform: translateY(46px);
}
.pr-bit.is-5 {
  width: 40px;
  transform: translateY(-64px) rotate(-10deg);
}
.pr-bit.is-6 {
  width: 50px;
  transform: translateY(54px);
}
.pr-bit.is-7 {
  width: 30px;
  transform: translateY(-30px);
}
.mh-cap {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
}
.mh-cap .dl-eyebrow {
  margin: 0;
}
.dl-masthead .slider-arrow {
  position: absolute;
  top: calc(50% - 40px);
  z-index: 4;
  font-size: 26px;
}
.dl-masthead .hero-prev {
  left: calc(var(--dl-gutter) + 8px);
}
.dl-masthead .hero-next {
  right: calc(var(--dl-gutter) + 8px);
}
.dl-masthead .hero-dashes {
  position: relative;
  margin-top: 22px;
}

/*----- 9.3 Intro -----*/
.intro-title {
  margin-bottom: 28px;
}
.intro-copy .dl-lead {
  max-width: 520px;
  margin-bottom: 36px;
}
.intro-proof {
  margin-top: 42px;
}
.intro-art {
  position: relative;
  max-width: 560px;
  margin-inline-start: auto;
}
.intro-cat {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35));
}
.intro-st {
  width: 130px;
}
.intro-st.is-1 {
  left: -40px;
  bottom: 40px;
  transform: rotate(-12deg);
}
.intro-st.is-2 {
  right: -10px;
  top: 10px;
  width: 96px;
  transform: rotate(10deg);
}
.intro-bit.is-1 {
  left: 30px;
  top: 30px;
  width: 52px;
}
.intro-bit.is-2 {
  right: 40px;
  bottom: 10px;
  width: 58px;
}

/*----- 9.4 The Work By Series -----*/
.dl-work-home .wide-pad {
  padding-inline: 40px;
}
.dl-work-home .dl-title {
  align-items: flex-end;
}
.dl-work-home .dl-tabs {
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.work-more {
  margin-top: 54px;
}

/*----- 9.5 Statement -----*/
.statement-title {
  max-width: 1180px;
  margin: 0 auto;
  font-size: clamp(34px, 4.4vw, 72px);
  line-height: 1.12;
}
.statement-title .dl-inline {
  height: 1.05em;
  vertical-align: -0.18em;
}

/*----- 9.6 The Turnaround -----*/
.dl-turn .turn-copy h2 {
  margin-bottom: 24px;
}
.turn-rows {
  margin: 30px 0 34px;
}
.ta-stage {
  position: relative;
}
/* the sheet: a white board with the turnaround's construction lines across it */
.ta-sheet {
  position: relative;
  aspect-ratio: 1.15 / 1;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 10px 10px 0 0 rgba(255, 255, 255, 0.14);
}
.ta-guide {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, #4B7BEC 0 10px, transparent 10px 18px);
  opacity: 0.55;
}
.ta-guide.is-1 {
  top: 18%;
}
.ta-guide.is-2 {
  top: 47%;
}
.ta-guide.is-3 {
  top: 84%;
}
.ta-angle {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 3;
  padding: 6px 12px;
  background: #000000;
  color: #FFFFFF;
  font-size: 14px;
}
.ta-figure {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 52%;
  aspect-ratio: 400 / 520;
  transform: translateX(-50%);
}
.ta-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.ta-view.is-on {
  opacity: 1;
}
.ta-turntable {
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: 46%;
  height: 7%;
  border: 2px solid #000000;
  border-radius: 50%;
  transform: translateX(-50%);
  opacity: 0.18;
}
.ta-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 22px;
}
.ta-strip li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--dl-line-2);
  color: var(--dl-muted);
  font-size: 13px;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.ta-strip .tt-img {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 8px;
  background: #FFFFFF;
}
.ta-strip .tt-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ta-strip b {
  color: var(--dl-heading);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}
.ta-strip small {
  font-family: var(--dl-ff-mono);
}
.ta-strip li.is-on {
  border-color: var(--dl-heading);
  background: rgba(var(--dl-heading-rgb), 0.06);
}

/*----- 9.7 The Quote Band -----*/
.qh-bit.is-1 {
  right: 6%;
  top: 40px;
  width: 64px;
}
.qh-bit.is-2 {
  left: 4%;
  bottom: 40px;
  width: 54px;
}
.dl-quote-home h2 {
  margin-bottom: 24px;
}
.qh-live {
  margin-top: 30px;
}
.quote-mini {
  padding: 34px;
  border: 2px solid #000000;
  background: #FFFFFF;
  box-shadow: 10px 10px 0 0 #000000;
  --dl-heading: #000000;
  --dl-heading-rgb: 0, 0, 0;
  --dl-muted: rgba(0, 0, 0, 0.62);
  --dl-primary: #000000;
  --dl-on-primary: #FFFFFF;
  --dl-bg: #FFFFFF;
}
.qm-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 12px 18px;
  min-width: 0;
  margin: 0 0 16px;
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.qm-label {
  color: #000000;
  font-family: var(--dl-ff-mono);
  font-size: 13px;
}
.quote-mini .chip-choice > span {
  background: #F0F0F0;
  padding: 10px 15px;
}
.quote-mini .dl-qty {
  justify-self: start;
  background: #F0F0F0;
}
.qm-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 30px;
  padding-top: 6px;
}
.qm-total > span {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.qm-total small {
  color: rgba(0, 0, 0, 0.62);
  font-family: var(--dl-ff-mono);
  font-size: 12.5px;
}
.qm-sum b {
  color: #000000;
  font-size: 44px;
  font-weight: 700;
}
.qm-when b {
  color: #000000;
  font-size: 18px;
  font-weight: 600;
}
.qm-total .dl-btn {
  margin-inline-start: auto;
}

/*----- 9.8 The Studio, Staggered -----*/
/* the base's team row: four portraits, the second and fourth set lower */
.team-stagger .team-card.is-step-2 {
  margin-top: 90px;
}
.team-stagger .team-card.is-step-3 {
  margin-top: 30px;
}
.team-stagger .team-card.is-step-4 {
  margin-top: 120px;
}

/*----- 9.9 Video Band -----*/
.dl-video-band {
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dl-video-band.dl-photo-band::after {
  background: rgba(0, 0, 0, 0.12);
}
.vb-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 40px 20px;
}
.vb-cap {
  max-width: 420px;
  margin: 0;
  padding: 8px 14px;
  background: #000000;
  color: #FFFFFF;
  font-size: 13px;
  text-align: center;
}

/*----- 9.10 Numerals -----*/
/* the base's numbers filled with the artwork itself */
.num-item {
  text-align: center;
}
.num-fig {
  display: inline-block;
  margin-bottom: 14px;
  background-color: #000000;
  background-size: 140% auto;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(90px, 9vw, 150px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.num-fig.is-1 {
  background-image: url(../img/stickers/forms-of-joy.png);
}
.num-fig.is-2 {
  background-image: url(../img/stickers/king-froggo.png);
}
.num-fig.is-3 {
  background-image: url(../img/stickers/happy-heart.png);
}
.num-fig.is-4 {
  background-image: url(../img/stickers/tiger-stretch.png);
}
.num-item h3 {
  margin-bottom: 12px;
}
.num-item h3 a:hover {
  color: var(--dl-pop);
}
.num-item p {
  max-width: 280px;
  margin: 0 auto;
  font-size: 15.5px;
}

/*----- 9.11 The Shop Row -----*/
.shop-feature {
  position: relative;
  display: block;
  height: 100%;
  min-height: 420px;
}
.shop-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--dl-ease);
}
.shop-feature:hover img {
  transform: scale(1.03);
}
.sf-tag {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 2;
  padding: 8px 14px;
  background: #000000;
  color: #FFFFFF;
  font-size: 13px;
}
.card-rail .swiper {
  overflow: hidden;
}
.pc-slide {
  height: 100%;
}

/*----- 9.12 Voices -----*/
.voices-wrap {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 90px;
}
.voices-mark {
  display: block;
  margin-bottom: 22px;
  color: var(--dl-sun);
  font-size: 46px;
}
.voices-wrap .voice-prev,
.voices-wrap .voice-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.voices-wrap .voice-prev {
  left: 0;
}
.voices-wrap .voice-next {
  right: 0;
}
.voices-wrap .voice-prev:hover {
  transform: translate(-5px, -50%);
}
.voices-wrap .voice-next:hover {
  transform: translate(5px, -50%);
}

/*----- 9.13 Awards & Fairs -----*/
/* the base's framed box with stickers flying round it */
.awards-box {
  padding: 90px 110px;
}
.awards-box h2 {
  margin-bottom: 16px;
}
.awards-box > .row > div > p {
  max-width: 340px;
  margin-bottom: 30px;
}
.aw-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 20px;
}
.aw-list b {
  color: var(--dl-heading);
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
}
.aw-list .dl-mono {
  color: var(--dl-muted);
  font-size: 13px;
}
.aw-list .dl-tag {
  font-style: normal;
}
.aw-bit.is-1 {
  left: 46%;
  top: -18px;
  width: 40px;
}
.aw-st.is-1 {
  left: -42px;
  top: -40px;
  width: 104px;
}
.aw-bit.is-2 {
  left: 30px;
  bottom: 30%;
  width: 54px;
}
.aw-bit.is-3 {
  right: 10%;
  top: 30%;
  width: 50px;
}
.aw-st.is-2 {
  right: -30px;
  bottom: -40px;
  width: 110px;
}
.aw-bit.is-4 {
  left: 44%;
  bottom: -16px;
  width: 30px;
}

/*======================
10. Home 02 - The Shop
========================*/
/*----- 10.1 Split Hero -----*/
/* the base's divided home: the panel on the left, the work on the right; here each slide is copy on black beside a
   colour plate holding the product, all inside one framed box */
.hero-two {
  margin-top: var(--dl-gutter);
  overflow: hidden;
}
.h2-slide {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  min-height: 640px;
  background: var(--dl-bg);
}
.h2-slide .hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 70px 110px;
}
.h2-slide h1,
.h2-slide h2 {
  margin-bottom: 26px;
}
.h2-slide .dl-lead {
  max-width: 440px;
  margin-bottom: 34px;
}
.h2-from {
  color: var(--dl-heading);
  font-size: 14px;
}
.h2-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-inline-start: 1px solid var(--dl-line);
}
.h2-art.is-sun {
  background: var(--dl-sun);
}
.h2-art.is-bubble {
  background: var(--dl-bubble);
}
.h2-art.is-sky {
  background: var(--dl-sky);
}
.h2-print {
  display: block;
  width: 56%;
  padding: 18px;
  background: #FFFFFF;
  box-shadow: 18px 22px 0 rgba(0, 0, 0, 0.16), 0 30px 60px rgba(0, 0, 0, 0.2);
  transform: rotate(-3deg);
}
.h2-print img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.1;
  object-fit: contain;
  background: #F6F6F6;
}
.h2-tee {
  display: block;
  width: 64%;
  transform: rotate(2deg);
}
.h2-tee img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
.h2-st {
  position: absolute;
  width: 150px;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.3));
}
.h2-st.is-1 {
  right: 12%;
  bottom: 14%;
  transform: rotate(12deg);
}
.h2-st.is-2 {
  left: 10%;
  top: 14%;
  width: 120px;
  transform: rotate(-10deg);
}
.h2-bit {
  position: absolute;
  width: 56px;
}
.h2-bit.is-1 {
  left: 14%;
  top: 16%;
}
.h2-bit.is-2 {
  right: 14%;
  bottom: 16%;
}
.h2-pile {
  position: absolute;
  width: 34%;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.3));
}
.h2-pile.is-1 {
  left: 10%;
  top: 9%;
  transform: rotate(-12deg);
}
.h2-pile.is-2 {
  right: 9%;
  top: 7%;
  width: 30%;
  transform: rotate(10deg);
}
.h2-pile.is-3 {
  left: 14%;
  bottom: 7%;
  width: 30%;
  transform: rotate(8deg);
}
.h2-pile.is-4 {
  right: 10%;
  bottom: 9%;
  width: 33%;
  transform: rotate(-6deg);
}
.hero-nav {
  position: absolute;
  left: 70px;
  bottom: 34px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-count {
  color: var(--dl-heading);
  font-size: 13px;
}
.hero-count b {
  font-weight: 500;
  color: var(--dl-pop);
}
.hero-nav .slider-arrow {
  width: 44px;
  height: 44px;
}

/*----- 10.2 Kinds Strip -----*/
/* one framed strip under the hero, three cells cut by hairlines */
.dl-kinds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--dl-gutter);
}
.kind-cell {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  color: var(--dl-heading);
}
.kind-cell + .kind-cell {
  border-inline-start: 1px solid var(--dl-line);
}
.kc-img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 82px;
  height: 82px;
  overflow: hidden;
  background: #FFFFFF;
}
.kc-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s var(--dl-boing);
}
.kc-img.is-tee img {
  object-fit: cover;
}
.kc-img.is-sticker {
  background: var(--dl-bubble);
}
.kc-img.is-sticker img {
  width: 80%;
  height: 80%;
}
.kind-cell:hover .kc-img img {
  transform: rotate(-8deg) scale(1.08);
}
.kc-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kc-txt b {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}
.kc-txt small {
  color: var(--dl-muted);
  font-size: 12.5px;
}
.kind-cell > i {
  margin-inline-start: auto;
  color: var(--dl-pop);
  transition: transform 0.35s var(--dl-boing);
}
.kind-cell:hover {
  color: var(--dl-heading);
}
.kind-cell:hover > i {
  transform: translateX(6px);
}

/*----- 10.3 Shop Grid -----*/
.dl-shop-two .wide-pad {
  padding-inline: 40px;
}
.dl-shop-two .dl-tabs {
  justify-content: flex-end;
}

/*----- 10.4 The Sketch Develops -----*/
.sk-wrap {
  display: grid;
  grid-template-columns: 1fr 210px;
  gap: 26px;
  align-items: center;
}
.sk-paper {
  position: relative;
  aspect-ratio: 1 / 1.08;
  padding: 7%;
  background: #FFFFFF;
  box-shadow: 10px 10px 0 0 rgba(255, 255, 255, 0.14);
  transform: rotate(-1.2deg);
}
.sk-tape {
  position: absolute;
  z-index: 3;
  width: 110px;
  height: 30px;
  background: rgba(255, 210, 63, 0.75);
}
.sk-tape.is-1 {
  left: -18px;
  top: 16px;
  transform: rotate(-32deg);
}
.sk-tape.is-2 {
  right: -18px;
  bottom: 18px;
  transform: rotate(-32deg);
}
.sk-art {
  position: relative;
  width: 100%;
  height: 100%;
}
.sk-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sk-pencil {
  position: absolute;
  left: 100%;
  top: 40%;
  z-index: 4;
  width: 64px;
  opacity: 0;
  transform: translate(-6px, -58px);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.sk-pencil img {
  display: block;
  width: 100%;
}
.sk-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--dl-line-2);
  color: var(--dl-muted);
  transition: color 0.3s ease;
}
.sk-n {
  font-family: var(--dl-ff-mono);
  font-size: 13px;
}
.sk-txt {
  display: flex;
  flex-direction: column;
}
.sk-txt b {
  color: var(--dl-heading);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.sk-txt small {
  font-size: 13px;
}
.sk-bar {
  grid-column: 2;
  display: block;
  height: 3px;
  background: rgba(var(--dl-heading-rgb), 0.12);
}
.sk-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--dl-sun);
}
.sk-steps li.is-on {
  color: var(--dl-heading);
}
.sk-steps li.is-on .sk-txt b {
  opacity: 1;
}

/*----- 10.5 Sizes -----*/
.size-card {
  height: 100%;
  padding: 34px 30px 30px;
  border: 1px solid var(--dl-line);
}
.size-card h3 {
  margin-bottom: 24px;
}
.sheet-scale,
.tee-scale,
.stk-scale {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 170px;
  margin-bottom: 26px;
}
/* the A-sizes, drawn to scale: each half the area of the one before */
.sh {
  position: relative;
  display: block;
  border: 2px solid #000000;
  background: #FFFFFF;
  box-shadow: 4px 4px 0 0 #000000;
}
.sh i {
  position: absolute;
  left: 8px;
  bottom: 6px;
  font-family: var(--dl-ff-mono);
  font-size: 12px;
  font-style: normal;
}
.sh.is-a2 {
  width: 116px;
  height: 164px;
  background: var(--dl-sun);
}
.sh.is-a3 {
  width: 82px;
  height: 116px;
  background: var(--dl-bubble);
}
.sh.is-a4 {
  width: 58px;
  height: 82px;
}
.ts {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #000000;
  border-radius: 12px 12px 4px 4px;
  background: var(--dl-sky);
  font-family: var(--dl-ff-mono);
  font-size: 12px;
}
.ts.is-s {
  width: 44px;
  height: 52px;
}
.ts.is-m {
  width: 50px;
  height: 60px;
}
.ts.is-l {
  width: 56px;
  height: 68px;
}
.ts.is-xl {
  width: 62px;
  height: 76px;
}
.ts.is-xxl {
  width: 70px;
  height: 86px;
  background: var(--dl-sun);
}
.stk-scale img {
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25));
}
.stk-scale .is-3 {
  width: 34%;
  max-width: 92px;
}
.stk-scale .is-5 {
  width: 54%;
  max-width: 150px;
}

/*----- 10.6 The Drop -----*/
.dl-drop {
  padding: 150px 0;
}
.drop-copy {
  max-width: 560px;
}
.drop-copy h2 {
  margin-bottom: 22px;
}
.drop-copy .dl-lead {
  margin-bottom: 34px;
}

/*----- 10.7 The Sticker Club -----*/
.club-pile {
  position: relative;
  height: 460px;
}
.cp-st {
  width: 170px;
}
.cp-st.is-1 {
  left: 4%;
  top: 6%;
  transform: rotate(-10deg);
}
.cp-st.is-2 {
  left: 38%;
  top: 0;
  width: 150px;
  transform: rotate(8deg);
}
.cp-st.is-3 {
  right: 4%;
  top: 14%;
  transform: rotate(-6deg);
}
.cp-st.is-4 {
  left: 10%;
  bottom: 6%;
  width: 150px;
  transform: rotate(14deg);
}
.cp-st.is-5 {
  left: 40%;
  bottom: 18%;
  width: 140px;
  transform: rotate(-12deg);
}
.cp-st.is-6 {
  right: 8%;
  bottom: 0;
  transform: rotate(6deg);
}
.dl-club h2 {
  margin-bottom: 22px;
}
.club-form {
  max-width: 460px;
  margin: 30px 0;
}
.club-rows {
  max-width: 460px;
}

/*----- 10.8 Before You Order -----*/
.dl-shop-faq h2 {
  margin-bottom: 20px;
}
.shop-dispatch {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 30px;
  color: var(--dl-heading);
  font-family: var(--dl-ff-mono);
  font-size: 14px;
}
.shop-dispatch i {
  color: var(--dl-sun);
}

/*======================
11. Home 03 - Commissions
========================*/
/*----- 11.1 Inline Sticker Hero -----*/
/* the base's interactive-links home: a centred title in heavy and thin caps with character stickers set between
   the words; three slides, arrows at the edges, the base's dashes */
.hero-three {
  position: relative;
  padding: 50px 0 44px;
}
.h3-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 560px;
  padding: 0 130px;
  text-align: center;
}
.h3-slide .hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.h3-title {
  margin-bottom: 40px;
  font-size: clamp(46px, 6.4vw, 104px);
  line-height: 1.06;
}
.h3-title .dl-inline {
  height: 0.9em;
  margin: 0 0.06em;
  vertical-align: -0.1em;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}
.hero-three .slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  font-size: 28px;
  transform: translateY(-50%);
}
.hero-three .hero-prev {
  left: calc(var(--dl-gutter) + 10px);
}
.hero-three .hero-next {
  right: calc(var(--dl-gutter) + 10px);
}
.hero-three .hero-prev:hover {
  transform: translate(-5px, -50%);
}
.hero-three .hero-next:hover {
  transform: translate(5px, -50%);
}
.hero-three .hero-dashes {
  margin-top: 10px;
}

/*----- 11.2 Queue Strip -----*/
.dl-queue-strip {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
}
.qs-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 24px 26px;
}
.qs-cell + .qs-cell {
  border-inline-start: 1px solid var(--dl-line);
}
.qs-cell small {
  color: var(--dl-muted);
  font-size: 12.5px;
}
.qs-cell b {
  color: var(--dl-heading);
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
}

/*----- 11.3 Series Word List -----*/
.word-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 34px;
  max-width: 1200px;
  margin: 0 auto;
}
.wl-item {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 4px;
  color: var(--dl-heading);
  transition: opacity 0.3s ease, color 0.3s ease;
}
.wl-name {
  font-size: clamp(34px, 4.2vw, 68px);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}
.wl-u {
  font-size: clamp(34px, 4.2vw, 68px);
  font-weight: 200;
  line-height: 1.15;
}
.wl-item small {
  flex-basis: 100%;
  color: var(--dl-muted);
  font-size: 12.5px;
}
.word-list.is-hovering .wl-item {
  opacity: 0.3;
}
.word-list.is-hovering .wl-item.is-on {
  opacity: 1;
  color: var(--dl-heading);
}
.wl-follow {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 220px;
  height: auto;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45));
  transition: opacity 0.25s ease;
}
.wl-follow.is-on {
  opacity: 1;
}

/*----- 11.4 The Laptop Lid -----*/
.lid-rows {
  margin: 30px 0 34px;
}
.lid-wrap {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.lid-img {
  display: block;
  width: 100%;
  height: auto;
}
/* the lid's face: the stickers' positions are percentages of it */
.lid-face {
  position: absolute;
  left: 5%;
  top: 4%;
  width: 90%;
  height: 80%;
}
.lid-sticker {
  position: absolute;
  width: 21%;
  height: auto;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35));
}
.lid-stage.is-live .lid-sticker {
  opacity: 0;
}
.lid-stage.is-live .lid-sticker.is-on {
  opacity: 1;
}
.lid-sticker.is-1 {
  left: 6%;
  top: 8%;
  transform: rotate(-12deg);
}
.lid-sticker.is-2 {
  left: 30%;
  top: 4%;
  width: 19%;
  transform: rotate(8deg);
}
.lid-sticker.is-3 {
  left: 56%;
  top: 10%;
  width: 16%;
  transform: rotate(-6deg);
}
.lid-sticker.is-4 {
  left: 76%;
  top: 6%;
  transform: rotate(14deg);
}
.lid-sticker.is-5 {
  left: 10%;
  top: 52%;
  width: 22%;
  transform: rotate(6deg);
}
.lid-sticker.is-6 {
  left: 37%;
  top: 46%;
  width: 18%;
  transform: rotate(-10deg);
}
.lid-sticker.is-7 {
  left: 60%;
  top: 50%;
  width: 18%;
  transform: rotate(9deg);
}
.lid-sticker.is-8 {
  left: 80%;
  top: 54%;
  width: 16%;
  transform: rotate(-14deg);
}
.lid-sticker.is-9 {
  left: 44%;
  top: 26%;
  width: 17%;
  transform: rotate(4deg);
}
.lid-count {
  margin: 18px 0 0;
  color: var(--dl-muted);
  font-size: 13px;
  text-align: center;
}
.lid-count b {
  color: var(--dl-sun);
  font-weight: 500;
}

/*----- 11.5 Tiers -----*/
/* the base's pricing plans: framed columns with a sticker on the corner */
.tier-card {
  position: relative;
  height: 100%;
  padding: 44px 30px 34px;
  border: 1px solid var(--dl-line);
  transition: box-shadow 0.35s var(--dl-ease), transform 0.35s var(--dl-ease);
}
.tier-card.is-pick {
  border-color: var(--dl-heading);
  box-shadow: 8px 8px 0 0 var(--dl-pop);
}
.tier-st {
  position: absolute;
  top: -34px;
  right: 18px;
  width: 78px;
  transform: rotate(10deg);
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
  transition: transform 0.5s var(--dl-boing);
}
.tier-card:hover .tier-st {
  transform: rotate(-6deg) scale(1.08);
}
.tier-note {
  display: block;
  margin-bottom: 8px;
  color: var(--dl-muted);
  font-size: 12.5px;
}
.tier-card h3 {
  margin-bottom: 16px;
}
.tier-price {
  margin-bottom: 22px;
  color: var(--dl-heading);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
}
.tier-price small {
  display: block;
  margin-bottom: 4px;
  color: var(--dl-muted);
  font-family: var(--dl-ff-mono);
  font-size: 12.5px;
  font-weight: 400;
}
.tier-card .dl-rows {
  margin-bottom: 26px;
}
.tier-card .dl-rows li > span {
  font-family: var(--dl-ff-body);
  font-size: 14px;
}

/*----- 11.6 Steps -----*/
.step-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--dl-line);
}
.step {
  position: relative;
  padding: 34px 26px 30px;
}
.step + .step {
  border-inline-start: 1px solid var(--dl-line);
}
.st-n {
  position: absolute;
  top: 18px;
  right: 20px;
  color: var(--dl-muted);
  font-size: 13px;
}
.step .dl-ico {
  width: 70px;
  height: 70px;
  margin-bottom: 22px;
}
.step h3 {
  margin-bottom: 10px;
}
.step p {
  font-size: 15px;
}
.st-when {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--dl-primary);
  color: var(--dl-on-primary);
  font-size: 12px;
}

/*----- 11.7 Voices And The Start Band -----*/
.v3-proof {
  margin-top: 26px;
}
.voices-wrap.is-left {
  max-width: none;
  padding: 0;
}
.v3-arrows {
  display: flex;
  gap: 6px;
  margin-top: 28px;
}
.voices-wrap.is-left .v3-arrows .slider-arrow {
  position: static;
  transform: none;
}
.voices-wrap.is-left .v3-arrows .voice-prev:hover {
  transform: translateX(-5px);
}
.voices-wrap.is-left .v3-arrows .voice-next:hover {
  transform: translateX(5px);
}
.start-title {
  margin-bottom: 22px;
  font-size: clamp(40px, 5.4vw, 88px);
}
.start-title .dl-inline {
  height: 0.9em;
}
.dl-start .dl-lead {
  margin-bottom: 34px;
}
.st-bit.is-1 {
  left: 8%;
  top: 22%;
  width: 70px;
}
.st-bit.is-2 {
  right: 9%;
  bottom: 22%;
  width: 56px;
}

/*======================
12. Inner Pages
========================*/
/*----- 12.1 Sidebar & Widgets -----*/
/* each widget a framed cell, the heading in caps after the base's small square */
.dl-sidebar {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.dl-sidebar .widget {
  padding: 30px 28px;
  border: 1px solid var(--dl-line);
}
.dl-sidebar .widget > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.dl-sidebar .widget > h2::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--dl-pop);
}
.widget-search {
  position: relative;
}
.widget-search input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 56px 0 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: var(--dl-field);
  color: var(--dl-heading);
  font-family: var(--dl-ff-body);
  font-size: 15px;
  outline: 0;
  transition: border-color 0.3s ease;
}
.widget-search input:focus {
  border-bottom-color: var(--dl-pop);
}
.widget-search button {
  position: absolute;
  top: 0;
  right: 0;
  width: 52px;
  height: 52px;
  background: var(--dl-primary);
  color: var(--dl-on-primary);
  transition: background-color 0.3s ease;
}
.widget-search button:hover {
  background: var(--dl-pop);
  color: #FFFFFF;
}
.widget-cats li a,
.widget-cats li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 0;
  border-bottom: 1px solid var(--dl-line-2);
  color: var(--dl-text);
  font-size: 16px;
  text-align: start;
  transition: color 0.3s ease, padding 0.3s var(--dl-ease);
}
.widget-cats li:first-child a,
.widget-cats li:first-child button {
  padding-top: 0;
}
.widget-cats li:last-child a,
.widget-cats li:last-child button {
  border-bottom: 0;
  padding-bottom: 0;
}
.widget-cats li span {
  color: var(--dl-muted);
  font-family: var(--dl-ff-mono);
  font-size: 13px;
}
.widget-cats li a:hover,
.widget-cats li button:hover,
.widget-cats li button.is-active {
  padding-inline-start: 8px;
  color: var(--dl-heading);
}
.side-posts li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--dl-line-2);
}
.side-posts li:first-child {
  padding-top: 0;
}
.side-posts li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.side-posts .thumb {
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  overflow: hidden;
}
.side-posts .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--dl-ease);
}
.side-posts li:hover .thumb img {
  transform: scale(1.08) rotate(-3deg);
}
.side-posts .date {
  display: block;
  margin-bottom: 4px;
  color: var(--dl-muted);
  font-size: 12.5px;
}
.side-posts h3 a:hover {
  color: var(--dl-pop);
}
.widget-tags {
  margin: 0;
  line-height: 1.9;
}
.widget-tags a:hover {
  color: var(--dl-pop);
}
.dl-sidebar .widget.widget-cta {
  position: relative;
  padding: 40px 30px;
  text-align: center;
}
.widget-cta .cta-sticker {
  width: 92px;
  margin: -6px auto 14px;
  transform: rotate(-8deg);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35));
}
.dl-sidebar .widget-cta > h2 {
  display: block;
  margin: 4px 0 12px;
}
.dl-sidebar .widget-cta > h2::before {
  display: none;
}
.widget-cta p {
  margin-bottom: 22px;
  font-size: 15px;
}

/*----- 12.2 Pagination & Pieces -----*/
.dl-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 60px;
}
.dl-pagination a,
.dl-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  border-radius: 23px;
  background: rgba(var(--dl-heading-rgb), 0.08);
  color: var(--dl-heading);
  font-family: var(--dl-ff-mono);
  font-size: 13.5px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.35s var(--dl-boing);
}
.dl-pagination a:hover {
  transform: rotate(-6deg);
}
.dl-pagination .is-current {
  background: var(--dl-primary);
  color: var(--dl-on-primary);
}
.dl-kv {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dl-kv li {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--dl-line-2);
}
.dl-kv li > span {
  flex: 0 0 140px;
  color: var(--dl-muted);
  font-family: var(--dl-ff-mono);
  font-size: 13px;
}
.dl-kv li > b {
  color: var(--dl-heading);
  font-weight: 500;
}
.dl-zoom {
  overflow: hidden;
}
.dl-zoom img {
  transition: transform 0.8s var(--dl-ease);
}
.dl-zoom:hover img {
  transform: scale(1.05);
}

/*======================
13. The Work
========================*/
/*----- 13.1 All Work -----*/
.dl-work .wide-pad,
.dl-more-work .wide-pad {
  padding-inline: 40px;
}
.work-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 46px;
}
.work-search {
  position: relative;
  width: 280px;
}
.work-search input {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 46px 0 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 23px;
  background: rgba(var(--dl-heading-rgb), 0.08);
  color: var(--dl-heading);
  font-family: var(--dl-ff-body);
  font-size: 15px;
}
.work-search input:focus {
  border-bottom-color: var(--dl-pop);
  outline: 0;
}
.work-search i {
  position: absolute;
  right: 18px;
  top: 50%;
  color: var(--dl-pop);
  transform: translateY(-50%);
}
#work-grid > .is-unmatched {
  display: none;
}
.dl-own .own-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
}
.dl-own .dl-lead {
  margin: 0;
}
.own-bit.is-1 {
  right: 30%;
  top: 18px;
  width: 44px;
}

/*----- 13.2 The Series -----*/
.dl-series-band {
  position: relative;
}
.dl-series-band + .dl-series-band.dl-box,
.dl-series-band.dl-box + .dl-series-band {
  margin-top: 0;
}
.sb-num {
  display: block;
  margin-bottom: 6px;
  color: transparent;
  font-size: 110px;
  font-weight: 800;
  line-height: 0.9;
  -webkit-text-stroke: 1.5px var(--dl-heading);
}
.dl-series-band h2 {
  margin-bottom: 18px;
}
.dl-series-band .dl-lead {
  margin-bottom: 26px;
}
.sb-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.sb-tile {
  display: block;
  padding: 10px;
  border: 1px solid var(--dl-line);
}
.sb-tile .dl-plate {
  aspect-ratio: 1 / 1.15;
}
.sb-tile .dl-plate img {
  object-fit: cover;
}
.sb-tile:nth-child(even) {
  margin-top: 40px;
}
.sb-tile:hover .dl-plate img {
  transform: scale(1.06) rotate(-2deg);
}

/*----- 13.3 Piece Details -----*/
.piece-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pi-big {
  grid-column: span 2;
  aspect-ratio: 1 / 0.9;
}
.pi-big img {
  object-fit: contain;
  padding: 6%;
}
.pi-half {
  aspect-ratio: 1 / 1.1;
}
.pi-half img {
  object-fit: cover;
}
.pi-half.is-sticker {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14%;
  background: var(--dl-sun);
}
.pi-half.is-sticker img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.3));
  transition: transform 0.6s var(--dl-boing);
}
.piece-images a:hover img {
  transform: scale(1.03);
}
.pi-half.is-sticker:hover img {
  transform: rotate(-6deg) scale(1.05);
}
.piece-info {
  position: sticky;
  top: 120px;
}
.piece-info h2 {
  margin-bottom: 16px;
}
.wm-rows {
  margin: 26px 0;
}
.wm-rows a:hover,
.wm-shop a:hover b {
  color: var(--dl-pop);
}
.wm-label {
  margin-top: 6px;
}
.wm-shop li a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--dl-line-2);
}
.wm-img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  background: var(--dl-plate-2);
}
.wm-img.is-tee img {
  object-fit: cover;
}
.wm-shop b {
  display: block;
  color: var(--dl-heading);
  font-weight: 600;
  text-transform: uppercase;
}
.wm-shop small {
  color: var(--dl-muted);
  font-size: 12.5px;
}
.piece-share {
  margin-top: 30px;
}
/* previous / all / next, in one framed strip */
.piece-nav {
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
}
.piece-nav > a {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 28px;
  color: var(--dl-heading);
}
.piece-nav > a + a {
  border-inline-start: 1px solid var(--dl-line);
}
.pn-next {
  justify-content: flex-end;
  text-align: end;
}
.pn-all {
  justify-content: center;
  font-size: 20px;
}
.piece-nav .dl-plate {
  flex: 0 0 74px;
  width: 74px;
  height: 74px;
}
.piece-nav small {
  display: block;
  color: var(--dl-muted);
  font-size: 12.5px;
}
.piece-nav b {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}
.piece-nav > a:hover b,
.pn-all:hover {
  color: var(--dl-pop);
}

/*----- 13.4 Piece Details 02 -----*/
.piece-slider {
  position: relative;
}
.ps-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 640px;
}
.ps-slide img {
  max-width: 62%;
  max-height: 86%;
  object-fit: contain;
}
.ps-slide.is-leaf {
  background: var(--dl-leaf);
}
.ps-slide.is-sun {
  background: var(--dl-sun);
}
.ps-slide.is-sun img {
  max-width: 44%;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.3));
}
.ps-slide.is-plate {
  background: #FFFFFF;
}
.ps-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}
.ps-nav .dl-dashes {
  width: auto;
}
.piece-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 50px 0 70px;
  border: 1px solid var(--dl-line);
}
.pf-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 26px;
}
.pf-cell + .pf-cell {
  border-inline-start: 1px solid var(--dl-line);
}
.pf-cell small {
  color: var(--dl-muted);
  font-size: 12.5px;
}
.pf-cell b {
  color: var(--dl-heading);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
}
.pf-cell a:hover {
  color: var(--dl-pop);
}
.piece-stages {
  margin-top: 26px;
}

/*======================
14. Commissions
========================*/
/*----- 14.1 The Builder -----*/
.bd-group {
  position: relative;
  min-width: 0;
  margin: 0 0 22px;
  padding: 34px 34px 32px;
  border: 1px solid var(--dl-line);
}
.bd-legend {
  float: left;
  width: 100%;
  margin: 0 0 20px;
  padding: 0 60px 0 0;
}
.bd-legend + * {
  clear: both;
}
.bd-n {
  position: absolute;
  top: 34px;
  right: 34px;
  color: var(--dl-muted);
  font-size: 13px;
}
.bd-note {
  clear: both;
  max-width: 560px;
  margin-bottom: 20px;
  color: var(--dl-muted);
  font-size: 15px;
}
.dl-qty.is-big button {
  width: 50px;
  height: 50px;
  font-size: 14px;
}
.dl-qty.is-big b {
  min-width: 56px;
  font-size: 26px;
}
.bd-group .row {
  clear: both;
}
/* card chips with a picture: the framing's sticker, the style's own drawing */
.chip-choice.is-card {
  height: 100%;
}
.chip-choice.is-card > span {
  height: 100%;
  gap: 4px;
}
.chip-choice.is-card em {
  margin-top: auto;
  padding-top: 10px;
  color: var(--dl-pop);
  font-size: 12.5px;
  font-style: normal;
}
.chip-choice.is-card input:checked + span em {
  color: var(--dl-pop);
}
.chip-choice.has-art img {
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  object-fit: contain;
  transition: transform 0.4s var(--dl-boing);
}
.chip-choice.has-art:hover img {
  transform: rotate(-8deg) scale(1.08);
}
.chip-choice.is-style .cc-art {
  display: block;
  aspect-ratio: 1 / 1;
  margin-bottom: 12px;
  overflow: hidden;
  background: #FFFFFF;
}
.chip-choice.is-style .cc-art img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}
.chip-choice.is-card:hover > span {
  transform: none;
  border-color: var(--dl-line);
}
.extra-list {
  clear: both;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.extra-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--dl-line-2);
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.extra-row:hover {
  border-color: var(--dl-line);
}
.extra-row input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--dl-pop);
}
.ex-txt {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.ex-txt b {
  color: var(--dl-heading);
  font-weight: 600;
}
.ex-txt small {
  color: var(--dl-muted);
  font-size: 13.5px;
}
.ex-price {
  color: var(--dl-heading);
  font-family: var(--dl-ff-mono);
  font-size: 13.5px;
  white-space: nowrap;
}
.extra-row input:checked ~ .ex-txt b {
  color: var(--dl-pop);
}
/* the quote, riding along */
.quote-panel {
  position: sticky;
  top: 120px;
  padding: 34px 30px;
  border: 2px solid var(--dl-heading);
  box-shadow: 8px 8px 0 0 var(--dl-pop);
}
.qp-total {
  display: block;
  margin: 2px 0 6px;
  color: var(--dl-heading);
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}
.qp-deposit {
  margin-bottom: 22px;
  color: var(--dl-muted);
  font-size: 13px;
}
.qp-deposit b {
  color: var(--dl-heading);
  font-weight: 500;
}
.qp-rows {
  margin-bottom: 22px;
}
.qp-rows li > span {
  font-family: var(--dl-ff-body);
  font-size: 14px;
}
.qp-when {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 18px;
  padding: 16px 18px;
  background: var(--dl-sun);
  color: #000000;
}
.qp-when .dl-mono {
  font-size: 12.5px;
}
.qp-when b {
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
}
.qp-left {
  margin-bottom: 22px;
}
.qp-small {
  margin: 16px 0 0;
  color: var(--dl-muted);
  font-size: 12.5px;
}

/*----- 14.2 The Request Wizard -----*/
.wz-steps {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dl-line);
}
.wz-steps li + li {
  border-top: 1px solid var(--dl-line-2);
}
.wz-steps button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  color: var(--dl-muted);
  font-size: 15px;
  font-weight: 600;
  text-align: start;
  text-transform: uppercase;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.wz-steps button .dl-mono {
  font-size: 12.5px;
  font-weight: 400;
}
.wz-steps button.is-done {
  color: var(--dl-heading);
}
.wz-steps button.is-active {
  background: var(--dl-primary);
  color: var(--dl-on-primary);
}
.wz-count {
  margin-top: 14px;
  color: var(--dl-muted);
  font-size: 13px;
}
.wz-form h3 {
  margin-bottom: 24px;
}
.wz-set {
  min-width: 0;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
.wz-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--dl-line-2);
}
.wz-nav [data-wz-next],
.wz-nav [data-wz-submit] {
  margin-inline-start: auto;
}
.wz-upload {
  margin-bottom: 22px;
}
.up-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 20px;
  background: rgba(var(--dl-heading-rgb), 0.06);
  color: var(--dl-heading);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.up-zone:hover {
  background: rgba(var(--dl-heading-rgb), 0.12);
}
.up-zone i {
  color: var(--dl-pop);
  font-size: 30px;
}
.up-zone b {
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
}
.up-zone small {
  color: var(--dl-muted);
  font-size: 12.5px;
}
.up-count {
  margin: 12px 0 6px;
  color: var(--dl-muted);
  font-size: 13px;
}
.up-count b {
  color: var(--dl-heading);
  font-weight: 500;
}
.up-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--dl-line-2);
  font-size: 14.5px;
}
.up-list i {
  color: var(--dl-pop);
}
.up-list small {
  margin-inline-start: auto;
  color: var(--dl-muted);
}
.wz-brief {
  margin-top: 16px;
  color: var(--dl-muted);
  font-size: 15px;
}
.wz-quote {
  padding: 24px;
  border: 2px solid var(--dl-heading);
}
.wz-quote .qp-total {
  font-size: 46px;
}
.wz-terms {
  margin-top: 24px;
}
.wz-done {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.wz-done h3 {
  margin-bottom: 14px;
}
.wz-done p {
  margin-bottom: 26px;
}
.wz-done .dl-btns {
  justify-content: center;
}

/*----- 14.3 Usage Grid -----*/
.usage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 50px;
}
.usage-col h3 {
  margin-bottom: 16px;
}
.usage-col .dl-rows li > b {
  font-size: 14.5px;
}

/*======================
15. The Studio
========================*/
/*----- 15.1 About Juno -----*/
/* the base's about me: the heavy and thin lines on the left, the portrait with stickers stuck to it on the right */
.about-title {
  margin-bottom: 30px;
  font-size: clamp(42px, 4.8vw, 78px);
  line-height: 1.02;
}
.dl-about .dl-lead {
  max-width: 520px;
}
.about-photo {
  position: relative;
  max-width: 480px;
  margin-inline-start: auto;
}
.ap-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  box-shadow: 14px 14px 0 0 var(--dl-sun);
}
.ap-st.is-1 {
  left: -50px;
  top: 40px;
  width: 120px;
  transform: rotate(-12deg);
}
.ap-st.is-2 {
  right: -40px;
  bottom: 60px;
  width: 130px;
  transform: rotate(10deg);
}
.ap-bit.is-1 {
  right: 30px;
  top: -24px;
  width: 50px;
}
/* the facts in one framed strip */
.dl-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.fact-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 30px 34px;
}
.fact-cell + .fact-cell {
  border-inline-start: 1px solid var(--dl-line);
}
.fact-cell b {
  color: var(--dl-heading);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
}
.fact-cell small {
  color: var(--dl-muted);
  font-size: 13px;
}
.crown-mark {
  width: 60px;
  margin-bottom: 16px;
}
.dl-about-awards h2 {
  margin-bottom: 30px;
}
.tools-rows {
  margin-bottom: 36px;
}
.write-title {
  margin-bottom: 26px;
  font-size: clamp(44px, 5.6vw, 92px);
  line-height: 1.02;
}
.write-mail {
  display: inline-block;
  border-bottom: 4px solid #000000;
  color: #000000;
  font-size: clamp(26px, 3.4vw, 54px);
  font-weight: 700;
  text-transform: uppercase;
}
.write-mail:hover {
  color: #B0124E;
  border-color: #B0124E;
}
.wr-bit.is-1 {
  right: 14%;
  top: 22%;
  width: 90px;
}
.wr-bit.is-2 {
  right: 30%;
  bottom: 20%;
  width: 56px;
}

/*----- 15.2 The Studio -----*/
.day-rows {
  margin-top: 30px;
}
.day-rows li > span {
  flex: 0 0 60px;
}
.day-rows li > b {
  text-align: start;
}
.day-photos {
  position: relative;
  height: 520px;
}
.day-photos img.dp-a,
.day-photos img.dp-b {
  position: absolute;
  object-fit: cover;
  box-shadow: 10px 10px 0 0 rgba(255, 255, 255, 0.14);
}
.dp-a {
  left: 0;
  top: 0;
  width: 70%;
  height: 62%;
}
.dp-b {
  right: 0;
  bottom: 0;
  width: 62%;
  height: 52%;
}
.dp-st {
  left: 52%;
  top: 40%;
  width: 120px;
  transform: rotate(-10deg);
}
.dl-visit h2 {
  margin-bottom: 20px;
}
.dl-visit .dl-status {
  margin: 22px 0 10px;
}
.visit-addr {
  color: var(--dl-heading);
  font-size: 14px;
}
.visit-card {
  padding: 40px;
  border: 1px solid var(--dl-line);
}
.visit-card h3 {
  margin-bottom: 18px;
}
.hours-list.is-big {
  margin-bottom: 28px;
}
.hours-list.is-big li {
  padding: 10px 0;
  border-bottom: 1px solid var(--dl-line-2);
  font-size: 15px;
}

/*----- 15.3 Team Profile -----*/
.profile-photo {
  position: relative;
}
.profile-photo img:first-child {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  object-position: center top;
  box-shadow: 14px 14px 0 0 var(--dl-pop);
}
.pp-st {
  right: -26px;
  bottom: -30px;
  width: 110px;
  transform: rotate(8deg);
}
.dl-profile h2 {
  margin-bottom: 18px;
}
.profile-rows {
  margin: 26px 0 30px;
}
.profile-ask {
  margin-bottom: 30px;
}
.profile-ask h3 {
  margin-bottom: 14px;
}
.profile-ask a:hover {
  color: var(--dl-pop);
}

/*----- 15.4 What I Draw -----*/
.svc-card {
  position: relative;
  height: 100%;
  padding: 40px 32px 32px;
  border: 1px solid var(--dl-line);
}
.svc-n {
  position: absolute;
  top: 22px;
  right: 24px;
  color: var(--dl-muted);
  font-size: 13px;
}
.svc-card .dl-ico {
  width: 78px;
  height: 78px;
  margin-bottom: 26px;
  transition: transform 0.45s var(--dl-boing);
}
.svc-card:hover .dl-ico {
  transform: rotate(-8deg) scale(1.08);
}
.svc-card h3 {
  margin-bottom: 12px;
}
.svc-card h3 a:hover {
  color: var(--dl-pop);
}
.svc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--dl-line-2);
}
.svc-foot .dl-mono {
  color: var(--dl-heading);
  font-size: 13px;
}

/*----- 15.5 Character Design -----*/
.dl-service h2 {
  margin-bottom: 22px;
}
.turn-sheet {
  margin: 40px 0 50px;
  padding: 26px;
  background: #FFFFFF;
}
.turn-sheet h3 {
  margin-bottom: 18px;
  color: #000000;
}
.ts-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ts-view {
  margin: 0;
}
.ts-view img {
  display: block;
  width: 100%;
  height: auto;
}
.ts-view figcaption {
  margin-top: 6px;
  color: rgba(0, 0, 0, 0.62);
  font-size: 12px;
  text-align: center;
}
.svd-cols h3 {
  margin-bottom: 16px;
}
.widget-nav li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  padding: 13px 16px;
  background: rgba(var(--dl-heading-rgb), 0.07);
  color: var(--dl-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-nav li a i {
  color: var(--dl-pop);
  font-size: 12px;
  transition: transform 0.35s var(--dl-boing);
}
.widget-nav li a:hover,
.widget-nav li a.is-current {
  background: var(--dl-primary);
  color: var(--dl-on-primary);
}
.widget-nav li a:hover i {
  transform: translateX(4px);
}

/*======================
16. Shop
========================*/
/*----- 16.1 Shop Grid -----*/
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 42px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--dl-line-2);
}
.toolbar-picks {
  display: flex;
  align-items: center;
  gap: 18px;
}
.toolbar-picks p {
  margin: 0;
  color: var(--dl-muted);
  font-size: 13px;
  white-space: nowrap;
}
.toolbar-picks p b {
  color: var(--dl-heading);
  font-weight: 500;
}
.shop-sort {
  width: 220px;
}
[data-shop-grid] > .is-hidden {
  display: none;
}
.range-ends {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 0;
  color: var(--dl-muted);
  font-size: 12.5px;
}
.range-ends b {
  color: var(--dl-heading);
  font-weight: 500;
}
.tr-price {
  display: block;
  margin-top: 2px;
  color: var(--dl-pop);
  font-size: 15px;
  font-weight: 600;
}
.side-posts .thumb.is-plate {
  background: var(--dl-plate-2);
}
.side-posts .thumb.is-plate img {
  object-fit: contain;
}

/*----- 16.2 Product Page -----*/
.pd-gallery {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
}
.pd-thumbs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pd-thumbs button {
  display: block;
  aspect-ratio: 1 / 1;
  padding: 6px;
  border: 1px solid var(--dl-line-2);
  background: #FFFFFF;
  transition: border-color 0.3s ease, transform 0.35s var(--dl-boing);
}
.pd-thumbs button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pd-thumbs button.is-active {
  border-color: var(--dl-heading);
  box-shadow: 4px 4px 0 0 var(--dl-pop);
}
.pd-thumbs button:hover {
  transform: rotate(-3deg);
}
.pd-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1.08;
  background: var(--dl-plate-2);
}
.pd-frame {
  display: block;
  width: 74%;
  padding: 16px;
  background: #FFFFFF;
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.22);
}
.pd-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.1;
  object-fit: contain;
  background: #F6F6F6;
}
.pd-zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #000000;
  color: #FFFFFF;
  font-size: 14px;
  transition: transform 0.4s var(--dl-boing), background-color 0.3s ease;
}
.pd-main:hover .pd-zoom {
  background: var(--dl-sun);
  color: #000000;
  transform: rotate(-10deg) scale(1.08);
}
.pd-info {
  padding-top: 6px;
}
.pd-kind {
  display: block;
  margin-bottom: 12px;
  color: var(--dl-muted);
  font-size: 13px;
}
.pd-info h2 {
  margin-bottom: 14px;
}
.pd-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.pd-rating a {
  color: var(--dl-muted);
  font-size: 13px;
}
.pd-price {
  margin-bottom: 20px;
}
.pd-price b {
  color: var(--dl-heading);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}
.pd-price .dl-mono {
  color: var(--dl-muted);
  font-size: 13px;
}
.pd-info .dl-label {
  margin-top: 26px;
}
.pd-info .size-chips {
  gap: 8px;
}
.pd-info .size-chip {
  min-width: 52px;
  height: 42px;
  border-radius: 22px;
  font-size: 13px;
}
.pd-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}
.pd-wish {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(var(--dl-heading-rgb), 0.08);
  color: var(--dl-heading);
  font-size: 17px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--dl-boing);
}
.pd-wish:hover {
  transform: rotate(-10deg);
}
.pd-wish.is-on {
  background: var(--dl-pop);
  color: #FFFFFF;
}
.pd-line {
  margin: 18px 0 26px;
  color: var(--dl-muted);
  font-size: 13px;
}
.pd-meta a:hover {
  color: var(--dl-pop);
}
.dl-qty input[type="number"] {
  -moz-appearance: textfield;
}
.dl-qty input::-webkit-outer-spin-button,
.dl-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* the tee page: the big shot and two small plates under it; the info rides along */
.pd-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pd-shot {
  display: block;
  overflow: hidden;
  background: #FFFFFF;
}
.pd-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--dl-ease);
}
.pd-shot:hover img {
  transform: scale(1.04);
}
.pd-shot.is-big {
  grid-column: span 2;
  aspect-ratio: 1 / 0.94;
}
.pd-shot.is-plate,
.pd-shot.is-sticker {
  aspect-ratio: 1 / 1;
}
.pd-shot.is-sticker {
  padding: 16%;
  background: var(--dl-bubble);
}
.pd-shot.is-sticker img {
  object-fit: contain;
}
.pd-sticky {
  position: sticky;
  top: 120px;
}
.pd-guide {
  margin-top: 30px;
}
.pd-tabs {
  margin-top: 90px;
}
.pd-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.pd-tablist [role="tab"] {
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  background: rgba(var(--dl-heading-rgb), 0.08);
  color: var(--dl-heading);
  font-size: 14.5px;
  font-weight: 600;
  text-transform: uppercase;
}
.pd-tablist [role="tab"].is-active {
  background: var(--dl-primary);
  color: var(--dl-on-primary);
}
.pd-pane {
  max-width: 860px;
}
.review-list .review {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--dl-line-2);
}
.rv-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rv-head b {
  color: var(--dl-heading);
  font-weight: 600;
  text-transform: uppercase;
}
.review .dl-mono {
  display: block;
  margin: 2px 0 8px;
  color: var(--dl-muted);
  font-size: 12.5px;
}

/*----- 16.3 Bag, Checkout & Wishlist -----*/
.bag-h {
  margin-bottom: 18px;
}
.bag-line {
  display: grid;
  grid-template-columns: 96px 1fr auto auto 40px;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--dl-line-2);
}
.bag-line:first-child {
  border-top: 1px solid var(--dl-line-2);
}
.bag-lines.is-wish .bag-line {
  grid-template-columns: 96px 1fr auto 40px;
}
.bl-img {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--dl-plate-2);
}
.bl-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bl-img.is-tee img {
  object-fit: cover;
}
.bl-img.is-print,
.bl-img.is-sticker {
  padding: 10px;
}
.bl-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bl-cat {
  color: var(--dl-muted);
  font-size: 12.5px;
}
.bl-body h3 a:hover {
  color: var(--dl-pop);
}
.bl-price {
  color: var(--dl-muted);
  font-size: 14px;
}
.bl-total {
  min-width: 90px;
  color: var(--dl-heading);
  font-size: 18px;
  font-weight: 600;
  text-align: end;
}
.bl-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(var(--dl-heading-rgb), 0.08);
  color: var(--dl-heading);
  font-size: 13px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--dl-boing);
}
.bl-remove:hover {
  background: var(--dl-pop);
  color: #FFFFFF;
  transform: rotate(90deg);
}
.cart-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}
.coupon-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.coupon-form input {
  width: 220px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: var(--dl-field);
  color: var(--dl-heading);
  font-family: var(--dl-ff-mono);
  font-size: 14px;
}
.coupon-form input:focus {
  border-bottom-color: var(--dl-pop);
  outline: 0;
}
.coupon-form .form-status {
  flex-basis: 100%;
  margin: 4px 0 0;
}
.order-summary {
  position: sticky;
  top: 120px;
}
.order-summary h2 {
  margin-bottom: 22px;
}
.ship-meter {
  height: 6px;
  margin: 4px 0 10px;
  background: rgba(var(--dl-heading-rgb), 0.1);
}
.ship-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--dl-sun);
  transition: width 0.5s var(--dl-ease);
}
.ship-note {
  margin-bottom: 20px;
  color: var(--dl-muted);
  font-size: 14px;
}
.ship-note b {
  color: var(--dl-heading);
}
.sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 20px 0 24px;
  color: var(--dl-heading);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
}
.sum-total b {
  font-size: 32px;
  font-weight: 700;
}
.sum-hint {
  margin: 16px 0 0;
  color: var(--dl-muted);
  font-size: 13px;
}
.sum-hint b {
  color: var(--dl-heading);
  font-weight: 500;
}
.sum-hint i {
  margin-inline-end: 6px;
  color: var(--dl-sun);
}
.cart-empty,
.order-done {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.ce-sticker,
.done-sticker {
  width: 120px;
  margin-bottom: 18px;
  transform: rotate(-8deg);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.3));
}
.cart-empty h2,
.cart-empty h3,
.order-done h2 {
  margin-bottom: 14px;
}
.cart-empty p,
.order-done p {
  margin-bottom: 26px;
}
.order-done .dl-btns {
  justify-content: center;
}
.order-lines li {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--dl-line-2);
}
.ol-img {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--dl-plate-2);
}
.ol-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ol-img.is-tee img {
  object-fit: cover;
}
.ol-img b {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--dl-sun);
  color: #000000;
  font-family: var(--dl-ff-mono);
  font-size: 11.5px;
  line-height: 22px;
  text-align: center;
}
.ol-name {
  display: flex;
  flex-direction: column;
  color: var(--dl-heading);
  font-size: 15px;
  font-weight: 500;
}
.ol-name small {
  color: var(--dl-muted);
  font-family: var(--dl-ff-mono);
  font-size: 12px;
}
.order-lines li > b {
  color: var(--dl-heading);
  font-weight: 600;
}
.co-ship,
.co-pay {
  margin: 30px 0 0;
  padding: 0;
  border: 0;
}
.co-ship legend,
.co-pay legend {
  margin-bottom: 16px;
}
.ship-choice {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
  padding: 16px 18px;
  border: 1px solid var(--dl-line-2);
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.ship-choice input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--dl-pop);
}
.sc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sc-body b {
  color: var(--dl-heading);
  font-weight: 600;
}
.sc-body small {
  color: var(--dl-muted);
  font-size: 13px;
}
.sc-price {
  color: var(--dl-heading);
}
.ship-choice > i {
  color: var(--dl-pop);
  font-size: 20px;
}
.ship-choice input:checked + .sc-body b {
  color: var(--dl-pop);
}
.co-terms {
  margin: 22px 0;
}

/*======================
17. Notes & Account
========================*/
/*----- 17.1 Process Notes List -----*/
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.post-thumb {
  position: relative;
  display: block;
  overflow: hidden;
}
.post-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.9s var(--dl-ease);
}
.blog-post:hover .post-thumb img {
  transform: scale(1.04);
}
.post-date {
  position: absolute;
  left: 26px;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 82px;
  background: var(--dl-sun);
  color: #000000;
  font-family: var(--dl-ff-mono);
  font-size: 12.5px;
  line-height: 1.2;
}
.post-date b {
  font-family: var(--dl-ff-body);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}
.post-thumb.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}
.post-thumb.is-video .dl-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin: -52px 0 0 -52px;
}
.post-gallery .swiper-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.mini-nav {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 4;
  display: flex;
  gap: 6px;
}
.mini-nav .slider-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #000000;
  color: #FFFFFF;
  font-size: 15px;
}
.bp-body {
  padding-top: 26px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-bottom: 14px;
  color: var(--dl-muted);
  font-family: var(--dl-ff-mono);
  font-size: 13px;
}
.post-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.post-meta .dl-face {
  width: 32px;
  height: 32px;
}
.post-meta a:hover {
  color: var(--dl-pop);
}
.blog-post h3 {
  margin-bottom: 14px;
}
.blog-post h3 a:hover {
  color: var(--dl-pop);
}
.blog-post p {
  margin-bottom: 22px;
}
.blog-post.is-quote {
  position: relative;
  padding: 50px 46px;
  border: 1px solid var(--dl-line);
  box-shadow: 8px 8px 0 0 var(--dl-pop);
}
.bp-glyph {
  position: absolute;
  right: 40px;
  top: 34px;
  color: var(--dl-sun);
  font-size: 54px;
}
.blog-post.is-quote .pcd-meta::before {
  display: none;
}
.nc-by {
  display: block;
  margin-top: 10px;
  color: var(--dl-muted);
  font-size: 13px;
}

/*----- 17.2 Note Details -----*/
.article-hero {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}
.article-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-body > h2 {
  margin-bottom: 22px;
}
.article-body > h3 {
  margin: 40px 0 16px;
}
.article-quote {
  position: relative;
  margin: 36px 0;
  padding: 34px 40px;
  background: var(--dl-sun);
  color: #000000;
}
.article-quote p {
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
}
.article-quote cite {
  font-family: var(--dl-ff-mono);
  font-size: 13px;
  font-style: normal;
}
.article-pair {
  margin: 30px 0;
}
.article-pair img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.article-rows {
  margin: 24px 0;
}
.article-rows > div {
  display: flex;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--dl-line-2);
}
.article-rows dt {
  flex: 0 0 90px;
  color: var(--dl-heading);
  font-weight: 600;
  text-transform: uppercase;
}
.article-rows dd {
  margin: 0;
}
.article-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 34px 0;
  padding: 22px 26px;
}
.ab-kit {
  display: flex;
}
.ab-kit img {
  width: 58px;
  height: 58px;
  margin-inline-start: -14px;
  object-fit: contain;
}
.ab-kit img:first-child {
  margin-inline-start: 0;
}
.ab-txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.5;
}
.ab-txt b {
  color: var(--dl-heading);
  font-weight: 600;
  text-transform: uppercase;
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 34px 0;
  padding: 20px 0;
  border-top: 1px solid var(--dl-line-2);
  border-bottom: 1px solid var(--dl-line-2);
}
.share-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--dl-heading-rgb), 0.1);
  color: var(--dl-heading);
}
.share-copy.is-done {
  background: var(--dl-ok);
  color: #000000;
}
.author-box {
  display: flex;
  gap: 24px;
  margin-bottom: 40px;
  padding: 30px;
  border: 1px solid var(--dl-line);
}
.author-box img {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.author-box .dl-eyebrow {
  margin-bottom: 6px;
}
.author-box h3 {
  margin-bottom: 8px;
}
.post-nav {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  margin-bottom: 50px;
  border: 1px solid var(--dl-line);
}
.post-nav > a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  color: var(--dl-heading);
}
.post-nav > a + a {
  border-inline-start: 1px solid var(--dl-line);
}
.post-nav .pn-next {
  justify-content: flex-end;
  text-align: end;
}
.post-nav .pn-all {
  justify-content: center;
}
.post-nav small {
  display: block;
  color: var(--dl-muted);
  font-size: 12px;
}
.post-nav b {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}
.post-nav > a:hover b,
.post-nav .pn-all:hover {
  color: var(--dl-pop);
}
.comment-list {
  margin: 20px 0 40px;
}
.comment-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--dl-line-2);
}
.comment-list li > img {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.comment-list li > div {
  flex: 1;
  min-width: 220px;
}
.comment-list b {
  display: block;
  color: var(--dl-heading);
  font-weight: 600;
  text-transform: uppercase;
}
.comment-list span {
  color: var(--dl-muted);
  font-size: 12.5px;
}
.comment-list p {
  margin: 8px 0 10px;
}
.comment-list ul {
  flex-basis: 100%;
  padding-inline-start: 76px;
}
.comment-list ul li {
  border-bottom: 0;
}
.comment-form h3 {
  margin-bottom: 22px;
}

/*----- 17.3 Account Pages -----*/
.account-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  max-width: 1080px;
  margin: 0 auto;
  border: 1px solid var(--dl-line);
}
.account-side {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.86);
  --dl-heading: #FFFFFF;
  --dl-heading-rgb: 255, 255, 255;
  --dl-muted: rgba(255, 255, 255, 0.72);
}
.as-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-side::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.82) 100%);
}
.as-seal {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 66px;
  transform: rotate(-8deg);
}
.as-copy {
  padding: 40px;
}
.as-copy h2 {
  margin-bottom: 14px;
  font-size: clamp(30px, 2.6vw, 42px);
}
.as-copy p {
  margin-bottom: 22px;
}
.account-form {
  padding: 50px 46px;
  background: var(--dl-bg);
}
.account-form .dl-eyebrow {
  margin-bottom: 10px;
}
.account-form h3 {
  margin-bottom: 26px;
}
.account-form .dl-field > .pass-toggle {
  position: absolute;
  right: 12px;
  top: 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--dl-pop);
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  font-size: 15px;
}
.account-row a:hover {
  color: var(--dl-pop);
}
.account-switch {
  margin: 22px 0 0;
  color: var(--dl-muted);
  font-size: 15px;
  text-align: center;
}
.account-switch a {
  color: var(--dl-heading);
  font-weight: 600;
}
.account-switch a:hover {
  color: var(--dl-pop);
}
.account-terms {
  margin-bottom: 22px;
}
.pass-meter {
  height: 4px;
  margin-top: 10px;
  background: rgba(var(--dl-heading-rgb), 0.1);
}
.pass-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--dl-tomato);
  transition: width 0.4s var(--dl-ease), background-color 0.3s ease;
}
.pass-meter span[data-score="3"],
.pass-meter span[data-score="4"] {
  background: var(--dl-ok);
}
.pass-hint {
  display: block;
  margin-top: 6px;
  color: var(--dl-muted);
  font-family: var(--dl-ff-mono);
  font-size: 12px;
}

/*----- 17.4 Coming Soon & 404 -----*/
.dl-bare-page {
  min-height: 100vh;
}
.bare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.bare-photo-side {
  position: relative;
  overflow: hidden;
}
.bare-photo-side .bare-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bare-doodle {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 46%;
  max-width: 340px;
  transform: translateX(-50%) rotate(-4deg);
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45));
}
.bare-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: var(--dl-gutter);
  padding: 70px 70px;
}
.bare-logo {
  margin-bottom: 50px;
}
.bare-logo img {
  height: 44px;
}
.bare-inner h1 {
  margin-bottom: 22px;
}
.bare-inner .dl-lead {
  max-width: 520px;
  margin-bottom: 34px;
}
.error-code {
  display: block;
  margin-bottom: 8px;
  color: var(--dl-pop);
  font-size: clamp(90px, 10vw, 170px);
  font-weight: 200;
  line-height: 0.9;
}
.launch-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 520px;
  margin-bottom: 34px;
  border: 1px solid var(--dl-line);
}
.launch-count span {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 8px;
  color: var(--dl-muted);
  font-family: var(--dl-ff-mono);
  font-size: 12px;
}
.launch-count span + span {
  border-inline-start: 1px solid var(--dl-line);
}
.launch-count b {
  color: var(--dl-heading);
  font-family: var(--dl-ff-body);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
}
.launch-count .is-pop {
  background: var(--dl-pop);
  color: var(--dl-on-pop);
}
.launch-count .is-pop b {
  color: var(--dl-on-pop);
}
.bare-news {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 520px;
  margin-bottom: 30px;
}
.bare-news input {
  flex: 1 1 240px;
  height: 54px;
  padding: 0 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: var(--dl-field);
  color: var(--dl-heading);
  font-family: var(--dl-ff-body);
  font-size: 15px;
}
.bare-news input:focus {
  border-bottom-color: var(--dl-pop);
  outline: 0;
}
.bare-news .form-status {
  flex-basis: 100%;
  margin: 0;
}
.bare-line {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  color: var(--dl-heading);
}
.bare-line .dl-ico {
  width: 50px;
  height: 50px;
}
.bare-line small {
  display: block;
  color: var(--dl-muted);
  font-size: 12px;
}
.bare-line b {
  font-size: 20px;
  font-weight: 700;
}

/*======================
18. Contact & Dashboard
========================*/
/*----- 18.1 Contact -----*/
/* four ways in, one framed strip */
.dl-contact-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--dl-gutter);
}
.ci-cell {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 28px;
}
.ci-cell + .ci-cell {
  border-inline-start: 1px solid var(--dl-line);
}
.ci-cell .dl-ico {
  width: 58px;
  height: 58px;
}
.ci-txt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ci-txt small {
  color: var(--dl-muted);
  font-size: 12.5px;
}
.ci-txt b {
  color: var(--dl-heading);
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ci-txt b a:hover {
  color: var(--dl-pop);
}
.reach-title {
  margin-bottom: 22px;
  font-size: clamp(40px, 4.4vw, 72px);
}
.dl-reach .dl-lead {
  margin-bottom: 30px;
}
.contact-map {
  border: 1px solid var(--dl-line);
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}
.contact-hours {
  margin-top: 28px;
}
.contact-hours h3 {
  margin-bottom: 12px;
}
.dl-contact-form h2 {
  margin-bottom: 26px;
}

/*----- 18.2 My Account -----*/
.dash-who {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.dash-who img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.dash-who h2 {
  margin: 0 0 2px;
}
.dash-who span {
  color: var(--dl-muted);
  font-size: 12.5px;
}
.dash-counts {
  margin-bottom: 24px;
}
.dash-tabs {
  display: grid;
  gap: 6px;
  margin-bottom: 24px;
}
.dash-tabs button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(var(--dl-heading-rgb), 0.07);
  color: var(--dl-heading);
  font-size: 15px;
  font-weight: 600;
  text-align: start;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dash-tabs .dl-ico {
  width: 38px;
  height: 38px;
}
.dash-tabs button.is-active {
  background: var(--dl-primary);
  color: var(--dl-on-primary);
}
.dash-panel > h2 {
  margin-bottom: 18px;
}
.dash-live {
  margin-bottom: 20px;
}
.acc-requests,
.acc-orders {
  display: grid;
  gap: 8px;
  margin-bottom: 30px;
}
.ab-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 14px;
  border: 1px solid var(--dl-line-2);
}
.ab-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background: var(--dl-sun);
}
.ab-mark img {
  width: 44px;
}
.ab-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.ab-main > span:last-child {
  color: var(--dl-muted);
  font-family: var(--dl-ff-mono);
  font-size: 12.5px;
}
.ab-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--dl-heading);
  font-size: 18px;
  font-weight: 600;
}
.ab-price small {
  color: var(--dl-muted);
  font-size: 11.5px;
  font-weight: 400;
}
.acc-orders li {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr auto;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--dl-line-2);
  font-family: var(--dl-ff-mono);
  font-size: 13px;
}
.acc-orders li b {
  color: var(--dl-heading);
  font-weight: 500;
}
.acc-empty {
  margin-bottom: 26px;
  padding: 22px;
  border: 1px solid var(--dl-line-2);
  color: var(--dl-muted);
}
.account-form.is-plain {
  padding: 0;
  background: transparent;
}
.faq-group + .faq-group {
  margin-top: 60px;
}
.faq-group .dl-accordion {
  margin-top: 22px;
}
.faq-side .widget-search .fs-ico {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: var(--dl-pop);
}

/*======================
19. Subheader
========================*/
/* inner pages: a framed box under the bar - the Riso Grain printing behind it (or a wide illustration under a wash),
   the breadcrumb in mono, the heavy-and-thin caps title, a short lead and three confetti stickers */
.dl-subheader {
  margin-top: 22px;
  padding: 110px 0 104px;
  text-align: center;
}
.dl-subheader.dl-photo-band {
  padding: 150px 0 140px;
}
.sub-copy {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}
.sub-copy h1 {
  margin: 0 0 22px;
}
.sub-copy .dl-lead {
  max-width: 620px;
  margin: 0 auto;
}
.dl-crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  color: var(--dl-heading);
  font-family: var(--dl-ff-mono);
  font-size: 13px;
}
.dl-crumbs a:hover {
  color: var(--dl-pop);
}
.dl-crumbs i {
  color: var(--dl-pop);
  font-size: 9px;
}
.dl-crumbs span {
  color: var(--dl-muted);
}
.sub-bit {
  width: 48px;
}
.sub-bit.is-1 {
  left: 9%;
  top: 26%;
}
.sub-bit.is-2 {
  right: 11%;
  top: 18%;
  width: 62px;
}
.sub-bit.is-3 {
  right: 22%;
  bottom: 14%;
  width: 34px;
}

/*======================
20. Footer
========================*/
/* the base's footer: one framed box at the foot of the page, cut into cells by hairlines; here the first cell holds
   Doodle walking in a flip-book, then the studio, the open hours (live), the links and the letter */
.dl-footer-wrap {
  padding-bottom: var(--dl-gutter);
}
.dl-footer {
  color: var(--dl-text);
}
.footer-main {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 0.85fr 1.25fr;
}
.fcell {
  padding: 44px 36px;
}
.fcell + .fcell {
  border-inline-start: 1px solid var(--dl-line);
}
.fcell h2 {
  margin-bottom: 18px;
}
.fcell p {
  font-size: 15px;
}
.fcell .dl-mono {
  color: var(--dl-heading);
  font-size: 13.5px;
  line-height: 1.75;
}
.fcell .dl-mono a:hover {
  color: var(--dl-pop);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
/* the flip-book: a little pad of pages; each frame of the walk drawn on the top page */
.footer-flip {
  position: relative;
  width: 190px;
  height: 200px;
}
.dl-flipbook {
  display: block;
  width: 100%;
  height: 100%;
}
.footer-word img {
  height: 34px;
  width: auto;
}
.footer-hours .dl-status {
  margin-bottom: 14px;
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 0;
  font-family: var(--dl-ff-mono);
  font-size: 13px;
}
.hours-list li span {
  color: var(--dl-muted);
}
.hours-list li b {
  color: var(--dl-heading);
  font-weight: 400;
}
.hours-list li.is-today span,
.hours-list li.is-today b {
  color: var(--dl-sun);
}
.footer-links li {
  margin-bottom: 8px;
}
.footer-links a {
  color: var(--dl-heading);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
}
.footer-links a:hover {
  color: var(--dl-sun);
}
.footer-news .dl-newsletter {
  margin-top: 14px;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
  padding: 20px 36px;
  border-top: 1px solid var(--dl-line);
  font-size: 14px;
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom a:hover {
  color: var(--dl-sun);
}
.footer-bottom .dl-mono {
  color: var(--dl-heading);
  font-size: 13px;
}
.footer-bottom .dl-mono i {
  margin-inline-end: 6px;
  color: var(--dl-sun);
}
.footer-legal {
  display: flex;
  gap: 24px;
}
/* beside the side panel the footer is narrower: three cells a row from the start */