/* C83 process detail pages: extend the shared paper, ink and solid-colour system. */
.process-page { background:#f2f0ea; color:#1b1c1a; }
.process-wrap { width:min(1200px,calc(100% - 64px)); margin-inline:auto; padding-block:28px 64px; }
.process-page :is(h1,h2,h3,p,figure,ol,ul) { margin:0; }
.process-page :is(h1,h2,h3) { font-family:"Sarabun",sans-serif; text-wrap:balance; }
.process-page :is(p,li,figcaption) { line-height:1.8; }
.process-page :is(.process-hero,.process-lists,.process-examples,.process-handoff,.process-adjacent) > * { min-width:0; }
.process-page a:focus-visible { outline:3px solid #1b1c1a; outline-offset:5px; }
.process-breadcrumb { margin-bottom:28px; font-size:14px; }
.process-breadcrumb ol { display:flex; flex-wrap:wrap; gap:6px 12px; list-style:none; padding:0; }
.process-breadcrumb li + li::before { content:"›"; margin-right:12px; }
.process-breadcrumb a { text-decoration:underline; text-underline-offset:4px; }
.process-hero { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.process-step-label { display:flex; align-items:center; gap:18px; margin-bottom:18px; }
.process-step-label .method-number { font-size:clamp(44px,5vw,64px); margin:0; }
.process-step-label p { font-size:14px; font-weight:700; }
.process-hero h1 { font-size:clamp(34px,3.8vw,54px); font-weight:300; line-height:1.25; letter-spacing:-.02em; color:#1b1c1a; }
.process-hero .process-lead { margin-top:24px; font-size:17px; max-width:65ch; }
.process-illustration { background:#b9d8dc; border-radius:16px; overflow:hidden; }
.process-illustration img { display:block; width:100%; height:auto; }
.process-illustration figcaption { padding:14px 20px; font-size:13px; }
.process-handoff { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px; padding-block:22px; border-block:1px solid #1b1c1a; }
.process-handoff h2 { font-size:15px; font-weight:700; margin-bottom:6px; }
.process-handoff p { font-size:15px; }
.process-section { margin-top:48px; }
.process-section h2 { font-size:clamp(25px,2.6vw,34px); line-height:1.3; font-weight:700; margin-bottom:22px; }
.process-actions { padding:0; list-style:none; }
.process-actions li { display:grid; grid-template-columns:40px 1fr; gap:18px; padding-block:22px; border-bottom:1px solid rgba(27,28,26,.22); }
.process-actions li:first-child { padding-top:0; }
.process-small-number { font-size:14px; font-weight:700; padding-top:4px; }
.process-page h3 { font-size:20px; line-height:1.5; font-weight:700; margin-bottom:8px; }
.process-actions p { max-width:74ch; font-size:17px; }
.process-lists { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.process-lists section { padding:26px 28px; background:#b9d8dc; border-radius:16px; }
.process-lists section + section { background:#e7f34c; }
.process-lists ul { padding-left:1.3em; }
.process-lists li + li { margin-top:10px; }
.process-watch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:0; list-style:none; }
.process-watch li { padding:24px; border-radius:16px; background:#d7ccff; }
.process-watch p { font-size:16px; }
.process-examples { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 24px; }
.process-examples figure { min-width:0; }
.process-examples .video-embed--vertical { max-width:260px; margin-inline:auto; }
.process-examples figcaption { margin-top:12px; font-size:15px; }
.process-work-links { display:flex; flex-wrap:wrap; gap:12px 24px; list-style:none; padding:0; }
.process-work-links a,.process-all { display:inline-block; padding-block:8px; font-weight:600; text-decoration:underline; text-underline-offset:5px; }
.process-adjacent { display:grid; grid-template-columns:1fr 1fr; gap:24px; border-top:1px solid #1b1c1a; padding-top:24px; }
.process-adjacent a { padding:12px 0; }
.process-adjacent span { display:block; font-size:13px; margin-bottom:8px; }
.process-adjacent strong { font-size:20px; }
.process-next { grid-column:2; text-align:right; }
.process-strip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding:0; list-style:none; margin-top:24px !important; }
.process-strip a { display:block; height:100%; padding:14px 12px; border-radius:12px; font-size:14px; }
.process-strip span { display:block; font-size:18px; font-weight:800; }
.process-strip [aria-current="step"] { background:#e7f34c; font-weight:700; }
.process-all { margin-top:16px; }
.process-cta { background:#1b1c1a; color:#f2f0ea; padding:32px; border-radius:16px; }
.process-cta h2 { color:#e7f34c; }
.process-cta p { max-width:65ch; font-size:17px; }
.process-cta .cta-row { gap:16px; margin-top:24px; }
.process-cta .button--secondary { color:#f2f0ea; border-color:#f2f0ea; }
.process-cta a:focus-visible { outline-color:#e7f34c; }
@media (hover:hover) {
  .process-page :is(.process-work-links a,.process-all,.process-breadcrumb a):hover { text-decoration-thickness:2px; }
  .process-strip a:hover { background:#d7ccff; }
  .process-strip [aria-current="step"]:hover { background:#e7f34c; }
}
html:is([lang="zh-Hans"],[lang="ja"]) .process-page :is(h1,h2,h3) { letter-spacing:0; }
@media (max-width:900px) {
  .process-wrap { width:calc(100% - 40px); }
  .process-hero { grid-template-columns:1fr; gap:24px; }
  .process-hero h1 { max-width:24ch; }
  .process-illustration { max-width:720px; }
}
@media (max-width:600px) {
  .process-wrap { padding-top:20px; padding-bottom:44px; }
  .process-breadcrumb { margin-bottom:22px; }
  .process-section { margin-top:36px; }
  .process-hero h1 { font-size:34px; }
  .process-step-label { margin-bottom:14px; }
  .process-hero .process-lead { margin-top:18px; font-size:16px; }
  .process-handoff,.process-lists,.process-watch,.process-examples { grid-template-columns:1fr; gap:18px; }
  .process-handoff { margin-top:24px; }
  .process-actions li { grid-template-columns:26px 1fr; gap:12px; padding-block:18px; }
  .process-actions p { font-size:16px; }
  .process-page h3 { font-size:19px; }
  .process-lists section,.process-watch li { padding:22px; }
  .process-adjacent { gap:16px; }
  .process-adjacent strong { font-size:17px; }
  .process-strip { grid-template-columns:1fr; gap:4px; }
  .process-strip a { display:flex; gap:14px; align-items:baseline; padding:10px 12px; }
  .process-cta { padding:24px 20px; }
  .process-cta .button { max-width:100%; white-space:normal; text-align:center; }
}