@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;src:url('fonts/inter-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;src:url('fonts/inter-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/newsreader-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/newsreader-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;src:url('fonts/newsreader-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;src:url('fonts/newsreader-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root {
--aj-ivory: #F6F0E7;
--aj-paper: #FBF9F5;
--aj-blush: #D6B3AC;
--aj-blush-mist: #EAD8D3;
--aj-sage: #AAB5A3;
--aj-sage-mist: #DDE2D8;
--aj-sand: #F1E7DE;
--aj-cacao: #403936;
--aj-cacao-deep: #332D2A;
--aj-ink: #262320;
--aj-gold: #BD917D;
--aj-muted: #6A605B;
--aj-rose: #986B5E;
--aj-rose-deep: #86594C;
--aj-wall: #ECDFD4;
--aj-on-dark: rgba(251, 249, 245, .78);
--aj-border: rgba(64, 57, 54, .18);
--aj-border-strong: rgba(64, 57, 54, .35);
--aj-shadow-product: 0 18px 48px rgba(45, 39, 35, .12);
--aj-shadow-page: 0 1px 1px rgba(45, 39, 35, .06), 0 8px 18px rgba(45, 39, 35, .06), 0 24px 52px rgba(45, 39, 35, .11);
--aj-shadow-ui: 0 8px 24px rgba(45, 39, 35, .08);
--aj-radius-button: 999px;
--aj-radius-card: 8px;
--aj-radius-image: 12px;
--aj-ease: cubic-bezier(.22, 1, .36, 1);
--aj-t-micro: 200ms;
--aj-t-reveal: 620ms;
--aj-t-product: 1000ms;
--aj-serif: "Newsreader", Georgia, "Times New Roman", serif;
--aj-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--fs-display: clamp(2.75rem, 1.9rem + 3.6vw, 4.75rem);
--fs-h1: clamp(min(2rem, (100vw - 2 * var(--aj-gutter)) / var(--hero-em, 8.35)), min(max(10.5vw, 2.5rem), (100vw - 2 * var(--aj-gutter)) / var(--hero-em, 8.35)), 3rem);
--fs-statement: min(clamp(2.25rem, 1.75rem + 1.4vw, 3rem), var(--fs-h1) / 1.15);
--fs-section: min(clamp(2.125rem, 1.8rem + 1.1vw, 2.75rem), var(--fs-h1) / 1.15);
--fs-h2: clamp(1.875rem, 1.6rem + 1.1vw, 2.5rem);
--fs-h3: clamp(1.5rem, 1.4rem + .4vw, 1.75rem);
--fs-poetic: clamp(1.375rem, 1.25rem + .5vw, 1.75rem);
--fs-lead: clamp(1.125rem, 1.08rem + .2vw, 1.25rem);
--fs-body: 1rem;
--fs-small: .875rem;
--fs-micro: .8125rem;
--fs-eyebrow: .75rem;
--sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
--sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-30: 120px;
--sp-section: clamp(88px, 68px + 4.6vw, 144px);
--sp-section-lg: clamp(104px, 80px + 5.4vw, 168px);
--aj-gutter: 22px;
--aj-max: 1280px;
--aj-header: 64px;
--aj-measure: 34rem;
}
@media (min-width: 768px) {
:root { --aj-gutter: 40px; --aj-header: 72px; --fs-h1: clamp(3rem, 6.4vw, 3.75rem); }
}
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
:root { --fs-h1: clamp(2.75rem, min(3.85vw, 8.5vh), 4.25rem); }
}
@media (min-width: 1920px) and (min-height: 1200px) {
:root { --fs-h1: clamp(4.25rem, 6.2vh, 5.75rem); }
}
@media (min-width: 1280px) {
:root { --aj-gutter: 56px; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--aj-header) + 16px); }
body {
margin: 0; min-height: 100vh; background: var(--aj-ivory); color: var(--aj-cacao);
font: 400 var(--fs-body)/1.62 var(--aj-sans); font-feature-settings: "kern", "liga", "calt";
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
overflow-x: clip;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
:where(ul[role="list"], ol[role="list"]), .list-reset { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(input, textarea, select) { font: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--aj-blush-mist); color: var(--aj-ink); }
:focus-visible { outline: 2px solid var(--aj-ink); outline-offset: 3px; border-radius: 2px; }
.s--cacao :focus-visible, .ftr :focus-visible { outline-color: var(--aj-paper); }
main:focus { outline: none; }
.s[tabindex="-1"]:focus { outline: none; }
.skip {
position: fixed; left: 12px; top: 12px; z-index: 100; padding: 15px 18px; border-radius: var(--aj-radius-button);
background: var(--aj-ink); color: var(--aj-paper); font: 500 var(--fs-small)/1 var(--aj-sans); text-decoration: none;
transform: translateY(-160%); transition: transform var(--aj-t-micro) var(--aj-ease);
}
.skip:focus { transform: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.eyebrow {
font: 400 var(--fs-eyebrow)/1.4 var(--aj-serif); letter-spacing: .28em; text-transform: uppercase;
color: var(--aj-muted); margin-bottom: var(--sp-5);
}
.h-display, .h-section, .h2, .h3 {
font-family: var(--aj-serif); font-weight: 400; color: var(--aj-ink);
font-optical-sizing: auto; text-wrap: balance;
}
.h-display { font-size: var(--fs-display); line-height: 1.0; letter-spacing: -.022em; }
.h-section { font-size: var(--fs-section); line-height: 1.06; letter-spacing: -.018em; }
.h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.012em; }
.h3 { font-size: var(--fs-h3); line-height: 1.18; font-weight: 450; letter-spacing: -.006em; }
.lead { font-family: var(--aj-serif); font-size: calc(var(--fs-lead) * 1.08); line-height: 1.48; color: var(--aj-cacao); letter-spacing: -.003em; text-wrap: pretty; }
.body { font-size: var(--fs-body); line-height: 1.62; text-wrap: pretty; }
.small { font-size: var(--fs-small); line-height: 1.55; }
.micro { font-size: var(--fs-micro); line-height: 1.5; color: var(--aj-muted); }
.poetic {
font-family: var(--aj-serif); font-style: italic; font-weight: 400; font-size: var(--fs-poetic);
line-height: 1.3; color: var(--aj-cacao); letter-spacing: -.005em; text-wrap: balance;
}
.soul { max-width: 34rem; margin-top: var(--sp-10); text-align: center; }
.soul__orn { display: block; width: 84px; height: auto; margin: 0 auto var(--sp-6); color: var(--aj-gold); overflow: visible; }
.soul__text {
max-width: 16em; margin-inline: auto;
font: italic 400 clamp(1.375rem, 1.15rem + .55vw, 1.625rem)/1.38 var(--aj-serif); letter-spacing: -.005em;
color: var(--aj-rose-deep); text-wrap: balance;
}
@media (min-width: 1024px) and (max-height: 720px) { .soul { margin-top: var(--sp-6); } .soul__orn { margin-bottom: var(--sp-5); } }
.label {
font: 500 var(--fs-micro)/1.3 var(--aj-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--aj-cacao);
}
.muted { color: var(--aj-muted); }
.stack > * + * { margin-top: var(--flow, 1em); }
.rule { display: block; width: 40px; height: 1px; background: var(--aj-gold); border: 0; margin: var(--sp-8) 0; }
.rule--center { margin-inline: auto; }
.wrap { width: 100%; max-width: calc(var(--aj-max) + 2 * var(--aj-gutter)); margin-inline: auto; padding-inline: var(--aj-gutter); }
.measure { max-width: 36ch; }
@media (min-width: 768px) { .measure { max-width: var(--aj-measure); } }
.center { text-align: center; }
.center .measure, .measure.center { margin-inline: auto; }
.split { display: grid; gap: var(--sp-12); }
@media (min-width: 1024px) {
.split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(56px, 6vw, 112px); align-items: center; }
.split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--rev > :first-child { order: 2; }
}
.s { position: relative; padding-block: var(--sp-section); background: var(--bg, var(--aj-ivory)); isolation: isolate; }
.s--lg { padding-block: var(--sp-section-lg); }
.s--ivory { --bg: var(--aj-ivory); }
.s--paper { --bg: var(--aj-paper); }
.s--sage  { --bg: var(--aj-sage-mist); }
.s--blush { --bg: var(--aj-blush-mist); }
.s--sand  { --bg: var(--aj-sand); }
.s--sage, .s--blush, .s--sand { --aj-muted: #5C534E; }
.s--cacao { --bg: var(--aj-cacao); color: var(--aj-on-dark); }
.s--cacao :is(.h-display, .h-section, .h2, .h3, .poetic) { color: var(--aj-paper); }
.s--cacao .eyebrow, .s--cacao .micro, .s--cacao .muted { color: rgba(251, 249, 245, .62); }
.s[data-from]::before {
content: ""; position: absolute; inset: 0 0 auto; height: clamp(64px, 10vw, 140px); z-index: -1; pointer-events: none;
background: linear-gradient(var(--from), transparent);
}
.s[data-from="ivory"] { --from: var(--aj-ivory); }
.s[data-from="paper"] { --from: var(--aj-paper); }
.s[data-from="sage"]  { --from: var(--aj-sage-mist); }
.s[data-from="blush"] { --from: var(--aj-blush-mist); }
.s[data-from="sand"]  { --from: var(--aj-sand); }
.s__head { margin-bottom: clamp(40px, 5vw, 64px); }
.s__head .lead, .s__head .body { margin-top: var(--sp-5); }
.btn {
--h: 54px;
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
min-height: var(--h); padding: 0 30px; border-radius: var(--aj-radius-button);
font: 400 .9375rem/1.25 var(--aj-serif); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; text-align: center;
transition: background-color var(--aj-t-micro) var(--aj-ease), color var(--aj-t-micro) var(--aj-ease), border-color var(--aj-t-micro) var(--aj-ease), transform var(--aj-t-micro) var(--aj-ease);
-webkit-tap-highlight-color: transparent;
}
.btn .icon { width: 18px; height: 18px; flex: none; transition: transform var(--aj-t-micro) var(--aj-ease); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--aj-rose); color: #fff; }
.btn--primary:hover { background: var(--aj-rose-deep); }
.btn--secondary { border: 1px solid var(--aj-rose); color: var(--aj-rose-deep); --h: 52px; }
.btn--secondary:hover { border-color: var(--aj-rose-deep); background: rgba(152, 107, 94, .06); }
.btn--light { background: var(--aj-paper); color: var(--aj-ink); }
.btn--light:hover { background: #fff; }
.btn--text { --h: 44px; padding: 0 2px; color: var(--aj-cacao); background: none; }
.btn--text span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; }
.btn--text:hover span { background-size: 0 1px; background-position: 100% 100%; transition: background-size .35s var(--aj-ease); }
.btn--text:hover .icon { transform: translateY(2px); }
.btn--sm { --h: 40px; padding: 0 24px; font-size: .8125rem; }
.btn--block { width: 100%; }
@media (max-width: 389.98px) { .btn { padding-inline: 20px; letter-spacing: .1em; gap: 10px; } }
.btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); }
.sheet { position: relative; display: block; background: #fff; box-shadow: var(--aj-shadow-page); }
.sheet img { width: 100%; height: auto; }
.sheet::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(45, 39, 35, .07); pointer-events: none; }
.sheet--stack { margin: 0 6px 6px 0; }
.sheet--stack::before {
content: ""; position: absolute; inset: 0; z-index: -1; background: #fbfaf8;
transform: translate(4px, 4px); box-shadow: 3px 3px 0 #f4f1ec, 0 22px 48px rgba(45, 39, 35, .12);
}
.spread { position: relative; display: block; background: #fff; box-shadow: var(--aj-shadow-page); }
.spread img { width: 100%; height: auto; }
.spread::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(90deg, transparent 42%, rgba(38, 35, 32, .035) 47.5%, rgba(38, 35, 32, .11) 49.7%, rgba(255, 255, 255, .5) 50.1%, rgba(38, 35, 32, .05) 50.6%, transparent 56%),
linear-gradient(90deg, rgba(38, 35, 32, .03), transparent 10%, transparent 90%, rgba(38, 35, 32, .03));
box-shadow: inset 0 0 0 1px rgba(45, 39, 35, .07);
}
.web-note { font: 500 var(--fs-micro)/1.3 var(--aj-sans); letter-spacing: .08em; color: var(--aj-muted); }
.js [data-reveal] {
opacity: 0; transform: translate3d(0, 14px, 0);
transition: opacity var(--aj-t-reveal) var(--aj-ease), transform var(--aj-t-reveal) var(--aj-ease);
transition-delay: calc(var(--d, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="fade"] { transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; animation-delay: 0s !important; }
.js [data-reveal] { opacity: 1; transform: none; }
}
.hdr {
position: sticky; top: 0; z-index: 60; height: var(--aj-header);
display: flex; align-items: center; background: transparent;
transition: background-color .35s var(--aj-ease), box-shadow .35s var(--aj-ease), backdrop-filter .35s var(--aj-ease);
}
html:not(.js) .hdr { background: rgba(246, 240, 231, .94); box-shadow: 0 1px 0 var(--aj-border); }
.hdr.is-scrolled {
background: rgba(246, 240, 231, .94);
-webkit-backdrop-filter: saturate(1.1) blur(12px); backdrop-filter: saturate(1.1) blur(12px);
box-shadow: 0 1px 0 var(--aj-border);
}
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); height: 100%; }
.hdr :is(a, button) { scroll-margin-top: calc(-1 * (var(--aj-header) + 16px)); }
.brand { display: inline-flex; align-items: baseline; gap: 10px; color: var(--aj-ink); text-decoration: none; white-space: nowrap; padding-block: calc((44px - 1.1875rem) / 2); }
.brand__name { font: 400 1.1875rem/1 var(--aj-serif); letter-spacing: .34em; text-transform: uppercase; margin-right: -.34em; }
.brand__sub { font: 400 .75rem/1 var(--aj-serif); letter-spacing: .3em; text-transform: uppercase; color: var(--aj-cacao); margin-left: .35em; }
.hdr__nav { display: none; }
.hdr__actions { display: flex; align-items: center; gap: var(--sp-2); }
.hdr__bag { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--aj-ink); border-radius: 50%; }
.hdr__bag .icon { width: 26px; height: 26px; stroke-width: 1.05; }
.hdr__bag:hover { color: var(--aj-rose-deep); }
.hdr__cta { display: none; }
.hdr__menu {
display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px;
color: var(--aj-ink); border-radius: var(--aj-radius-button);
}
.hdr__menu .icon { width: 24px; height: 24px; }
@media (max-width: 389.98px) {
.hdr__in { gap: var(--sp-3); }
.hdr__actions { gap: 0; }
.brand { gap: 6px; }
.brand__name { letter-spacing: .26em; margin-right: -.26em; }
.brand__sub { letter-spacing: .2em; }
}
@media (max-width: 349.98px) { .hdr .brand__sub { display: none; } }
@media (min-width: 1024px) {
.hdr__nav { display: block; margin-left: auto; }
.hdr__nav ul { display: flex; gap: clamp(20px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; }
.hdr__nav a {
display: inline-block; padding: 15.5px 0; text-decoration: none;
font: 400 clamp(.8125rem, 1.05vw, .9375rem)/1 var(--aj-serif); letter-spacing: .01em; color: var(--aj-cacao);
background: linear-gradient(var(--aj-gold), var(--aj-gold)) 50% calc(100% - 6px) / 0 1px no-repeat;
transition: background-size .35s var(--aj-ease), color var(--aj-t-micro);
}
.hdr__nav a:hover, .hdr__nav a[aria-current] { background-size: 100% 1px; color: var(--aj-ink); }
.hdr__cta {
display: inline-flex; position: relative; margin-left: clamp(24px, 3.4vw, 56px);
--h: 36px; min-width: 7rem; padding: 0 26px; font-size: .75rem; letter-spacing: .12em;
}
.hdr__cta::before { content: ""; position: absolute; inset: -4px 0; }
.hdr__bag { margin-left: var(--sp-3); margin-right: -10px; }
.hdr__bag .icon { width: 34px; height: 34px; stroke-width: .8; }
.hdr .brand { gap: 19px; }
.hdr .brand__name { font-size: 1.3125rem; }
.hdr__in { position: relative; max-width: none; padding-inline: clamp(var(--aj-gutter), 5vw, 120px); }
.hdr__menu { display: none; }
}
@media (min-width: 1200px) {
.hdr__nav { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
}
.menu {
position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
background: var(--aj-ivory); overflow-y: auto; overscroll-behavior: contain;
padding-bottom: env(safe-area-inset-bottom);
}
.menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--aj-header); flex: none; }
.menu__close { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; color: var(--aj-ink); }
.menu__nav { flex: 1; padding-top: clamp(24px, 6vh, 56px); }
.menu__nav ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--aj-border); }
.menu__nav li { border-bottom: 1px solid var(--aj-border); }
.menu__nav a {
display: flex; align-items: baseline; gap: 18px; min-height: 60px; padding: 16px 0;
font: 400 1.75rem/1.1 var(--aj-serif); letter-spacing: -.01em; color: var(--aj-ink); text-decoration: none;
}
.menu__num { font: 400 .8125rem/1 var(--aj-serif); letter-spacing: .14em; color: var(--aj-muted); min-width: 22px; }
.menu__nav a[aria-current] .menu__label { text-decoration: underline 1px var(--aj-gold); text-underline-offset: .22em; }
.menu__nav .menu__minor { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: var(--sp-8); }
.menu__nav .menu__minor li { border: 0; }
.menu__nav .menu__minor a {
min-height: 44px; padding: 0; align-items: center;
font: 400 .9375rem/1.2 var(--aj-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--aj-cacao);
}
.menu__nav .menu__minor a[aria-current] { text-decoration: underline 1px var(--aj-gold); text-underline-offset: .3em; }
.menu__foot { padding-block: var(--sp-8) var(--sp-10); }
.menu.is-open { animation: menu-in .42s var(--aj-ease) both; }
.menu.is-open li { animation: menu-item .5s var(--aj-ease) both; animation-delay: calc(80ms + var(--i, 0) * 40ms); }
.menu.is-closing { animation: menu-out .22s var(--aj-ease) both; pointer-events: none; }
@keyframes menu-in { from { opacity: 0; } }
@keyframes menu-out { to { opacity: 0; } }
@keyframes menu-item { from { opacity: 0; transform: translateY(12px); } }
html.menu-lock { overflow: hidden; }
.buybar {
position: fixed; inset: auto 0 0 0; z-index: 50;
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
min-height: 58px; padding: 8px var(--aj-gutter) calc(8px + env(safe-area-inset-bottom));
background: rgba(251, 249, 245, .97); border-top: 1px solid var(--aj-border);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
transform: translateY(105%); visibility: hidden;
transition: transform .5s var(--aj-ease), visibility 0s linear .5s;
}
.buybar.is-visible { transform: none; visibility: visible; transition: transform .5s var(--aj-ease), visibility 0s; }
.buybar__text { display: grid; gap: 3px; min-width: 0; }
.buybar__name { font: 400 1.0625rem/1.1 var(--aj-serif); color: var(--aj-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__note { font: 500 .75rem/1.2 var(--aj-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--aj-muted); }
.buybar .btn { --h: 44px; padding: 0 20px; flex: none; }
@media (max-width: 389.98px) { .buybar__note { text-transform: none; letter-spacing: .02em; } }
@media (min-width: 1024px) { .buybar { display: none; } }
@media (max-width: 1023.98px) {
html:has(.buybar.is-visible) { scroll-padding-bottom: calc(61px + 16px + env(safe-area-inset-bottom)); }
}
.ftr { background: var(--aj-cacao-deep); color: var(--aj-on-dark); padding-block: clamp(64px, 8vw, 104px) calc(40px + env(safe-area-inset-bottom)); }
.ftr a { color: inherit; text-decoration: none; }
.ftr a:hover, .ftr a[aria-current] { color: var(--aj-paper); text-decoration: underline; }
.ftr__grid { display: grid; gap: var(--sp-12); }
.ftr__brand .brand { color: var(--aj-paper); padding-block: 10px; margin-block: -10px; }
.ftr__brand .brand__name { font-size: 1.5rem; }
.ftr__brand .brand__sub { color: rgba(251, 249, 245, .55); }
.ftr__tagline { margin-top: var(--sp-5); font: 400 1.25rem/1.35 var(--aj-serif); color: rgba(251, 249, 245, .82); }
.ftr__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--sp-6); }
.ftr__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-small); }
.ftr__base {
margin-top: clamp(48px, 6vw, 80px); padding-top: var(--sp-6); border-top: 1px solid rgba(251, 249, 245, .14);
display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3) var(--sp-6);
font-size: var(--fs-micro); color: rgba(251, 249, 245, .56);
}
@media (min-width: 768px) {
.ftr__grid { grid-template-columns: 1fr auto; align-items: end; column-gap: var(--sp-8); }
.ftr__links { grid-template-columns: repeat(3, auto); column-gap: clamp(28px, 4vw, 56px); }
}
@media (max-width: 1023.98px) { .buybar-on .ftr { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }
.page-hero { padding-block: clamp(48px, 8vw, 112px) var(--sp-section); }
.lang ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.lang li + li::before { content: "·"; margin-inline: 2px; color: var(--aj-muted); }
.lang a {
display: inline-grid; place-items: center; min-width: 32px; min-height: 44px; padding-inline: 2px; text-decoration: none;
font: 400 .75rem/1 var(--aj-serif); letter-spacing: .18em; margin-right: -.18em; color: var(--aj-muted);
transition: color var(--aj-t-micro) var(--aj-ease);
}
.lang a:hover { color: var(--aj-ink); }
.lang a[aria-current] { color: var(--aj-ink); text-decoration: underline 1px var(--aj-gold); text-underline-offset: .6em; }
.hdr__lang { display: none; }
@media (min-width: 1024px) { .hdr__lang { display: block; margin-left: var(--sp-4); } }
.menu__lang { padding-top: var(--sp-6); }
.ftr__lang a { color: rgba(251, 249, 245, .62); }
.ftr__lang a:hover, .ftr__lang a[aria-current] { color: var(--aj-paper); }
.ftr__lang li + li::before { color: rgba(251, 249, 245, .4); }
.phil { display: grid; }
.phil__text { padding: clamp(28px, 6vw, 56px) var(--aj-gutter) clamp(36px, 8vw, 64px); max-width: calc(540px + 2 * var(--aj-gutter)); }
.phil__line { display: block; text-wrap: balance; }
.phil__title {
margin-top: var(--sp-5);
font: 400 clamp(2.375rem, 1.9rem + 2vw, 2.75rem)/1.08 var(--aj-serif); letter-spacing: -.012em; color: var(--aj-ink);
}
.phil__p { margin-top: var(--sp-6); font: 400 clamp(1.125rem, 1.05rem + .3vw, 1.25rem)/1.62 var(--aj-serif); color: var(--aj-cacao); text-wrap: pretty; }
.phil__title + .phil__p { margin-top: var(--sp-8); }
.phil__p + .phil__p { margin-top: var(--sp-4); }
.phil__link {
display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: var(--sp-8);
font: 400 .875rem/1.2 var(--aj-serif); letter-spacing: .18em; text-transform: uppercase; color: var(--aj-ink); text-decoration: none;
transition: color var(--aj-t-micro) var(--aj-ease);
}
.phil__link span { text-decoration: underline 1px var(--aj-gold); text-underline-offset: .55em; transition: text-decoration-color var(--aj-t-micro) var(--aj-ease); }
.phil__link .icon { width: 18px; height: 18px; stroke-width: 1.1; transition: transform var(--aj-t-micro) var(--aj-ease); }
.phil__link:hover { color: var(--aj-rose-deep); }
.phil__link:hover span { text-decoration-color: currentColor; }
.phil__link:hover .icon { transform: translateX(3px); }
.phil__modes { margin-top: var(--sp-6); padding-top: var(--sp-3); border-top: 1px solid var(--aj-border); }
.phil__tabs { display: flex; gap: var(--sp-6); }
.phil__tab {
display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0;
font: 400 .8125rem/1 var(--aj-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--aj-muted);
transition: color var(--aj-t-micro) var(--aj-ease);
}
.phil__tab .icon { width: 22px; height: 22px; stroke-width: 1; }
.phil__tab span { padding-bottom: 4px; border-bottom: 1px solid transparent; transition: border-color var(--aj-t-micro) var(--aj-ease); }
.phil__tab:hover { color: var(--aj-ink); }
.phil__tab[aria-selected="true"] { color: var(--aj-ink); }
.phil__tab[aria-selected="true"] span { border-bottom-color: var(--aj-gold); }
.phil__panel { margin-top: var(--sp-2); animation: phil-in .5s var(--aj-ease) both; }
@keyframes phil-in { from { opacity: 0; transform: translateY(6px); } }
.phil__mode-text { font: italic 400 clamp(1.0625rem, 1rem + .25vw, 1.1875rem)/1.45 var(--aj-serif); color: var(--aj-rose-deep); text-wrap: pretty; }
html:not(.js) .phil__tabs { display: none; }
html:not(.js) .phil__panel[hidden] { display: block; }
.phil__photo { position: relative; margin: 0; aspect-ratio: 1122 / 1402; -webkit-mask-image: linear-gradient(transparent, #000 7%); mask-image: linear-gradient(transparent, #000 7%); }
.phil__layer { position: absolute; inset: 0; transition: opacity .7s var(--aj-ease), visibility 0s linear .7s; }
.phil__layer--reflect picture, .phil__layer--reflect img { display: block; width: 100%; height: 100%; }
.phil__layer--reflect img { object-fit: cover; object-position: 50% 48%; }
.phil__layer--plan { display: grid; place-items: center; background: linear-gradient(160deg, var(--aj-sand), var(--aj-ivory) 70%); }
.phil__book { width: min(88%, 600px); }
.phil__photo[data-mode-visual="reflect"] .phil__layer--plan,
.phil__photo[data-mode-visual="plan"] .phil__layer--reflect { opacity: 0; visibility: hidden; }
.phil__photo[data-mode-visual="reflect"] .phil__layer--reflect,
.phil__photo[data-mode-visual="plan"] .phil__layer--plan { transition: opacity .7s var(--aj-ease), visibility 0s; }
@media (min-width: 640px) and (max-width: 1023.98px) {
.phil__text { padding-inline: clamp(40px, 8vw, 72px); max-width: none; }
.phil__text > * { max-width: 540px; }
.phil__photo { width: min(100%, 720px); margin-inline: auto; }
}
@media (min-width: 1024px) {
.phil { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); min-height: calc(100svh - var(--aj-header)); }
.phil__text {
align-self: center; max-width: none;
padding: clamp(32px, 6vh, 72px) clamp(32px, 4vw, 72px) clamp(32px, 6vh, 72px) clamp(var(--aj-gutter), 5vw, 120px);
}
.phil__text > * { max-width: 540px; }
.phil__title { font-size: calc(clamp(2.5rem, min(4.1vw, 6.6vh), 3.75rem) * var(--phil-s, 1)); }
.phil__p { font-size: calc(clamp(1.0625rem, min(1.35vw, 2.3vh), 1.25rem) * var(--phil-s, 1)); }
.phil__photo { aspect-ratio: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%); mask-image: linear-gradient(90deg, transparent, #000 7%); }
.phil__book { width: min(82%, (100svh - var(--aj-header)) * .8 * 296 / 210); }
}
@media (min-width: 1024px) and (max-height: 800px) {
.phil__text { padding-block: 16px; }
.phil__title { margin-top: var(--sp-3); font-size: calc(clamp(2rem, 5.6vh, 2.625rem) * var(--phil-s, 1)); }
.phil__p { font-size: calc(1rem * var(--phil-s, 1)); line-height: 1.5; }
.phil__title + .phil__p { margin-top: var(--sp-5); }
.phil__p + .phil__p { margin-top: var(--sp-3); }
.phil__link { margin-top: var(--sp-4); }
.phil__modes { margin-top: var(--sp-4); padding-top: var(--sp-2); }
.phil__mode-text { font-size: 1rem; }
.phil__tab { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .phil__panel { animation: none; } .phil__layer { transition: none; } }
.nf { min-height: calc(100svh - var(--aj-header)); display: grid; place-items: center; padding-block: var(--sp-section); }
.nf .h-section { max-width: 16ch; margin-inline: auto; }
.nf__cta { justify-content: center; }
.lg { padding-block: clamp(32px, 5vw, 72px) var(--sp-section); }
.lg__in { max-width: calc(40rem + 2 * var(--aj-gutter)); }
.lg__title { max-width: 16em; }
.lg__updated { margin-top: var(--sp-4); font: 400 .875rem/1.4 var(--aj-serif); color: var(--aj-muted); }
.lg__sec { margin-top: var(--sp-10); font: 400 1.0625rem/1.65 var(--aj-serif); color: var(--aj-cacao); }
.lg__sec p + p { margin-top: var(--sp-3); }
.lg__h { margin-bottom: var(--sp-3); font: 400 .875rem/1.3 var(--aj-serif); letter-spacing: .18em; text-transform: uppercase; color: var(--aj-ink); }
.lg__list { margin: var(--sp-3) 0 0; padding-left: 1.1em; }
.lg__list li + li { margin-top: var(--sp-2); }
.lg__form { padding: var(--sp-6); border: 1px solid var(--aj-border); border-radius: 3px; }
.ftr__legal { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); list-style: none; margin: 0; padding: 0; }
.ftr__legal a { color: rgba(251, 249, 245, .62); text-decoration: none; }
.ftr__legal a:hover { color: var(--aj-paper); text-decoration: underline 1px; text-underline-offset: .25em; }
.nf__others { margin-top: var(--sp-10); display: grid; gap: var(--sp-2); font: 400 1rem/1.5 var(--aj-serif); color: var(--aj-muted); }
.nf__others a { color: var(--aj-ink); text-decoration: underline 1px var(--aj-gold); text-underline-offset: .25em; }
.thx__text { max-width: 32rem; margin: 0 auto var(--sp-8); }
.hero {
--hero-cream: #F9F0E3;
--hero-letter: #D1A78B;
--hero-pages: color-mix(in srgb, var(--aj-paper) 70%, var(--hero-cream));
--hero-shade: 45, 39, 35;
--hero-warm: 150, 110, 95;
--hero-text: #2E2723;
--hero-soft: #4A413B;
--fs-hero: var(--fs-h1);
--P: 100cqh;
position: relative; overflow-x: clip;
background: var(--aj-wall);
padding-top: calc(var(--aj-header) + var(--sp-6));
}
.hero__grid { position: relative; z-index: 1; padding-inline: var(--aj-gutter); }
.hero__copy { color: var(--hero-text); }
.hero__eyebrow {
margin-bottom: 16px;
font: 400 .75rem/1.4 var(--aj-serif); letter-spacing: .22em; color: var(--hero-soft);
}
.hero__display {
margin: 0; font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -.012em; white-space: nowrap;
color: var(--hero-text);
}
.hero__rule { display: block; width: 44px; height: 1px; margin: clamp(18px, 3.2vh, 30px) 0; background: rgba(46, 39, 35, .5); }
.hero__lead {
max-width: 26rem; margin: 0;
font: 400 clamp(1.125rem, 1.02rem + .45vw, 1.375rem)/1.42 var(--aj-serif); color: var(--hero-soft); letter-spacing: -.003em;
}
.hero__ctas { margin-top: clamp(24px, 4vh, 36px); }
.hero__cta { --h: 56px; padding-inline: 32px; font-size: .9375rem; }
.hero__cta .icon { width: 22px; height: 22px; }
.hero__pillars {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 26rem;
margin: clamp(28px, 5vh, 52px) 0 0; padding: 0; list-style: none;
}
.hero__pillar {
display: flex; flex-direction: column; align-items: center; gap: 12px; padding-inline: 6px; text-align: center;
font: 400 .75rem/1.5 var(--aj-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--hero-text);
}
.hero__pillar + .hero__pillar { border-left: 1px solid rgba(46, 39, 35, .16); }
.hero__pillar .icon { width: 38px; height: 38px; stroke-width: .9; color: var(--hero-text); }
@media (max-width: 389.98px) {
.hero__cta { padding-inline: 24px; }
.hero__pillar { letter-spacing: .1em; padding-inline: 2px; }
}
.hero__set { --band: max(min(560px, 70svh), 35vw); position: relative; margin-top: var(--sp-8); pointer-events: none; }
.hero__view { position: relative; height: var(--band); overflow: clip; container-type: size; }
.hero__view::before { content: ""; position: absolute; inset: 0; background: var(--aj-wall); }
.hero__plate {
position: absolute; bottom: 0; height: var(--P); aspect-ratio: 2126 / 740;
left: clamp(100cqw - 2.873 * var(--P), 50cqw - 1.642 * var(--P), 0px);
}
.hero__photo { position: absolute; inset: 0; z-index: 0; }
.hero__photo img {
width: 100%; height: 100%; object-fit: cover;
-webkit-mask-image: linear-gradient(transparent, #000 22%, #000 90%, transparent);
mask-image: linear-gradient(transparent, #000 22%, #000 90%, transparent);
}
.hero__stage {
--bw: calc(var(--P) * .4095);
--bh: calc(var(--bw) * 210 / 148);
--bt: calc(var(--bw) * 27 / 148);
--rx: -5deg;
--rx1: -8deg;
--ry0: -13deg;
--ry1: -22deg;
--open: -36deg;
position: absolute; z-index: 2; width: var(--bw); height: var(--bh);
left: calc(57.15% - var(--bw) / 2); bottom: 16.2%;
display: grid; place-items: center;
pointer-events: none;
}
.hero__scene {
display: grid; perspective: calc(var(--bh) * 6.5); perspective-origin: 50% 30%;
transform: translate3d(0, calc(var(--p, 0) * -10px), 0) scale(calc(1 + var(--p, 0) * .03));
will-change: transform;
}
.hero__scene > * { grid-area: 1 / 1; width: var(--bw); height: var(--bh); }
.hero__cover-front img, .hero__spine img { filter: sepia(.06) saturate(1.04); }
.hero__obj {
position: relative; transform-style: preserve-3d;
transform: rotateX(calc(var(--rx) + (var(--rx1) - var(--rx)) * var(--o, 0))) rotateY(calc(var(--ry0) + (var(--ry1) - var(--ry0)) * var(--o, 0)));
}
.hero__turn { position: absolute; inset: 0; transform-style: preserve-3d; }
.hero__face, .hero__cover, .hero__cover > * { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hero__back { inset: 0; background: var(--hero-cream); transform: rotateY(180deg) translateZ(calc(var(--bt) / 2)); }
.hero__spine {
top: 0; left: calc(50% - var(--bt) / 2); width: var(--bt); height: 100%;
transform: rotateY(-90deg) translateZ(calc(var(--bw) / 2));
background: var(--hero-cream); overflow: hidden;
}
.hero__spine img { width: 100%; height: 100%; object-fit: cover; }
.hero__spine::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(var(--hero-shade), .10), rgba(var(--hero-shade), .02) 40%, transparent 78%, rgba(255, 255, 255, .45) calc(100% - 1.5px), rgba(255, 255, 255, .8)),
linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 30%, rgba(var(--hero-shade), .06)),
linear-gradient(rgba(var(--hero-shade), .08), rgba(var(--hero-shade), .08));
}
.hero__edge {
--lines: repeating-linear-gradient(var(--dir), rgba(var(--hero-shade), .055) 0 1px, transparent 1px 3.5px);
}
.hero__edge--top, .hero__edge--bottom { left: 0; width: 100%; top: calc(50% - var(--bt) / 2); height: var(--bt); --dir: 180deg; }
.hero__edge--top {
transform: rotateX(90deg) translateZ(calc(var(--bh) / 2));
background:
linear-gradient(180deg, var(--hero-cream) 0 1.5%, rgba(var(--hero-shade), .10) 1.5% 3%, transparent 3% 97%, var(--hero-cream) 97%),
var(--lines),
linear-gradient(90deg, rgba(255, 255, 255, .45), transparent 45%, rgba(var(--hero-shade), .06)),
var(--hero-pages);
}
.hero__edge--bottom {
transform: rotateX(-90deg) translateZ(calc(var(--bh) / 2));
background: linear-gradient(rgba(var(--hero-shade), .22), rgba(var(--hero-shade), .22)), var(--lines), var(--hero-pages);
}
.hero__edge--fore {
top: 0; height: 100%; left: calc(50% - var(--bt) / 2); width: var(--bt); --dir: 90deg;
transform: rotateY(90deg) translateZ(calc(var(--bw) / 2 + .5px));
background: linear-gradient(rgba(142, 96, 56, .55), rgba(120, 80, 46, .62)), var(--lines), var(--hero-pages);
}
.hero__page { inset: 0; background: #fff; transform: translateZ(calc(var(--bt) / 2 - 1px)); overflow: hidden; }
.hero__page img { width: 100%; height: 100%; object-fit: cover; opacity: min(1, calc(var(--o, 0) * 40)); }
.hero__page::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(var(--hero-shade), .34), rgba(var(--hero-shade), .12) 34%, rgba(var(--hero-shade), .03) 70%, transparent);
opacity: calc(1 - var(--o, 0) * .55);
}
.hero__cover {
inset: 0; transform-style: preserve-3d; transform-origin: 0 50%;
transform: translateZ(calc(var(--bt) / 2)) rotateY(calc(var(--o, 0) * var(--open)));
backface-visibility: visible;
}
.hero__cover-front { inset: 0; background: var(--hero-cream); overflow: hidden; }
.hero__cover-front img { width: 100%; height: 100%; object-fit: cover; }
.hero__cover-front::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(90deg, rgba(var(--hero-shade), .10), rgba(var(--hero-shade), .03) 1px, rgba(var(--hero-shade), .035) 2.5%, transparent 6%),
linear-gradient(128deg, rgba(255, 255, 255, .16), transparent 42%, rgba(var(--hero-shade), .05) 100%),
linear-gradient(125deg, rgba(var(--hero-warm), .11), rgba(var(--hero-warm), .19) 45%, rgba(var(--hero-warm), .26));
box-shadow: inset 0 0 0 1px rgba(var(--hero-shade), .10), inset -1px -1px 0 rgba(var(--hero-shade), .08);
}
.hero__cover-in {
inset: 0; transform: rotateY(180deg);
background:
linear-gradient(rgba(var(--hero-shade), calc(.16 * (1 - var(--o, 0)))), rgba(var(--hero-shade), calc(.16 * (1 - var(--o, 0))))),
linear-gradient(90deg, rgba(var(--hero-shade), .03), rgba(var(--hero-shade), .015) 20%, rgba(var(--hero-shade), .02) 70%, rgba(var(--hero-shade), .07) 90%, rgba(var(--hero-shade), .16)),
linear-gradient(170deg, transparent 30%, rgba(var(--hero-shade), .045)),
var(--aj-paper);
box-shadow: inset 0 0 0 .5px rgba(var(--hero-shade), .09);
}
.hero__ground { position: relative; }
.hero__ground > span { position: absolute; display: block; }
.hero__cast {
left: 10%; right: -4%; top: 20%; bottom: 1%;
background: linear-gradient(to top, rgba(var(--hero-shade), .17), rgba(var(--hero-shade), .08) 40%, rgba(var(--hero-shade), .025) 80%, transparent);
filter: blur(calc(var(--bw) * .05));
transform-origin: 30% 100%;
transform: skewX(-6deg);
}
.hero__contact {
left: -3%; right: -8%; bottom: -2.5%; height: 5%;
background: radial-gradient(closest-side, rgba(var(--hero-shade), .38), rgba(var(--hero-shade), .14) 55%, transparent);
filter: blur(3px);
}
.hero__lie { inset: 0; box-shadow: var(--aj-shadow-page); opacity: 0; }
.hero__lie::before {
content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: calc(100% * var(--k, .62));
box-shadow: var(--aj-shadow-page); opacity: clamp(0, (var(--o, 0) - .8) * 5, 1);
}
@media (prefers-reduced-motion: no-preference) {
.hero { --hero-breath: 9s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.js .hero__stage.is-live .hero__turn { animation: hero-breathe var(--hero-breath); }
.js .hero__stage.is-live .hero__cast { animation: hero-cast var(--hero-breath); }
.js .hero__stage:not(.is-live) .hero__turn,
.js .hero__stage:not(.is-live) .hero__cast { animation-play-state: paused; }
}
@keyframes hero-breathe {
from { transform: none; }
to   { transform: rotateX(1deg) rotateY(-1.5deg); }
}
@keyframes hero-cast {
from { transform: skewX(-6deg); }
to   { transform: skewX(-5deg) translateX(-2px); }
}
@media (min-width: 768px) {
.hero { padding-top: calc(var(--aj-header) + var(--sp-10)); }
.hero__set { --band: max(min(640px, 64svh), 35vw); }
}
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
.hero {
container-type: size;
--H: calc(100cqh + var(--aj-header));
--pad: clamp(40px, 6.5vw, 128px);
--copy: max(var(--hero-em, 8.35) * var(--fs-hero), 26rem);
--P: min(1.2 * var(--H), (100cqw - var(--pad) - var(--copy) - 24px) / .5721);
--bx: clamp(max(var(--pad) + var(--copy) + .3673 * var(--P), 100cqw - 1.231 * var(--P)), 68cqw, min(100cqw - 24px - .2048 * var(--P), 1.642 * var(--P)));
height: 100svh; min-height: 560px; padding: var(--aj-header) 0 0;
display: flex; flex-direction: column; justify-content: center;
}
.hero__grid { padding: clamp(16px, 3vh, 40px) var(--pad) clamp(24px, 4vh, 48px); }
.hero__copy { max-width: var(--copy); }
.hero__lead { font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.25; max-width: 17em; text-wrap: balance; }
.hero__rule { margin: clamp(12px, 2.2vh, 24px) 0 clamp(18px, 3.2vh, 30px); }
.hero__ctas { margin-top: clamp(16px, 3vh, 32px); }
.hero__cta { font-size: .875rem; letter-spacing: .1em; }
.hero__pillars { display: flex; max-width: none; }
.hero__pillar { padding-inline: 30px; gap: 8px; letter-spacing: .07em; line-height: 1.35; font-weight: 500; }
.hero__pillar:first-child { padding-left: 0; }
.hero__pillar .icon { width: 46px; height: 46px; stroke-width: .75; }
.hero__set { position: absolute; inset: 0; margin: 0; }
.hero__view { position: absolute; inset: 0; height: auto; container-type: normal; }
.hero__plate { bottom: auto; top: calc(.88 * var(--H) - .8486 * var(--P)); left: calc(var(--bx) - 1.642 * var(--P)); }
.hero__photo img {
-webkit-mask-image: none; mask-image: none;
}
.hero__view::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: calc(1 - var(--f, 0));
background: linear-gradient(90deg, rgba(236, 223, 212, .72) calc(var(--pad) + var(--copy) - 80px), rgba(236, 223, 212, 0) calc(var(--pad) + var(--copy) + 40px));
}
.hero::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(56px, 9vh, 96px); z-index: 0;
pointer-events: none; opacity: calc(1 - var(--f, 0));
background: linear-gradient(transparent, var(--aj-wall));
}
.hero__stage { z-index: 2; }
}
@media (min-width: 1920px) and (min-height: 1200px) and (min-aspect-ratio: 1/1) {
.hero__eyebrow { font-size: .875rem; }
.hero__lead { font-size: 1.625rem; }
.hero__cta { --h: 64px; font-size: 1.0625rem; }
.hero__pillar { font-size: .875rem; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
.js .hero__copy { animation: hero-copy-in 1.5s cubic-bezier(.22, 1, .36, 1) .9s both; }
}
@keyframes hero-copy-in { from { opacity: 0; transform: translate3d(64px, 0, 0); } }
.op {
--op-shade: 45, 39, 35;
--op-cream: #F9F0E3;
--op-stack: clamp(6px, 1.4vw, 10px);
}
.op__grid { display: grid; gap: var(--sp-12); }
.op__line { display: block; text-wrap: balance; }
.op__text { margin-top: var(--sp-6); max-width: 34rem; }
.op__visual { margin: 0; }
.op__book {
position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
width: calc(100% - 6px); margin-inline: auto; padding-bottom: var(--op-stack);
}
.op__page { position: relative; aspect-ratio: 148 / 210; background: #fff; }
.op__page img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.op__page::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow: inset 0 0 0 .5px rgba(var(--op-shade), .07);
}
.op__page::before {
content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--h, var(--op-stack));
background:
linear-gradient(transparent calc(100% - 1.5px), var(--op-cream) calc(100% - 1.5px)),
repeating-linear-gradient(180deg, rgba(var(--op-shade), .09) 0 .5px, transparent .5px 1.5px),
linear-gradient(90deg, rgba(var(--op-shade), .10), transparent 12%),
var(--aj-paper);
box-shadow: 0 1px 0 rgba(var(--op-shade), .06);
}
.op__page--l { display: none; }
.op__page--r::after {
background: linear-gradient(90deg, rgba(var(--op-shade), .16), rgba(var(--op-shade), .06) 2.5%, rgba(255, 255, 255, 0) 7%, rgba(255, 255, 255, .0) 88%, rgba(var(--op-shade), .025));
}
.op__book::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
box-shadow: var(--aj-shadow-page);
}
@media (min-width: 768px) {
.op__book { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
.op__page--l { display: block; background: var(--aj-paper); border-radius: 0 16px 16px 0 / 0 3px 3px 0; }
.op__page--l::before { --h: 2px; }
.op__page--r { border-radius: 16px 0 0 16px / 3px 0 0 3px; }
.op__page--l::after {
background:
linear-gradient(90deg, rgba(var(--op-shade), .03), rgba(var(--op-shade), .015) 20%, rgba(var(--op-shade), .02) 70%, rgba(var(--op-shade), .07) 90%, rgba(var(--op-shade), .16)),
linear-gradient(170deg, transparent 30%, rgba(var(--op-shade), .045));
box-shadow: inset 0 0 0 .5px rgba(var(--op-shade), .09);
}
.op__page--r::after {
background:
linear-gradient(90deg, rgba(var(--op-shade), .18), rgba(var(--op-shade), .08) 3%, rgba(var(--op-shade), .025) 11%, rgba(255, 255, 255, 0) 20%, transparent 90%, rgba(var(--op-shade), .03)),
linear-gradient(165deg, transparent 30%, rgba(var(--op-shade), .035));
}
.op__book::before {
content: ""; position: absolute; z-index: 1; top: 0; bottom: var(--op-stack); left: calc(50% - .5px); width: 1px; pointer-events: none;
background: linear-gradient(rgba(var(--op-shade), .06), rgba(var(--op-shade), .16) 50%, rgba(var(--op-shade), .06));
}
}
@media (min-width: 1024px) {
.op__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(56px, 6vw, 112px); align-items: center; }
.op__visual { order: -1; }
.op__book { width: min(100%, calc((100svh - var(--aj-header) - 120px) * 296 / 210)); margin-inline: auto; }
}
@media (min-width: 768px) and (max-width: 1023.98px) and (max-height: 619.98px) {
.op__book { width: min(100%, calc((100svh - var(--aj-header) - 48px) * 296 / 210)); margin-inline: auto; }
}
@media (max-width: 767.98px) and (max-height: 619.98px) {
.op__book { width: min(calc(100% - 6px), calc((100svh - var(--aj-header) - 48px) * 148 / 210)); }
}
@media (prefers-reduced-motion: no-preference) {
.js .op__visual[data-reveal] {
transform: translate3d(0, 8px, 0) scale(1.02); transform-origin: 50% 60%;
transition: opacity 900ms var(--aj-ease), transform 1400ms var(--aj-ease);
}
.js .op__visual[data-reveal].is-in { transform: none; }
}
.story { margin-top: calc(-1 * var(--aj-header)); }
.story > .op::before {
content: ""; position: absolute; inset: 0 0 auto; height: clamp(72px, 12vw, 140px); z-index: -1; pointer-events: none;
background: linear-gradient(var(--aj-wall), transparent);
}
@supports (height: 1svh) {
@media (min-width: 1024px) and (min-height: 600px) and (min-aspect-ratio: 1/1) and (prefers-reduced-motion: no-preference),
(max-width: 1023.98px) and (min-height: 560px) and (prefers-reduced-motion: no-preference),
(max-aspect-ratio: 999/1000) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
.js .story .hero__stage { --open: -178deg; --rx1: -1deg; --ry1: 0deg; --k: 1; }
.js .story .hero__scene {
transform-origin: 0 50%;
transform: translate3d(calc(var(--tx, 0px) * var(--m, 0)), calc(var(--ty, 0px) * var(--m, 0)), 0) scale(calc(1 + (var(--ts, 1) - 1) * var(--m, 0)));
perspective: calc(var(--bh) * 6.5 * (1 + var(--o, 0)));
perspective-origin: 50% calc(30% + var(--o, 0) * 20%);
}
.js .story .hero__page::after { opacity: calc(1 - var(--o, 0)); }
.js .story .hero__page::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--o, 0);
background:
linear-gradient(90deg, rgba(var(--hero-shade), .18), rgba(var(--hero-shade), .08) 3%, rgba(var(--hero-shade), .025) 11%, rgba(255, 255, 255, 0) 20%, transparent 90%, rgba(var(--hero-shade), .03)),
linear-gradient(165deg, transparent 30%, rgba(var(--hero-shade), .035));
}
.js .story .hero__cover-in {
box-shadow: inset 0 0 0 .5px rgba(var(--hero-shade), .09),
0 14px 30px -6px rgba(var(--hero-shade), calc(.16 * clamp(0, (var(--o, 0) - .5) * 4, 1) * (1 - clamp(0, (var(--o, 0) - .8) * 5, 1))));
}
.js .story :is(.hero__cast, .hero__contact) { opacity: calc(1 - var(--o, 0) * 1.6); }
.js .story .hero__lie { opacity: var(--o, 0); }
.js .story .hero__cover-front img, .js .story .hero__spine img { filter: sepia(calc(.06 * (1 - var(--o, 0)))) saturate(1.04); }
.js .story .hero__photo { opacity: calc(1 - var(--f, 0)); transform: translate3d(calc(var(--f, 0) * -7%), 0, 0); }
.js .story .hero__view::before { opacity: calc(1 - var(--f, 0)); }
.js .story .hero__copy > :nth-child(2) { --i: 1; }
.js .story .hero__copy > :nth-child(3) { --i: 2; }
.js .story .hero__copy > :nth-child(4) { --i: 3; }
.js .story .hero__copy > :nth-child(5) { --i: 4; }
.js .story .hero__copy > :nth-child(6) { --i: 5; }
}
@media (min-width: 1024px) and (min-height: 600px) and (min-aspect-ratio: 1/1) and (prefers-reduced-motion: no-preference) {
.js .story {
--V: calc(100svh - var(--aj-header));
--len: calc(var(--V) * 1.6);
--page: var(--V);
display: grid; grid-template: calc(100svh + var(--len) + var(--pages, 0) * var(--page)) / minmax(0, 1fr);
}
.js .story > .s {
grid-area: 1 / 1; align-self: start;
position: sticky; top: 0; height: 100svh; min-height: 0;
}
.js .story > .hero { background: var(--aj-ivory); }
.js .story > .s:focus { outline: none; }
.js .story > :is(.op, .pg) {
display: flex; flex-direction: column; justify-content: center;
padding: var(--aj-header) 0 0; background: transparent; pointer-events: none; overflow-x: clip;
}
.js .story > :is(.op, .pg)::before { display: none; }
.js .story.is-open .op__copy { pointer-events: auto; }
.js .story .hero__copy > * {
transition: opacity 520ms var(--aj-ease), transform 700ms var(--aj-ease);
transition-delay: calc(var(--i, 0) * 55ms);
}
.js .story.is-away .hero__copy > * { opacity: 0; transform: translate3d(-6vw, 0, 0); pointer-events: none; }
.js:has(.story:not(.is-open)) .hdr.is-scrolled { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.js .story .op [data-reveal] { opacity: 1; transform: none; transition: none; }
.js .story .op .op__visual { opacity: 0; transition: opacity 260ms var(--aj-ease); }
.js .story .hero__scene { transition: opacity 260ms var(--aj-ease); }
.js .story.is-flat .op .op__visual { opacity: 1; }
.js .story.is-flat .hero__scene { opacity: 0; }
.js .story .op__copy :is(.op__eyebrow, .op__line, .op__body) {
opacity: 0; transform: translate3d(min(64px, var(--aj-gutter) - 8px), 0, 0);
transition: opacity 600ms var(--aj-ease), transform 800ms var(--aj-ease);
transition-delay: calc(var(--i, 0) * 90ms);
}
.js .story.is-open .op__copy :is(.op__eyebrow, .op__line, .op__body) { opacity: 1; transform: none; }
.js .story .op__line:first-child { --i: 1; }
.js .story .op__line + .op__line { --i: 2; }
.js .story .op__body { --i: 3; }
.js .story.is-turned .op__copy :is(.op__eyebrow, .op__line, .op__body) { opacity: 0; transform: translate3d(-6vw, 0, 0); transition-delay: 0ms; }
.js .story.is-turned .op__copy { pointer-events: none; }
.js .story .pg__visual { display: none; }
.js .story .pg__copy { grid-column: 2; }
.js .story .pg__copy > * {
opacity: 0; transform: translate3d(min(64px, var(--aj-gutter) - 8px), 0, 0);
transition: opacity 600ms var(--aj-ease), transform 800ms var(--aj-ease);
transition-delay: calc(var(--i, 0) * 80ms);
}
.js .story .pg__copy > :nth-child(2) { --i: 1; }
.js .story .pg__copy > :nth-child(3) { --i: 2; }
.js .story .pg__copy > :nth-child(n + 4) { --i: 3; }
.js .story .pg__copy > .soul { --i: 4; }
.js .story .pg.is-in .pg__copy { pointer-events: auto; }
.js .story .pg.is-in .pg__copy > * { opacity: 1; transform: none; }
.js .story .pg.is-past .pg__copy > * { opacity: 0; transform: translate3d(-6vw, 0, 0); transition-delay: 0ms; }
.js .story .fb__leaf[data-near] { display: block; }
.js .story :is(.fb__shade, .fb__closed) { display: block; }
.js .story.is-flat .op__book { pointer-events: auto; cursor: pointer; }
.js .story .op__visual { position: relative; }
.js .story.is-flat .fb__nav { display: flex; pointer-events: auto; }
.js .story .op__page--l::before { --h: calc(2px + var(--prog, 0) * (var(--op-stack) - 2px)); }
.js .story .op__page--r::before { --h: calc(var(--op-stack) - var(--prog, 0) * (var(--op-stack) - 2px)); }
.js .story.is-paging .op__page--r > picture { visibility: hidden; }
.js .story .op__book { transform: translate3d(calc(var(--close, 0) * 25%), 0, 0); }
.js .story.is-closing .op__page--r, .js .story.is-closing .op__book::before { opacity: calc(1 - var(--close, 0)); }
.js .story.is-closing .op__book::after { opacity: calc(1 - var(--close, 0)); }
}
@media (max-width: 1023.98px) and (min-height: 560px) and (prefers-reduced-motion: no-preference),
(max-aspect-ratio: 999/1000) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
.js .story .hero__copy > * {
--e: clamp(0, var(--h, 0) * 1.5 - var(--i, 0) * .1, 1);
opacity: calc(1 - var(--e) * 1.6);
transform: translate3d(calc(var(--e) * -8vw), 0, 0);
}
.js .story .hero__copy:has(:focus-visible) > * { --e: 0; }
.js .story .hero__set { --pin: 60svh; height: calc(var(--band) + var(--pin)); }
.js .story .hero__view { position: sticky; top: calc(var(--aj-header) + (100svh - var(--aj-header) - var(--band)) / 2); }
.js .story .op { padding-top: var(--sp-8); overflow-x: clip; }
.js .story .op__copy [data-reveal]:not(.is-in) { transform: translate3d(32px, 0, 0); }
.js .story .op__visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
}
@property --peek { syntax: "<number>"; inherits: true; initial-value: 0; }
.pg { --pg-shade: 45, 39, 35; }
.pg__grid { display: grid; gap: var(--sp-10); }
.pg__line { display: block; text-wrap: balance; }
.pg__lead { margin-top: var(--sp-6); max-width: 34rem; }
.pg__body { margin-top: var(--sp-4); max-width: 34rem; color: var(--aj-cacao); font-family: var(--aj-serif); font-size: 1.0625rem; line-height: 1.55; }
.pg__micro { margin-top: var(--sp-4); }
.pg__ctas { margin-top: var(--sp-8); }
.pg__visual { margin: 0; }
.pg__book { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pg__book::after { content: ""; position: absolute; inset: 0; z-index: -1; box-shadow: var(--aj-shadow-page); pointer-events: none; }
.pg__page { position: relative; aspect-ratio: 148 / 210; background: #fff; overflow: hidden; }
.pg__page img { width: 100%; height: 100%; object-fit: cover; }
.pg__page::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 .5px rgba(var(--pg-shade), .08); }
.pg__page--l::after {
background: linear-gradient(90deg, transparent 80%, rgba(var(--pg-shade), .04) 91%, rgba(var(--pg-shade), .13));
}
.pg__page--r::after {
background: linear-gradient(90deg, rgba(var(--pg-shade), .16), rgba(var(--pg-shade), .06) 3%, rgba(var(--pg-shade), .02) 11%, transparent 20%);
}
.pg--closed .pg__book { grid-template-columns: minmax(0, 1fr); width: 50%; margin-inline: auto; }
.pg--closed .pg__page::after { background: linear-gradient(128deg, rgba(255, 255, 255, .14), transparent 45%, rgba(var(--pg-shade), .05)); }
@media (min-width: 1024px) {
.pg__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(56px, 6vw, 112px); align-items: center; }
.pg__visual { order: -1; }
.pg__book { width: min(100%, calc((100svh - var(--aj-header) - 120px) * 296 / 210)); margin-inline: auto; }
.pg--closed .pg__book { width: min(50%, calc((100svh - var(--aj-header) - 120px) * 148 / 210)); }
}
.fb__leaf, .fb__shade, .fb__closed, .fb__nav { display: none; }
.fb__leaf {
--t: calc(var(--a, 0) + var(--peek));
--bend: calc(sin(var(--t) * 180deg) * -30deg);
position: absolute; top: 0; left: 50%; width: 50%; bottom: var(--op-stack, 0px); z-index: var(--z, 1);
transform-origin: 0 50%; transform-style: preserve-3d;
transform: perspective(2600px) rotateY(calc(var(--t) * -180deg));
transition: --peek .55s var(--aj-ease);
}
.fb__leaf--cover { --bend: 0deg; }
.fb__half { position: absolute; top: 0; bottom: 0; transform-style: preserve-3d; }
.fb__half--in { left: 0; width: 50%; }
.fb__half--out { left: calc(100% - .5px); width: calc(100% + .5px); transform-origin: 0 50%; transform: rotateY(var(--bend)); }
.fb__face {
position: absolute; inset: 0; overflow: hidden; background: #fff;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.fb__face--back { transform: rotateY(180deg); }
.fb__face img { position: absolute; top: 0; height: 100%; width: 200%; max-width: none; object-fit: cover; }
.fb__half--in > .fb__face--front img, .fb__half--out > .fb__face--back img { left: 0; }
.fb__half--out > .fb__face--front img, .fb__half--in > .fb__face--back img { left: -100%; }
.fb__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.fb__half--in > .fb__face--front::after {
background:
linear-gradient(90deg, rgba(45, 39, 35, calc(.16 + .22 * sin(var(--t) * 180deg))), rgba(45, 39, 35, calc(.06 + .1 * sin(var(--t) * 180deg))) 6%, rgba(45, 39, 35, .02) 22%, transparent 60%);
}
.fb__half--in > .fb__face--back::after {
background: linear-gradient(270deg, rgba(45, 39, 35, calc(.13 + .22 * sin(var(--t) * 180deg))), rgba(45, 39, 35, .04) 18%, transparent 40%);
}
.fb__half--out > .fb__face--front::after {
background: linear-gradient(90deg, rgba(45, 39, 35, calc(.14 * sin(var(--t) * 180deg))), transparent 45%, rgba(255, 255, 255, calc(.18 * sin(var(--t) * 180deg))) 80%, transparent);
}
.fb__half--out > .fb__face--back::after {
background: linear-gradient(270deg, rgba(45, 39, 35, calc(.14 * sin(var(--t) * 180deg))), transparent 45%, rgba(255, 255, 255, calc(.14 * sin(var(--t) * 180deg))) 80%, transparent);
}
.fb__shade { position: absolute; top: 0; bottom: var(--op-stack, 0px); width: 50%; pointer-events: none; z-index: var(--zs, 1); }
.fb__shade--r { left: 50%; background: linear-gradient(90deg, rgba(45, 39, 35, .28), rgba(45, 39, 35, .08) 35%, transparent 75%); opacity: var(--lift-r, 0); }
.fb__shade--l { left: 0; background: linear-gradient(270deg, rgba(45, 39, 35, .24), rgba(45, 39, 35, .06) 35%, transparent 75%); opacity: var(--lift-l, 0); }
.fb__closed { position: absolute; top: 0; left: 0; width: 50%; bottom: var(--op-stack, 0px); box-shadow: var(--aj-shadow-page); opacity: var(--close, 0); pointer-events: none; }
.fb__nav {
position: absolute; left: 50%; top: calc(100% + clamp(12px, 2.2vh, 24px)); transform: translateX(-50%);
align-items: center; gap: 6px; white-space: nowrap;
}
.fb__folio { min-width: 5.5em; text-align: center; font: 400 .8125rem/1 var(--aj-serif); letter-spacing: .16em; color: var(--aj-muted); font-variant-numeric: lining-nums; }
.fb__btn {
display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
color: var(--aj-muted); transition: color var(--aj-t-micro) var(--aj-ease), background-color var(--aj-t-micro) var(--aj-ease), opacity .3s;
}
.fb__btn .icon { width: 18px; height: 18px; stroke-width: 1.1; }
.fb__btn:hover { color: var(--aj-ink); background: rgba(45, 39, 35, .05); }
.fb__btn[disabled], .fb__btn[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.fb__btn--first { position: absolute; right: calc(100% + 2px); top: 50%; translate: 0 -50%; }
.fb__leaf.lift__leaf {
display: block; bottom: auto; z-index: 4; pointer-events: none;
transform: perspective(var(--lift-p, 2400px)) rotateY(calc(var(--t) * -180deg));
}
.lift__blank { background: #fff; }
.is-lifted > picture { visibility: hidden; }
.lift__shade {
position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .55s var(--aj-ease);
background: linear-gradient(90deg, rgba(45, 39, 35, .16), rgba(45, 39, 35, .05) 30%, transparent 65%);
}
.lift__shade--l { background: linear-gradient(270deg, rgba(45, 39, 35, .16), rgba(45, 39, 35, .05) 30%, transparent 65%); }
.lift__shade.is-on { opacity: 1; }
.is-turnable { cursor: pointer; }
.mo {
--pg-shade: 45, 39, 35;
--mo-soft: color-mix(in oklab, var(--aj-muted) 55%, var(--aj-ink));
--mo-p: 0;
--mo-edge: clamp(5px, .9vw, 9px);
}
.mo::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-color: var(--mo-tint, transparent);
-webkit-mask-image: linear-gradient(transparent, #000 clamp(160px, 18vw, 260px), #000 62%, transparent);
mask-image: linear-gradient(transparent, #000 clamp(160px, 18vw, 260px), #000 62%, transparent);
transition: background-color 1200ms var(--aj-ease);
}
.mo.is-ready[data-mo-m="1"]  { --mo-tint: color-mix(in oklab, var(--aj-blush-mist) 72%, var(--aj-ivory)); }
.mo.is-ready[data-mo-m="2"]  { --mo-tint: color-mix(in oklab, var(--aj-blush-mist) 76%, color-mix(in oklab, var(--aj-ivory), var(--aj-sage-mist))); }
.mo.is-ready[data-mo-m="3"]  { --mo-tint: color-mix(in oklab, var(--aj-blush-mist) 79%, var(--aj-sage-mist)); }
.mo.is-ready[data-mo-m="4"]  { --mo-tint: color-mix(in oklab, var(--aj-blush-mist) 74%, var(--aj-sage-mist)); }
.mo.is-ready[data-mo-m="5"]  { --mo-tint: color-mix(in oklab, var(--aj-blush-mist) 77%, color-mix(in oklab, var(--aj-sage-mist), var(--aj-sand))); }
.mo.is-ready[data-mo-m="6"]  { --mo-tint: color-mix(in oklab, var(--aj-blush-mist) 76%, var(--aj-sand)); }
.mo.is-ready[data-mo-m="7"]  { --mo-tint: color-mix(in oklab, var(--aj-blush-mist) 70%, var(--aj-sand)); }
.mo.is-ready[data-mo-m="8"]  { --mo-tint: color-mix(in oklab, var(--aj-blush-mist) 75%, var(--aj-sand)); }
.mo.is-ready[data-mo-m="9"]  { --mo-tint: color-mix(in oklab, var(--aj-blush-mist) 86%, var(--aj-sand)); }
.mo.is-ready[data-mo-m="10"] { --mo-tint: var(--aj-blush-mist); }
.mo.is-ready[data-mo-m="11"] { --mo-tint: color-mix(in oklab, var(--aj-blush-mist) 95%, var(--aj-blush)); }
.mo.is-ready[data-mo-m="12"] { --mo-tint: color-mix(in oklab, var(--aj-blush-mist) 82%, var(--aj-ivory)); }
.mo { overflow: clip; }
.mo__bg {
position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: multiply;
-webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
}
.mo__bg-art { position: absolute; inset: 0; display: none; opacity: 0; transition: opacity 1400ms var(--aj-ease); }
.mo__bg-art.is-shown { display: block; }
.mo__bg-art.is-on { display: block; opacity: 1; }
.mo__bg-main, .mo__bg-echo {
position: absolute; display: block; aspect-ratio: 1; translate: -50% -50%;
-webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 97%); mask-image: radial-gradient(closest-side, #000 58%, transparent 97%);
}
.mo__bg-main img, .mo__bg-echo img { display: block; width: 100%; height: 100%; }
.mo__bg-main { left: 50%; top: 64%; width: max(160vw, 90vh); opacity: .17; }
.mo__bg-echo { left: 50%; top: 14%; width: max(120vw, 60vh); opacity: .09; scale: -1 1; }
@media (min-width: 1024px) {
.mo__bg-main { left: 74%; top: 50%; width: min(150vh, 82vw); }
.mo__bg-echo { left: 18%; top: 54%; width: min(118vh, 62vw); opacity: .1; }
}
.mo__grid { position: relative; z-index: 1; display: grid; gap: clamp(32px, 5vw, 56px); }
.mo__head { text-align: center; }
.mo__text { margin-top: var(--sp-5); }
@media (min-width: 768px) { .mo__text { max-width: var(--aj-measure); margin-inline: auto; text-wrap: balance; } }
.mo__visual { margin: 0; min-width: 0; }
.mo__book { position: relative; width: min(100%, calc((100svh - var(--aj-header) - 93px) * 296 / 210)); max-width: 780px; margin-inline: auto; container-type: inline-size; }
.mo__page img { display: block; }
.mo__spreads {
display: flex; gap: var(--aj-gutter); margin: 0; padding: 0 0 var(--sp-10); list-style: none;
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
scrollbar-width: thin; scrollbar-color: var(--aj-border-strong) transparent;
}
.mo__spreads:focus-visible { outline-offset: 4px; }
.mo__spread { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.mo__pair { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mo__pair::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; box-shadow: var(--aj-shadow-page); }
.mo__shade, .mo__edge { display: none; }
.mo__cap { text-align: center; margin-top: var(--sp-6); }
.mo__num, .mo__count {
font: 400 .8125rem/1 var(--aj-serif); letter-spacing: .16em; font-variant-numeric: tabular-nums lining-nums;
color: var(--mo-soft);
}
.mo__num span, .mo__count span { color: var(--aj-ink); }
.mo__name {
margin-top: var(--sp-4);
font: 400 .8125rem/1.3 var(--aj-serif); letter-spacing: .28em; text-transform: uppercase; color: var(--aj-cacao);
}
.mo__line {
max-width: 17em; margin: var(--sp-3) auto 0;
font: italic 400 var(--fs-poetic)/1.28 var(--aj-serif);
letter-spacing: -.005em; color: var(--aj-ink); text-wrap: balance;
}
.mo.is-ready .mo__book { margin-bottom: var(--mo-edge); }
.mo.is-ready .mo__spreads {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0;
overflow: visible; scroll-snap-type: none;
}
.mo.is-ready .mo__book { cursor: pointer; touch-action: pan-y pinch-zoom; -webkit-tap-highlight-color: transparent; }
.mo.is-ready .mo__book.is-edge { cursor: default; }
.mo.is-ready :is(.mo__spread, .mo__pair) { display: contents; }
.mo.is-ready .mo__pair::after { content: none; }
.mo.is-ready .mo__page { grid-row: 1; display: none; }
.mo.is-ready .mo__page--l { grid-column: 1; }
.mo.is-ready .mo__page--r { grid-column: 2; }
.mo.is-ready .mo__page.is-shown { display: block; }
.mo.is-ready .mo__book::after {
content: ""; position: absolute; inset: 0 0 calc(-1 * var(--mo-edge)); z-index: -1; pointer-events: none;
box-shadow: var(--aj-shadow-page);
}
.mo.is-ready .mo__book::before {
content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: calc(50% - .5px); width: 1px; pointer-events: none;
background: linear-gradient(rgba(var(--pg-shade), .06), rgba(var(--pg-shade), .16) 50%, rgba(var(--pg-shade), .06));
}
.mo.is-ready .mo__edge {
--g: 90deg;
display: block; position: absolute; top: 100%; width: 50%; pointer-events: none;
background:
linear-gradient(transparent calc(100% - 1.5px), #F9F0E3 calc(100% - 1.5px)),
repeating-linear-gradient(180deg, rgba(var(--pg-shade), .09) 0 .5px, transparent .5px 1.5px),
linear-gradient(var(--g), rgba(var(--pg-shade), .10), transparent 12%),
var(--aj-paper);
box-shadow: 0 1px 0 rgba(var(--pg-shade), .06);
}
.mo.is-ready .mo__edge--l { --g: 270deg; left: 0; height: calc(var(--mo-edge) * (.3 + .7 * var(--mo-p))); border-radius: 0 0 0 2px; }
.mo.is-ready .mo__edge--r { right: 0; height: calc(var(--mo-edge) * (1 - .7 * var(--mo-p))); border-radius: 0 0 2px 0; }
.mo .mo__leaf { display: block; --z: 3; transform: perspective(340cqw) rotateY(calc(var(--t) * -180deg)); }
.mo.is-ready .mo__shade { display: block; --zs: 2; }
.mo__nav { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: clamp(14px, 2.4vh, 26px); }
.mo__nav[hidden] { display: none; }
.mo__btn { flex: none; }
.mo__count { min-width: 6.5em; text-align: center; }
.mo__index { display: none; }
@media (min-width: 768px) {
.mo__count { display: none; }
.mo__index { position: relative; display: flex; flex: 0 1 480px; min-width: 0; margin-inline: var(--sp-2); border-top: 1px solid var(--aj-border); }
.mo__index::before {
content: ""; position: absolute; top: -1px; left: 0; width: calc(100% / 12); height: 1px; background: var(--aj-ink);
transform: translateX(calc(var(--mo-i, 0) * 100%)); transition: transform 560ms var(--aj-ease);
}
.mo__tick {
flex: 1 1 0; min-width: 32px; height: 44px; display: grid; place-items: center;
font: 400 .8125rem/1 var(--aj-serif); letter-spacing: .04em; color: var(--mo-soft); font-variant-numeric: lining-nums; white-space: nowrap;
transition: color var(--aj-t-micro) var(--aj-ease);
}
.mo__tick:hover, .mo__tick[aria-current="true"] { color: var(--aj-ink); }
.mo__tick:focus-visible { outline-offset: -4px; }
}
.mo__panel { display: grid; justify-items: center; }
.mo__panel[hidden] { display: none; }
.mo__rule { display: none; }
.mo__caps { display: grid; width: 100%; }
.mo__caps > .mo__cap {
grid-area: 1 / 1; margin-top: 0;
opacity: 0; visibility: hidden; transform: translate3d(0, 6px, 0);
transition: opacity 200ms ease-in, transform 200ms ease-in, visibility 0s linear 200ms;
}
.mo__caps > .mo__cap.is-active {
opacity: 1; visibility: visible; transform: none;
transition: opacity 520ms var(--aj-ease) 320ms, transform 520ms var(--aj-ease) 320ms, visibility 0s;
}
.mo__caps .mo__num { display: none; }
.mo__caps .mo__name { margin-top: 0; }
@media (min-width: 1024px) {
.mo { padding-block: clamp(64px, 11vh, 128px); }
.mo__grid {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(56px, 6vw, 112px); row-gap: 0;
grid-template-rows: 1fr auto auto 1fr;
grid-template-areas: "book ." "book head" "book panel" "book .";
align-items: center;
}
.mo__visual { grid-area: book; }
.mo__book { width: min(100%, calc((100svh - var(--aj-header) - 190px) * 296 / 210)); max-width: none; }
.mo__head { grid-area: head; text-align: left; }
.mo__text { margin-top: var(--sp-6); margin-inline: 0; max-width: none; text-wrap: pretty; }
.mo__panel { grid-area: panel; justify-items: start; }
.mo__rule { display: block; margin: var(--sp-10) 0 var(--sp-6); }
.mo__caps > .mo__cap { text-align: left; }
.mo__caps .mo__line { margin-inline: 0; max-width: 15em; margin-top: var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) {
.mo__caps > .mo__cap, .mo__caps > .mo__cap.is-active, .mo::after, .mo__index::before, .mo__bg-art { transition: none; }
}
.pp {
--pp-shade: 45, 39, 35;
--pp-cream: #F9F0E3;
}
.pp__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.pp__gallery {
container-type: inline-size; min-width: 0;
--pp-peek: 0px; --pp-side: 6px; --pp-top: 14px; --pp-bottom: 40px; --pp-stack: 6px;
--pp-hmax: calc(100svh - var(--aj-header) - 120px);
--pp-bw: min(100cqw - var(--pp-peek) - 2 * var(--pp-side), max(9rem, var(--pp-hmax)) * 3498 / 2481);
--pp-ph: calc(var(--pp-bw) * 2481 / 3498);
}
.pp__gallery .pp__track {
position: relative; display: flex; gap: var(--sp-5); margin: 0 calc(-1 * var(--aj-gutter)); padding: 0 var(--aj-gutter);
list-style: none; overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory; scroll-padding-inline: var(--aj-gutter);
}
.js .pp__track { scrollbar-width: none; }
.js .pp__track::-webkit-scrollbar { display: none; }
.pp__track:focus-visible { outline-offset: -3px; }
.pp__slide {
position: relative; flex: 0 0 calc(100% - var(--pp-peek));
height: calc(var(--pp-top) + var(--pp-ph) + var(--pp-stack) + var(--pp-bottom));
display: flex; justify-content: center; align-items: flex-start; padding-top: var(--pp-top);
scroll-snap-align: start;
}
.pp__book, .pp__mini { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pp__book {
flex: none; width: var(--pp-bw);
filter: drop-shadow(0 1px .5px rgba(var(--pp-shade), .06)) drop-shadow(0 8px 9px rgba(var(--pp-shade), .06)) drop-shadow(0 14px 10px rgba(var(--pp-shade), .1));
}
.pp__page { position: relative; aspect-ratio: 1749 / 2481; background: #fff; }
.pp__page picture, .pp__page img { display: block; width: 100%; height: 100%; }
.pp__page::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 .5px rgba(var(--pp-shade), .08); }
.pp__page--l::after { background: linear-gradient(90deg, transparent 80%, rgba(var(--pp-shade), .04) 91%, rgba(var(--pp-shade), .13)); }
.pp__page--r::after { background: linear-gradient(90deg, rgba(var(--pp-shade), .16), rgba(var(--pp-shade), .06) 3%, rgba(var(--pp-shade), .02) 11%, transparent 20%); }
.pp__book::before {
content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(50% - .5px); width: 1px; pointer-events: none;
background: linear-gradient(rgba(var(--pp-shade), .06), rgba(var(--pp-shade), .16) 50%, rgba(var(--pp-shade), .06));
}
.pp__book .pp__page::before {
content: ""; position: absolute; left: 0; right: 0; top: 100%;
height: max(1.5px, var(--pp-stack) * var(--f, 1));
background:
linear-gradient(transparent calc(100% - 1.5px), var(--pp-cream) calc(100% - 1.5px)),
repeating-linear-gradient(180deg, rgba(var(--pp-shade), .09) 0 .5px, transparent .5px 1.5px),
linear-gradient(var(--dir, 90deg), rgba(var(--pp-shade), .10), transparent 12%),
var(--aj-paper);
box-shadow: 0 1px 0 rgba(var(--pp-shade), .06);
}
.pp__book .pp__page--l::before { --f: var(--l); --dir: 270deg; }
.pp__book .pp__page--r::before { --f: var(--r); }
.pp__obj { display: block; flex: none; height: calc((var(--pp-ph) + var(--pp-stack)) * 1.04); }
.pp__obj picture, .pp__obj img { display: block; width: auto; height: 100%; max-width: none; }
.pp__count {
display: none; margin-top: calc(-1 * var(--sp-3));
font: 400 var(--fs-micro)/1 var(--aj-serif); letter-spacing: .16em; color: var(--aj-muted); font-variant-numeric: lining-nums tabular-nums;
}
.js .pp__count { display: block; }
.pp__thumbs { display: none; list-style: none; }
.pp__thumb {
position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; min-height: 44px;
border-radius: 2px; opacity: .6; transition: opacity var(--aj-t-micro) var(--aj-ease);
}
.pp__thumb::before {
content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
box-shadow: inset 0 0 0 1px var(--aj-border); transition: box-shadow var(--aj-t-micro) var(--aj-ease);
}
.pp__thumb::after {
content: ""; position: absolute; inset: auto 0 0; z-index: 2; height: 2px; background: var(--aj-cacao);
transform: scaleX(0); transition: transform var(--aj-t-micro) var(--aj-ease);
}
.pp__thumb:hover, .pp__thumb[aria-current="true"] { opacity: 1; }
.pp__thumb[aria-current="true"]::before { box-shadow: inset 0 0 0 1px var(--aj-border-strong); }
.pp__thumb[aria-current="true"]::after { transform: none; }
.pp__mini { width: 80%; box-shadow: 0 1px 2px rgba(var(--pp-shade), .1), 0 3px 8px rgba(var(--pp-shade), .09); }
.pp__mini::before {
content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(50% - .5px); width: 1px;
background: rgba(var(--pp-shade), .12);
}
.pp__thumb--object picture { position: absolute; inset: 7% 0; }
.pp__thumb--object img { width: 100%; height: 100%; object-fit: contain; }
.pp__box { margin-top: var(--sp-8); min-width: 0; }
.pp__title { font-size: min(var(--fs-statement), max(var(--fs-section), 9.6vw)); text-wrap: wrap; }
.pp__sub { margin-top: var(--sp-4); }
.pp__desc { margin-top: var(--sp-6); max-width: 34rem; }
.pp__buy { margin-top: var(--sp-8); }
.pp__price { margin-bottom: var(--sp-4); font: 400 clamp(1.625rem, 1.4rem + .6vw, 2rem)/1.1 var(--aj-serif); letter-spacing: .01em; color: var(--aj-ink); font-variant-numeric: lining-nums; }
.pp__ship { margin-left: .6em; font: 400 .875rem/1.3 var(--aj-serif); letter-spacing: .02em; color: var(--aj-muted); vertical-align: .15em; }
.pp__cta { width: 100%; margin-top: var(--sp-4); }
.pp__more { margin-top: var(--sp-8); }
.pp__d { border-top: 1px solid var(--aj-border); }
.pp__d:last-child { border-bottom: 1px solid var(--aj-border); }
.pp__sum {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
min-height: 52px; padding-block: var(--sp-2); cursor: pointer; list-style: none;
font: 400 .8125rem/1.3 var(--aj-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--aj-ink);
-webkit-tap-highlight-color: transparent;
}
.pp__sum::-webkit-details-marker { display: none; }
.pp__sum::marker { content: ""; }
.pp__sum > span { transition: color var(--aj-t-micro) var(--aj-ease); }
.pp__sum:hover > span { color: var(--aj-rose-deep); }
.pp__sum:focus-visible { outline-offset: 2px; }
.pp__ico { flex: none; width: 20px; height: 20px; margin-right: -3px; color: var(--aj-cacao); }
.pp__ico-v { transform-box: fill-box; transform-origin: center; transition: transform 240ms var(--aj-ease), opacity 240ms var(--aj-ease); }
.pp__d[open] .pp__ico-v { transform: scaleY(0); opacity: 0; }
.pp__d.is-closing .pp__ico-v { transform: none; opacity: 1; }
.pp__panel { overflow: hidden; }
.pp__features { margin: 0; padding: 2px 0 var(--sp-5); }
.pp__features li {
position: relative; padding: 4px 0 4px 22px;
font: 400 var(--fs-body)/1.45 var(--aj-serif); color: var(--aj-cacao); text-wrap: pretty;
}
.pp__features li::before {
content: ""; position: absolute; left: 0; top: calc(4px + .72em - 3.5px); width: 7px; height: 7px; border-radius: 50%;
box-shadow: inset 0 0 0 1px var(--aj-gold);
}
.pp__specs { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--sp-6); padding: 0 0 var(--sp-4); }
.pp__spec { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding-block: 9px; }
@supports not (grid-template-columns: subgrid) {
.pp__specs { display: block; }
.pp__spec { grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: var(--sp-5); }
}
.pp__spec + .pp__spec { border-top: 1px solid var(--aj-border); }
.pp__spec dt { padding-top: .3em; font: 400 var(--fs-eyebrow)/1.45 var(--aj-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--aj-muted); }
.pp__spec dd { font: 400 var(--fs-body)/1.45 var(--aj-serif); color: var(--aj-cacao); font-variant-numeric: lining-nums; text-wrap: balance; }
@media (min-width: 768px) {
.pp__gallery {
--pp-peek: 0px; --pp-side: 28px; --pp-top: 20px; --pp-bottom: 52px; --pp-stack: 8px;
--pp-hmax: calc(100svh - var(--aj-header) - 170px);
}
.pp__gallery .pp__track { gap: var(--sp-6); margin: 0; padding: 0; scroll-padding-inline: 0; }
.pp__track:focus-visible { outline-offset: 4px; }
.js .pp__count { display: none; }
.js .pp__thumbs {
display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 10px;
width: max(var(--pp-bw), min(100%, 36rem)); margin: 0 auto; padding: 0;
}
.pp__box { margin-top: var(--sp-12); max-width: calc(34rem + 28px); padding-inline: 28px 0; }
}
@media (min-width: 1024px) {
.pp { --pp-pad: clamp(20px, 3.5svh, 56px); padding-block: var(--pp-pad); }
.pp__grid {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 96px); align-items: center;
min-height: min(calc(100svh - var(--aj-header) - 16px - 2 * var(--pp-pad)), 60vw);
}
.pp__gallery {
--pp-side: 5cqw; --pp-top: clamp(12px, 2.4svh, 24px); --pp-bottom: clamp(34px, 6svh, 56px); --pp-stack: clamp(5px, 1.1svh, 9px);
--pp-tgap: clamp(8px, 1.6svh, 16px);
--pp-th: max(44px, (100cqw - 70px) / 8 * 3 / 4);
--pp-hmax: calc(100svh - var(--aj-header) - 16px - 2 * var(--pp-pad)
- var(--pp-top) - var(--pp-stack) - var(--pp-bottom) - var(--pp-tgap) - var(--pp-th));
}
.js .pp__thumbs { margin-top: var(--pp-tgap); }
.pp__box { margin-top: 0; max-width: 30rem; padding-inline: 0; }
.pp__title { font-size: min(var(--fs-statement), 6.2svh); }
.pp__sub { margin-top: clamp(8px, 1.6svh, 16px); font-size: min(var(--fs-poetic), 3.7svh); }
.pp__desc { margin-top: clamp(12px, 2.6svh, 24px); font-size: min(var(--fs-lead), 2.75svh); line-height: 1.45; }
.pp__buy { margin-top: clamp(16px, 3.4svh, 32px); }
.pp__price { margin-bottom: clamp(6px, 1.4svh, 16px); font-size: min(2rem, 4.1svh); }
.pp__cta { --h: clamp(46px, 7.5svh, 54px); margin-top: clamp(10px, 1.7svh, 16px); }
.pp__more { margin-top: clamp(16px, 3.4svh, 32px); }
.pp__sum { min-height: clamp(44px, 7svh, 52px); }
.pp__grid.is-pinned { align-items: start; }
.pp__grid.is-pinned > .pp__gallery { margin-top: var(--pp-gt, 0px); }
.pp__grid.is-pinned > .pp__box { margin-top: var(--pp-bt, 0px); }
}
@media (prefers-reduced-motion: no-preference) {
.pp__track { scroll-behavior: smooth; }
}
.buy {
width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 0; border-radius: 4px;
background: var(--aj-ivory); color: var(--aj-ink); box-shadow: 0 24px 80px rgba(45, 39, 35, .22);
overflow: auto; overscroll-behavior: contain;
}
.buy::backdrop { background: rgba(45, 39, 35, .38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.buy[open] { animation: buy-in .45s var(--aj-ease) both; }
@keyframes buy-in { from { opacity: 0; transform: translateY(14px); } }
.buy__in { position: relative; display: grid; gap: var(--sp-5); padding: clamp(28px, 5vw, 44px); }
.buy__close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; color: var(--aj-cacao); border-radius: 50%; }
.buy__close:hover { background: rgba(45, 39, 35, .05); color: var(--aj-ink); }
.buy__title { padding-right: 40px; font: 400 clamp(1.75rem, 1.5rem + 1vw, 2.25rem)/1.1 var(--aj-serif); letter-spacing: -.01em; }
.buy__price { margin-top: calc(-1 * var(--sp-2)); font: 400 1.5rem/1.2 var(--aj-serif); font-variant-numeric: lining-nums; }
.buy__price span { margin-left: .5em; font-size: .875rem; color: var(--aj-muted); }
.buy__langs { margin: var(--sp-2) 0 0; padding: var(--sp-6) 0 0; border: 0; border-top: 1px solid var(--aj-border); min-width: 0; }
.buy__step { padding: 0; font: 400 .8125rem/1.3 var(--aj-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--aj-cacao); }
.buy__help { margin-top: var(--sp-2); font: 400 1rem/1.5 var(--aj-serif); color: var(--aj-muted); }
.buy__eds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-5); }
.buy__ed {
position: relative; display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-2) var(--sp-4);
border: 1px solid var(--aj-border); border-radius: 3px; text-align: center; cursor: pointer; color: var(--aj-cacao);
transition: border-color var(--aj-t-micro) var(--aj-ease), background-color var(--aj-t-micro) var(--aj-ease), color var(--aj-t-micro) var(--aj-ease);
}
.buy__ed input { position: absolute; opacity: 0; pointer-events: none; }
.buy__ed:hover { border-color: var(--aj-border-strong); }
.buy__ed:has(input:checked) { border-color: var(--aj-rose); background: rgba(152, 107, 94, .05); color: var(--aj-rose-deep); }
.buy__ed:has(input:focus-visible) { outline: 2px solid var(--aj-ink); outline-offset: 3px; }
.ed-icon { width: 40px; height: 52px; color: currentColor; }
.buy__ed-text { display: grid; gap: 2px; }
.buy__endonym { font: 400 1.125rem/1.2 var(--aj-serif); color: var(--aj-ink); }
.buy__ed-label { font: 400 .75rem/1.3 var(--aj-serif); letter-spacing: .04em; color: var(--aj-muted); }
.buy__selected { font: italic 400 1.0625rem/1.4 var(--aj-serif); color: var(--aj-rose-deep); }
.buy__note { margin-top: calc(-1 * var(--sp-2)); font: 400 .875rem/1.5 var(--aj-serif); color: var(--aj-muted); }
.buy__note[hidden] { display: none; }
@media (max-width: 419.98px) {
.buy__eds { gap: var(--sp-2); }
.buy__ed { padding-inline: 4px; }
.buy__ed-label { font-size: .6875rem; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) { .buy[open] { animation: none; } }
.buy__head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-4); align-items: center; padding-right: 36px; }
.buy__thumb img { display: block; width: 64px; height: auto; filter: drop-shadow(0 6px 10px rgba(45, 39, 35, .12)); }
.buy__head .buy__title { padding-right: 0; }
.buy__head .buy__price { margin-top: 6px; }
.buy__steps { display: flex; flex-wrap: wrap; gap: 6px var(--sp-5); margin: 0; padding: 0; list-style: none; font: 400 .75rem/1.3 var(--aj-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--aj-muted); }
.buy__steps li { display: inline-flex; align-items: center; gap: 8px; }
.buy__steps li + li::before { content: "→"; margin-right: var(--sp-2); letter-spacing: 0; color: var(--aj-border-strong); }
.buy__steps span { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; font-size: .6875rem; letter-spacing: 0; }
.buy__steps [aria-current] { color: var(--aj-ink); }
.buy__steps [aria-current] span { border-color: var(--aj-rose); background: var(--aj-rose); color: #fff; }
.faq {
--faq-n: 2.375rem;
--faq-ico: 36px;
--faq-q: clamp(1.1875rem, 1.1rem + .3vw, 1.375rem);
--faq-a: clamp(1.0625rem, 1.03rem + .12vw, 1.125rem);
--faq-t: 420ms;
}
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); }
.faq__title { max-width: 11em; }
.faq__rule { display: block; width: 44px; height: 1px; margin-top: var(--sp-8); background: rgba(46, 39, 35, .5); }
.faq__list { margin: 0; padding: 0; border-top: 1px solid var(--aj-border); }
.faq__item { position: relative; border-bottom: 1px solid var(--aj-border); }
.faq__item::before {
content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: 1px; background: var(--aj-gold);
transform: scaleX(0); transform-origin: left center; transition: transform var(--faq-t) var(--aj-ease);
}
.faq__item:has(> .faq__d[open]:not(.is-closing))::before { transform: none; }
.faq__q {
display: flex; align-items: center; gap: var(--sp-5);
min-height: 72px; padding-block: 22px; cursor: pointer; list-style: none;
-webkit-tap-highlight-color: transparent;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:focus-visible { outline-offset: 4px; border-radius: 4px; }
.faq__l { flex: 1; min-width: 0; display: grid; grid-template-columns: var(--faq-n) minmax(0, 1fr); align-items: baseline; }
.faq__n {
font: 400 .8125rem/1 var(--aj-serif); letter-spacing: .14em; color: var(--aj-muted);
font-variant-numeric: lining-nums tabular-nums; transition: color var(--aj-t-micro) var(--aj-ease);
}
.faq__qt {
font: 400 var(--faq-q)/1.3 var(--aj-serif); letter-spacing: -.004em; color: var(--aj-ink); text-wrap: pretty;
}
.faq__q:hover .faq__n, .faq__d[open] .faq__n { color: var(--aj-ink); }
.faq__ico {
flex: none; display: grid; place-items: center; width: var(--faq-ico); height: var(--faq-ico);
border-radius: 50%; color: var(--aj-cacao); box-shadow: inset 0 0 0 1px var(--aj-border);
transition: box-shadow var(--aj-t-micro) var(--aj-ease), background-color var(--aj-t-micro) var(--aj-ease), color var(--aj-t-micro) var(--aj-ease);
}
.faq__ico svg { width: 18px; height: 18px; }
.faq__ico-v { transform-box: fill-box; transform-origin: center; transition: transform var(--faq-t) var(--aj-ease); }
.faq__d[open]:not(.is-closing) .faq__ico-v { transform: rotate(90deg); }
.faq__q:hover .faq__ico, .faq__d[open]:not(.is-closing) .faq__ico { color: var(--aj-ink); box-shadow: inset 0 0 0 1px var(--aj-border-strong); }
.faq__q:hover .faq__ico { background-color: rgba(45, 39, 35, .03); }
.faq__a { overflow: hidden; }
.faq__a p {
max-width: 33rem; margin-left: var(--faq-n); padding: 0 var(--sp-5) var(--sp-8) 0;
font: 400 var(--faq-a)/1.62 var(--aj-serif); color: var(--aj-cacao); text-wrap: pretty;
}
@media (max-width: 767.98px) {
.faq { --faq-n: 2.125rem; }
.faq__q { min-height: 64px; padding-block: var(--sp-5); }
.faq__a p { padding-right: 0; padding-bottom: var(--sp-6); }
}
@media (min-width: 1024px) {
.faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(56px, 6.5vw, 112px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--aj-header) + var(--sp-12)); }
.faq__q { min-height: 84px; padding-block: 28px; }
.faq__a p { padding-bottom: var(--sp-10); }
}
.ct__grid { display: grid; gap: var(--sp-10); }
.ct__title { max-width: 11em; }
.ct__text { margin-top: var(--sp-6); max-width: 30rem; }
.ct__form { display: grid; gap: var(--sp-6); max-width: 36rem; }
.ct__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ct__field { display: grid; gap: var(--sp-2); }
.ct__field[hidden] { display: none; }
.ct__label { font: 400 .8125rem/1.3 var(--aj-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--aj-cacao); }
.ct__input {
width: 100%; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--aj-border-strong); border-radius: 0;
background: transparent; color: var(--aj-ink); font: 400 1.125rem/1.4 var(--aj-serif);
transition: border-color var(--aj-t-micro) var(--aj-ease);
}
.ct__input:hover { border-bottom-color: var(--aj-cacao); }
.ct__input:focus { outline: none; border-bottom-color: var(--aj-rose); box-shadow: 0 1px 0 var(--aj-rose); }
.ct__input:focus-visible { outline: none; }
.ct__select {
appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 28px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23403936' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 2px center / 18px no-repeat;
}
.ct__area { min-height: 132px; resize: vertical; }
.ct__consent { display: flex; align-items: flex-start; gap: 12px; margin-top: var(--sp-2); font: 400 1rem/1.5 var(--aj-serif); color: var(--aj-cacao); cursor: pointer; }
.ct__consent input { flex: none; width: 18px; height: 18px; margin-top: .2em; accent-color: var(--aj-rose); cursor: pointer; }
.ct__legal { margin-top: calc(-1 * var(--sp-3)); font: 400 .8125rem/1.5 var(--aj-serif); color: var(--aj-muted); }
.ct__submit { justify-self: start; margin-top: var(--sp-2); }
.ct__submit[disabled] { opacity: .6; cursor: progress; }
.ct__status { min-height: 1.5em; font: italic 400 1.125rem/1.4 var(--aj-serif); color: var(--aj-rose-deep); }
.ct__status.is-error { font-style: normal; font-size: 1rem; color: #8A3B2E; }
@media (max-width: 479.98px) { .ct__submit { justify-self: stretch; } }
@media (min-width: 1024px) {
.ct__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(56px, 6vw, 112px); align-items: start; }
.ct__head { position: sticky; top: calc(var(--aj-header) + 48px); }
.ct__form { justify-self: end; width: 100%; }
}