/* Shared frontend / CKEditor styles for the existing About HTML. */
.about-page { --about-ink:#29252e; --about-muted:#68616c; --about-line:#e9e3ec; --about-paper:#faf8fb; container-type:inline-size; box-sizing:border-box; width:100%; max-width:1280px; margin:0 auto; color:var(--about-ink); font-family:var(--primary-font,inherit); font-size:16px; line-height:1.85; overflow-wrap:anywhere; }
.about-page *, .about-page *::before, .about-page *::after { box-sizing:border-box; min-width:0; }
.about-page p { margin:0 0 20px; color:inherit; line-height:inherit; }
.about-page p:last-child { margin-bottom:0; }
.about-page h1, .about-page h2, .about-page h3 { color:var(--about-ink); font-family:inherit; text-transform:none; }
.about-page h2 { margin:0 0 26px; font-size:clamp(28px,3.2cqi,40px); line-height:1.3; font-weight:500; letter-spacing:-.035em; }
.about-page h3 { margin:0 0 18px; font-size:22px; line-height:1.4; font-weight:500; letter-spacing:-.02em; }
.about-page .about-eyebrow, .about-page .about-timeline-label, .about-page .about-value-label { margin:0 0 18px; color:var(--color-1st,#764998); font-size:11px; line-height:1.6; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.about-page > section { margin-bottom:88px; }
.about-page .about-section-heading { max-width:760px; margin-bottom:40px; }
.about-page .about-hero-grid { display:grid; grid-template-columns:minmax(0,52fr) minmax(0,48fr); align-items:center; gap:40px; }
.about-page .about-hero-title { margin:0 0 28px; font-size:clamp(34px,4.1cqi,54px); font-weight:500; line-height:1.17; letter-spacing:-.045em; }
.about-page .about-hero-signature { margin-top:28px; border-left:2px solid var(--color-1st,#764998); padding-left:22px; font-weight:500; }
.about-page figure, .about-page figure > p { margin:0; }
.about-page figure { width:100%; }
.about-page img { display:block; max-width:100%; width:100%; height:auto; margin:0; border-radius:16px; }
.about-page .about-hero-media { position:relative; }
.about-page .about-hero-figure img { height:clamp(480px,43cqi,550px); object-fit:cover; }
.about-page .about-hero-badge { position:absolute; left:22px; bottom:22px; max-width:calc(100% - 44px); padding:14px 20px; background:#fff; border:1px solid var(--about-line); border-radius:12px; box-shadow:0 6px 24px #29252e08; font-size:13px; }
.about-page .about-hero-badge-small { display:block; color:var(--about-muted); font-size:11px; }
.about-page .about-timeline { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.about-page .about-timeline-item { padding-top:24px; border-top:1px solid var(--about-line); }
.about-page .about-timeline-number { margin-bottom:28px; color:var(--color-1st,#764998); font-size:54px; line-height:1; font-weight:300; letter-spacing:-.06em; }
.about-page .about-timeline-content { font-size:15px; color:var(--about-muted); }
.about-page .about-manifesto { background:var(--about-paper); border-radius:16px; padding:70px 40px; text-align:center; border-top:2px solid var(--color-1st,#764998); }
.about-page .about-manifesto-inner { max-width:940px; margin:auto; }
.about-page .about-manifesto-quote { font-size:clamp(28px,3.6cqi,46px); line-height:1.45; font-weight:400; letter-spacing:-.035em; }
.about-page .about-manifesto-text { max-width:660px; margin-inline:auto; color:var(--about-muted); }
.about-page .about-values, .about-page .about-universe { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.about-page .about-value-card { padding:30px; border:1px solid var(--about-line); border-radius:16px; box-shadow:0 6px 24px #29252e04; transition:transform .2s ease,border-color .2s ease; }
.about-page .about-value-index { margin-bottom:28px; font-size:32px; font-weight:300; color:var(--color-1st,#764998); }
.about-page .about-value-card > p:last-child { color:var(--about-muted); font-size:15px; }
.about-page .about-identity-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.about-page .about-identity-item { padding:28px; border:1px solid var(--about-line); border-radius:12px; }
.about-page .about-identity-label { display:block; margin-bottom:8px; font-size:12px; color:var(--about-muted); }
.about-page .about-identity-item strong { font-weight:500; }
.about-page .about-chogan { padding:44px; background:var(--about-paper); border-radius:16px; }
.about-page .about-chogan-grid { display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr); gap:48px; align-items:center; }
.about-page .about-chogan-media { max-width:360px; width:100%; margin:auto; }
.about-page .about-chogan-figure img { max-height:440px; object-fit:contain; }
.about-page figcaption { padding-top:14px; color:var(--about-muted); font-size:11px; line-height:1.6; }
.about-page .about-chogan-content { font-size:15px; }
.about-page .about-perfumery-content { max-width:900px; }
.about-page .about-universe-card { background:var(--about-paper); border-radius:16px; padding:30px; border-bottom:2px solid var(--about-line); }
.about-page .about-universe-number { font-size:32px; font-weight:300; color:var(--color-1st,#764998); }
.about-page .about-universe-card > p:last-child { color:var(--about-muted); font-size:15px; }
.about-page .about-difference-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:60px; }
.about-page .about-difference-item { display:grid; grid-template-columns:40px minmax(0,1fr); gap:20px; padding:24px 0; border-top:1px solid var(--about-line); }
.about-page .about-difference-item > p { color:var(--color-1st,#764998); }
.about-page .about-vision { padding:80px 40px; background:var(--about-paper); border-radius:16px; text-align:center; }
.about-page .about-vision-inner { max-width:760px; margin:auto; }
.about-page .about-vision h2 { font-size:clamp(32px,4cqi,50px); }
.about-page .about-vision-signature { margin-top:32px; color:var(--color-1st,#764998); font-size:20px; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .about-page .about-value-card:hover { transform:translateY(-3px); border-color:var(--color-1st,#764998); } }
/* Container queries follow the editor width as well as the frontend width. */
@container (max-width:900px) {
 .about-page .about-hero-grid { gap:24px; }
 .about-page .about-chogan { padding:28px; }
 .about-page .about-chogan-grid { gap:28px; }
 .about-page .about-value-card, .about-page .about-universe-card { padding:22px; }
 .about-page .about-difference-grid { gap:30px; }
}
@container (max-width:700px) {
 .about-page > section { margin-bottom:52px; }
 .about-page .about-hero-grid, .about-page .about-chogan-grid, .about-page .about-difference-grid, .about-page .about-values, .about-page .about-universe, .about-page .about-timeline { grid-template-columns:minmax(0,1fr); }
 .about-page .about-hero-figure img { height:auto; max-height:550px; aspect-ratio:1; object-fit:cover; }
 .about-page .about-timeline-item { border-top:0; border-left:1px solid var(--about-line); padding:0 0 0 24px; }
 .about-page .about-timeline-number { font-size:42px; margin-bottom:20px; }
 .about-page .about-manifesto, .about-page .about-vision { padding:42px 22px; }
 .about-page .about-chogan { padding:22px; }
 .about-page .about-identity-item { padding:22px; }
}
@container (max-width:430px) { .about-page .about-identity-grid { grid-template-columns:minmax(0,1fr); } }