/* ============================================================
   PLOTFLOW · PAPER: the sheet is the site.
   Bristol is the page ground (body, styles.css); this file holds
   the paper components: the masthead, the live-plot bed with its
   control strip, the study plates, the commissions panel, and the
   specimen record (product.html).
   Chrome (top bar + footer) stays olive; red stays the accent.
   ============================================================ */

/* ── masthead ── */
.mast{position:relative;padding:56px 0 42px;border-bottom:2px solid var(--ink)}
.mast-in{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.mast-label{font-weight:800;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.mast-label .jp{font-family:var(--jp)}
.mast h1{font-weight:900;font-size:clamp(2.15rem,5.1vw,4.5rem);letter-spacing:-.025em;line-height:.98;color:var(--ink)}
.mast-lede{font-weight:500;font-size:15px;color:#5b5e54;max-width:620px;line-height:1.6;margin-top:20px}
.mast-side{display:flex;flex-direction:column;align-items:center;gap:16px;flex-shrink:0;padding-top:6px}
.mast-side img{display:block;width:92px;height:92px}
.mast-side .jp{font-family:var(--jp);font-weight:700;font-size:12px;color:var(--dim);writing-mode:vertical-rl;letter-spacing:.2em}
@media(max-width:720px){
  .mast{padding:36px 0 28px}
  .mast-side img{width:52px;height:52px}
  .mast-side .jp{display:none}
  .mast-lede{font-size:13.5px;margin-top:14px}
}

/* ── live plot: the sheet, with its control strip beneath ── */
.plot{position:relative;border-bottom:2px solid var(--ink)}
.plot-stage{position:relative;height:72vh;min-height:440px;overflow:hidden}
/* the bed is positioned + sized by plotter.js fitBed(); this is the fallback.
   box-shadow/aspect overrides kill the framed-sheet look from styles.css .bed:
   on the paper page the sheet IS the page. */
.plot-stage .bed{position:absolute;inset:0;background:var(--bristol);overflow:hidden;
  box-shadow:none;aspect-ratio:auto;max-height:none}
.plot-stage #pcanvas,.plot-stage #stage{position:absolute;left:7%;top:7%;width:86%;height:86%}
#pcanvas{z-index:1;pointer-events:none}
#stage{z-index:2}
#ppath{fill:none;stroke:none}
/* the bed's design picker sits top-left of the stage, where the label was */
.bed-pick{position:absolute;top:10px;left:16px;z-index:6;display:flex;align-items:center;gap:9px}
.bed-pick label{font-weight:700;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#a99a76}
.bed-pick .selwrap{position:relative}
.bed-pick select{appearance:none;background:transparent;border:1px solid rgba(21,22,15,.28);
  color:var(--ink);font-family:var(--sans);font-weight:800;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:7px 28px 7px 10px;cursor:pointer;border-radius:0}
.bed-pick select:hover{border-color:var(--ink)}
.bed-pick select:focus{outline:none;border-color:var(--red)}
.bed-pick .selwrap::after{content:"▾";position:absolute;right:10px;top:50%;transform:translateY(-50%);
  color:var(--red);pointer-events:none;font-size:9px}
.plot-stage .pf-view{position:absolute;top:10px;right:16px;z-index:3;font-weight:700;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#a99a76}
.pfr-sheet .vr,.pfr-sheet .bl{color:#a99a76}

/* control strip: controls lead from the left, live readout sits right */
.plot-strip{position:relative;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:13px 26px 12px;border-top:1px solid var(--ink)}
.plot-strip .pbar{position:absolute;left:0;right:0;top:-2px;height:3px;background:transparent}
.plot-strip .pbar b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--red)}
.strip-btn{font-weight:800;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#5b5e54;border:1px solid rgba(21,22,15,.3);padding:8px 12px;background:transparent}
.strip-btn:hover{color:var(--ink);border-color:var(--ink)}
.plot-strip .seg{display:flex;border:1px solid rgba(21,22,15,.3)}
.plot-strip .seg button{padding:8px 10px;font-weight:800;font-size:9.5px;color:#5b5e54;border-right:1px solid rgba(21,22,15,.3)}
.plot-strip .seg button:last-child{border-right:none}
.plot-strip .seg button.on{background:var(--ink);color:var(--bristol)}
.strip-note{font-weight:700;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.strip-sp{flex:1}
.strip-live{display:flex;align-items:center;gap:8px;font-weight:800;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.strip-cap{font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.strip-stat{font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#5b5e54}
.strip-stat b{color:var(--ink);font-weight:800}
@media(max-width:940px){
  .plot-stage{height:56vh;min-height:340px}
  .plot-strip{padding:11px 16px 10px;gap:12px}
  .strip-note,.strip-stat.pos{display:none}
}
@media(max-width:700px){.plot-stage .pf-view{display:none}}
@media(max-width:560px){
  .strip-stat.tm{display:none}
  .plot-strip .seg{display:none}
}

/* ============================================================
   STUDY PLATES: each sheet shown as a plate on the paper
   (renders into #grid on the homepage via scripts/shop.js)
   ============================================================ */
.plates{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);
  gap:34px 30px;padding-top:34px}
.plate{display:flex;flex-direction:column}
.pl-sheet{position:relative;display:block;aspect-ratio:4/3;background:#fff;
  border:1px solid rgba(21,22,15,.28);overflow:hidden}
.pl-sheet:hover{border-color:var(--ink)}
.pl-sheet svg{position:absolute;left:9%;top:9%;width:82%;height:82%}
.pl-sheet path{fill:none;stroke:var(--ink);stroke-width:.6;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
.pl-no{position:absolute;left:10px;top:9px;z-index:2;font-weight:900;font-size:11px;
  letter-spacing:.1em;color:var(--red)}
.pl-code{position:absolute;right:10px;top:9px;z-index:2;font-weight:700;font-size:8.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
/* hover replays the stroke program on the canvas; the static svg fades under it */
.pl-canvas{position:absolute;left:9%;top:9%;width:82%;height:82%;z-index:2;pointer-events:none}
.pl-sheet svg{transition:opacity .16s}
.pl-sheet.plotting svg{opacity:0}
.pl-name{display:flex;align-items:baseline;gap:10px;margin-top:14px;font-weight:900;font-size:19px;
  line-height:1;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.pl-name:hover{color:var(--red)}
.pl-name .jp{font-family:var(--jp);font-weight:700;font-size:11px;letter-spacing:0;
  text-transform:none;color:var(--dim)}
.pl-stats{display:flex;gap:22px;margin-top:12px;padding-top:11px;border-top:1px solid rgba(21,22,15,.18);
  font-weight:800;font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.pl-stats label{display:block;font-weight:800;font-size:7.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.pl-foot{margin-top:9px;font-weight:700;font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
@media(max-width:940px){.plates{grid-template-columns:repeat(2,1fr);gap:28px 22px}}
@media(max-width:560px){.plates{grid-template-columns:1fr;gap:26px;padding-top:26px}}

/* ── commissions panel: ink-ruled box with the hanko seal ── */
.comm-box{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:40px;
  border:2px solid var(--ink);padding:34px 36px;margin:54px 0}
.comm-box .seal{position:absolute;right:22px;top:-26px;width:52px;height:52px}
.comm-label{font-weight:800;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.comm-label .jp{font-family:var(--jp)}
.comm-box h2{font-weight:900;font-size:clamp(1.6rem,3.4vw,2.2rem);letter-spacing:-.01em;line-height:1.05;color:var(--ink)}
.comm-box p{font-weight:500;font-size:13px;color:#5b5e54;margin-top:10px;max-width:560px;line-height:1.6}
.comm-box .comm-cta{display:inline-block;background:var(--red);color:#fff;text-decoration:none;flex-shrink:0;
  font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:14px 22px}
.comm-box .comm-cta:hover{background:var(--ink)}
@media(max-width:760px){
  .comm-box{flex-direction:column;align-items:flex-start;gap:20px;padding:24px 20px;margin:36px 0}
  .comm-box .seal{width:40px;height:40px;top:-20px;right:14px}
}

/* ============================================================
   RECORD: product page as a paper specimen sheet
   (product.html; live-plot preview driven by scripts/product.js)
   ============================================================ */
.pfr{display:grid;grid-template-columns:1fr 420px;min-height:calc(100vh - 44px)}
.pfr[hidden]{display:none}
.pfr-stagewrap{position:relative;background:var(--bristol)}
.pfr-sheet{position:absolute;inset:22px;background:var(--bristol);overflow:hidden}
.pfr-sheet .bl{position:absolute;top:8px;left:16px;z-index:3;font-weight:700;font-size:8px;
  letter-spacing:.16em;text-transform:uppercase;color:#a99a76}
.pfr-sheet .vr{position:absolute;top:8px;right:16px;z-index:3;font-weight:700;font-size:8px;
  letter-spacing:.16em;text-transform:uppercase;color:#a99a76}
.pfr-sheet #pdCanvas{position:absolute;left:7%;top:7%;z-index:2;
  width:86%;height:86%}
.pfr-sheet #pdSvg{position:absolute;width:0;height:0;overflow:hidden}
.pfr-panel{background:transparent;border-left:2px solid var(--ink);display:flex;flex-direction:column}
.pfr-sec{padding:18px;border-bottom:1px solid rgba(21,22,15,.18)}
.pfr-sec h5{font-weight:800;font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);margin:0 0 12px}
.pfr-sec h5 sup{color:var(--red)}
.pfr-code{font-weight:700;font-size:10px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase}
.pfr-name{font-weight:900;font-size:30px;line-height:1;color:var(--ink);
  margin:6px 0 2px;text-transform:uppercase}
.pfr-jp{font-family:var(--jp);color:var(--dim);font-size:13px}
.pfr-lore{margin:12px 0 0;color:#5b5e54;font-size:13px;line-height:1.65}
.pfr-tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.pfr-tbl td{padding:6px 0;border-bottom:1px solid rgba(21,22,15,.12)}
.pfr-tbl td:first-child{font-weight:800;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.pfr-tbl td:last-child{text-align:right;color:var(--ink);font-weight:700}
.pfr-tbl tr:last-child td{border-bottom:none}
.pfr-meta{margin-top:12px;display:flex;justify-content:space-between;font-weight:700;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.pfr-buyrow{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.pfr-buyrow .pd-price{font-weight:900;font-size:24px;color:var(--ink)}
.pfr-buyrow .pd-ed{font-weight:700;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.pfr-panel .pd-acquire{margin-top:8px}
.pfr-panel .pd-note{margin-top:10px;font-size:11px;line-height:1.7;color:var(--dim);text-transform:none}
.pfr-fn{font-size:10.5px;color:var(--dim);line-height:1.8}
.pfr-fn p{margin:0 0 8px}
.pfr-fn sup{color:var(--red)}
.pfr-nav{margin-top:auto;display:flex;border-top:1px solid rgba(21,22,15,.18)}
.pfr-nav a{flex:1;padding:12px 6px;text-align:center;font-weight:800;font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-decoration:none}
.pfr-nav a:hover{color:var(--red)}
.pfr-nav a+a{border-left:1px solid rgba(21,22,15,.18)}
@media(max-width:980px){
  .pfr{grid-template-columns:1fr}
  .pfr-stagewrap{height:62vh;min-height:380px}
  .pfr-panel{border-left:none;border-top:2px solid var(--ink)}
}

/* pen swatches as plain color squares (specimen-record style) */
.pfr-panel .pd-swatches{gap:16px}
.pfr-panel .pd-swatch{flex-direction:column;align-items:center;gap:7px;
  padding:0;border:none;background:none}
.pfr-panel .pd-swatch .pd-dot{width:34px;height:34px;border-radius:0;
  box-shadow:0 0 0 1px rgba(21,22,15,.3)}
.pfr-panel .pd-swatch:hover .pd-dot{box-shadow:0 0 0 1px var(--ink)}
.pfr-panel .pd-swatch.on .pd-dot{outline:2px solid var(--ink);outline-offset:2px;
  box-shadow:0 0 0 1px rgba(21,22,15,.2)}
.pfr-panel .pd-swatch-name{font-size:8.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.pfr-panel .pd-swatch.on .pd-swatch-name{color:var(--ink)}

/* ── 井筒に橘 crest placements ── */
/* hanko-style seal on the plot sheet: flat ink on paper, bottom-right */
.pf-seal{position:absolute;right:20px;bottom:16px;width:48px;height:48px;z-index:3;
  opacity:.92;pointer-events:none}
/* manifesto crest: stroked red on paper */
.mani-crest{display:block;width:96px;height:96px;margin-bottom:20px}
@media(max-width:940px){.pf-seal{width:40px;height:40px;right:14px;bottom:12px}}

/* study note on the record page */
.pfr-study{font-size:12px;line-height:1.7;color:#5b5e54;margin:0 0 14px}
.pfr-study b{color:var(--ink);text-transform:uppercase;font-size:10.5px;letter-spacing:.12em}
.pfr-panel .pd-acquire{display:block;text-align:center;text-decoration:none}