/* Reusable thumbnail rule. All text remains HTML; photos are contextual only. */
.scalable-thumb{--thumb-ink:#19394f;--thumb-wash:#edf2f3;position:relative;display:flex;flex-direction:column;isolation:isolate;overflow:hidden;width:100%;aspect-ratio:4/3;min-width:0;container-type:inline-size;background:var(--thumb-wash);color:var(--thumb-ink);border:1px solid #dae2e5;text-align:left}
.scalable-thumb[data-family="ph_adjustment"]{--thumb-wash:#edf1f4;--thumb-ink:#233c52}
.scalable-thumb[data-family="moisturizing"]{--thumb-wash:#edf3f1;--thumb-ink:#27494b}
.scalable-thumb[data-family="vitamin-b3"]{--thumb-wash:#f1f1ed;--thumb-ink:#3c4550}
.scalable-thumb__photo{position:absolute;z-index:-2;inset:0;display:block;width:100%!important;height:100%!important;object-fit:cover;object-position:50% 70%;filter:saturate(.65);opacity:.86}
.scalable-thumb:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,var(--thumb-wash) 2%,color-mix(in srgb,var(--thumb-wash) 96%,transparent) 25%,color-mix(in srgb,var(--thumb-wash) 65%,transparent) 52%,transparent 80%);pointer-events:none}
.scalable-thumb__label{display:block;margin:7.3% 8% 0;padding-bottom:3.8%;width:84%;border-bottom:1px solid #8b9ca866;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-size:clamp(11px,3.6cqw,13px);font-weight:500;line-height:1.65;letter-spacing:.08em}
.scalable-thumb__name{display:block;margin:7% 8% 0;font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;font-size:clamp(24px,9.6cqw,42px);font-weight:400;line-height:1.5;letter-spacing:.015em;overflow-wrap:anywhere;word-break:normal;text-wrap:balance}
.scalable-thumb__name>span{display:block}
.scalable-thumb__name--long{font-size:clamp(20px,7.4cqw,33px);line-height:1.5}
.scalable-thumb__name--extra-long{font-size:clamp(18px,6.4cqw,29px);line-height:1.5}
.scalable-thumb__name--single{margin-top:11%}
/* A names-only specimen is not a reviewed ingredient card. */
.scalable-thumb--specimen{--thumb-wash:#f1f3f3;--thumb-ink:#284251}
.scalable-thumb--specimen .scalable-thumb__label{font-size:clamp(10px,3.3cqw,12px);letter-spacing:.02em}
.scalable-thumb--specimen .scalable-thumb__photo{opacity:.7}
/* Standalone specimen page; isolated so these rules do not alter the directory. */
.thumbnail-rules-page{margin:0;background:#f8faf9;color:#233c4e;font:15px/1.85 -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
.thumbnail-rules-page *{box-sizing:border-box}
.thumbnail-rules-page a{color:inherit;text-underline-offset:.35em}
.thumbnail-rules-page a:focus-visible{outline:3px solid #315e7a;outline-offset:5px}
.rules-skip{position:absolute;left:20px;top:-100px;background:white;padding:12px;z-index:10}
.rules-skip:focus{top:10px}
.rules-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px max(24px,calc((100vw - 1160px)/2));border-bottom:1px solid #d9e3e6;background:#edf3f4}
.rules-brand{font:25px/1.4 "Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;letter-spacing:.08em;text-decoration:none}
.rules-header>span{font-size:12px;color:#5c727e}
.rules-shell{max-width:1160px;padding-inline:28px;margin-inline:auto}
.rules-intro{padding-top:48px;padding-bottom:36px}
.rules-back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:22px;font-size:13px}
.rules-eyebrow{font-size:13px;letter-spacing:.08em;color:#557281;margin:0 0 14px}
.rules-intro h1{max-width:850px;font:400 clamp(31px,4vw,48px)/1.55 "Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;letter-spacing:.05em;margin:0 0 23px}
.rules-intro>p:last-child{max-width:750px;margin:0;color:#506875;line-height:2}
.rules-section{padding-top:35px;padding-bottom:42px;border-top:1px solid #ccdadd}
.rules-section h2{font:400 27px/1.6 "Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;letter-spacing:.035em;margin:0 0 12px}
.rules-section>p{max-width:870px;color:#556b78;margin:0 0 25px;line-height:1.95}
.rules-reviewed,.rules-specimens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.rules-reviewed figure{margin:0}
.rules-reviewed figcaption{padding-top:12px;color:#5d7280;font-size:12px;line-height:1.8}
.rules-specimens{gap:22px}
.rules-specimens .scalable-thumb__name{font-size:clamp(24px,8.7cqw,37px)}
.rules-specimens .scalable-thumb__name--long{font-size:clamp(20px,7.4cqw,33px)}
.rules-specimens .scalable-thumb__name--extra-long{font-size:clamp(18px,6.4cqw,29px)}
.rules-note{border-left:2px solid #8098a6;padding:4px 0 4px 18px;max-width:820px;margin-top:27px!important}
.rules-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:0;padding:0;list-style:none}
.rules-principles h3{font:500 16px/1.65 -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;margin:0 0 9px}
.rules-principles p{font-size:14px;line-height:1.9;color:#566e7b;margin:0}
.rules-footer{padding:24px 28px 32px;border-top:1px solid #d3dfe3;font-size:12px;color:#627784;max-width:1160px;margin:auto}
@media(max-width:760px){.rules-reviewed,.rules-specimens{gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}.rules-reviewed li:last-child{grid-column:1/-1;max-width:calc((100% - 18px)/2)}.rules-principles{grid-template-columns:1fr;gap:23px}.rules-section h2{font-size:25px}.rules-shell{padding-inline:22px}.rules-header{padding:19px 22px}.rules-header>span{font-size:10px;max-width:76px;text-align:right}}
@media(max-width:520px){.rules-reviewed,.rules-specimens{grid-template-columns:1fr;gap:24px}.rules-reviewed li:last-child{grid-column:auto;max-width:none}.rules-intro{padding-top:20px;padding-bottom:32px}.rules-intro h1{font-size:32px}.rules-intro>p:last-child{font-size:14px}.rules-section{padding-top:27px;padding-bottom:32px}.rules-section>p{font-size:14px}.rules-brand{font-size:21px}.rules-specimens .scalable-thumb__name{font-size:clamp(25px,9cqw,38px)}.rules-specimens .scalable-thumb__name--long{font-size:clamp(23px,7.4cqw,33px)}.rules-specimens .scalable-thumb__name--extra-long{font-size:clamp(20px,6.4cqw,29px)}}
@media(prefers-reduced-motion:reduce){.thumbnail-rules-page{scroll-behavior:auto}}
@media(forced-colors:active){.scalable-thumb{border:1px solid CanvasText}.scalable-thumb__photo,.scalable-thumb:after{display:none}.scalable-thumb__label{border-color:CanvasText}}