/* Editorial media: restrained type, generous space, exact product surfaces. */
/* Compact example rail: normal horizontal scrolling with optional button controls. */
#sample-ideas,#mini-collection,#pack-formats,#pack-collection,#pack-header,#pack-artwork,#pack-order { scroll-margin-top: 120px; }
.sample-carousel { padding-block: 40px 34px; border-bottom: 1px solid #deded7; }
.sample-carousel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.sample-carousel h2 { margin: 9px 0 0; font: 400 clamp(23px,2.8vw,32px)/1.4 var(--font-thai); letter-spacing: -.025em; }
.sample-carousel-heading p,.sample-carousel-note { font-size: 12px; line-height: 1.7; color: #697064; margin: 8px 0 0; }
.sample-carousel-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sample-carousel-controls[hidden] { display: none; }
.sample-carousel-controls button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #aeb4a8; background: transparent; color: #263929; cursor: pointer; }
.sample-carousel-controls button:disabled { opacity: .3; cursor: default; }
.sample-carousel-controls svg { width: 18px; height: 18px; }
.sample-carousel-controls [role="status"] { font: 500 12px var(--font-reading); font-variant-numeric: tabular-nums; min-width: 58px; text-align: center; color: #5d695b; }
.sample-carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: 272px; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #b1b9a9 #f4f4ee; padding-bottom: 16px; }
.sample-card { scroll-snap-align: start; min-width: 0; }
.sample-card a { display: block; text-decoration: none; color: inherit; }
.sample-card img { display: block; width: 100%; height: 182px; object-fit: cover; background: #f2f0e8; }
.sample-card small { display: block; font-size: 10px; letter-spacing: .08em; color: #82511e; margin-top: 14px; }
.sample-card h3 { font: 500 16px/1.5 var(--font-thai); margin: 5px 0; }
.sample-card p { color: #656c61; font-size: 12px; line-height: 1.7; margin: 0; }
.sample-carousel :focus-visible { outline: 2px solid #294d85; outline-offset: -2px; }
.pack-collection { padding-top: 65px; padding-bottom: 65px; }
.pack-variant { min-width: 0; margin: 0; }
.pack-variant > a { display: block; }
.pack-variant img { display: block; width: 100%; height: auto; aspect-ratio: 1.5; object-fit: cover; }
.pack-variant h3 { font: 500 21px/1.5 var(--font-thai); margin: 10px 0; }
.pack-variant .pe-kicker { margin-top: 20px; }
.pack-variant p { color: #62645d; font-size: 13px; line-height: 1.85; margin: 0; }
@media (max-width: 620px) {
  .sample-carousel { padding-block: 28px; }
  .sample-carousel-heading { align-items: flex-start; gap: 18px; flex-wrap: wrap; }
  .sample-carousel-controls { margin-left: auto; }
  .sample-carousel-track { grid-auto-columns: min(78vw,272px); gap: 16px; }
  .sample-card img { height: auto; aspect-ratio: 1.5; }
}
/* Sticker Pack: a local draft brief, with the existing editorial type and spacing. */
.pack-hero { display: grid; grid-template-columns: .85fr 1.15fr; gap: 44px; padding-block: 60px 40px; align-items: center; }
.pack-hero h1 { margin: 18px 0 22px; font: 400 clamp(42px,5.2vw,72px)/1.02 var(--font-reading); letter-spacing: -.045em; }
.pack-hero-copy > p { color: #62645d; line-height: 1.9; font-size: 14px; }
.pack-hero-copy > .pack-lead { color: #1d2b24; font-size: clamp(22px,2.1vw,30px); line-height: 1.5; }
.pack-hero-copy > .button { margin: 14px 20px 12px 0; }
.pack-hero-media { margin: 0; }
.pack-hero-media img { display: block; width: 100%; height: auto; }
.pack-hero-media figcaption { margin-top: 12px; font-size: 11px; color: #66685f; }
.pack-nav { justify-content: space-between; }
.pack-format { border-top: 1px solid #c6c9c1; padding-top: 24px; }
.pack-format h3 { font: 500 24px/1.5 var(--font-thai); margin: 12px 0; }
.pack-format p { color: #62645d; font-size: 14px; line-height: 1.9; max-width: 520px; }
.pack-format .pack-example { color: #27487e; border-left: 2px solid #b9c8e0; padding-left: 16px; }
.pack-tint { background: #f4f2ea; }
.pack-fold-board { background: #e8edf4; padding: 28px 22px 18px; }
.pack-fold-board > .pe-kicker { color: #35518a; }
.pack-fold-board svg { display: block; width: 100%; height: auto; font: 16px var(--font-thai); fill: #35518a; }
.pack-fold-board svg .pack-svg-label { font: 500 24px var(--font-reading); letter-spacing: .08em; }
.pack-fold-board > p { margin: 0; text-align: center; font-size: 12px; color: #465979; }
.pack-list { padding-left: 20px; color: #485049; font-size: 14px; line-height: 1.9; }
.pack-list li + li { margin-top: 10px; }
.pack-service-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.pack-planner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; margin-top: 40px; align-items: start; }
.pack-planner fieldset { border: 0; padding: 0 0 28px; margin: 0 0 28px; border-bottom: 1px solid #d5dacd; min-width: 0; }
.pack-planner legend { font: 500 19px/1.6 var(--font-thai); margin-bottom: 20px; padding: 0; }
.pack-planner legend > span { color: #617451; font: 500 12px var(--font-reading); margin-right: 12px; }
.pack-size-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.pack-size-options label,.pack-seal-options label { position: relative; min-width: 0; cursor: pointer; }
.pack-size-options input,.pack-seal-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pack-size-options label > span,.pack-seal-options label > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 94px; padding: 12px 8px; background: #fff; border: 1px solid #bac2b2; border-radius: 10px; }
.pack-size-options strong { font: 500 23px var(--font-reading); }
.pack-size-options small { color: #596450; font-size: 12px; }
.pack-planner input:checked + span { background: #e8efdc; border: 2px solid #405832; padding: 11px 7px; }
.pack-planner input:focus-visible + span,.pack-planner :is(button,a,input[type="number"]):focus-visible { outline: 2px solid #294d85; outline-offset: 4px; }
.pack-field-note { font-size: 12px; line-height: 1.75; color: #596450; margin: 12px 0 0; }
.pack-count-label { display: block; font-size: 13px; color: #47533f; margin-bottom: 8px; }
.pack-stepper { display: grid; grid-template-columns: 48px minmax(0,1fr) 48px; border: 1px solid #bac2b2; border-radius: 10px; overflow: hidden; background: white; }
.pack-stepper button { border: 0; background: #eff2e9; color: #30452a; font-size: 24px; cursor: pointer; min-height: 54px; }
.pack-stepper input { border: 0; min-width: 0; width: 100%; text-align: center; font: 500 22px var(--font-reading); color: #233329; background: #fff; appearance: textfield; -moz-appearance: textfield; }
.pack-stepper input::-webkit-inner-spin-button,.pack-stepper input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.pack-stepper:focus-within { outline: 2px solid #294d85; outline-offset: 3px; }
.pack-minimum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#pack-use-minimum { padding: 8px 0; border: 0; background: transparent; color: #36512c; font: 500 12px var(--font-thai); text-decoration: underline; cursor: pointer; }
.pack-error { color: #a12d1c; font-size: 13px; }
.pack-seal-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.pack-seal-options label > span { font-size: 12px; min-height: 105px; gap: 12px; }
.pack-seal-icon { display: block; height: 26px; width: 20px; background: #7e9770; border-radius: 3px; }
.pack-seal-icon.is-wide { width: 46px; height: 18px; margin-block: 4px; }
.pack-seal-icon.is-round { width: 26px; border-radius: 50%; }
.pack-plan-result { background: #fff; border: 1px solid #d2dac8; border-radius: 16px; padding: 32px; min-width: 0; }
.pack-plan-result .pe-kicker { color: #536e42; }
.pack-result-total { color: #283f20; font-size: 19px; margin: 18px 0 2px; }
.pack-result-total strong { font: 400 clamp(44px,5vw,64px)/1.1 var(--font-reading); letter-spacing: -.04em; }
#pack-brief-status { margin: 6px 0 16px; font-size: 13px; color: #4f6045; }
.pack-rounding { font-size: 12px; line-height: 1.7; background: #f2f4ea; color: #4b5d40; border-radius: 6px; padding: 10px 12px; }
.pack-sheet-figure { padding: 16px; background: #f5f6f0; border-radius: 10px; margin-block: 20px; }
.pack-sheet-heading { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; margin-bottom: 10px; color: #5f6c54; }
.pack-sheet-grid { display: grid; grid-template-columns: repeat(var(--pack-columns,4),minmax(0,1fr)); grid-auto-rows: 1fr; gap: 4px; aspect-ratio: 420/297; border: 1px solid #82916e; padding: 5px; background: #fff; }
.pack-sheet-grid span { display: grid; place-items: center; background: #e4eccf; border: 1px dashed #8f9f7d; border-radius: 3px; color: #576b43; font: 500 12px var(--font-reading); }
.pack-sheet-grid span:first-child { background: #4a6336; color: white; border-color: #4a6336; }
.pack-sheet-figure p { font-size: 11px; color: #5f6c54; margin: 10px 0 0; }
.pack-result-details { margin: 20px 0; font-size: 13px; }
.pack-result-details > div { display: flex; justify-content: space-between; gap: 14px; padding-block: 8px; }
.pack-result-details dt { color: #6b7464; }
.pack-result-details dd { margin: 0; color: #293e22; text-align: right; }
.pack-plan-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.pack-planner button:disabled { opacity: .4; cursor: not-allowed; }
.pe-steps.pack-order-steps { margin-top: 55px; }
@media (max-width: 850px) { .pack-planner { grid-template-columns: 1fr; gap: 10px; } .pack-plan-result { padding: 24px 20px; } }
.pack-teaser { background: #f6f3ea; }
.pack-teaser figure { margin: 0; }
.pack-teaser figcaption { font-size: 11px; color: #62645d; margin-top: 12px; }
@media (max-width: 800px) {
  .pack-hero { grid-template-columns: 1fr; gap: 28px; padding-block: 35px 28px; }
  .pack-hero h1 { font-size: clamp(40px,9vw,64px); }
  .pack-hero-copy > .button { margin-right: 14px; }
  .pack-nav { justify-content: flex-start; gap: 12px 24px; }
}
.pe-intro { padding-block: 54px 36px; }
.pe-kicker { display: block; font: 500 10px/1.5 var(--font-reading); letter-spacing: .16em; color: #82511e; text-transform: uppercase; }
.pe-intro > div { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.pe-intro h1 { margin: 14px 0 0; font: 400 clamp(38px,5vw,66px)/1.02 var(--font-reading); letter-spacing: -.045em; }
.pe-intro > div > p { flex-shrink: 0; color: #676760; font-size: 14px; line-height: 1.8; }
.pe-film { padding-inline: 0; }
.pe-film-stage { position: relative; height: clamp(440px,45vw,650px); background: #383a34; }
.pe-film-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.pe-film-slide.is-active { opacity: 1; visibility: visible; }
.pe-film-slide video { width: 100%; height: 100%; object-fit: cover; }
.pe-film-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(12,21,16,.66),rgba(12,21,16,.3) 43%,transparent 85%),linear-gradient(0deg,rgba(12,21,16,.33),transparent 45%); }
.pe-film-copy { position: absolute; inset: auto auto 12% 6%; color: #fff; max-width: 570px; padding-right: 24px; }
.pe-film-copy .pe-kicker { color: #fff0d8; }
.pe-film-copy h2 { margin: 18px 0; font: 400 clamp(38px,5.6vw,75px)/1.02 var(--font-reading); letter-spacing: -.04em; }
.pe-film-copy p { margin: 0 0 24px; font-size: 14px; color: #fff; }
.pe-link { display: inline-flex; gap: 35px; align-items: center; padding-block: 10px; text-decoration: none; border-bottom: 1px solid currentColor; font-size: 13px; font-weight: 500; color: inherit; }
.pe-link > span { font-size: 20px; line-height: 1; }
.pe-link:hover { color: #a36321; }
.pe-film-copy .pe-link:hover { color: #ffe0a3; }
.pe-film-controls { display: flex; justify-content: space-between; border-bottom: 1px solid #dcdcd7; }
.pe-film-chapters { display: flex; gap: 34px; }
.pe-film-controls button { appearance: none; border: 0; border-radius: 0; background: transparent; padding: 18px 0 17px; font: 500 12px var(--font-reading); color: #6b6b65; cursor: pointer; border-bottom: 2px solid transparent; }
.pe-film-controls button span { font-size: 10px; margin-right: 8px; color: #8e8e84; }
.pe-film-controls [aria-pressed="true"][data-film-select] { color: #161b17; border-bottom-color: #bb7623; }
.pe-film-controls .pe-film-toggle { font-family: var(--font-thai); font-size: 12px; color: #292e29; }
.pe-film :focus-visible,.pe-keyboard-workspace :focus-visible,.pe-anchor-nav :focus-visible { outline: 2px solid #b67422; outline-offset: 5px; }
.pe-section { padding-block: 86px; }
.pe-heading { margin: 0 0 34px; max-width: 750px; }
.pe-heading h2,.pe-copy h2 { margin: 14px 0 15px; font: 400 clamp(30px,4.1vw,52px)/1.18 var(--font-thai); letter-spacing: -.035em; }
.pe-heading p,.pe-copy p { margin: 0 0 20px; font-size: 15px; line-height: 1.85; color: #62645d; }
.pe-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 32px; }
.pe-heading-row .pe-heading { margin-bottom: 0; }
.pe-grid-three { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; }
.pe-grid-two { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.pe-product { color: inherit; text-decoration: none; min-width: 0; }
.pe-product img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; background: #eeeee7; }
.pe-product > div { display: flex; justify-content: space-between; align-items: center; }
.pe-product > div > span { font-size: 22px; }
.pe-product h3,.pe-grid-two h3,.pe-keyboard-pair h3 { margin: 20px 0 7px; font: 500 22px/1.3 var(--font-reading); }
.pe-product p,.pe-grid-two figcaption p,.pe-keyboard-pair figcaption p { font-size: 13px; line-height: 1.8; color: #686961; margin: 0; }
.pe-soft { background: #f3f3ee; }
.pe-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 70px; align-items: center; }
.pe-split img,.pe-grid-two img { width: 100%; height: auto; display: block; }
.pe-feature-media { overflow: hidden; }
.pe-feature-media video { display: block; width: 100%; height: auto; }
.pe-grid-two figure,.pe-keyboard-pair figure { margin: 0; }
.pe-material-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 25px; }
.pe-material-strip a { color: inherit; text-decoration: none; }
.pe-material-strip img { display: block; width: 100%; height: auto; aspect-ratio: 1.5; object-fit: cover; }
.pe-material-strip span { display: block; margin-top: 14px; font-size: 13px; }
.pe-keyboard-teaser { background: #f8f4e9; }
.pe-keyboard-preview { display: block; }
.pe-keyboard-preview img { display: block; width: 100%; height: auto; object-fit: contain; }
.pe-caption { display: flex; justify-content: space-between; gap: 15px; color: #56614d; font: 500 10px var(--font-reading); letter-spacing: .08em; margin-top: 20px; }
.pe-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; padding: 0; margin: 0; list-style: none; }
.pe-steps li { padding-top: 18px; border-top: 1px solid #cfcfca; }
.pe-steps span { font: 400 26px var(--font-reading); color: #93602b; }
.pe-steps h3 { font-size: 17px; margin: 18px 0 7px; }
.pe-steps p { font-size: 13px; color: #676a61; line-height: 1.7; margin: 0; }
.pe-end { padding: 68px 0; background: #18231d; color: #fff; }
.pe-end .pe-kicker { color: #d3b383; }
.pe-end h2 { margin: 16px 0; font: 400 clamp(34px,4vw,56px)/1.15 var(--font-reading); letter-spacing: -.02em; }
.pe-end p { color: #d4d9d2; font-size: 14px; }
.pe-anchor-nav { display: flex; flex-wrap: wrap; gap: 14px 30px; padding-block: 18px; border-block: 1px solid #deded7; }
.pe-anchor-nav a { font-size: 13px; text-decoration: none; color: #343b32; }
.pe-guide-rows { border-top: 1px solid #dcdcd6; }
.pe-guide-rows article { display: grid; grid-template-columns: 50px 200px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid #dcdcd6; align-items: baseline; }
.pe-guide-rows article > span { font: 400 14px var(--font-reading); color: #8b5a26; }
.pe-guide-rows h3 { margin: 0; font: 500 18px var(--font-reading); }
.pe-guide-rows p { margin: 0; font-size: 14px; color: #60645c; line-height: 1.8; }
.pe-details { padding: 18px 0; border-block: 1px solid #d4d6cf; margin: 26px 0; }
.pe-details summary { cursor: pointer; font-size: 14px; font-weight: 500; }
.pe-details p { font-size: 13px; max-width: 850px; line-height: 1.9; color: #62665c; margin: 18px 0 0; }
.pe-fineprint { font-size: 12px!important; color: #696f64!important; line-height: 1.8; margin-top: 20px; }
.pe-inline-note { display: grid; grid-template-columns: 200px 1fr; gap: 30px; border-block: 1px solid #d3d5cc; margin-top: 30px; padding: 24px 0; }
.pe-inline-note strong { font-size: 18px; }
.pe-inline-note p { margin: 0; font-size: 14px; color: #62665c; line-height: 1.85; }
.pe-space-top { margin-top: 66px; }
.pe-keyboard-workspace { margin-top: 12px; }
.pe-keyboard-toolbar { background: #252a27; color: #dce1d9; padding: 15px 22px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.pe-keyboard-toolbar > span { font: 400 10px var(--font-reading); letter-spacing: .07em; }
.pe-keyboard-toolbar button { color: #bdc4b9; border: 0; background: transparent; padding: 10px 18px; font: 500 12px var(--font-reading); cursor: pointer; }
.pe-keyboard-toolbar [aria-pressed="true"] { background: #f4f1e8; color: #203627; }
.pe-keyboard-desk { display: grid; grid-template-columns: minmax(0,1fr) 220px; min-height: 470px; background: #d6d9d2; }
.pe-keyboard-canvas { display: flex; align-items: center; justify-content: center; padding: 30px; overflow: hidden; }
.pe-keyboard-canvas object { display: block; width: 100%; height: 440px; border: 0; }
[data-variant="small"] .pe-keyboard-canvas object { height: 640px; max-width: 455px; }
.pe-layer-panel { padding: 28px 18px; background: #f5f6f2; border-left: 1px solid #c2c9bf; }
.pe-layer-panel label { display: grid; grid-template-columns: 17px 7px 1fr; align-items: center; gap: 10px; padding: 20px 0; border-bottom: 1px solid #d8ddd2; cursor: pointer; }
.pe-layer-panel input { accent-color: #214b36; width: 15px; height: 15px; margin: 0; }
.pe-layer-panel strong { font: 500 12px var(--font-reading); }
.pe-layer-panel small { grid-column: 3; font-size: 11px; color: #646e60; }
.pe-layer-panel > p { margin-top: 30px; font-size: 12px; color: #696f64; line-height: 1.8; }
.pe-layer-dot { width: 5px; height: 18px; display: block; background: #b27c2e; }
.pe-layer-dot.is-cut { background: #ec268f; }.pe-layer-dot.is-art { background: #547455; }.pe-layer-dot.is-bg { background: #bbab8c; }
.pe-keyboard-bottom { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid #d3d9ce; }
.pe-keyboard-bottom p { margin: 0; color: #66715f; font-size: 12px; }
.pe-keyboard-bottom > div { display: flex; flex-wrap: wrap; gap: 25px; }
.pe-keyboard-bottom a { font-size: 13px; color: #21452f; }
.pe-keyboard-pair { display: grid; grid-template-columns: 1.6fr .65fr; gap: 60px; align-items: start; }
.pe-keyboard-pair img { display: block; width: 100%; height: auto; }
.media-slot.has-image { background: #f2f2ed; }
.media-slot.has-image::after { display: none; }
.media-slot.has-image > img { width: 100%; height: 100%; object-fit: cover; }
.materials-hero .editorial-hero-media > img { object-fit: contain; }
.materials-hero .editorial-hero-media { aspect-ratio: 1875/839; }
.service-article .media-slot.has-image:has(img[src*="keyboard-small"]) { aspect-ratio: 1; }
.service-article .media-slot.has-image img[src*="keyboard-small"] { object-fit: contain; }
.site-nav .site-nav-links { gap: 0; }
.site-nav .site-nav-links > a { padding-inline: 9px; font-size: 11px; }
[id="formats"],[id="layers"],[id="white-mask"],[id="finish-mask"],[id="white-ink"],[id="finishes"] { scroll-margin-top: 130px; }
@media (max-width: 900px) {
  .pe-intro > div { gap: 22px; }.pe-intro > div > p { flex-shrink: 1; }
  .pe-split { gap: 35px; }.pe-grid-three { gap: 20px; }
  .pe-keyboard-desk { grid-template-columns: minmax(0,1fr) 185px; }.pe-keyboard-canvas { padding: 16px; }
  .pe-guide-rows article { grid-template-columns: 30px 145px 1fr; }
  .pe-film { width: calc(100% - 36px); }
}
@media (max-width: 640px) {
  .pe-intro { padding-block: 34px 28px; }.pe-intro > div { display: block; }.pe-intro h1 { font-size: 38px; }.pe-intro > div > p { margin-top: 22px; font-size: 13px; }
  .pe-film-stage { height: 470px; }.pe-film-copy { left: 7%; bottom: 10%; }.pe-film-copy h2 { font-size: 40px; }.pe-film-copy p { max-width: 260px; font-size: 13px; }
  .pe-film-shade { background: linear-gradient(0deg,rgba(12,21,16,.8),rgba(12,21,16,.25) 75%); }
  .pe-film-chapters { gap: 17px; }.pe-film-controls button { font-size: 10px; }.pe-film-controls button span { display: none; }.pe-film-controls .pe-film-toggle { font-size: 11px; }
  .pe-section { padding-block: 52px; }.pe-heading h2,.pe-copy h2 { font-size: 31px; }.pe-heading p,.pe-copy p { font-size: 14px; }
  .pe-grid-three,.pe-grid-two,.pe-split,.pe-material-strip,.pe-keyboard-pair { grid-template-columns: 1fr; gap: 32px; }
  .pe-product h3 { margin-top: 16px; }.pe-product img { aspect-ratio: 1.5; }
  .pe-heading-row { display: block; }.pe-heading-row .pe-link { margin-top: 16px; }
  .pe-caption { font-size: 9px; flex-wrap: wrap; }.pe-steps { grid-template-columns: 1fr 1fr; gap: 24px; }
  .pe-anchor-nav { gap: 12px 20px; }.pe-anchor-nav a { font-size: 12px; }
  .pe-guide-rows article { grid-template-columns: 28px 1fr; gap: 12px; }.pe-guide-rows p { grid-column: 2; }
  .pe-inline-note { grid-template-columns: 1fr; gap: 12px; }.pe-space-top { margin-top: 40px; }
  .pe-keyboard-toolbar { padding: 12px; }.pe-keyboard-toolbar > span { display: none; }
  .pe-keyboard-desk { grid-template-columns: 1fr; }.pe-keyboard-canvas { padding: 12px; }.pe-keyboard-canvas object { height: 250px; }
  [data-variant="small"] .pe-keyboard-canvas object { height: 490px; }
  .pe-layer-panel { border: 0; padding: 18px; }.pe-layer-panel label { display: inline-grid; width: 100%; padding: 12px 0; }.pe-layer-panel > p { margin-top: 14px; }
  .pe-keyboard-bottom { display: block; }.pe-keyboard-bottom > div { margin-top: 14px; }.pe-keyboard-pair > figure:nth-child(2) { max-width: 340px; margin-inline: auto; }
  .pe-end { padding-block: 48px; }
}
@media (prefers-reduced-motion: reduce) { .pe-film-slide { transition: none; } }
body[data-page="services"] .service-card-media img { width:100%; height:100%; object-fit:cover; }
.pe-work-film video { display:block; width:100%; height:auto; }
.work-card:has(img[src*="keyboard-small"]) img { object-fit:contain; }

.instagram-section:not(.has-live-instagram) .instagram-mosaic { display:none; }

/* SHIBA Print Studies: everyday applications and three-file preparation. */
.pe-phone-hero img { width:100%; height:auto; display:block; }
.pe-grid-two figure,.pe-file-trio figure { margin:0; min-width:0; }
.pe-grid-two figure > img { display:block; width:100%; height:auto; }
.pe-grid-two figcaption { padding-top:20px; }
.pe-grid-two figcaption > span { font-size:10px; letter-spacing:.08em; color:#666b60; }
.pe-grid-two figcaption h3 { font-size:23px; font-weight:500; margin:7px 0; }
.pe-grid-two figcaption p { font-size:14px; color:#60665c; line-height:1.8; margin:0; }
.pe-studies-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px 32px; }
.pe-study-image { display:block; overflow:hidden; background:#f0eee6; }
.pe-study-image > img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; transition:transform .45s ease; }
.pe-study-image:hover > img { transform:scale(1.015); }
.pe-study-image.is-keyboard > img { object-fit:contain; padding:16px; }
.pe-studies-grid .work-card-copy { padding-top:20px; }
.pe-studies-grid .work-card-copy h2 { font:500 25px/1.4 var(--font-reading); margin:8px 0; }
.pe-studies-grid .work-card-copy p { font-size:14px; line-height:1.9; }
.pe-studies-grid .pe-link { font-size:12px; margin-top:17px; }
.pe-file-trio { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:32px; }
.pe-file-preview { display:block; padding:18px; background:#e8e8e0; border:1px solid #d8dacf; }
.pe-file-preview.is-alpha { background-color:#fafbf8; background-image:conic-gradient(#e2e5dc 25%,transparent 0 50%,#e2e5dc 0 75%,transparent 0); background-size:18px 18px; }
.pe-file-preview img { display:block; width:100%; height:auto; box-shadow:0 4px 14px #0000000a; }
.pe-file-trio h3 { font-size:17px; font-weight:500; margin:19px 0 6px; }
.pe-file-trio p { font-size:13px; color:#62665c; line-height:1.8; margin:0; }
.pe-film-credit { color:#70736d; font-size:10px; line-height:1.7; margin-top:12px; }
.pe-calculator-help { border-left:2px solid #b17b2d; padding:12px 20px; margin:28px 0; background:#f6f5ef; }
.pe-calculator-help strong { font-size:15px; font-weight:500; }
.pe-calculator-help p { margin:7px 0; max-width:850px; font-size:13px; color:#60645b; line-height:1.85; }
.pe-calculator-help .pe-link { margin-top:4px; font-size:12px; }
.pe-order-help { font-size:12px; color:#62665c; line-height:1.8; padding-top:12px; }
.pe-service-help { padding-block:32px; border-top:1px solid #dadccf; margin-bottom:28px; }
.pe-service-help strong { font-size:21px; font-weight:500; }
.pe-service-help p { font-size:14px; line-height:1.9; color:#62665c; }
#three-files,#print-ideas,#collection { scroll-margin-top:130px; }
@media(max-width:700px) {
  .pe-studies-grid { grid-template-columns:1fr; gap:40px; }
  .pe-file-trio { grid-template-columns:1fr; max-width:430px; gap:30px; }
  .pe-file-preview { padding:22px 36px; }
  .pe-studies-grid .work-card-copy h2 { font-size:23px; }
  .pe-film-credit { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { .pe-study-image > img { transition:none; } }

/* Original-brand material studies, Edition 06. */
.pe-material-strip figure{margin:0;min-width:0}.pe-material-strip figcaption{padding-top:14px;color:var(--ink-muted,#666);font-size:13px;line-height:1.6}#card-headers{scroll-margin-top:100px}
/* Keep the complete print and brand area visible at every breakpoint. */
.pe-film-stage{height:auto;aspect-ratio:16/9}
@media(max-width:680px){
 .pe-film-stage{height:calc(56.25vw + 221.75px);aspect-ratio:auto;background:#20352a}
 .pe-film-slide video{height:calc(56.25vw - 20.25px);object-fit:contain;object-position:center top}
 .pe-film-shade{top:calc(56.25vw - 20.25px);background:#20352a}
 .pe-film-copy{inset:auto 7% 25px;max-width:none;padding:0}
 .pe-film-copy h2{font-size:33px;margin:13px 0}
 .pe-film-copy p{margin-bottom:17px;max-width:none}
}

.pe-split video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#20352a}
#matcha{scroll-margin-top:110px}

/* Edition 08: concise production handoff */
.pe-keyboard-downloads{display:flex;justify-content:space-between;gap:24px;padding:32px 0;border-top:1px solid #deded5}.pe-keyboard-downloads h3{font-size:26px;margin:10px 0}.pe-keyboard-downloads p{color:#777}.pe-keyboard-downloads>div:last-child{display:flex;flex-direction:column;gap:18px;justify-content:center}.pe-layer-lab{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.pe-layer-visual img{width:100%;height:auto;display:block;background:#f3f1e8;border:1px solid #dfdfd5}.pe-layer-visual p{font-size:14px;line-height:1.7;min-height:3.4em;color:#657166}.pe-guide-switches{display:grid;gap:0;margin-bottom:30px;border-top:1px solid #d7d9d1}.pe-guide-switches button{text-align:left;background:transparent;border:0;border-bottom:1px solid #d7d9d1;padding:15px 18px;font:inherit;letter-spacing:.06em;color:#657166;cursor:pointer}.pe-guide-switches button[aria-pressed=true]{background:#224d3b;color:#fff}.pe-mask-steps{padding-left:22px;line-height:2.1}.pe-layer-lab strong{font-weight:600}.pe-layer-lab p{line-height:1.8}@media(max-width:700px){.pe-layer-lab{grid-template-columns:1fr;gap:24px}.pe-keyboard-downloads{flex-direction:column}.pe-guide-switches{grid-template-columns:repeat(2,minmax(0,1fr))}.pe-guide-switches button{font-size:12px;padding:13px 8px}}

/* Edition 09 — material clarity and a quieter reading rhythm. */
.pe-section{padding-block:clamp(52px,6.2vw,88px)}
.pe-heading h2,.pe-copy h2{line-height:1.3;text-wrap:wrap}
.pe-intro h1{line-height:1.1}
.pe-copy p,.pe-heading p,.pe-studies-grid .work-card-copy p{max-width:100%;line-height:1.8}
.pe-studies-grid .work-card-copy h2{font-family:var(--font-thai);font-size:clamp(22px,2.1vw,28px);font-weight:500}
.pe-studies-grid{gap:56px 32px}
.media-slot.has-image{position:relative;overflow:hidden;min-height:0}
.media-slot.has-image>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.service-article .media-slot.has-image{aspect-ratio:3/2;height:auto;min-height:0}
.service-article .media-slot.has-image:has(img[src*="keyboard-small"]){aspect-ratio:1;object-fit:contain}
.pe-link,.button,.filter-chip,.pe-guide-switches button,.pe-keyboard-toolbar button{transition:color .2s ease,background-color .2s ease,border-color .2s ease}
.pe-link>span,.pe-product>div>span{transition:transform .25s ease}
.pe-link:hover>span,.pe-product:hover>div>span{transform:translate(3px,-3px)}
.pe-product img{transition:filter .3s ease}
.pe-product:hover img{filter:brightness(1.035)}
.pe-details summary{display:flex;justify-content:space-between;align-items:center;gap:20px;list-style:none;min-height:30px}
.pe-details summary::-webkit-details-marker{display:none}
.pe-details summary::after{content:'+';font:300 24px var(--font-reading);transition:transform .2s ease}
.pe-details[open] summary::after{transform:rotate(45deg)}
.pe-details[open]>:not(summary){animation:pe-detail-in .22s ease-out}
@keyframes pe-detail-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
.pe-download-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding-top:32px}
.pe-download-grid>article{border:1px solid #dedfd6;padding:28px;background:#fafaf7}
.pe-download-title{display:flex;justify-content:space-between;gap:20px;align-items:center}
.pe-download-title>span:last-child{font:500 11px var(--font-reading);letter-spacing:.08em;color:#56665b}
.pe-download-grid h3{font-size:25px;font-weight:500;margin:18px 0 8px}
.pe-download-grid p{font-size:13px;color:#687065;margin:0 0 18px}
.pe-download-grid article>div:last-child{display:flex;flex-wrap:wrap;gap:12px 30px}
.pe-download-grid .pe-link{font-size:13px;gap:24px}
.pe-keyboard-toolbar{flex-wrap:wrap}
.pe-keyboard-toolbar button{font-family:var(--font-thai);font-size:12px}
.pe-layer-panel label:has(input:disabled){opacity:.4;cursor:default}
.pe-editor{border:1px solid #cfd3ca;border-radius:6px;overflow:hidden;background:#eeefea}
.pe-editor-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#282d29;color:#d3dbd3;padding:15px 22px;font:400 11px var(--font-reading)}
.pe-editor-file{padding:5px 0;color:#fff;letter-spacing:.04em}
.pe-editor-desk{display:grid;grid-template-columns:minmax(0,1fr) 268px}
.pe-editor-artboard{min-width:0;background:#e3e5df}
.pe-editor-ruler{display:flex;justify-content:space-between;height:26px;padding:7px 15px 0;background:repeating-linear-gradient(90deg,transparent 0 9px,#cad0c5 9px 10px) bottom/100% 4px no-repeat,#eceee8;font:9px var(--font-reading);color:#858e81}
.pe-editor-canvas{padding:36px;display:flex;justify-content:center;align-items:center;min-height:480px}
.pe-editor-canvas img{display:block;width:min(100%,470px);height:auto;box-shadow:0 8px 28px #19261a15}
.pe-editor-layers{padding:25px 0 16px;background:#f9faf6;border-left:1px solid #cfd3ca}
.pe-editor-layers>.pe-kicker{padding:0 20px 20px;color:#697662}
.pe-editor .pe-guide-switches{border-top:1px solid #dfe3d9;margin:0 0 18px;display:grid;grid-template-columns:1fr}
.pe-editor .pe-guide-switches button{display:grid;grid-template-columns:38px 1fr 12px;gap:12px;align-items:center;padding:14px 17px;font:500 11px var(--font-reading);letter-spacing:.025em;text-align:left}
.pe-editor .pe-guide-switches button>img{width:38px;height:38px;display:block;border:1px solid #d2d7cc;background:#fff}
.pe-guide-switches small{display:block;font:400 10px/1.6 var(--font-thai);margin-top:4px;opacity:.8}
.pe-editor-layers>p{padding:0 20px;font-size:11px;line-height:1.9;color:#657160}
.pe-editor-status{display:flex;align-items:center;gap:10px;padding:12px 20px;background:#f8faf5;border-top:1px solid #cfd3ca}
.pe-editor-status p{font-size:12px;line-height:1.7;color:#606d59;margin:0;min-height:21px}
.pe-status-dot{width:5px;height:5px;flex:none;border-radius:50%;background:#6c8c6a}
.pe-tech-notes{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:36px}
.pe-tech-notes article{padding-top:24px;border-top:1px solid #daddd3;scroll-margin-top:120px}
.pe-tech-notes h3{font-size:23px;font-weight:500;line-height:1.5;margin:12px 0}
.pe-tech-notes p{font-size:14px;line-height:1.8;color:#606b5d;max-width:43ch;margin:0 0 12px}
.pe-white-study{margin-bottom:56px}
.pe-white-study>figure{margin:24px 0 0}
.pe-white-study>figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.pe-white-study figcaption{font-size:11px;color:#6b7166;margin:12px 0}
.pe-white-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-block:24px 30px}
.pe-white-levels article{border-top:1px solid #bfc9b6;padding-top:20px}
.pe-white-levels h3{font-size:24px;font-weight:500;margin:0 0 8px}
.pe-white-levels h3>span{font:400 13px var(--font-thai);color:#61705a;margin-left:8px}
.pe-white-levels p{font-size:13px;line-height:1.8;color:#626c5c;margin:0}
.pe-material-tabs{display:flex;flex-wrap:wrap;gap:8px}
.pe-material-tabs button{display:flex;gap:8px;align-items:center;border:1px solid #cfd4c7;background:transparent;padding:11px 18px;color:#57634e;cursor:pointer;font:400 12px var(--font-thai);transition:background .2s,color .2s}
.pe-material-tabs button[aria-pressed=true]{background:#254534;color:#fff;border-color:#254534}
.pe-material-tabs i{display:block;width:12px;height:12px;border-radius:50%;border:1px solid #ffffff55;background:linear-gradient(120deg,#9da8a1,#e5e8e3,#8f9f96)}
.pe-material-tabs [data-white-material=gold] i{background:linear-gradient(110deg,#b18228,#fce1a0,#ad8d40)}
.pe-material-tabs [data-white-material=hologram] i{background:linear-gradient(120deg,#ffbdec,#bfe9e1,#bcbdff,#efd39e)}
.pe-material-tabs [data-white-material=clear] i{background:linear-gradient(135deg,#ffffffa0,#ffffff10)}
[data-white-description]{font-size:14px;line-height:1.9;margin:18px 0 0;color:#53634d;min-height:3.8em;max-width:84ch}
.pe-white-study .pe-kicker{margin-top:30px}
#layer-demo,#keyboard-help{scroll-margin-top:115px}
@media(max-width:800px){.pe-editor-desk{grid-template-columns:minmax(0,1fr) 230px}.pe-editor-canvas{padding:24px;min-height:390px}.pe-editor .pe-guide-switches button{gap:9px;padding:13px 12px}}
@media(max-width:640px){
 .pe-download-grid,.pe-tech-notes{grid-template-columns:1fr;gap:22px}.pe-download-grid>article{padding:23px}.pe-tech-notes{margin-top:28px}
 .pe-keyboard-toolbar{gap:8px;padding:12px}.pe-keyboard-toolbar button{padding:10px 14px}
 .pe-editor-desk{grid-template-columns:1fr}.pe-editor-canvas{min-height:0;padding:25px}.pe-editor-canvas img{max-width:350px}
 .pe-editor-layers{border-left:0;border-top:1px solid #cfd3ca;padding-top:18px}.pe-editor .pe-guide-switches{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pe-editor .pe-guide-switches button{grid-template-columns:30px 1fr;gap:8px;font-size:10px;padding:11px}.pe-editor .pe-guide-switches button>img{width:30px;height:30px}.pe-editor .pe-guide-switches button>span:last-child{display:none}
 .pe-editor-bar{padding:14px;font-size:10px}.pe-editor-bar>span:last-child{display:none}.pe-editor-status{padding:12px 14px;align-items:flex-start}.pe-status-dot{margin-top:8px}
 .pe-white-levels{gap:14px;margin-top:18px}.pe-white-levels article{padding-top:15px}.pe-white-levels h3{font-size:21px}.pe-white-levels h3>span{display:block;font-size:12px;margin:5px 0}.pe-white-levels p{font-size:12px}
 .pe-material-tabs{gap:6px}.pe-material-tabs button{padding:10px 12px;font-size:11px}.pe-white-study{margin-bottom:40px}
 .pe-studies-grid{gap:40px}.pe-copy p,.pe-heading p{max-width:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}.pe-link,.button,.filter-chip,.pe-link>span,.pe-product img,.pe-details summary::after,.pe-product>div>span,.pe-material-tabs button{transition:none!important}.pe-details[open]>:not(summary){animation:none}.pe-link:hover>span,.pe-product:hover>div>span{transform:none}}
.pe-keyboard-canvas object{background:#fff;box-shadow:0 5px 24px #25342012}
#eggshell{scroll-margin-top:120px}
.service-article section>img{display:block;width:100%;height:auto;object-fit:contain}
.pe-white-study>figure img{aspect-ratio:16/9;object-fit:cover}
.pe-film-copy h2{font-size:clamp(34px,4.8vw,64px)}
@media(max-width:680px){.pe-film-copy h2{font-size:33px}}
/* Edition 10: material comparisons and a finished-size border workspace. */
.pe-study-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.pe-study-toolbar .pe-material-tabs{margin:0}
.pe-sample-status{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:15px 0;border-top:1px solid #d3d6cf;font-size:13px;color:#788178}
.pe-sample-status strong{color:#283f32;font-size:18px;font-weight:500}
.pe-white-study [data-white-preview]{display:block;width:100%;height:auto;aspect-ratio:1200/380;object-fit:contain}
.pe-white-study .pe-white-levels{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pe-white-study .pe-white-levels h3{font-size:clamp(21px,2.1vw,28px)}
.pe-white-study [data-white-description]{min-height:2em;padding-top:20px;border-top:1px solid #d3d6cf;color:#3c5143}
.pe-white-study>figure figcaption{margin:12px 0 0;font-size:12px;color:#7d847a}
.pe-white-study [data-white-material][aria-pressed=true]{background:#254738;color:#fff;border-color:#254738}
.pe-white-study [data-white-material]{transition:background .2s,color .2s,box-shadow .2s;min-height:44px}
.pe-cut-lab{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.pe-cut-stage{border:1px solid #ced4ca;background-color:#e7e8e1;background-image:linear-gradient(45deg,#dfe2d9 25%,transparent 25%),linear-gradient(-45deg,#dfe2d9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dfe2d9 75%),linear-gradient(-45deg,transparent 75%,#dfe2d9 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;min-width:0}
.pe-cut-stage-label{display:flex;justify-content:space-between;gap:8px;background:#f3f4ef;padding:13px 18px;border-bottom:1px solid #ced4ca;color:#5c6a5e;font:10px/1.5 Arial,sans-serif;letter-spacing:1.3px}
[data-cut-preview]{aspect-ratio:1;display:grid;place-items:center}
[data-cut-preview]>svg{display:block;width:100%;height:auto}
[data-cut-preview]>img{width:70%;height:auto}
.pe-cut-settings fieldset{border:0;margin:0 0 24px;padding:0}
.pe-cut-settings legend{font-size:14px;margin-bottom:12px}
.pe-cut-shapes{display:flex;gap:8px;flex-wrap:wrap}
.pe-cut-shapes button{border:1px solid #c8cfc3;padding:11px 16px;background:transparent;font:inherit;font-size:13px;color:#374a3d;cursor:pointer;transition:background .2s,color .2s}
.pe-cut-shapes button[aria-pressed=true]{background:#254738;color:#fff;border-color:#254738}
.pe-cut-size{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:20px 0;border-top:1px solid #d3d7cc;border-bottom:1px solid #d3d7cc;font-size:14px}
.pe-cut-size span{display:flex;gap:10px;align-items:center;white-space:nowrap}
.pe-cut-size input{width:76px;min-height:44px;text-align:center;border:1px solid #bbc7b6;background:#fff;font:inherit;font-size:20px;color:#254738;border-radius:0}
.pe-cut-range{display:grid;grid-template-columns:1fr auto;gap:17px;margin:25px 0;font-size:14px}
.pe-cut-range strong{font-weight:500;color:#254738;font-variant-numeric:tabular-nums}
.pe-cut-range input{grid-column:1/-1;display:block;width:100%;accent-color:#254738;cursor:pointer;height:24px;margin:0}
.pe-range-ends{grid-column:1/-1;display:flex;justify-content:space-between;margin-top:-11px;color:#859080;font-size:11px}
.pe-cut-line{display:flex;gap:10px;align-items:center;font-size:13px;color:#6c7669}
.pe-cut-line input{accent-color:#c14c7b;width:16px;height:16px}
.pe-cut-result{margin:22px 0 10px;padding:18px;background:#e1e7db;color:#314934;font-size:14px;line-height:1.9}
.pe-cut-settings>.pe-fineprint{font-size:12px;line-height:1.85;margin-bottom:18px}
.pe-camera-detail{margin:0}.pe-camera-detail img,.pe-perfume-wide{display:block;width:100%;height:auto;object-fit:contain}
.pe-camera-detail figcaption{font-size:13px;color:#6b766b;margin-top:15px}
.pe-material-key{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;border-bottom:1px solid #d9ded3;padding:20px 0;color:#415240;font-size:13px}
.pe-faq-nav{display:grid;gap:0;margin:20px 0 28px}
.pe-faq-nav a{padding:12px 0;border-bottom:1px solid #e1e3dc;color:#59694d}
.pe-faq-group{scroll-margin-top:125px;margin-bottom:52px}
.pe-faq-group>h2{font-size:21px;font-weight:500;padding-bottom:14px;color:#284431}
.pe-faq-group p a{text-decoration:underline;text-underline-offset:4px}
#border-preview,#camera-detail,#perfume-details{scroll-margin-top:120px}
@media(max-width:760px){
 .pe-cut-lab{grid-template-columns:1fr;gap:28px}.pe-cut-stage{max-width:540px;width:100%;margin:auto}
 .pe-study-toolbar{display:block}.pe-study-toolbar .pe-kicker{display:block;margin-bottom:15px}
 .pe-white-study .pe-white-levels{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.pe-white-study .pe-white-levels h3{font-size:20px}
 .pe-white-study .pe-white-levels p{font-size:12px;line-height:1.8}
 .pe-material-key{grid-template-columns:1fr 1fr}.pe-faq-group{margin-bottom:36px}
}
@media(max-width:520px){
 .pe-sample-status{font-size:11px}.pe-sample-status strong{font-size:16px}
 .pe-white-study .pe-white-levels{grid-template-columns:1fr 1fr;gap:20px}.pe-white-study .pe-white-levels h3{font-size:22px}
 .pe-white-study [data-white-preview]{min-width:620px}.pe-white-study>figure{overflow-x:auto;scrollbar-width:thin;margin:0}
 .pe-white-study>figure figcaption{position:sticky;left:0;max-width:100%;font-size:11px}
 .pe-cut-stage-label{font-size:9px}.pe-cut-shapes button{padding:11px 13px}.pe-cut-settings .pe-link{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.pe-cut-shapes button,.pe-white-study [data-white-material]{transition:none}}

/* Keep all four samples visible on phones without horizontal scrolling. */
#white-samples.pe-white-sample-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;overflow:visible}
#white-samples.pe-white-sample-grid [data-white-preview]{width:100%;min-width:0;aspect-ratio:282/314;height:auto}
#white-samples.pe-white-sample-grid figcaption{grid-column:1/-1;position:static}
@media(max-width:520px){#white-samples.pe-white-sample-grid{grid-template-columns:1fr 1fr;gap:10px}}

/* Edition 11: a quiet portfolio film, readable details, and a concise studio page. */
.pe-work-film{width:calc(100% - 30px);max-width:920px;margin:4px auto 0;padding:0}
.pe-work-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#d9d6ce;pointer-events:none}
.pe-work-film figcaption{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid #d6d9d1}
.pe-work-film figcaption>span{font:500 10px/1.5 var(--font-reading);letter-spacing:.13em;color:#646e60}
.pe-work-film .pe-link{font-size:12px;gap:25px;padding:4px 0;border:0}
body[data-page="work"] #collection>.filter-row{margin-bottom:14px}
.pe-work-count{font-size:12px;color:#65715f;margin:0 0 26px;min-height:22px}
.pe-about-opening{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(36px,7vw,100px);align-items:center;padding-block:10px 84px}
.pe-about-portrait{margin:0;min-width:0}
.pe-about-portrait img{display:block;width:100%;height:auto;max-height:590px;object-fit:cover;object-position:center 48%}
.pe-about-portrait figcaption{font:400 10px/1.7 var(--font-thai);letter-spacing:.035em;color:#6b7464;margin-top:14px}
.pe-about-opening .pe-copy h2{font-size:clamp(30px,3.8vw,48px)}
.pe-about-opening .pe-copy p{max-width:470px}
.pe-about-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.pe-about-principles article{padding-top:22px;border-top:1px solid #cbd2c3}
.pe-about-principles article>span{font:500 10px/1.5 var(--font-reading);letter-spacing:.1em;color:#8a632e}
.pe-about-principles h3{font-size:21px;font-weight:500;margin:22px 0 12px}
.pe-about-principles p{font-size:14px;line-height:1.9;color:#606c59;margin:0 0 18px}
.pe-about-principles .pe-link{font-size:12px}
.pe-about-wide{margin:0}
.pe-about-wide img{display:block;width:100%;height:auto}
.pe-about-wide figcaption{display:flex;justify-content:space-between;gap:15px;margin-top:18px;font-size:12px;color:#64725b}
.pe-about-wide figcaption>span:first-child{font:500 10px/1.7 var(--font-reading);letter-spacing:.12em}
.pe-about-contact{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:center;padding-bottom:82px}
.pe-about-contact h2{font:400 clamp(30px,3.8vw,46px)/1.3 var(--font-thai);margin:15px 0 20px;letter-spacing:-.025em}
.pe-about-contact p{font-size:14px;line-height:1.9;color:#5f6c58}
.pe-about-address{border-left:1px solid #d3d9cc;padding:22px 0 22px 52px}
.pe-about-address p{margin:22px 0}
.pe-link:focus-visible,.pe-about-principles a:focus-visible{outline:2px solid #986128;outline-offset:5px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .pe-about-principles .pe-link:hover>span{transform:translate(3px,-3px)}
 .pe-studies-grid .work-card:not([hidden]){animation:pe-work-reveal .3s ease both}
 @keyframes pe-work-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
}
@media(max-width:760px){
 .pe-about-opening{grid-template-columns:1fr;gap:34px;padding-bottom:52px}
 .pe-about-portrait{max-width:520px;width:100%;margin:auto}
 .pe-about-portrait img{max-height:530px;aspect-ratio:1;object-fit:cover}
 .pe-about-principles{grid-template-columns:1fr;gap:30px}
 .pe-about-principles p{max-width:520px}
 .pe-about-principles h3{margin-top:16px}
 .pe-about-contact{grid-template-columns:1fr;gap:32px;padding-bottom:54px}
 .pe-about-address{border-left:0;border-top:1px solid #d3d9cc;padding:28px 0 0}
 .pe-about-wide figcaption{flex-wrap:wrap}
}
@media(max-width:420px){.pe-work-film figcaption{gap:12px}.pe-work-film figcaption>span{font-size:9px;letter-spacing:.08em}.pe-work-film .pe-link{font-size:11px;gap:14px}}
@media(prefers-reduced-motion:reduce){.site-drawer,.drawer-overlay{transition:none}.pe-studies-grid .work-card:not([hidden]){animation:none}}

/* Edition 12: studio imagery and a clear PVC / paper material guide. */
.pe-about-material-story{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);align-items:center}
.pe-about-material-story figure{margin:0;min-width:0}
.pe-about-material-story img{display:block;width:100%;height:auto}
.pe-about-material-story figcaption{font-size:11px;line-height:1.7;color:#68745f;margin-top:12px}
.pe-about-material-story .pe-copy h2{font-size:clamp(29px,3.1vw,42px)}
.pe-about-material-story .pe-link{font-size:12px;gap:20px}
.pe-material-guide-intro .breadcrumb{margin:0 0 30px;font-size:11px}
.pe-material-comparison{padding-bottom:12px}
.pe-material-takeaway{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:60px;align-items:center;padding:26px 0 34px;border-top:1px solid #d4dacd}
.pe-material-takeaway>.pe-kicker{grid-column:1/-1;margin-bottom:12px}
.pe-material-takeaway h2{font:400 clamp(27px,3.3vw,43px)/1.35 var(--font-thai);letter-spacing:-.02em;margin:0}
.pe-material-takeaway h2 span{color:#805427}
.pe-material-takeaway p{font-size:14px;line-height:1.9;color:#5c6855;margin:0}
.pe-material-water-photo{margin:0}
.pe-material-water-photo img{display:block;width:100%;height:auto;max-height:690px;object-fit:contain;background:#ded8ce}
.pe-material-water-photo figcaption{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:22px 0 18px;border-bottom:1px solid #d2d8cc}
.pe-material-water-photo figcaption>span{display:flex;flex-direction:column;gap:7px;color:#56654d;font-size:13px}
.pe-material-water-photo figcaption strong{font:500 11px/1.5 var(--font-reading);letter-spacing:.14em;color:#283c30}
.pe-material-compare-table table{border-collapse:collapse;width:100%;table-layout:fixed;font-size:14px;line-height:1.7}
.pe-material-compare-table th,.pe-material-compare-table td{text-align:left;vertical-align:top;padding:22px 25px;border-bottom:1px solid #ccd4c4;overflow-wrap:anywhere}
.pe-material-compare-table thead th{font-weight:500;border-bottom:1px solid #7d8c72;color:#284a34}
.pe-material-compare-table th:first-child{width:25%;padding-left:0}
.pe-material-compare-table tbody th{font-weight:500}
.pe-material-compare-table td{color:#56644e}
.pe-material-compare-table td strong{font-weight:500;color:#805427}
.pe-material-use-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px}
.pe-material-use-grid article{border-top:1px solid #ccd4c4;padding-top:24px}
.pe-material-tag{display:inline-block;background:#e4ebe1;color:#264d35;padding:6px 12px;font:500 10px/1.5 var(--font-reading);letter-spacing:.1em}
.pe-material-tag.is-paper{background:#f1e9dc;color:#78562b}
.pe-material-use-grid h3{font-size:20px;line-height:1.5;font-weight:500;margin:20px 0 10px}
.pe-material-use-grid p{font-size:14px;line-height:1.9;color:#5e6c54;margin:0}
.pe-material-ink-note{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:60px;align-items:center;border-left:2px solid #ae8a4c;background:#f6f4ee;padding:30px 35px;margin:52px 0 25px}
.pe-material-ink-note>.pe-kicker{grid-column:1/-1;margin-bottom:14px}
.pe-material-ink-note h3{font-weight:400;font-size:25px;line-height:1.5;margin:0}
.pe-material-ink-note p{font-size:14px;line-height:1.9;color:#5b6752;margin:0}
.pe-material-guide-actions{display:flex;gap:40px;flex-wrap:wrap}
.pe-material-choice-note{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:24px 28px;background:#f3f4ee;border-left:2px solid #8a9c7b;margin:0 0 30px}
.pe-material-choice-note h3{font-size:20px;font-weight:500;line-height:1.5;margin:7px 0 5px}
.pe-material-choice-note p{font-size:13px;line-height:1.8;color:#5e6d55;margin:0}
.pe-material-choice-note .pe-link{flex-shrink:0;font-size:12px;gap:25px}
@media(max-width:760px){
 .pe-about-material-story{grid-template-columns:1fr;gap:28px}
 .pe-material-takeaway,.pe-material-ink-note{grid-template-columns:1fr;gap:16px}
 .pe-material-takeaway>.pe-kicker,.pe-material-ink-note>.pe-kicker{margin-bottom:0}
 .pe-material-takeaway{padding:22px 0 28px}
 .pe-material-takeaway h2{font-size:30px}
 .pe-material-compare-table th,.pe-material-compare-table td{padding:18px 12px;font-size:13px}
 .pe-material-compare-table th:first-child{width:23%}
 .pe-material-water-photo figcaption{gap:16px;padding-top:17px}
 .pe-material-water-photo figcaption>span{font-size:12px}
 .pe-material-use-grid{grid-template-columns:1fr;gap:30px}
 .pe-material-use-grid h3{margin-top:14px}
 .pe-material-ink-note{padding:24px 22px;margin-top:38px}
 .pe-material-ink-note h3{font-size:24px}
 .pe-material-choice-note{display:block;padding:22px}
 .pe-material-choice-note .pe-link{margin-top:16px}
 .pe-material-guide-actions{gap:15px 30px}
}

/* Edition 13: navigation that stays readable across phone and tablet widths. */
.shell.masthead{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.masthead-actions .account-nav-icon,.site-nav .account-nav-icon{display:inline-flex;min-width:44px;min-height:44px;padding:8px;border-radius:50%;border-color:#d9dfd7}
.drawer-account-link{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid #d7dfd5;border-radius:12px;margin-bottom:22px;color:#24392b;text-decoration:none}
.drawer-account-link>span:last-child{margin-left:auto}.drawer-account-link small{display:block;font-size:12px;margin-top:4px;color:#657361}
.masthead-tracking svg{display:none}
@media(max-width:620px){.shell.masthead{gap:6px}.masthead-actions{gap:2px}.masthead-actions .masthead-tracking,.masthead-actions .account-nav-icon{padding:8px;min-width:44px;min-height:44px;border-radius:50%}.masthead-tracking span{display:none}.masthead-tracking svg{display:block}}
.masthead>.brand{justify-self:center}
.masthead>*{min-width:0}
.masthead-actions{justify-self:end;white-space:nowrap}
.site-nav{grid-template-columns:minmax(44px,1fr) minmax(0,auto) minmax(190px,1fr);gap:12px}
.site-nav-links{min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;flex-wrap:nowrap}
.site-nav-links>a{flex:none;white-space:nowrap;line-height:1.3;min-height:48px;display:inline-flex;align-items:center;padding:12px 10px}
.site-nav-links>span{flex:none}
.site-drawer{height:100dvh;max-height:100dvh;overscroll-behavior:contain;padding:0 24px 24px}
.drawer-head{position:sticky;top:0;z-index:2;min-height:64px;flex-shrink:0;justify-content:space-between;background:#fff;border-bottom:1px solid #e8e8e4}
.drawer-title{font:500 12px/1.5 var(--font-reading);letter-spacing:.14em}
.drawer-close{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.drawer-nav{flex-shrink:0;padding-top:12px}
.drawer-nav a,.drawer-nav a.is-active{min-height:44px;padding:12px 2px;font:400 14px/1.45 var(--font-thai);white-space:normal}
.drawer-nav a.is-active::after{transform:scaleX(1)}
.drawer-group-label{margin:24px 0 6px;font:400 11px/1.6 var(--font-thai);color:#75766e;letter-spacing:.03em}
.drawer-lower{flex-shrink:0;padding-top:28px}
.action-icon{display:inline-block;width:22px;height:22px;flex:none;vertical-align:middle}
.pe-link{min-height:44px;padding:10px 14px;border:1px solid currentColor;border-radius:4px;gap:20px;max-width:100%;line-height:1.5}
.pe-link>span[aria-hidden]{display:inline-flex;flex:none}
.pe-link:hover{background:rgba(160,110,45,.06)}
.pe-link:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.pe-link:hover>span,.pe-product:hover>div>span{transform:translateX(2px)}
.pe-product>div>span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border:1px solid #c4c5bc;border-radius:50%;margin-left:12px}
@media(max-width:1180px){
 .site-nav{display:grid;grid-template-columns:minmax(0,1fr);padding-inline:14px;min-height:48px}
 .site-nav .sticky-nav-side{display:none}
 .site-nav-links{justify-content:safe center;gap:0}
}
@media(max-width:820px){
 .site-header{position:sticky;top:0;z-index:1200;background:#fff}
 .shell.masthead{height:72px;min-height:72px;padding:0 14px}
 .masthead-actions a:first-child{display:inline-flex}
 .masthead-actions a{min-height:36px;font-size:10px;padding-inline:8px}
 .site-nav{top:73px;left:auto;right:auto;display:grid;min-height:46px;padding:0 8px;border-radius:0;box-shadow:none;opacity:1;visibility:visible;pointer-events:auto;transform:none}
 .site-nav-links>a.is-active::after{display:block}
 .site-nav-links{justify-content:flex-start;scrollbar-width:none}
 .site-nav-links::-webkit-scrollbar{display:none}
 .site-nav-links>a{min-height:46px;padding:12px;font-size:10px}
 .site-nav-links>span{display:none}
 .masthead>.menu-button{width:44px;height:44px}
}
@media(max-width:620px){.masthead-actions .masthead-contact{display:none}}
@media(max-width:420px){
 .masthead>.brand{width:126px}
 .masthead-actions a{font-size:9px;padding-inline:6px}
 .shell.masthead{padding-inline:10px}
}
@media(max-width:360px){.masthead>.brand{width:100px}}
@media(prefers-reduced-motion:reduce){.pe-link>span,.pe-product>div>span{transition:none;transform:none}}

/* Edition 14: compact service navigation and font-independent download icons. */
.drawer-service-group{margin-top:20px;border-block:1px solid #e8e8e4}
.drawer-service-group>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:12px 2px;font:400 13px/1.5 var(--font-thai);color:#484b43;cursor:pointer;list-style:none}
.drawer-service-group>summary::-webkit-details-marker{display:none}
.drawer-service-group>summary::marker{content:""}
.drawer-service-group>summary .action-icon{transition:transform .2s ease}
.drawer-service-group[open]>summary .action-icon{transform:rotate(180deg)}
.drawer-service-group>summary:hover{color:#a36321}
.drawer-service-group>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.drawer-service-links{display:grid;padding:0 0 12px 14px}
.drawer-service-links a{font-size:13px}
.pe-link:has(.download-icon):hover>span{transform:translateY(2px)}
@media(prefers-reduced-motion:reduce){.drawer-service-group>summary .action-icon{transition:none}.pe-link:has(.download-icon):hover>span{transform:none}}

/* Edition 15: a single, compact section rail below the shared navigation. */
.pack-seal-picture{display:block;width:100%;max-width:130px;height:130px;margin:0 auto 10px}
.pack-seal-options label>span{width:100%}
.tracking-item-section,.tracking-parcel-section{padding:24px;border:1px solid #dce1d6;border-radius:18px;background:#fafbf8}
.tracking-subhead h3{font-size:22px;margin:4px 0 16px;color:#24382c}
.tracking-item-list{gap:12px}
.tracking-item{padding:18px;background:white;border:1px solid #e2e6dc;gap:16px}
.tracking-item strong{font-size:15px;overflow-wrap:anywhere;min-width:0}
.tracking-item .tracking-item-status{padding:7px 12px;border-radius:20px;background:#fff0d6;color:#855016;font-size:13px;font-weight:600;text-align:center;flex-shrink:0}
.tracking-item[data-stage="shipped"] .tracking-item-status,.tracking-item[data-stage="completed"] .tracking-item-status{background:#dfeddb;color:#315a32}
.tracking-item[data-stage="cancelled"] .tracking-item-status{background:#fbe6e2;color:#9a3528}
.tracking-parcel-section{border-top:4px solid #48643c;background:#f2f6ed}
.tracking-parcel{padding:22px;border-color:#cbd7c1;box-shadow:0 4px 16px #263b2210}
.tracking-parcel-copy strong{font-size:clamp(19px,2vw,26px);letter-spacing:.04em;white-space:normal;overflow-wrap:anywhere;color:#24382c;margin:6px 0}
.tracking-parcel-copy span{font-size:13px;font-weight:500}
.tracking-parcel .button{background:#24382c;color:white;border-color:#24382c}
.tracking-parcel-empty{background:white;border:1px dashed #bac9ae;padding:24px}
.tracking-parcel-empty strong{font-size:17px;margin-bottom:5px;color:#31442c}
.tracking-parcel-empty span{font-size:13px;line-height:1.7}
@media(max-width:600px){.tracking-item-section,.tracking-parcel-section{padding:18px 14px}.tracking-item{align-items:flex-start;flex-direction:column}.tracking-parcel{padding:16px}.tracking-subhead{align-items:flex-start;flex-direction:column}.pack-seal-picture{height:100px}}
:root{--materials-sticky-top:60px;--materials-anchor-offset:140px}
/* Shared section rails keep anchored content below the full sticky header. */
.materials-hero .materials-entry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:660px;margin-top:26px}
.materials-hero .materials-entry .materials-section-action{display:flex;align-items:center;gap:14px;min-height:90px;padding:18px;text-align:left;text-decoration:none;border:1px solid #d9ded3;border-radius:14px;background:#f6f7f2;color:#25372b;transform:none;transition:background-color .18s ease,border-color .18s ease}
.materials-entry strong{display:block;font:500 15px/1.5 var(--font-thai)}
.materials-entry small{display:block;margin-top:3px;font:400 11px/1.6 var(--font-thai);opacity:.75}
.materials-entry-icon{font:400 12px/1 var(--font-thai);opacity:.65}
.materials-entry-arrow{margin-left:auto;font-size:23px}
.materials-hero .materials-entry .materials-section-action:is(.is-active,:hover,:focus-visible){background:#24382c;color:#fff;border-color:#24382c}
.materials-tech-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px;font:400 12px/1.7 var(--font-thai);color:#6b7167}
.materials-tech-shortcuts>span{grid-column:1/-1}
.materials-tech-shortcuts a{display:grid;grid-template-columns:1fr 20px;gap:3px 10px;padding:14px 16px;border:1px solid #dce1d7;border-radius:10px;color:#344a37;text-decoration:none;background:#fff}
.materials-tech-shortcuts a strong{font-weight:500;font-size:13px}
.materials-tech-shortcuts a small{grid-column:1;font-size:11px;color:#6b7167}
.materials-tech-shortcuts a>span{grid-column:2;grid-row:1/3;align-self:center;font-size:20px}
.materials-tech-shortcuts a:hover{border-color:#82947b;background:#f6f7f3}
#perfume-details > .pe-link{margin-top:24px}
#artwork-image-dialog{width:min(1100px,96vw);max-width:96vw;max-height:94vh;max-height:94dvh;padding:0;border:0;border-radius:14px;background:#fff;color:#17231b}
#artwork-image-dialog::backdrop{background:rgb(15 24 19 / .78)}
.artwork-image-viewer{padding:18px;display:grid;gap:12px}
.artwork-image-viewer header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.artwork-image-viewer h2{font:600 15px/1.6 var(--font-thai);margin:0}
.artwork-image-viewer button{flex:none;min-height:44px;padding:8px 16px;border:1px solid #c8d0c5;border-radius:8px;background:#f5f7f2;cursor:pointer;color:inherit}
.artwork-image-viewer img{display:block;width:100%;height:65vh;height:65dvh;object-fit:contain;background:repeating-conic-gradient(#eee 0% 25%,#fff 0% 50%) 0/20px 20px}
.artwork-image-viewer footer{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px}
.artwork-image-viewer a{color:inherit;text-underline-offset:4px}
#three-files .pe-file-preview{cursor:zoom-in}
html:has(#artwork-image-dialog[open]){overflow:hidden}
.materials-tech-shortcuts a:focus-visible{outline:2px solid #b17534;outline-offset:4px}
@media(max-width:560px){.materials-hero .materials-entry{grid-template-columns:1fr}.materials-hero .materials-entry .materials-section-action{min-height:76px;padding:14px 16px}.materials-tech-shortcuts{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.materials-hero .materials-entry .materials-section-action{transition:none}}
.materials-section-nav{top:var(--materials-sticky-top);padding:10px 14px;border:0;border-bottom:1px solid #e6e7e0;background:rgba(255,255,255,.96);box-shadow:0 5px 18px rgba(28,38,30,.035)}
.materials-section-nav-inner{display:flex;grid-template-columns:none;width:max-content;max-width:100%;min-height:44px;margin-inline:auto;padding:4px;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;flex-wrap:nowrap;border:1px solid #e5e7df;border-radius:16px;background:#f3f4ef}
.materials-section-nav a,.materials-section-nav a:first-child{min-height:38px;padding:8px 18px;border:0;border-radius:12px;justify-content:center;font:500 12px/1.4 var(--font-thai);color:#60685b;white-space:nowrap;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
.materials-section-nav a::after{display:none}
.materials-section-nav a:hover{background:#e5e9df;color:#24352a}
.materials-section-nav a.is-active{background:#24382c;color:#fff;box-shadow:0 2px 5px rgba(24,45,30,.12)}
.materials-section-nav a:focus-visible{outline:2px solid #b17534;outline-offset:-3px}
body[data-page="materials"] :is(#pricing,#materials-library,#pricing-details,#white-ink,#finishes){scroll-margin-top:var(--materials-anchor-offset)}
@media(max-width:820px){:root{--materials-sticky-top:121px;--materials-anchor-offset:205px}}
@media(max-width:620px){
 .materials-section-nav{padding:8px 10px}
 .materials-section-nav-inner{width:max-content;max-width:100%;min-height:44px;gap:2px;padding:3px;border-radius:14px}
 .materials-section-nav a,.materials-section-nav a:first-child{padding:8px 12px;font-size:11px;border-radius:10px}
}
@media(prefers-reduced-motion:reduce){.materials-section-nav a{transition:none}}
/* Both stacked rails keep the same edge while the desktop header becomes sticky. */
body[data-page="materials"] .site-nav.is-stuck{animation:none}

/* Edition 16: one section-navigation style and a quieter drawer hierarchy. */
body[data-page="guide"] :is(#layer-demo,#three-files,#layers,#formats){scroll-margin-top:var(--materials-anchor-offset)}
body[data-page="guide"] .site-nav.is-stuck{animation:none}
.artwork-section-nav a{gap:6px}
.artwork-section-nav .action-icon{width:16px;height:16px}
.drawer-menu-group{margin:0;border:0}
.drawer-menu-group>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;padding:12px 2px;font:400 14px/1.45 var(--font-thai);color:#282c26;cursor:pointer;list-style:none}
.drawer-menu-group>summary::-webkit-details-marker{display:none}
.drawer-menu-group>summary::marker{content:""}
.drawer-menu-group>summary .action-icon{width:18px;height:18px;transition:transform .2s ease}
.drawer-menu-group[open]>summary .action-icon{transform:rotate(180deg)}
.drawer-menu-group>summary:hover{color:#a36321}
.drawer-menu-group>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.drawer-menu-group .drawer-service-links{border-left:1px solid #e5e7df;margin:2px 0 12px 3px;padding:0 0 0 14px}
.drawer-menu-group .drawer-service-links a{font-size:12px;color:#62695c}
.drawer-secondary{display:flex;gap:4px 14px;flex-wrap:wrap;margin:0 0 20px;padding-top:18px;border-top:1px solid #e8e8e4}
.drawer-secondary a{display:inline-flex;align-items:center;min-height:36px;font:400 10px/1.4 var(--font-reading);color:#66705f;text-decoration:none}
.drawer-secondary a:hover,.drawer-secondary a[aria-current]{color:#a36321}
.drawer-secondary a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.drawer-menu-group>summary .action-icon{transition:none}}

/* Contact: a quiet text link to the studio introduction. */
.contact-about-link{display:inline-block;padding:10px 0;font-weight:700;line-height:1.5;color:inherit;text-decoration:none}
.contact-about-link:hover{text-decoration:underline;text-underline-offset:4px}
.contact-about-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Home shortcuts: matching outline icons at every screen size. */
.quick-links-grid .quick-link-icon svg{display:block;width:28px;height:28px}

/* Match the source artboard proportions, without changing print dimensions. */
.keep-phrase { white-space:nowrap; }
#keyboard-help .pe-heading { max-width:none; }
#keyboard-help .pe-heading h2 { max-width:none; font-size:clamp(28px,3.3vw,44px); }
/* Queue review: calm calendar workspace; status and planning rules are unchanged. */
.queue-hero { padding:56px 0 30px; background:#f2f5ee; border-bottom:1px solid #dce3d5; }
.queue-hero h1 { font-size:clamp(36px,5vw,66px); color:#243b31; letter-spacing:-.025em; }
.queue-roadmap { display:flex; flex-wrap:wrap; gap:12px 30px; margin-top:30px; font-size:13px; color:#415347; }
.queue-roadmap span { display:flex; align-items:center; gap:10px; }
.queue-roadmap b { display:grid; place-items:center; width:30px; height:30px; border:1px solid #bdcbb6; border-radius:50%; font-size:11px; }
.queue-page-jump { padding-top:26px; }
.queue-page-jump a { border:1px solid #becbb7; border-radius:24px; padding:10px 18px; background:#fff; color:#243b31; }
.queue-section { background:#f8f9f5; padding:40px 0 52px; }
.queue-layout { gap:24px; grid-template-columns:minmax(0,1fr) 300px; }
.queue-calendar-panel { background:#fff; padding:26px; border:1px solid #dce3d5; border-radius:20px; box-shadow:0 8px 28px #253c3006; }
.queue-calendar-head { align-items:center; border-color:#dce3d5; }
.queue-calendar-head h2 { font-size:23px; }
.queue-month-controls button { width:44px; height:44px; border-radius:50%; border-color:#dce3d5; }
.queue-month-controls { grid-template-columns:44px minmax(115px,auto) 44px; }
.queue-calendar { gap:5px; padding-top:6px; }
.queue-date, .queue-date:nth-child(7n+1) { min-height:96px; padding:12px 9px; border:1px solid #e8ede3; border-radius:10px; gap:7px; }
.queue-date.is-selected,.queue-date.is-selected.is-outside { background:#294335; border-color:#294335; color:#fff; }
.queue-date:not(.is-selected):hover { background:#eff4e8; border-color:#809976; }
.queue-date.is-today::after { content:"วันนี้"; top:8px; right:7px; letter-spacing:0; font-size:9px; }
.queue-day-panel { padding:28px; border:1px solid #cad7be; border-radius:20px; background:#edf3e6; top:100px; }
.queue-day-date strong { color:#294335; font-size:76px; }
.queue-day-status { border-color:#cfdbc5; }
.queue-day-panel .text-link { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px; border-radius:10px; background:#294335; color:white; font-size:12px; }
.queue-planner-section { background:#fff; padding:52px 0; }
.queue-planner-heading h2 { font-size:clamp(30px,4vw,48px); color:#243b31; }
.queue-planner-layout { gap:24px; border:0; }
.queue-planner-form { padding:8px; border:1px solid #dce3d5; border-radius:20px; background:#fbfcf8; }
.queue-planner-group { border-color:#e2e8dc; }
.queue-planner-group-head > span { color:#637f51; }
.queue-planner-result { border-radius:20px; background:#243b31; min-height:480px; }
.queue-planner-submit { border-radius:10px; }
.queue-section button:focus-visible,.queue-planner-section button:focus-visible { outline:2px solid #ad712c; outline-offset:3px; }
@media(max-width:1000px) { .queue-layout { grid-template-columns:1fr; } .queue-day-panel { position:static; } .queue-calendar-head { flex-wrap:wrap; gap:18px; } }
@media(max-width:600px) { .queue-hero { padding:36px 0 24px; } .queue-calendar-panel { padding:14px 10px; border-radius:16px; } .queue-calendar-head { padding-inline:4px; } .queue-month-controls { width:100%; } .queue-calendar { gap:3px; } .queue-date,.queue-date:nth-child(7n+1) { min-height:70px; padding:9px 4px; border-radius:7px; } .queue-date > span { font-size:17px; } .queue-date > small { font-size:8px; } .queue-date.is-today::after { top:3px; right:3px; font-size:7px; } .queue-legend { gap:10px 14px; font-size:11px; } .queue-day-panel { padding:22px; } .queue-planner-result { min-height:0; } }
.pe-keyboard-canvas object{width:100%;height:auto;aspect-ratio:945.639 / 505.348}
[data-variant="small"] .pe-keyboard-canvas object{height:auto;aspect-ratio:300.472 / 422.362;max-width:420px}
.pe-keyboard-canvas object>img{display:block;width:100%;height:auto;object-fit:contain}
.pe-editor-desk{grid-template-columns:minmax(0,1fr) 330px}
.pe-editor{border-radius:18px}.pe-editor-bar{background:#edf2e8;color:#42563e}.pe-editor-file{color:#243a2c;font-size:14px}
.pe-editor .pe-guide-switches{gap:8px;padding:0 14px;border:0}.pe-editor .pe-guide-switches button{border:1px solid #dce2d4;border-radius:10px;grid-template-columns:48px 1fr;font-size:14px;letter-spacing:0;background:white;color:#304330}
.pe-editor .pe-guide-switches button>img{width:48px;height:48px;object-fit:contain;border-radius:6px}
.pe-editor .pe-guide-switches button>span:last-child{display:none}.pe-editor .pe-guide-switches button[aria-pressed=true]{border-color:#526d46;background:#e8efdd;color:#243a2c}
.pe-editor .pe-guide-switches small{font-size:11px;line-height:1.5}.pe-editor-status p{font-size:14px}
@media(max-width:700px){.pe-editor-desk{grid-template-columns:1fr}.pe-editor .pe-guide-switches button{font-size:12px;grid-template-columns:36px 1fr}.pe-editor .pe-guide-switches button>img{width:36px;height:36px}.pe-editor-status p{font-size:12px}}