/* The product stays on one warm worktable through selection and branding. */
.worktable-heading {
  max-width: 1360px;
  margin: 0 auto 30px;
  padding: 0 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
}
.worktable-heading > .handwritten { font-size: 32px; }
.worktable-heading > p:last-child { font-size: 14px; color: var(--muted); }
.worktable-heading strong { color: var(--ink); font-weight: 500; }
.worktable-heading a { display: inline-block; margin-left: 22px; border-bottom: 1px solid; }
.selection-worktable, .branding-worktable {
  height: auto;
  min-height: 940px;
  padding: 110px 5% 50px;
  background: #f8f3eb;
  overflow: clip;
}
.branding-worktable { background: #fcf8f2; border-top: 1px solid #e6dace; padding-bottom: 65px; }
.worktable-layout {
  max-width: 1360px;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
  gap: clamp(35px, 5vw, 90px);
  align-items: center;
}
.worktable-layout > .chapter-panel {
  position: relative;
  inset: auto;
  transform: none;
  width: 100%;
  box-shadow: 0 5px 12px #5e3e2110;
}
.worktable-layout .chapter-panel h2 {
  font-size: clamp(30px, 2.6vw, 38px);
  padding: 25px 28px;
  font-weight: 450;
}
.worktable-layout .chapter-list button {
  padding: 16px 28px;
  min-height: 76px;
  font-size: 18px;
}
.worktable-layout .chapter-list small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 4px;
}
.worktable-layout .chapter-list button[aria-pressed=true] {
  color: #386343;
  background: #f0f1e8;
  box-shadow: inset 4px 0 #386343;
}
.selected-style-copy { padding: 22px 28px 8px; font-size: 14px; color: #716455; }
.selected-style-copy > p { min-height: 63px; line-height: 1.5; }
.selected-style-copy dl { margin: 18px 0 0; }
.selected-style-copy dl > div { border-top: 1px solid var(--line); padding: 10px 0; }
.selected-style-copy dt { color: var(--ink); font-size: 12px; }
.selected-style-copy dd { margin: 3px 0 0; font-size: 12px; }
.selection-actions { padding: 10px 28px 28px; display: flex; align-items: flex-start; flex-direction: column; gap: 17px; }
.selection-actions .button { font-size: 17px; padding: 10px 16px; }
.selection-actions .text-link { font-size: 13px; }
.piece-stage { position: relative; align-self: stretch; display: flex; flex-direction: column; min-height: 680px; }
.piece-stage-title { text-align: center; padding-top: 15px; }
.piece-stage-title > span { font-size: 12px; color: var(--muted); }
.piece-stage-title h3 { font-size: 31px; margin: 4px 0 6px; }
.piece-stage-title p { font-size: 11px; color: var(--muted); }
.piece-view { position: relative; flex: 1; min-height: 500px; }
.piece-full-image { position: absolute; inset: 1% 0 5%; width: 100%; height: 94%; border: 0; padding: 0; }
.piece-full-image img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(8px 18px 10px #4e2d1417); transition: transform .45s; }
.piece-full-image:hover img { transform: translateY(-7px); }
.inspect-invitation { position: absolute; right: 4%; bottom: 10%; display: flex; align-items: center; gap: 10px; border: 1px solid #b3a28e; border-radius: 30px; background: var(--paper); font-size: 12px; padding: 7px 13px 7px 7px; box-shadow: 0 3px 12px #5b371713; }
.inspect-invitation > span:first-child { display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; width: 27px; height: 27px; font-size: 18px; }
.piece-annotation { position: absolute; left: 0; bottom: 3%; transform: rotate(-5deg); font-size: 27px; pointer-events: none; }
.piece-stage-caption { font-size: 11px; color: var(--muted); text-align: center; margin: 20px 0 5px; }
.table-endnote { max-width: 1336px; margin: 42px auto 0; padding-top: 20px; border-top: 1px solid #ddcdbb; display: flex; justify-content: space-between; align-items: center; gap: 25px; font-size: 12px; color: #877966; }
.table-endnote .text-link { font-size: 12px; white-space: nowrap; }
.selection-status:empty { display: none; }
.selection-worktable .selection-status { position: static; max-width: 1336px; margin: 15px auto 0; background: none; }
.piece-stage[data-view=detail] .piece-view { display: none; }
.piece-inspection { margin-top: 22px; flex: 1; }
.back-to-whole { font-size: 12px; margin: 0 0 14px; }
.inspection-image { height: 360px; width: 100%; border-radius: 9px; overflow: hidden; background: #e8d1b4; }
.inspection-image img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 55%; transition: transform .5s; }
.inspection-image[data-focus=stitching] img { transform: scale(1.45); transform-origin: 20% 80%; }
.inspection-image[data-focus=hardware] img { transform: scale(1.35); transform-origin: 65% 25%; }
.inspection-footer { display: flex; align-items: center; gap: 18px; padding: 14px 0; }
.whole-thumbnail { width: 76px; height: 76px; flex-shrink: 0; background: var(--paper); border: 1px solid #d9c9b6; border-radius: 5px; padding: 4px; }
.whole-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.inspection-footer p { font-size: 12px; line-height: 1.55; color: #77644e; max-width: 440px; }
.detail-views { display: flex; gap: 10px; flex-wrap: wrap; }
.detail-views button { font-size: 12px; padding: 6px 10px; border: 1px solid #b9a68e; border-radius: 5px; }
.detail-views button[aria-pressed=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.piece-stage[data-has-detail=false] .inspection-image { background: transparent; height: 330px; }
.piece-stage[data-has-detail=false] .inspection-image img { object-fit: contain; transform: none; }
.piece-stage[data-has-detail=false] .detail-views { display: none; }
.branding-worktable .worktable-layout { align-items: start; }
.branding-worktable .brand-controls { padding: 22px 28px 25px; }
.branding-worktable .brand-controls .quiet { font-size: 12px; line-height: 1.55; }
#brand-logo-fields > label { display: block; font-size: 12px; margin-bottom: 7px; }
#brand-logo-fields > label > span { color: var(--muted); }
#brand-logo-fields > input { width: 100%; background: var(--paper); border: 1px solid #c8b9a5; border-radius: 5px; padding: 10px 12px; font-size: 15px; }
.branding-worktable .brand-controls > .button { margin-top: 20px; font-size: 17px; }
.branding-scope { margin-top: 14px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.branding-worktable .brand-workspace { position: relative; inset: auto; min-height: 650px; width: 100%; }
.branding-worktable .brand-product { inset: 5% 0 14%; transform: none; transition: transform .55s; }
.branding-worktable .brand-product img { filter: drop-shadow(8px 18px 10px #4e2d1417); }
.branding-worktable .package-box { width: 42%; height: 46%; top: 7%; right: 3%; box-shadow: inset 0 0 0 10px #e8cda7, 9px 13px 20px #5d38161a; }
.branding-worktable .package-box > small { font-size: 10px; text-align: center; }
.branding-worktable .brand-tag { bottom: 27%; right: 3%; width: 160px; min-height: 175px; padding: 25px 15px 18px; }
.branding-worktable .brand-tag strong { font-size: 22px; }
.branding-worktable .brand-tag > span:last-child { font-size: 9px; }
.branding-worktable .brand-workspace[data-mode=packaging] .brand-tag { opacity: 0; visibility: hidden; }
.branding-worktable .brand-workspace:is([data-mode=packaging],[data-mode=both]) .brand-product { transform: translate(-7%, 7%) scale(.84); }
.brand-context { position: absolute; left: 5%; right: 5%; bottom: 0; text-align: center; }
.brand-context > span { display: block; font-size: 16px; }
.brand-context > .handwritten { font-size: 30px; margin-bottom: 9px; }
.brand-context > small { display: block; font-size: 10px; color: var(--muted); margin-top: 12px; }
.next-conversation { display: flex; width: fit-content; margin: 35px auto 0; font-size: 14px; }
.proposal-conversation { max-width: 1360px; gap: 80px; padding: 75px 5% 115px; }
.proposal-sheet { background: #fffdf9; padding: 35px 32px; transform: rotate(-3deg); box-shadow: 2px 12px 30px #5b361218; border: 1px solid #e4d8c8; }
.proposal-heading { border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.proposal-heading .handwritten { font-size: 26px; }
.proposal-heading h3 { font-size: 35px; margin: 15px 0 6px; }
.proposal-count { font-size: 12px; color: var(--muted); }
.proposal-empty { padding: 35px 0; font-size: 15px; color: #897967; line-height: 1.7; }
.proposal-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 16px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.proposal-item img { width: 80px; height: 80px; object-fit: contain; }
.proposal-item strong { display: block; font-family: var(--title); font-size: 20px; font-weight: 450; }
.proposal-item span { font-size: 12px; color: var(--muted); }
.proposal-item button { border: 0; border-bottom: 1px solid; padding: 2px; font-size: 11px; }
.proposal-facts { margin: 20px 0; font-size: 12px; }
.proposal-facts > div { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; }
.proposal-facts dt { color: var(--muted); }
.proposal-facts dd { margin: 0; text-align: right; max-width: 60%; }
.proposal-sheet > .text-link { font-size: 12px; }
.proposal-conversation .conversation-copy h2 { font-size: clamp(43px, 4.5vw, 65px); }
.proposal-conversation .conversation-copy > p:nth-of-type(2) { font-size: 15px; line-height: 1.7; max-width: 400px; margin-bottom: 30px; color: #897967; }
.proposal-conversation .conversation-copy > .button { font-size: 18px; }

@media (min-width: 1700px) {
  .selection-worktable, .branding-worktable { padding-block: 140px 80px; min-height: 1050px; }
  .worktable-layout { grid-template-columns: 440px minmax(0, 1fr); }
  .piece-stage, .branding-worktable .brand-workspace { min-height: 720px; }
}
@media (max-width: 1050px) and (min-width: 761px) {
  .worktable-layout { grid-template-columns: 340px minmax(0,1fr); gap: 20px; }
  .worktable-heading > .handwritten { font-size: 27px; }
  .worktable-heading > p:last-child { max-width: 290px; font-size: 12px; }
  .worktable-layout .chapter-panel h2 { font-size: 30px; }
  .piece-stage { min-height: 650px; }
  .piece-stage-title h3 { font-size: 26px; }
  .piece-view { min-height: 420px; }
  .inspection-image { height: 300px; }
  .proposal-conversation { gap: 45px; }
}
@media (max-width: 760px) {
  .floating-selection { display: none; }
  .selection-worktable, .branding-worktable { min-height: 0; height: auto; padding: 100px 22px 45px; }
  .worktable-heading { display: block; margin-bottom: 30px; padding: 0; }
  .worktable-heading > .handwritten { font-size: 28px; }
  .worktable-heading > p:last-child { margin-top: 12px; font-size: 12px; }
  .worktable-heading a { margin-left: 14px; }
  .worktable-layout { display: flex; flex-direction: column; gap: 24px; }
  .worktable-layout > .chapter-panel { order: 2; margin: 0; max-width: 520px; align-self: center; }
  .worktable-layout .chapter-panel h2 { font-size: 31px; padding: 23px; }
  .worktable-layout .chapter-list button { padding: 15px 23px; font-size: 16px; min-height: 72px; }
  .selected-style-copy { padding-inline: 23px; }
  .selected-style-copy > p { min-height: 0; }
  .selection-actions { padding-inline: 23px; }
  .piece-stage { order: 1; width: 100%; min-height: 490px; }
  .piece-stage-title { padding-top: 0; }
  .piece-stage-title h3 { font-size: 29px; }
  .piece-view { min-height: 350px; }
  .piece-full-image { inset: 0 0 7%; height: 93%; }
  .piece-annotation { left: 0; bottom: 2%; font-size: 23px; }
  .inspect-invitation { right: 0; bottom: 16%; font-size: 11px; }
  .piece-stage-caption { margin: 15px 20px 0; font-size: 10px; }
  .piece-inspection { margin-top: 17px; }
  .inspection-image { height: 290px; }
  .inspection-footer p { font-size: 11px; }
  .whole-thumbnail { width: 60px; height: 60px; }
  .detail-views { gap: 7px; }
  .detail-views button { font-size: 11px; }
  .table-endnote { flex-direction: column; align-items: flex-start; margin-top: 30px; gap: 12px; }
  .branding-worktable .brand-workspace { order: 1; min-height: 430px; }
  .branding-worktable .brand-product { inset: 0 0 18%; }
  .branding-worktable .package-box { width: 44%; height: 50%; top: 0; padding: 20px; }
  .branding-worktable .package-box > span { font-size: 20px; }
  .branding-worktable .package-box > strong { font-size: 40px; }
  .branding-worktable .brand-tag { min-height: 130px; width: 130px; bottom: 25%; right: 0; padding: 18px 12px; }
  .branding-worktable .brand-tag small { font-size: 19px; }
  .branding-worktable .brand-tag strong { font-size: 18px; margin: 10px 0; }
  .tag-string { height: 65px; top: -50px; }
  .brand-context > .handwritten { font-size: 26px; }
  .brand-context > small { font-size: 9px; margin-top: 9px; }
  .branding-worktable .brand-controls { padding-inline: 23px; }
  .proposal-conversation { display: flex; flex-direction: column; gap: 45px; padding: 50px 26px 80px; }
  .proposal-sheet { width: 100%; max-width: 500px; padding: 26px 22px; transform: rotate(-2deg); }
  .proposal-heading h3 { font-size: 31px; }
  .proposal-heading .handwritten { font-size: 24px; }
  .proposal-conversation .conversation-copy { max-width: 500px; width: 100%; }
  .proposal-conversation .conversation-copy > .handwritten { font-size: 27px; }
  .proposal-conversation .conversation-copy h2 { font-size: 48px; }
  .proposal-conversation .conversation-copy > .button { font-size: 17px; }
}