/* DESIGN GUIDE | Structured production CSS | 2026-10-26 */
.guide-hero{position:relative;min-height:720px;padding:170px 7vw 100px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:7%;align-items:center;background:linear-gradient(135deg,#f8f3e4 0 58%,#dce4d5 58%);overflow:hidden}
.guide-hero-copy{position:relative;z-index:2;min-width:0}.guide-hero h1{max-width:980px;margin:24px 0 30px;font:500 clamp(3rem,5.7vw,6.8rem)/1.12 var(--serif);letter-spacing:.025em}.guide-hero h1 em{display:block;color:var(--vermilion);font-style:normal}.guide-hero-copy>p:not(.eyebrow){max-width:720px;font-size:15px;line-height:2.15}.hero-jump{display:inline-flex;gap:42px;align-items:center;margin-top:18px;padding:15px 20px;border-bottom:1px solid var(--ink);color:var(--ink);font-size:12px;font-weight:700;text-decoration:none}.guide-sheet-preview{display:grid;place-items:center;min-height:470px;min-width:0}.preview-paper{position:relative;width:min(100%,500px);aspect-ratio:4/5;padding:36px;background:#fffdf7;border:1px solid var(--line);box-shadow:25px 35px 70px #10282220;transform:rotate(3deg)}.preview-paper>span{font:700 10px Arial;letter-spacing:.22em;color:var(--vermilion)}.preview-paper>b{position:absolute;inset:40% 12% auto;display:grid;place-items:center;height:22%;border:2px solid var(--ink);font:500 clamp(1.5rem,3vw,3rem) var(--serif)}.preview-paper i{position:absolute;background:var(--vermilion)}.preview-paper i:nth-of-type(1){left:50%;top:29%;width:1px;height:51%;transform:translateX(-50%)}.preview-paper i:nth-of-type(2){left:22%;right:22%;top:51%;height:1px}.preview-paper i:nth-of-type(3){left:20%;right:20%;bottom:17%;height:1px}.preview-paper small{position:absolute;left:0;right:0;bottom:10%;text-align:center;font:12px Arial;letter-spacing:.15em}
.template-library{background:#fffdf8}.template-library-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:8%;align-items:end;margin-bottom:70px}.template-library-intro h2,.guide-flow h2,.data-guide h2,.color-guide h2,.example-heading h2,.production-notes h2,.final-check h2{margin:14px 0 0;font:500 clamp(2.5rem,5vw,5.8rem)/1.22 var(--serif)}.template-library-intro h2 em{display:block;color:var(--vermilion);font-style:normal}.template-library-lead{font-size:14px;line-height:2}.template-library-lead p{margin:0 0 16px}.template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}.template-card{overflow:hidden;border:1px solid var(--line);border-radius:42px 8px 34px 8px;background:#fff;box-shadow:0 22px 55px #10282210}.template-preview{aspect-ratio:1120/792;padding:22px;background:#e9ede7;border-bottom:1px solid var(--line)}.template-preview img{display:block;width:100%;height:100%;object-fit:contain;background:#fffdf8;box-shadow:0 10px 25px #10282216}.template-card-body{padding:30px}.template-no{margin:0;color:var(--vermilion);font:700 9px Arial;letter-spacing:.18em}.template-card h3{margin:9px 0 22px;font:600 clamp(1.9rem,3vw,3rem) var(--serif)}.template-card dl{margin:0 0 22px}.template-card dl div{display:grid;grid-template-columns:95px 1fr;gap:14px;padding:11px 0;border-top:1px solid var(--line)}.template-card dt{font-size:10px;font-weight:700}.template-card dd{margin:0;font-size:12px}.download-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}.download-links a{padding:14px 15px;border:1px solid var(--ink);border-radius:999px;color:var(--ink);font-size:10px;font-weight:700;text-align:center;text-decoration:none;transition:.2s}.download-links a.slide-link{background:var(--ink);color:#fff}.download-links a:hover{transform:translateY(-2px);background:var(--vermilion);border-color:var(--vermilion);color:#fff}.template-note{display:grid;grid-template-columns:220px 1fr;gap:30px;margin-top:42px;padding:30px 34px;background:var(--yellow)}.template-note strong{font:600 19px var(--serif)}.template-note p{margin:0;font-size:12px;line-height:1.9}
.guide-flow .section-head{margin-bottom:55px}.flow-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.flow-list li{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:27px 10px;border-bottom:1px solid var(--line)}.flow-list b{color:var(--vermilion);font:italic 38px Georgia}.flow-list h3{margin:0 0 7px;font:600 23px var(--serif)}.flow-list p{margin:0;font-size:13px;line-height:1.9}
.data-guide{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:8%;background:#e8ede6}.data-guide-heading>p:last-child{max-width:560px;font-size:14px;line-height:2}.guide-table{border-top:1px solid var(--line)}.guide-table article{display:grid;grid-template-columns:48px 180px 1fr;gap:22px;align-items:start;padding:25px 0;border-bottom:1px solid var(--line)}.guide-table span{color:var(--vermilion);font:italic 22px Georgia}.guide-table h3{margin:0;font:600 20px var(--serif)}.guide-table p{margin:0;font-size:13px;line-height:1.9}
.color-guide{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:8%}.color-guide-title{position:sticky;top:130px;align-self:start}.color-guide-body{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #ffffff35}.color-guide-body article{min-height:260px;padding:30px 28px;border-right:1px solid #ffffff35;border-bottom:1px solid #ffffff35}.color-guide-body article:nth-child(even){border-right:0}.color-guide-body h3{margin:0 0 18px;color:var(--yellow);font:600 22px var(--serif)}.color-guide-body p{margin:0;font-size:13px;line-height:2}.method-decision{grid-column:2;margin:30px 0 0;padding:20px 24px;border-left:4px solid var(--yellow);background:#ffffff0d;font-size:13px;line-height:2}
.example-section{background:#dce4d5}.example-heading{display:grid;grid-template-columns:1.1fr .9fr;gap:7%;align-items:end}.example-heading>p{font-size:14px}.example-heading small{display:block;margin-top:15px;opacity:.7}.example-tabs{display:flex;gap:8px;margin:60px 0 28px;padding-bottom:12px}.example-tabs button{flex:1;padding:14px 18px;border:1px solid var(--line);border-radius:999px;background:#fff8;color:var(--ink);font:600 13px var(--sans);cursor:pointer}.example-tabs button.is-active{background:var(--ink);color:#fff}.sample-panel{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);gap:22px;align-items:start}.sample-panel[hidden]{display:none}.request-card,.answer-card{background:#fff;border-radius:34px 7px 28px 7px}.request-card{padding:35px}.request-card>span,.answer-copy>span{font:700 9px Arial;letter-spacing:.18em;color:var(--vermilion)}.request-card h3{margin:8px 0 24px;font:600 clamp(2rem,4vw,3.7rem) var(--serif)}.request-card dl{margin:0}.request-card dl div{display:grid;grid-template-columns:90px 1fr;gap:15px;padding:13px 0;border-top:1px solid var(--line)}.request-card dt{font-size:11px;font-weight:700}.request-card dd{margin:0;font-size:13px}.request-card button{width:100%;margin-top:28px;padding:17px 18px;display:flex;justify-content:space-between;border:0;background:var(--vermilion);color:#fff;font-weight:700;cursor:pointer}.request-card button[aria-expanded="true"]{background:var(--ink)}.answer-card{overflow:hidden}.answer-card[hidden]{display:none}.product-mockup{position:relative;min-height:480px;display:grid;place-items:center;padding:40px;background:linear-gradient(145deg,#f8f6ef,#ece8dc)}.product-mockup img{width:100%;height:400px;object-fit:contain;mix-blend-mode:multiply}.fictional-mark{position:absolute;z-index:2;text-align:center;color:#17365d;line-height:1.1}.fictional-mark strong,.fictional-mark b,.fictional-mark small{display:block}.mark-mug{left:50%;top:48%;transform:translate(-3%,-50%) rotate(-1deg)}.mark-mug b{font:500 11px var(--serif)}.mark-mug strong{font:700 28px var(--serif);letter-spacing:.08em}.mark-mug small{margin-top:4px;font:6px Arial;letter-spacing:.14em}.mark-plate{left:50%;top:40%;transform:translate(-50%,-50%);color:#9b422d}.mark-plate strong{font:700 34px Georgia;border:2px solid currentColor;border-radius:50%;width:65px;height:65px;line-height:61px}.mark-plate small{margin-top:7px;font:7px Arial;letter-spacing:.14em}.measure{position:absolute;z-index:3;padding:6px 9px;background:var(--vermilion);color:#fff;font:700 9px Arial;letter-spacing:.08em}.measure-mug{left:55%;bottom:14%}.measure-plate{right:10%;bottom:12%}.answer-copy{padding:28px 34px 34px}.answer-copy h3{margin:8px 0 12px;font:600 clamp(1.35rem,2.3vw,2.2rem)/1.5 var(--serif)}.answer-copy p{margin:0;font-size:13px;line-height:2}
.production-notes{display:grid;grid-template-columns:.8fr 1.2fr;gap:9%}.notes-lead{max-width:620px;font-size:14px;line-height:2}.note-list{counter-reset:note}.note-list p{position:relative;margin:0;padding:20px 0 20px 55px;border-top:1px solid var(--line);font-size:13px;line-height:1.9}.note-list p::before{counter-increment:note;content:"0" counter(note);position:absolute;left:0;top:18px;color:var(--vermilion);font:italic 24px Georgia}
.final-check{display:grid;grid-template-columns:.7fr 1.3fr;gap:8%;background:var(--yellow)}.final-check ul{list-style:none;margin:0;padding:0;border-top:1px solid #10282245}.final-check li{position:relative;padding:19px 10px 19px 46px;border-bottom:1px solid #10282245;font-size:14px}.final-check li::before{content:"✓";position:absolute;left:10px;top:15px;width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--ink);border-radius:50%;font-weight:700}.guide-cta-actions{display:grid;gap:14px}.guide-text-link{text-align:center;text-underline-offset:6px;font-size:12px}
@media(max-width:1000px){.guide-hero{grid-template-columns:1fr;min-height:0}.guide-sheet-preview{min-height:400px}.preview-paper{width:min(76%,430px)}.template-library-intro,.data-guide,.color-guide,.example-heading,.production-notes,.final-check{grid-template-columns:1fr}.color-guide-title{position:static}.method-decision{grid-column:1}.template-grid{grid-template-columns:1fr}.sample-panel{grid-template-columns:1fr}.product-mockup{min-height:430px}.guide-table article{grid-template-columns:45px 160px 1fr}}
@media(max-width:600px){body{overflow-x:hidden}.guide-hero{padding:120px 22px 65px;background:linear-gradient(155deg,#f8f3e4 0 66%,#dce4d5 66%)}.guide-hero h1{max-width:100%;font-size:clamp(2.35rem,10.5vw,3rem);line-height:1.28;letter-spacing:0;overflow-wrap:anywhere;word-break:break-all}.guide-hero h1 br{display:none}.guide-hero-copy>p:not(.eyebrow){overflow-wrap:anywhere}.guide-sheet-preview{min-height:330px}.preview-paper{width:82%;padding:22px}.template-library,.guide-flow,.data-guide,.color-guide,.example-section,.production-notes,.final-check{padding-inline:22px}.template-library-intro{margin-bottom:38px}.template-library-intro h2,.guide-flow h2,.data-guide h2,.color-guide h2,.example-heading h2,.production-notes h2,.final-check h2{font-size:clamp(2.35rem,11vw,4rem)}.template-card{border-radius:28px 6px 24px 6px}.template-preview{padding:10px}.template-card-body{padding:22px 18px}.template-card dl div{grid-template-columns:82px 1fr}.download-links{grid-template-columns:1fr}.template-note{grid-template-columns:1fr;gap:10px;padding:22px 18px}.flow-list li{grid-template-columns:64px 1fr;padding-inline:0}.guide-table article{grid-template-columns:42px 1fr;gap:12px}.guide-table article p{grid-column:2}.color-guide-body{grid-template-columns:1fr}.color-guide-body article{min-height:0;border-right:0;padding:24px 0}.sample-panel{display:block}.request-card{padding:25px 20px}.answer-card{margin-top:16px}.product-mockup{min-height:350px;padding:18px}.product-mockup img{height:300px}.mark-mug{left:49%;top:48%;transform:translate(0,-50%)}.mark-mug strong{font-size:20px}.measure{font-size:7px}.cta-band{padding-inline:22px}.cta-button{gap:28px}}

/* One-product presentation: mug template and answer check */
.template-grid{grid-template-columns:minmax(0,1120px);justify-content:center}
.template-card-featured{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);align-items:stretch}
.template-card-featured .template-preview{min-height:520px;aspect-ratio:auto;border-right:1px solid var(--line);border-bottom:0;display:grid;place-items:center}
.template-card-featured .template-card-body{display:flex;flex-direction:column;justify-content:center;padding:48px 42px}
.template-card-featured .download-links{margin-top:10px}
.template-note{max-width:1120px;margin-inline:auto}
.example-product-label{max-width:1100px;margin:55px auto 22px;color:var(--vermilion);font:700 10px Arial;letter-spacing:.2em;text-align:center}
.sample-panel{grid-template-columns:1fr;max-width:1100px;margin:0 auto;gap:24px}
.request-card{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(420px,1.28fr);column-gap:52px;align-items:start;padding:48px 54px}
.request-card>span,.request-card>h3,.request-card>button{grid-column:1}
.request-card dl{grid-column:2;grid-row:1 / span 4}
.request-card button{align-self:end}
.answer-card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)}
.answer-card[hidden]{display:none}
.answer-copy{display:flex;flex-direction:column;justify-content:center;padding:48px}

@media(max-width:1000px){.template-card-featured{grid-template-columns:1fr}.template-card-featured .template-preview{min-height:0;aspect-ratio:1120/792;border-right:0;border-bottom:1px solid var(--line)}.request-card{grid-template-columns:1fr;padding:36px}.request-card>span,.request-card>h3,.request-card>button,.request-card dl{grid-column:1;grid-row:auto}.answer-card{grid-template-columns:1fr}.answer-copy{padding:34px}}
@media(max-width:600px){.template-card-featured .template-card-body{padding:28px 20px}.example-product-label{margin-top:38px}.request-card{padding:25px 20px}.answer-copy{padding:26px 22px}}

/* Color literacy for screen-first and AI-created artwork */
.color-guide-intro{max-width:470px;margin:28px 0 0;font-size:13px;line-height:2;color:#fff;opacity:.82}
.color-guide-body article{min-height:340px}
.color-term{display:block;margin-bottom:12px;color:#fff;opacity:.55;font:700 9px Arial;letter-spacing:.18em}
.method-decision{padding:26px 28px}
.method-decision strong{display:block;margin-bottom:12px;color:var(--yellow);font:600 24px var(--serif)}
.method-decision p{margin:0 0 12px}
.method-decision a{color:#fff;text-underline-offset:5px;font-weight:700}

/* Answer image: real-use cafe scene with a centered print position */
.mockup-mug{min-height:0;aspect-ratio:16/9;padding:0;overflow:hidden;background:#d8c4a4}
.mockup-mug img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.mark-mug{left:49.1%;top:51%;transform:translate(-50%,-50%);text-shadow:0 1px 0 #fff8}
.measure-mug{left:49.1%;bottom:5%;transform:translateX(-50%)}

@media(max-width:1000px){.color-guide-body article{min-height:300px}}
@media(max-width:600px){.color-guide-body article{min-height:0}.mockup-mug{aspect-ratio:4/3}.mark-mug{top:51%}.measure-mug{bottom:5%}}
@media(prefers-reduced-motion:reduce){.preview-paper{transform:none}}

/* v7: one-column color explanation with pictograms */
.color-guide{grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);align-items:start}
.color-guide-body{display:grid;grid-template-columns:1fr;border-top:1px solid #ffffff35}
.color-guide-body article{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(180px,.38fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
  padding:clamp(34px,4.5vw,62px) 0;
  border-right:0;
  border-bottom:1px solid #ffffff35
}
.color-guide-body article:nth-child(even){border-right:0}
.color-pictogram{display:grid;place-items:center;min-height:210px;border:1px solid #ffffff28;border-radius:44px 8px 34px 8px;background:#ffffff0a}
.color-pictogram svg{width:min(78%,220px);height:auto;overflow:visible;fill:none;stroke:#fffdf7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.color-pictogram circle{stroke-width:0;mix-blend-mode:screen;opacity:.88}
.color-pictogram .rgb-r{fill:#ef594d}.color-pictogram .rgb-g{fill:#5ec86c}.color-pictogram .rgb-b{fill:#508fe6}
.color-pictogram .cmyk-c{fill:#14b9d6}.color-pictogram .cmyk-m{fill:#dc4b98}.color-pictogram .cmyk-y{fill:#efd23f}.color-pictogram .cmyk-k{stroke:#fff;stroke-width:8}
.color-pictogram .dic-chip{stroke:#fffdf7;stroke-width:2;mix-blend-mode:normal}.color-pictogram .dic-1{fill:#294f72}.color-pictogram .dic-2{fill:#b8583a}
.color-copy h3{font-size:clamp(1.45rem,2.15vw,2rem)}
.color-copy p{max-width:720px}

@media(max-width:1000px){
  .color-guide{grid-template-columns:1fr}
}
@media(max-width:760px){
  .color-guide-body article{grid-template-columns:1fr;gap:20px;padding:34px 0}
  .color-pictogram{min-height:180px}
  .color-pictogram svg{width:min(62%,190px)}
}