#products {
  --p-band: #08090e;                          /* 黒の帯 */
  --p-paper: #f3ecdc;                         /* 本文（紙） */
  --p-paper-78: rgba(243, 236, 220, 0.78);    /* 控えめな文字 */
  --p-signal: rgba(184, 156, 255, 0.32);      /* 信号の線 */
  --p-ring: rgba(157, 123, 220, 0.5);         /* 消灯の輪: cyber lines only */
}

#products .s55-studio .s55-kicker, #products .s55-hub-banner .eyebrow { font: 600 13px/16px 'Barlow Condensed', sans-serif; letter-spacing: .04em; color: var(--p-paper-78); }
#products #s37-studio-title, #products #s37-hub-title { font: 600 40px/48px 'Barlow Condensed', sans-serif; letter-spacing: .04em; color: var(--p-paper); }
#products #s37-studio-title img, #products .s55-hub-banner .title-row img { width: 48px; height: 48px; }
#products .s55-studio-description, #products .s55-hub-banner .desc { font: 500 15px/24px 'Zen Kaku Gothic New', sans-serif; color: var(--p-paper-78); }

body.study16 #main > #products.s48-products {
  width: 100%;
  padding: 96px max(var(--page-pad, 24px), calc((100% - 1168px) / 2));  /* band edge → heading 96; last figure → band end 96 */
  background: var(--p-band);
}
#products .s48-heading { margin: 0 0 24px; }   /* heading → first product 24, as LIVE */

#products .s55-studio { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 48px; justify-content: stretch;
  margin: 0; padding: 0; background: none; box-shadow: none; }
#products .s55-studio-copy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px;
  grid-template-areas: "kicker desc action" "title desc action"; grid-template-rows: auto auto; align-items: end; }
#products .s55-studio .s55-kicker { grid-area: kicker; margin: 0 0 8px; }
#products #s37-studio-title { grid-area: title; gap: 16px; }
#products .s55-studio-description { grid-area: desc; align-self: start; margin: 0; }
#products .s55-studio-description .s55-line { display: block; }            /* all widths */
#products .s55-studio-link { grid-area: action; justify-self: end; align-self: end; }
#products .s55-studio-sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; align-items: start; margin: 0; }
#products .s55-studio-more { display: contents; }                          /* all widths: no scroller, nothing hidden */
#products .s55-output { box-shadow: none; max-width: 480px; }
#products .s55-studio-more > .s55-output:first-child { margin-top: 48px; } /* Taisho, column 2: the stagger */

#products .s55-hub-banner { position: relative; display: block; max-width: none; height: 336px; margin: 96px 0 0; padding: 0;
  border: 0; border-radius: 0; overflow: visible; background: none; font-family: 'Zen Kaku Gothic New', sans-serif;
  color: var(--p-paper); /* replaces the inherited #f1ecfb, which the SVG icon templates would otherwise carry */ }
#products .s55-hub-banner .brand { position: static; z-index: auto; width: calc(100% - 704px); /* I − 656 figure − 48 clearance */
  height: auto; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
#products .s55-hub-banner .eyebrow { margin: 0 0 8px; }
#products .s55-hub-banner .title-row { gap: 16px; margin: 0; }
#products .s55-hub-banner .desc { margin: 16px 0 24px; }
#products .s55-hub-banner .desc span { display: block; }                  /* all widths */
#products .s55-hub-banner .ticket-art.d { display: block; position: absolute; top: 0; right: 0; left: auto;
  width: 656px; height: auto; transform: none; }
#products .s55-hub-banner .ticket-art.m { display: none; }
/* silhouette: 1px signal line, quarter-circle corners */
#products .s55-hub-banner::before { content: ""; position: absolute; top: 0; right: 0; width: 656px; height: 336px; box-sizing: border-box;
  border: 1px solid var(--p-signal); border-radius: 16px; pointer-events: none; }
/* tear column (32 wide, centred on the tear at figure x 160): two half-ring notch nodes + the 1px rail between them */
#products .s55-hub-banner::after { content: ""; position: absolute; top: 0; right: 480px; /* 656 − 160 − 16 */ width: 32px; height: 336px; pointer-events: none;
  background:
    radial-gradient(circle at 50% 0, var(--p-band) 15px, var(--p-signal) 15px 16px, transparent 16px) top / 32px 16px no-repeat,
    radial-gradient(circle at 50% 100%, var(--p-band) 15px, var(--p-signal) 15px 16px, transparent 16px) bottom / 32px 16px no-repeat,
    linear-gradient(var(--p-signal), var(--p-signal)) 50% 50% / 1px calc(100% - 32px) no-repeat; }

/* remove: the SVG's own filled ticket, its dashed perforation (the CSS rail replaces it), the duplicate H logo, and the fat placeholder bars */
#products .ticket-art > g[clip-path], #products .ticket-art > path[stroke-dasharray], #products .ticket-art > g[transform],
#products .ticket-art path[fill="#6d3a90"],
#products .ticket-art rect[fill="#9b6fc4"][opacity="0.35"], #products .ticket-art rect[fill="#9b6fc4"][opacity="0.3"] { display: none; }
/* keep one 1px signal rule per field and one per comment bubble (1.25 units × 0.8 = 1px) */
#products .ticket-art rect[fill="#9b6fc4"]:is([opacity="0.5"], [opacity="0.45"], [opacity="0.4"]) { height: 1.25px; rx: 0; fill: var(--p-signal); opacity: 1; }
/* object outlines in the ring colour, 1px */
#products .ticket-art g[stroke="#c4aeea"] { stroke: var(--p-ring); stroke-width: 1.25; }
#products .ticket-art g[stroke="#c4aeea"] > path:not([fill="#6d3a90"]) { fill: var(--p-band); }   /* file sheets occlude each other */
#products .ticket-art path[fill-opacity] { fill: none; stroke: var(--p-ring); stroke-width: 1.25; } /* comment bubbles */
#products .ticket-art .chip { fill: none; stroke: var(--p-ring); stroke-width: 1.25; }
/* glyphs and words */
#products .ticket-art .motif { color: var(--p-paper-78); fill: none; }   /* icons draw in currentColor strokes; fill none keeps the paint audit clean */
#products .ticket-art .f-label, #products .ticket-art .chip-t { font-family: 'Zen Kaku Gothic New', sans-serif; fill: var(--p-paper); }
#products .ticket-art .t-word { font-family: 'Barlow Condensed', sans-serif; fill: var(--p-paper); letter-spacing: .04em; }

#products :is(.s55-studio-link, .s55-hub-banner .action) {
  display: inline-flex; align-items: flex-end; gap: 10px; min-height: 48px; padding: 0 0 6px; margin: 0;
  background: none; border: 0; border-bottom: 1px solid currentColor; border-radius: 0;
  color: var(--p-paper-78); font: 600 13px/13px 'Barlow Condensed', sans-serif; letter-spacing: .2em;
  text-decoration: none; transition: none; }
#products :is(.s55-studio-link, .s55-hub-banner .action) svg { width: 13px; height: 13px; flex: none; }
#products :is(.s55-studio-link, .s55-hub-banner .action):hover { background: none; color: var(--p-paper); }
#products :is(.s55-studio-link, .s55-hub-banner .action):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

@media (min-width: 768px) and (max-width: 1023px) {
#products .s55-studio-copy { grid-template-areas: "kicker kicker kicker" "title title action" "desc desc desc"; row-gap: 0; }
#products .s55-studio-description { margin-top: 16px; }
#products .s55-studio-sheet { column-gap: 24px; }
#products .s55-studio-more > .s55-output:first-child { margin-top: 32px; }

#products .s55-hub-banner { height: auto; display: grid; grid-template-columns: minmax(0, 1fr); }
#products .s55-hub-banner .brand { width: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "kicker kicker" "title action" "desc desc"; align-items: end; }
#products .s55-hub-banner .eyebrow { grid-area: kicker; }
#products .s55-hub-banner .title-row { grid-area: title; }
#products .s55-hub-banner .desc { grid-area: desc; margin: 16px 0 0; }
#products .s55-hub-banner .action { grid-area: action; justify-self: end; }
#products .s55-hub-banner .ticket-art.d { position: relative; top: auto; right: auto; margin-top: 48px; }
#products .s55-hub-banner::before, #products .s55-hub-banner::after { top: auto; bottom: 0; }
#products .s55-hub-banner::before { left: 0; right: auto; }
#products .s55-hub-banner::after { left: 144px; right: auto; }             /* 160 − 16 */
}

@media (max-width: 767px) {
body.study16 #main > #products.s48-products { padding-block: 64px; }

#products .s55-studio-copy { display: flex; flex-direction: column; align-items: flex-start; }
#products .s55-studio .s55-kicker { margin: 0 0 8px; }
#products #s37-studio-title, #products #s37-hub-title { font-size: 32px; line-height: 40px; }
#products #s37-studio-title img, #products .s55-hub-banner .title-row img { width: 40px; height: 40px; }
#products .s55-studio-description { margin: 16px 0 24px; }
#products .s55-studio-link { align-self: flex-start; justify-self: auto; }  /* else the desktop align-self:end pushes it right */
#products .s55-studio-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 16px; }
#products .s55-output-lead { grid-column: 1; grid-row: 1; }                                         /* Bluenote */
#products .s55-studio-more > .s55-output:first-child { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; } /* Taisho */
#products .s55-studio-more > .s55-output:last-child { grid-column: 1; grid-row: 2; }                /* Orbital */

#products .s55-hub-banner { height: auto; margin-top: 64px; display: block; }
#products .s55-hub-banner .brand { width: auto; display: flex; flex-direction: column; align-items: flex-start; }
#products .s55-hub-banner .desc { margin: 16px 0 24px; }
#products .s55-hub-banner .action { justify-self: auto; }
#products .s55-hub-banner .ticket-art.d { display: none; }
#products .s55-hub-banner .ticket-art.m { display: block; position: relative; width: 288px; max-width: none; height: auto; margin: 48px 0 0; }
#products .s55-hub-banner::before { top: auto; bottom: 0; left: 0; right: auto; width: 288px; height: 264px; }
#products .s55-hub-banner::after { top: auto; bottom: 0; right: auto; left: 35.2px; height: 264px; }  /* SVG geometry: mobile stub 64 units → tear at 51.2; minus 16 */
}