/* The seam: sections are joined like pieces of leather, with a row of slanted stitches below each edge.
   Up to the manga the page is ink and paper only; the shoe on the workbench is the first colour.
   The manga's own red (chalk marks, the seal) is kept: it plays the same part as the page's red.
   Red stays with what can be pressed (repair points, selection, next step), so the thread is ink.
   The manga carries the feeling; the words around it stay dry: no tilt, no italics, ink not grey. */
:root {
  --paper: oklch(89.5% .016 78);       /* grey kraft: the mono world, before the shoe */
  --paper-warm: oklch(92.5% .03 76);   /* the workbench: lighter and warmer, where the colour begins */
  --ink: oklch(22% .012 60);
  --muted: oklch(44% .016 63);
  /* edge of the join, then a stitch every 12px, 3px below it. The thread colour lives only in this SVG. */
  --seam:
    linear-gradient(var(--line), var(--line)) 0 0 / 100% 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M3.5 5L8.5 1' stroke='%233a332d' stroke-opacity='.85' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 0 3px / 12px 6px repeat-x;
}
.header { border-bottom: 0; position: relative; }
.header::after, .philosophy::after, .workbench::before {
  content: ""; position: absolute; left: 0; right: 0; height: 9px; background: var(--seam); pointer-events: none;
}
.header::after { bottom: -1px; }
.philosophy { border-bottom: 0; position: relative; grid-template-columns: 1fr 1.4fr; }
.philosophy::after { bottom: 0; }
.workbench { border-top: 0; position: relative; border-image: conic-gradient(var(--paper-warm) 0 0) fill 0 // 0 100vmax 0; }
.workbench::before { top: 0; }

/* dry type: ink, ordinary spacing, nothing tilted */
h1 { font-weight: 600; margin-top: 0; }
.header-caption { letter-spacing: .04em; }
.philosophy-copy { color: var(--ink); font-size: 13px; line-height: 1.95; word-break: auto-phrase; }
.philosophy-heading h2 { margin-top: 0; line-height: 1.7; }
.ticket { transform: none; }
.dialog-header { justify-content: flex-end; }

/* The manga sits on the bench as a bound booklet: pages cast a little shadow and carry a folio. */
.manga-pages { gap: 48px; }
.manga-page { position: relative; background: oklch(98.5% .003 85); box-shadow: 0 1px 2px oklch(22% .012 60 / .1), 0 14px 30px oklch(22% .012 60 / .08); }
.manga-page:empty { box-shadow: none; }
.manga-page::after {
  content: attr(data-page); position: absolute; left: 0; right: 0; bottom: -24px; text-align: center;
  font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: .1em;
}
.manga-page:empty::after { content: none; }
@media (max-width: 1100px) { .philosophy { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .ticket { transform: none; }
  .philosophy { grid-template-columns: 1fr; }
  .philosophy-copy { font-size: 12px; }
}

/* shop name: a small "靴工房" set before the name, and the name stamped vertically in the seal */
.brand { gap: 12px; align-items: baseline; }
.brand .brand-en { font-family: var(--serif); font-size: 13px; letter-spacing: .08em; }
.ticket-seal { writing-mode: vertical-rl; font-size: 13px; height: 42px; letter-spacing: .05em; }