/* KANAMA Paris — 2 brands, 2 marks: the cassis berry and the La Mienne drop */
:root {
  --paper: #ffffff;
  --ink: #1e1e1e;
  --soft: #5f5d5a;
  --rule: #e4e2de;
  --mist: #f5f4f1;
  --cassis: #e5014e;
  --cassis-text: #c2003f;
  --mienne: #00addc;
  --mienne-text: #00799c;
  --accent: var(--ink);
  --accent-text: var(--ink);
  --latin: "Josefin Sans", "Futura", "Avenir Next", sans-serif;
  --slab: "Josefin Slab", "Rockwell", serif;
  --ja: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --wrap: 1040px;
}
.s-cassis { --accent: var(--cassis); --accent-text: var(--cassis-text); }
.s-mienne { --accent: var(--mienne); --accent-text: var(--mienne-text); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ja);
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: .02em;
  font-feature-settings: "palt" 0;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .3em; }
a:hover { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 1px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 10; }
.skip:focus { left: 12px; top: 12px; }

/* header */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; }
.brand img { width: 168px; }
.global { display: flex; gap: 4px 30px; flex-wrap: wrap; font-family: var(--latin); font-weight: 400; font-size: 15px; letter-spacing: .14em; }
.global a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.global a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.global .nav-mienne { font-family: var(--slab); letter-spacing: .06em; font-size: 16px; }
.global a[aria-current] { border-bottom-color: var(--ink); }
.global .nav-cassis[aria-current] { border-bottom-color: var(--cassis); }
.global .nav-mienne[aria-current] { border-bottom-color: var(--mienne); }

main { padding: 64px 0 96px; }

/* home */
h1, h2, h3, .lead, .catch, .intro p:first-of-type { word-break: auto-phrase; text-wrap: balance; }
.intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; padding-bottom: 56px; border-bottom: 1px solid var(--rule); }
.intro-img { display: flex; align-items: flex-end; gap: 28px; }
.intro-img img { height: 320px; width: auto; }
.intro-img a:last-child img { height: 360px; }
.intro h1 { font-family: var(--latin); font-weight: 300; font-size: clamp(40px, 6vw, 64px); letter-spacing: .1em; line-height: 1.1; margin: 0 0 28px; }
.intro p { margin: 0 0 .8em; max-width: 30em; }
.intro p:first-of-type { font-size: 19px; font-weight: 500; }
.home-products { display: grid; grid-template-columns: 1fr 1fr; }
.home-product { padding: 48px 48px 8px 0; }
.home-product + .home-product { padding: 48px 0 8px 48px; border-left: 1px solid var(--rule); }
.home-product h2 { margin: 0 0 28px; height: 91px; display: flex; align-items: flex-end; }
.home-product h2 a { display: block; margin-left: -6px; }
.home-product .catch { font-weight: 500; margin: 0 0 .4em; }
.home-product p { max-width: 28em; }
.p-cassis { --accent: var(--cassis); --accent-text: var(--cassis-text); }
.p-mienne { --accent: var(--mienne); --accent-text: var(--mienne-text); }

/* marks: berries for CASSIS, drops for La Mienne */
.marks { list-style: none; padding: 0; margin: 1.2em 0 1.6em; }
.marks li { position: relative; padding-left: 1.5em; margin: .35em 0; }
.marks li::before {
  content: ""; position: absolute; left: .15em; top: .78em;
  width: .5em; height: .5em; border-radius: 50%; background: var(--accent);
}
.s-mienne .marks li::before, .p-mienne .marks li::before {
  top: .74em; width: .46em; height: .46em; border-radius: 0 50% 50% 50%; transform: rotate(45deg);
}
.s-about .marks li::before, .s-contact .marks li::before { background: var(--ink); }
.home-product .marks { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin-top: 1.4em; }

/* product pages */
.product { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 64px; align-items: start; }
.subnav { position: sticky; top: 24px; }
.subnav .pname { display: block; font-family: var(--latin); font-size: 20px; letter-spacing: .14em; text-decoration: none; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.s-mienne .subnav .pname { font-family: var(--slab); letter-spacing: .04em; font-size: 22px; }
.subnav ul { list-style: none; margin: 0; padding: 0; }
.subnav li a { display: block; position: relative; padding: 6px 0 6px 1.4em; text-decoration: none; color: var(--soft); }
.subnav li a:hover { color: var(--ink); }
.subnav li a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.subnav li a[aria-current="page"]::before {
  content: ""; position: absolute; left: .1em; top: 1.05em; width: .5em; height: .5em; border-radius: 50%; background: var(--accent);
}
.s-mienne .subnav li a[aria-current="page"]::before { border-radius: 0 50% 50% 50%; transform: rotate(45deg); width: .46em; height: .46em; top: 1.02em; }

.prose { max-width: 38em; }
.plain .prose { margin: 0 auto; }
.prose h1 { font-size: 30px; font-weight: 500; line-height: 1.5; letter-spacing: .06em; margin: 0 0 28px; }
.plain .prose h1 { font-family: var(--latin); font-weight: 300; font-size: 44px; letter-spacing: .1em; }
.prose h2 { font-size: 20px; font-weight: 700; line-height: 1.6; margin: 2.6em 0 .8em; }
.prose h3 { font-size: 17px; font-weight: 700; margin: 0 0 .3em; }
.prose p { margin: 0 0 1.1em; }
.prose .lead { font-size: 20px; font-weight: 500; line-height: 1.75; margin-bottom: 1.4em; }
.prose .note { font-size: 14px; color: var(--soft); border-top: 1px solid var(--rule); padding-top: .8em; }

.product-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 48px; align-items: center; }
.product-hero img { max-height: 400px; width: auto; }
.pname-h { font-family: var(--latin); font-weight: 300 !important; font-size: 40px !important; letter-spacing: .14em !important; }
.s-mienne .pname-h { font-family: var(--slab); font-weight: 400 !important; letter-spacing: .04em !important; }

.quote { margin: 1.4em 0; padding: .2em 0 .2em 1.4em; border-left: 2px solid var(--accent); color: var(--soft); }
.quote p { margin: 0; }

.effects { margin: 1.6em 0; }
.effects div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule); }
.effects div:last-child { border-bottom: 1px solid var(--rule); }
.effects dt { font-weight: 700; color: var(--accent-text); }
.effects dd { margin: 0; }

.spec { margin: 1.6em 0 2em; }
.spec div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); }
.spec div:last-child { border-bottom: 1px solid var(--rule); }
.spec dt { color: var(--soft); }
.spec dd { margin: 0; }

.s-cassis .product-hero img { filter: drop-shadow(0 18px 22px rgba(40, 30, 30, .16)); }

.nutrition { border-collapse: collapse; margin: 0 0 2em; min-width: 18em; font-variant-numeric: tabular-nums; }
.nutrition caption { text-align: left; font-weight: 700; padding-bottom: .6em; }
.nutrition th, .nutrition td { padding: 8px 0; border-top: 1px solid var(--rule); }
.nutrition tr:last-child th, .nutrition tr:last-child td { border-bottom: 1px solid var(--rule); }
.nutrition th { text-align: left; font-weight: 400; color: var(--soft); padding-right: 3em; }
.nutrition td { text-align: right; }

.figure { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin: 0 0 1.4em; }
.figure .num { font-family: var(--latin); font-weight: 300; font-size: 72px; line-height: 1; letter-spacing: .04em; color: var(--accent-text); }
.figure .num small { font-size: 28px; margin-left: .15em; }
.figure .label { color: var(--soft); }

.voices { list-style: none; padding: 0; margin: 0 0 2em; }
.voices li { padding: 22px 0; border-top: 1px solid var(--rule); }
.voices li:last-child { border-bottom: 1px solid var(--rule); }
.voices blockquote { margin: 0; }
.voices blockquote p { margin: 0 0 .6em; }
.voices blockquote p:last-child { margin-bottom: 0; }
.voices .who { display: block; margin-top: .5em; font-size: 14px; color: var(--soft); }
.voices .who::before { content: "— "; }
.voices-short li { margin: .6em 0; }
.marks.big li { font-size: 18px; font-weight: 500; }

.tips { list-style: none; counter-reset: tip; padding: 0; margin: 1.2em 0 0; }
.tips li { counter-increment: tip; position: relative; padding: 20px 0 8px 2.6em; border-top: 1px solid var(--rule); }
.tips li::before { content: counter(tip); position: absolute; left: 0; top: 18px; font-family: var(--latin); font-size: 26px; line-height: 1; color: var(--accent-text); }
.tips p { margin: 0 0 .8em; }

.history { list-style: none; padding: 0; margin: 1em 0 0; }
.history li { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); }
.history li:last-child { border-bottom: 1px solid var(--rule); }
.history .when { color: var(--soft); font-variant-numeric: tabular-nums; }

/* contact form */
.contact { margin-top: 2em; }
.field { margin: 0 0 22px; }
.field label { display: block; font-weight: 500; margin-bottom: 6px; }
.req { font-size: 12px; font-weight: 500; color: var(--cassis-text); margin-left: .8em; }
.field input, .field textarea {
  width: 100%; font: inherit; color: inherit; background: #fff;
  border: 1px solid #c9c6c1; border-radius: 2px; padding: 10px 12px; line-height: 1.7;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact button {
  font: inherit; font-weight: 500; letter-spacing: .12em; color: #fff; background: var(--ink);
  border: 0; border-radius: 2px; padding: 12px 40px; cursor: pointer;
}
.contact button:hover { background: #000; }
.form-status { margin: 1.4em 0 0; padding: 14px 16px; border-left: 3px solid var(--ink); background: var(--mist); }
.form-status.is-error { border-left-color: var(--cassis-text); }

/* footer */
.site-footer { background: var(--mist); font-size: 14px; color: var(--soft); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 40px; align-items: flex-end; padding-top: 32px; padding-bottom: 32px; }
.site-footer p { margin: 0; line-height: 1.8; }
.site-footer .co { color: var(--ink); font-weight: 500; }
.site-footer .copy { margin-left: auto; font-family: var(--latin); letter-spacing: .12em; }

/* narrow screens */
@media (max-width: 860px) {
  .product { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .subnav { position: static; }
  .subnav ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .subnav li a { padding-left: 1.2em; }
  .product-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .product-hero img { max-height: 280px; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  .site-header .wrap { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 20px; padding-bottom: 12px; min-height: 0; }
  .brand img { width: 140px; }
  .global { gap: 2px 18px; font-size: 13.5px; letter-spacing: .08em; }
  .global .nav-mienne { font-size: 14.5px; letter-spacing: .03em; }
  main { padding: 40px 0 64px; }
  .intro { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 40px; }
  .intro-img { gap: 20px; }
  .intro-img img { height: 210px; }
  .intro-img a:last-child img { height: 236px; }
  .home-products { grid-template-columns: minmax(0, 1fr); }
  .home-product, .home-product + .home-product { padding: 36px 0 8px; border-left: 0; }
  .home-product + .home-product { border-top: 1px solid var(--rule); }
  .home-product h2 { height: auto; margin-bottom: 20px; }
  .home-product h2 img { width: 200px; }
  .prose h1 { font-size: 26px; }
  .plain .prose h1 { font-size: 34px; }
  .pname-h { font-size: 32px !important; }
  .figure .num { font-size: 56px; }
  .effects div, .spec div, .history li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .site-footer .copy { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }