:root {
  --ink:#3e4537; --green:#4f6340; --paper:#fdfcf8; --line:#d9ddcf; --muted:#626757;
  --leaf-wash:#e8eedc; --leaf-hover:#dce7ca; --action-ink:#435637; --focus:#65794d;
  --serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif CJK JP","Noto Serif JP",Georgia,serif;
  --atlas-width:1120px;
}
body {background-color:var(--paper); color:var(--ink); font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans CJK JP","Noto Sans JP",sans-serif; overflow-wrap:anywhere}
a {text-underline-offset:.23em}
.icon {width:19px;height:19px;flex-shrink:0;vertical-align:middle}
.atlas-head {border-bottom:1px solid #dedfcf;background:#fffefb}
.head-inner {max-width:1320px;height:77px;margin:auto;padding:0 clamp(24px,5.6vw,82px);display:flex;align-items:center;gap:42px}
.atlas-logo {display:inline-flex;align-items:center;gap:9px;width:max-content;font-family:var(--serif);font-size:25px;font-weight:600;line-height:1.25;letter-spacing:.1em;white-space:nowrap}
.atlas-logo:hover {text-decoration:none}
.atlas-logo small {display:block;font:9px/1.5 Georgia,serif;letter-spacing:.25em;padding-left:2px}
.atlas-logo img {width:36px;height:36px;object-fit:contain}
.atlas-nav {display:flex;gap:34px;align-items:center;margin-left:auto;font-weight:550;font-size:13px;letter-spacing:.05em}
.head-check {background:var(--leaf-wash);color:var(--action-ink);border:1px solid #a7b68e;display:inline-flex;align-items:center;gap:9px;border-radius:20px;padding:9px 17px;font-size:13px}
.head-check:hover, .lookup button:hover {background:var(--leaf-hover);color:var(--action-ink);text-decoration:none;filter:none}
.head-check .icon {width:16px;height:16px}
main {max-width:var(--atlas-width);padding:0 32px 66px}
main:has(.atlas-home) {max-width:none;padding:0}
.atlas-home {--inset:max(32px,calc((100% - var(--atlas-width))/2));}
/* The cosmetic still life anchors the subject while the search stays above the fold. */
.kicker {color:#636e50;font:600 10px/1.5 Arial,sans-serif;letter-spacing:.19em}
.with-rule {display:flex;align-items:center;gap:12px}
.with-rule::before {content:"";width:27px;height:1px;background:#97a77e}
.cosme-hero {position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(375px,30vw,440px);padding:28px var(--inset) 51px;background:radial-gradient(ellipse at 19% 92%,#f5efdc77 0%,transparent 57%),linear-gradient(106deg,#fdfbf4 0%,#f5f4e4 47%,#e9edd5 100%)}
.cosme-copy {position:relative;z-index:1;max-width:58%}
.cosme-copy h1 {font:500 clamp(45px,4.3vw,67px)/1.34 var(--serif);letter-spacing:.055em;margin:17px 0 17px;color:#394d31}
.cosme-copy p {font-size:14px;letter-spacing:.035em;line-height:1.95;margin:0;color:#525e48}
.organic-guide {display:inline-flex;align-items:center;gap:8px;color:var(--green);font-size:12px;font-weight:600;border-bottom:1px solid #acb88f;margin-top:15px;padding-bottom:2px}
.organic-guide:hover {text-decoration:none;border-bottom-color:var(--green)}
.organic-guide .icon {width:15px;height:15px}
.cosme-visual {position:absolute;inset:0 0 0 auto;width:min(59%,calc(clamp(375px,30vw,440px) * 1.66));z-index:-1;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0%,#000 31%)}
.cosme-visual img {width:100%;height:100%;display:block;object-fit:cover;object-position:63% 13%}
.atlas-search,.atlas-section,.reading-room,.review-strip {width:calc(100% - 2 * var(--inset));max-width:var(--atlas-width);margin-left:auto;margin-right:auto}
.atlas-search {position:relative;margin-top:-23px;background:#fffefb;border:1px solid #d5dcc7;border-radius:14px;padding:19px 30px 18px;box-shadow:0 7px 22px #68623f10;z-index:3}
.search-modes {display:flex;gap:24px;margin-bottom:12px}
.search-modes label {display:inline-flex;align-items:center;gap:7px;position:relative;border-bottom:2px solid transparent;padding:1px 2px 7px;cursor:pointer;font-size:14px;font-weight:600;color:#606a54}
.search-modes label:has(input:checked) {border-bottom-color:var(--green);color:var(--green)}
.search-modes label:focus-within {outline:2px solid #65794d;outline-offset:2px}
.search-modes input {position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.search-modes .icon {width:17px;height:17px}
.lookup {display:flex;align-items:center;gap:12px;padding:4px 4px 4px 15px;background:#fafaf4;border:1px solid #b3bfa4;border-radius:5px}
.lookup>.icon {color:#627354}
.lookup input {min-width:0;background:none;border:0;padding:8px 0;flex:1;width:30px;font-size:15px;color:#3e4537}
.lookup input:focus-visible {outline-offset:0}
.lookup button {border:1px solid #a7b68e;color:var(--action-ink);display:flex;align-items:center;justify-content:center;gap:15px;border-radius:6px;font-size:14px;padding:9px 22px;background:var(--leaf-wash)}
.words {display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:11px;font-size:11px;color:#5b664f}
.words span {margin-right:4px}.words .icon {width:13px;height:13px;margin-right:5px}
.words a,.by-type a {border-radius:4px;background:#eff1e6;padding:2px 11px;font-size:11px;color:#536146}
.atlas-section {margin-top:45px}
.section-intro {display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:0 0 19px}
.section-intro h2,.reading-title h2 {font:500 clamp(24px,2.2vw,32px)/1.5 var(--serif);letter-spacing:.08em;margin:3px 0 0}
.text-link {white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600}
.text-link .icon {width:18px}
.specimen-cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.specimen-card {overflow:hidden;border:1px solid #dcdfd2;border-radius:10px;display:block;background:#fffefb;transition:transform .18s,border-color .18s,box-shadow .18s}
.specimen-card:hover,.specimen-card:focus-visible {text-decoration:none;transform:translateY(-2px);border-color:#a5b28e;box-shadow:0 4px 12px #62603910}
.small-plate {height:137px;position:relative;isolation:isolate;background:#eef0dd;border-bottom:1px solid #e1e3d3;overflow:hidden}
.card-aloe .small-plate {background:#edf2e5}.card-lavender .small-plate{background:#f3eff2}
.small-plate img {width:68%;height:116%;position:absolute;top:-7%;left:15%;object-fit:contain;mix-blend-mode:multiply}
.fig,.latin {position:absolute;color:#626951;z-index:1}
.fig {font:9px Arial,sans-serif;letter-spacing:.16em;top:13px;left:15px}
.latin {right:13px;bottom:8px;font:italic 13px Georgia,serif}
.specimen-body {position:relative;padding:15px 36px 16px 19px}
.kind {display:inline-block;color:#5c684f;border:1px solid #d5deca;border-radius:3px;padding:0 6px;font-size:10px;line-height:1.65;letter-spacing:.04em}
.specimen-body h3 {font:600 20px/1.5 var(--serif);margin:4px 0 3px;letter-spacing:.04em}
.specimen-body p {font-size:12px;color:#626757;margin:0}
.circle-arrow {position:absolute;right:12px;top:50%;width:24px;height:24px;border-radius:50%;border:1px solid #cdd6bd;display:grid;place-items:center}.circle-arrow .icon{width:14px}
.routes {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #dcdfd2;border-radius:5px;background:#fffefb}
.routes>a {display:flex;align-items:center;gap:12px;padding:22px 16px}.routes>a+a{border-left:1px solid #dcdfd2}
.routes>a>.icon:first-child {width:26px;height:26px;color:#60734e}.routes>a>.icon:last-child{width:16px;margin-left:auto}
.routes h3 {font:500 18px/1.5 var(--serif);margin:0 0 3px}.routes p {font-size:11px;color:var(--muted);margin:0}
.by-type {display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:16px 0;font-size:12px}.by-type span {margin-right:6px}
.reading-room {margin-top:22px;margin-bottom:22px;display:grid;grid-template-columns:.8fr 1.2fr;border:1px solid #e1e1d0;border-radius:5px;padding:29px;background:#f2f2e6;gap:32px}
.reading-title p {font-size:13px;margin:10px 0}.reading-links a {display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #d3d8bd;font-size:14px}.reading-links a:last-child{border-bottom:0}
.review-strip {border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:10px;padding:18px 0 45px}.review-strip div,.review-strip a {display:flex;align-items:center;gap:8px}
.field-note {border:1px solid var(--line);background:#eff2e5;display:flex;align-items:center;gap:22px;border-radius:5px;padding:18px 22px;margin:22px 0}.field-note h2{font:500 21px var(--serif);margin:5px 0}.field-note p {font-size:14px;margin:8px 0}.field-note small a{text-decoration:underline}
.page-title h1,main>.panel h2,.detail-top h1,main>.section h2 {font-family:var(--serif)}
.panel,.result-row,.product-card,.empty {border-radius:5px}
.product-art .bottle {height:36px;width:27px;opacity:.48;box-shadow:none;border:1.2px solid #768469;background:none;border-radius:3px}.product-art .bottle::before{border:1px solid #768469;background:none;box-shadow:none;width:13px;height:8px}.product-art .bottle::after {content:none}
footer {background:#eff1e6;padding-bottom:35px}.footer-top p {margin-bottom:0}

/* Each illustration depicts an item type, independently of the product records. */
.beauty-types-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.beauty-type {--wash:#edf1d9;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden;min-height:124px;padding:16px 9px 14px 19px;background:linear-gradient(110deg,#fffdf8 0%,var(--wash) 98%);border:1px solid var(--line);border-radius:11px}
.type-serum {--wash:#f5efdb}.type-cream {--wash:#f7eae3}.type-wash {--wash:#f0ecf2}
.type-copy {position:relative;z-index:1;flex-shrink:0}
.type-copy small {font:italic 14px/1.1 Georgia,serif;color:#677052}
.type-copy h3 {font:600 clamp(18px,1.5vw,23px)/1.5 var(--serif);margin:4px 0 13px;letter-spacing:.04em}
.type-arrow {display:flex;width:23px;height:20px;align-items:center;color:var(--action-ink)}
.type-arrow .icon {width:17px}
.beauty-type img {width:75px;height:98px;max-width:48%;object-fit:contain;transition:transform .2s ease}
.beauty-type:hover,.beauty-type:focus-visible {text-decoration:none;border-color:#a3b28d}
.beauty-type:hover img {transform:translateY(-2px)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:900px){
 .cosme-hero {min-height:335px}
 .cosme-copy h1 {font-size:clamp(36px,5.2vw,46px)}
 .cosme-copy p {font-size:13px;max-width:32em}
 .beauty-types-grid {gap:9px}
 .beauty-type {padding:12px;min-height:110px}
 .beauty-type img {width:60px;height:84px}
}
@media(max-width:680px){
 .cosme-hero {display:block;padding:25px var(--inset) 35px;min-height:224px}
 .cosme-copy {max-width:none}
 .cosme-copy .kicker {font-size:8px;letter-spacing:.13em}
 .organic-guide {margin-top:9px;gap:4px;font-size:10px}
 .organic-guide .icon {width:12px;height:12px}
 .cosme-copy h1 {font-size:clamp(26px,6.6vw,38px);line-height:1.38;letter-spacing:.022em;margin:14px 0 11px}
 .cosme-copy p {max-width:55%;font-size:12px;line-height:1.65}
 .cosme-copy p br {display:none}
 .cosme-visual {width:47%;mask-image:linear-gradient(90deg,transparent,#000 16%)}
 .cosme-visual img {object-fit:cover;object-position:12% 50%}
 .beauty-types-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .beauty-type {min-height:93px;padding:10px 7px 9px 12px}
 .beauty-type img {width:57px;height:75px}
 .type-copy small {font-size:12px}
 .type-copy h3 {font-size:17px;margin:3px 0 5px}
}
@media(max-width:360px){
 .cosme-copy h1 {font-size:24px}
 .cosme-visual {width:44%}
 .cosme-copy p {max-width:58%}
 .beauty-type {padding-left:9px}.beauty-type img {width:47px}
}
@media(max-width:900px){.head-inner{gap:22px;padding:0 25px}.atlas-nav{gap:20px}.small-plate{height:120px}.specimen-cards{gap:12px}.routes>a{padding:16px 10px;gap:7px}.routes p{font-size:10px}}
@media(max-width:680px){.head-inner{height:auto;display:grid;grid-template-columns:1fr auto;gap:0;padding:12px 18px 0}.atlas-logo{font-size:21px}.atlas-logo img{width:30px;height:30px}.atlas-logo small{font-size:8px}.head-check{grid-column:2;grid-row:1;font-size:11px;padding:8px 10px}.atlas-nav{grid-column:1/-1;margin:8px 0 0;border-top:1px solid #e7e9db;padding:7px 0;justify-content:space-evenly;font-size:12px}.atlas-home{--inset:18px}.kicker{font-size:8px}.with-rule{gap:6px}.with-rule::before{width:14px}.atlas-search{padding:15px;margin-top:-14px}.search-modes{gap:14px}.search-modes label{font-size:11px;gap:4px}.lookup{gap:7px;padding-left:9px}.lookup input{font-size:13px}.lookup button{font-size:12px;padding:9px 12px;gap:4px}.lookup button .icon{width:14px}.words{gap:5px;font-size:10px}.words a{font-size:10px;padding:2px 7px}.atlas-section{margin-top:32px}.section-intro{margin-bottom:13px}.section-intro h2,.reading-title h2{font-size:22px;letter-spacing:.03em}.text-link{font-size:11px;gap:3px}.specimen-cards{grid-template-columns:1fr;gap:10px}.specimen-card{display:grid;grid-template-columns:36% 1fr;min-height:115px}.small-plate{height:100%;border:0;border-right:1px solid var(--line)}.small-plate img{width:100%;left:0;top:-4%;height:108%}.fig{font-size:7px;left:7px;top:7px}.latin{font-size:10px;bottom:5px;right:5px}.specimen-body{align-self:center;padding:10px 27px 11px 13px}.specimen-body h3{font-size:17px}.specimen-body p{font-size:11px}.circle-arrow{right:5px;width:19px;height:19px}.routes{grid-template-columns:1fr}.routes>a{padding:15px}.routes>a+a{border-left:0;border-top:1px solid var(--line)}.routes p{font-size:11px}.reading-room{grid-template-columns:1fr;gap:8px;padding:19px}.reading-title p br{display:none}.reading-links a{font-size:12px}.review-strip{align-items:flex-start;padding-bottom:30px;font-size:11px}.field-note{gap:10px;padding:13px}.field-note img{width:64px;height:75px}.field-note h2{font-size:16px}.field-note p{font-size:12px}main{padding-left:17px;padding-right:17px}.footer-links{gap:10px 18px}}
@media(max-width:360px){.words span .icon{display:none}.search-modes{gap:8px}.specimen-body h3{font-size:15px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Brand directory */
.search-foot {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.search-foot .words {margin:0}
.brand-door {display:inline-flex;align-items:center;gap:8px;padding:7px 12px;background:#f1f4e9;color:var(--action-ink);border:1px solid #d4ddc6;border-radius:7px;font-size:13px}
.brand-door:hover {background:var(--leaf-wash);text-decoration:none}
.brand-door span {font-size:11px;padding-left:8px;border-left:1px solid #c2ceb1}
.brand-door .icon {width:16px;height:16px}
.brand-index-head {display:grid;grid-template-columns:1fr minmax(310px,.85fr);align-items:center;gap:25px;padding:6px 0 20px;border-bottom:1px solid var(--line)}
.brand-index-title {padding:0}
.brand-index-title .eyebrow {margin:0 0 7px}
.brand-index-title h1 {margin:0 0 6px}
.brand-index-title p,.brand-profile p {color:var(--muted)}
.brand-index-title p {font-size:14px;margin:0}
@media(max-width:680px){.brand-index-head{grid-template-columns:1fr;gap:16px;padding:2px 0 14px}.brand-index-title p{font-size:13px}}
.brand-find {max-width:690px}
.brand-find label {font-size:13px;font-weight:600;margin-bottom:7px}
.brand-find-box {display:flex;align-items:center;gap:11px;padding:4px 4px 4px 14px;background:#fffefb;border:1px solid #b3bfa4;border-radius:7px}
.brand-find-box>.icon {width:18px;color:var(--green)}
.brand-find-box input {border:0;background:none;min-width:0;flex:1;width:30px;padding:8px 0;font-size:15px}
.brand-find-box button {white-space:nowrap}
.brand-total {margin:22px 0 10px;display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted)}
.brand-total strong {font-family:Georgia,serif;font-weight:500;font-size:21px;color:var(--ink)}
.brand-total a {text-decoration:underline}
.brand-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.brand-card {display:flex;flex-direction:column;border:1px solid var(--line);background:#fffefb;border-radius:8px;overflow:hidden;text-decoration:none}
.brand-card:hover,.brand-card:focus-visible {border-color:#96a87f;text-decoration:none;box-shadow:0 3px 10px #5363410c}
.brand-face {height:82px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;background:white;border-bottom:1px solid #eceee4}
.brand-face img {width:100%;height:100%;max-width:180px;object-fit:contain}
.brand-face>span {font:500 17px/1.2 var(--serif);letter-spacing:.02em;color:var(--muted)}
.brand-card-info {padding:11px 14px 12px;display:flex;flex-direction:column;flex:1}
.brand-card-info h2 {font:600 15px/1.4 var(--serif);margin:0}
.brand-card-info p {margin:4px 0 8px;font-size:11px;color:var(--muted)}
.brand-card-bottom {margin-top:auto;display:flex;align-items:center;justify-content:space-between;color:var(--green)}
.brand-card-bottom .icon {width:15px;height:15px}
.brand-profile {display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.brand-profile .brand-face {width:180px;border:1px solid var(--line);border-radius:8px}
.brand-profile p {margin:0}
.brand-index [hidden] {display:none}
@media(max-width:900px){.brand-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.atlas-nav{gap:14px}}
@media(min-width:681px) and (max-width:820px){.head-inner{gap:15px;padding:0 18px}.atlas-logo{font-size:20px}.atlas-nav{gap:12px;font-size:12px}.head-check{padding:8px 12px;font-size:12px}}
@media(max-width:680px){
 .atlas-nav{gap:8px;font-size:11px}
 .brand-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .brand-face{height:69px;padding:10px}.brand-face>span{font-size:14px}
 .brand-card-info{padding:9px 10px}.brand-card-info h2{font-size:14px}
 .search-foot{gap:10px}.brand-door{width:100%;padding:7px 10px}.brand-door .icon:last-child{margin-left:auto}
 .brand-profile{gap:12px}.brand-find-box{gap:7px}.brand-find-box button{font-size:12px;padding:9px}
}