/* OTOMON amplifier panel. Every size is in cqw (1% of the panel width),
   so the panel looks identical at any width and exports at EXPORT_WIDTH px (2000). */
.panel-wrap{container-type:inline-size;width:100%}
.panel{
  --p-bg:#0E0C0A;--p-ink:#F0EBE3;--p-gray:#8C857A;--p-dim:#6E675D;--p-gold:#C9A45A;--p-line:#2E2923;--p-frame:#3A342D;
  --p-serif:"Cormorant Garamond","Noto Serif JP","Noto Serif CJK JP","Yu Mincho",Georgia,serif;
  --p-jp:"Noto Serif JP","Noto Serif CJK JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --p-mono:"Space Mono","Noto Sans JP","Noto Sans CJK JP",ui-monospace,Menlo,monospace;
  background:var(--p-bg);color:var(--p-ink);
  padding:5.9cqw 6.4cqw 4.2cqw;display:flex;flex-direction:column;
  font-family:var(--p-mono);box-sizing:border-box;width:100%;
}
.panel *,.panel *::before,.panel *::after{box-sizing:border-box}
.panel.is-export{min-height:140cqw}

.p-brand{font:400 1.23cqw/1.2 var(--p-mono);letter-spacing:.32em;color:var(--p-gold)}
.p-title{margin:1.9cqw 0 0;display:flex;align-items:baseline;flex-wrap:nowrap;column-gap:3cqw;font-weight:400;line-height:1;white-space:nowrap;min-width:0}
.p-title.measuring{width:100%;overflow:visible}
.p-title.measuring>*{flex:none}
.p-name{font:400 calc(var(--name-size, 7.5cqw) * var(--title-scale, 1))/1.05 var(--name-font, var(--p-serif));text-transform:var(--name-case, uppercase);letter-spacing:0;color:var(--p-ink);padding:0 .08em}
.p-sub{font:400 calc(var(--sub-size, 4.2cqw) * var(--title-scale, 1))/1 var(--p-serif);color:var(--p-gold);letter-spacing:.01em}
.p-tagline{margin-top:.7cqw;font:400 1.3cqw/1.5 var(--p-mono);letter-spacing:.16em;color:var(--p-gray)}
.p-tagline b,.p-tagline strong{color:var(--p-ink);font-weight:700}
.p-rule{margin-top:2.3cqw;height:.18cqw;min-height:2px;background:linear-gradient(90deg,#A8432C,#C9A45A)}
.p-main{margin-top:3cqw;width:100%;aspect-ratio:1418/910;border:1px solid var(--p-frame);background:#1A1714 center/cover no-repeat}
.p-main img,.p-thumb img{display:block;width:100%;height:100%}
.p-caption{margin:1.3cqw 0 0;font:italic 400 1.1cqw/1.5 var(--p-mono);letter-spacing:.12em;color:var(--p-dim)}
.p-caption b,.p-caption strong{color:var(--p-gray)}

.p-thumbs{margin-top:2.4cqw;position:relative}
.p-strip{display:flex;gap:.86cqw;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.p-strip::-webkit-scrollbar{display:none}
.p-thumb{flex:0 0 calc((100% - 4 * .86cqw) / 5);aspect-ratio:1;border:1px solid var(--p-frame);background:#1A1714 center/cover no-repeat;padding:0;margin:0;scroll-snap-align:start;cursor:pointer;opacity:.78;transition:opacity .15s,border-color .15s}
.p-thumb:hover,.p-thumb.active{opacity:1}
.p-thumb.active{border-color:var(--p-gold)}
.is-export .p-thumb{opacity:1;cursor:default}
.p-thumb.empty{background:transparent;border-color:transparent}
.p-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:3.2cqw;height:3.2cqw;min-width:32px;min-height:32px;border-radius:50%;border:1px solid var(--btn-border,#B52B2B);background:var(--btn,#940303);color:var(--btn-text,#FBF1EE);font:400 max(2.2cqw,20px)/1 var(--p-serif);cursor:pointer;display:grid;place-items:center;padding:0 0 .25cqw}
.p-arrow:hover{background:var(--btn-hover,#AD1414)}
.p-arrow:disabled{opacity:.25;cursor:default}
.p-arrow.prev{left:-1.4cqw}.p-arrow.next{right:-1.4cqw}

.p-specs{margin-top:3cqw}
.p-specs h2{margin:0;font:400 1.23cqw/1.2 var(--p-mono);letter-spacing:.32em;color:var(--p-gold)}
.p-grid{margin:1.6cqw 0 0;padding:1.3cqw 0;border-top:1px solid var(--p-line);border-bottom:1px solid var(--p-line);display:grid;grid-template-columns:1fr 1fr;column-gap:4.9cqw}
.p-row{display:flex;justify-content:space-between;align-items:baseline;gap:2cqw;padding:.85cqw 0}
.p-row dt{font:400 1.35cqw/1.3 var(--p-mono);letter-spacing:.1em;color:var(--p-gray)}
.p-row dd{margin:0;font:400 1.48cqw/1.3 var(--p-mono);color:var(--p-ink);text-align:right;white-space:nowrap}

.p-foot{margin-top:8.5cqw;padding-top:3.5cqw;border-top:1px solid var(--p-line);display:flex;justify-content:space-between;align-items:flex-end;gap:3cqw}
.is-export .p-foot{margin-top:auto}
.p-labname{font:400 2.4cqw/1.1 var(--p-serif);letter-spacing:.06em;color:var(--p-ink);white-space:nowrap}
.p-labname .jp{font-family:var(--p-jp);font-weight:500;font-size:2.35cqw;letter-spacing:.04em;margin-right:1.2cqw}
.p-site{margin-top:1cqw;font:400 1.1cqw/1.2 var(--p-mono);letter-spacing:.15em;color:var(--p-dim)}
.p-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.p-price{font:400 1.23cqw/1.4 var(--p-mono);letter-spacing:.2em;color:var(--p-dim)}
.p-std{margin-top:.4cqw;font:400 1.23cqw/1.4 var(--p-mono);letter-spacing:.14em;color:var(--p-dim)}
.p-link{margin-bottom:1.4cqw;font:400 max(1.15cqw,12px)/1.3 var(--p-mono);letter-spacing:.08em;color:var(--btn-text,#FBF1EE);text-decoration:none;background:var(--btn,#940303);border:1px solid var(--btn-border,#B52B2B);padding:.8cqw 1.4cqw;border-radius:3px}
.p-link:hover{background:var(--btn-hover,#AD1414)}

/* Small screens: keep text readable (the design stays the same on desktop and in the export) */
@container (max-width:700px){
  .panel:not(.is-export) .p-brand,.panel:not(.is-export) .p-specs h2{font-size:10px}
  .panel:not(.is-export) .p-tagline{font-size:10.5px;letter-spacing:.08em}
  .panel:not(.is-export) .p-caption{font-size:10px;letter-spacing:.06em}
  .panel:not(.is-export) .p-grid{grid-template-columns:1fr}
  .panel:not(.is-export) .p-row dt{font-size:11px}
  .panel:not(.is-export) .p-row dd{font-size:12px}
  .panel:not(.is-export) .p-site,.panel:not(.is-export) .p-price,.panel:not(.is-export) .p-std{font-size:9.5px;letter-spacing:.08em}
  .panel:not(.is-export) .p-foot{flex-direction:column;align-items:flex-start}
  .panel:not(.is-export) .p-right{align-items:flex-start;text-align:left}
  .panel:not(.is-export) .p-labname{font-size:20px}.panel:not(.is-export) .p-labname .jp{font-size:19px}
}