/* Generated by tools/build-css.mjs. Edit styles.css / design.css / base-catalog.css, not this file. */
@font-face { font-family: "LAB Round"; src: url("/fonts/display-ja-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { --ink: #392e3a; --muted: #665263; --paper: #fffdfd; --canvas: #fbf7f2; --rose: #f1c8d7; --pink: #e6a8c0; --cream: #f4eacb; --lilac: #e4def1; --line: #d9cbd2; --accent: #873a5c; --label-ink: #664b5f; --shadow-near: 0 2px 3px #4b283f09; --shadow-raised: 0 28px 60px -24px #6348584a; --body: "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic", Meiryo, sans-serif; --display: "LAB Round", "Hiragino Maru Gothic ProN", var(--body); --latin: Arial, Helvetica, sans-serif; --gutter: clamp(24px, 4.8vw, 76px); --space: clamp(72px, 8.5vw, 128px); --ease: cubic-bezier(0.22, 1, 0.36, 1); color-scheme: light; font-family: var(--body); color: var(--ink); background: var(--canvas); font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } * { box-sizing: border-box; } [hidden]:not([hidden="until-found"]) { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: 122px; } body { margin: 0; font-size: 1rem; line-height: 1.95; } main { overflow: clip; isolation: isolate; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } img, video { display: block; max-width: 100%; height: auto; } figure { margin: 0; } p, h1, h2, h3 { overflow-wrap: anywhere; } h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.55; margin-top: 0; } h2 { font-size: clamp(1.9rem, 3vw, 2.75rem); letter-spacing: 0.025em; } h3 { font-size: 1.5rem; } button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; } ::selection { background: var(--pink); color: var(--ink); } .shell { width: min(1240px, calc(100% - var(--gutter) * 2)); margin-inline: auto; } .section-space { padding-block: var(--space); } .section-space-top { padding-top: var(--space); } .phrase { display: inline-block; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; left: 16px; top: 10px; z-index: 100; background: var(--ink); color: white; padding: 10px 20px; transform: translateY(-180%); border-radius: 12px; } .skip-link:focus { transform: translateY(0); } .eyebrow { display: flex; align-items: center; gap: 12px; font: 600 0.875rem/1.8 var(--latin), var(--body); letter-spacing: 0.105em; margin: 0 0 22px; } .micro { font: 400 0.75rem/1.8 var(--latin); letter-spacing: 0.12em; color: var(--muted); } .section-index { display: grid; place-items: center; flex: 0 0 31px; height: 25px; font: 400 0.75rem/1 var(--latin); letter-spacing: 0; border: 1px solid currentColor; border-radius: 50%; } .highlight { background: linear-gradient( transparent 72%, var(--pink) 72%, var(--pink) 94%, transparent 94% ); } .fine-print { font-size: 0.8125rem !important; color: var(--muted); line-height: 1.9; } .pill, .note-label { display: inline-block; padding: 5px 16px; background: #fff9fc; border: 1px solid #e5cbd8; border-radius: 99px; font-size: 0.875rem; font-weight: 700; line-height: 1.8; white-space: nowrap; } .note-label { font: 600 0.75rem/1.8 var(--latin); letter-spacing: 0.09em; } .site-header { position: sticky; top: 16px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 28px; width: min(1360px, calc(100% - 48px)); margin: 16px auto 0; padding: 17px 27px; min-height: 78px; background: rgb(255 253 254 / 92%); border: 1px solid rgb(255 255 255 / 94%); border-radius: 25px; box-shadow: 0 4px 24px #5c31430b, inset 0 0 0 1px #f3e7ed; backdrop-filter: blur(18px); } .wordmark { font: 800 1.9rem/1.25 var(--latin); letter-spacing: -0.065em; white-space: nowrap; } .wordmark span { font-size: 0.69em; letter-spacing: -0.04em; } .site-header nav { display: flex; gap: clamp(18px, 2.1vw, 30px); align-items: center; font-size: 0.875rem; font-weight: 700; margin-left: auto; } .site-header nav > a:not(.nav-shop) { position: relative; padding-block: 12px; } .site-header nav > a:not(.nav-shop)::after { content: ""; position: absolute; bottom: 6px; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); } .site-header nav > a[aria-current]::after, .site-header nav > a:hover::after { transform: scaleX(1); } .nav-shop { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 12px; border: 1px solid var(--ink); border-radius: 99px; padding: 10px 17px; min-height: 44px; font-size: 0.875rem; font-weight: 700; white-space: nowrap; font-family: var(--latin); transition: background 0.25s; } .nav-shop:hover { background: var(--rose); } .menu-toggle { display: none; } .arrow { font: 400 1.25rem/1 var(--latin); flex-shrink: 0; } .button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 60px; padding: 8px 9px 8px 27px; border: 1px solid transparent; border-radius: 99px; font-size: 0.9375rem; font-weight: 700; line-height: 1.7; transition: background 0.25s, box-shadow 0.35s, transform 0.35s var(--ease); } .button > .arrow { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #ffffff4f; transition: background 0.25s, color 0.25s, transform 0.35s var(--ease); } .button-dark { background: var(--ink); color: white; box-shadow: 0 7px 14px #432d3a0e; } .button-dark:hover { background: #59424f; box-shadow: 0 12px 22px #432d3a1c; transform: translateY(-3px); } .button-dark:hover > .arrow { background: var(--rose); color: var(--ink); transform: rotate(45deg); } .button-light { background: white; box-shadow: 0 7px 18px #432d3a0b; } .button-light > .arrow { border-color: var(--line); } .button-light:hover { background: #fff9fb; transform: translateY(-3px); } .button-light:hover > .arrow { background: var(--ink); border-color: var(--ink); color: white; } .text-link { display: inline-flex; justify-content: space-between; align-items: center; gap: 26px; min-height: 44px; padding-block: 8px; border-bottom: 1px solid currentColor; font-size: 0.875rem; font-weight: 700; line-height: 1.7; transition: color 0.2s; } .text-link > .arrow { transition: translate 0.35s var(--ease); } .text-link:hover { color: var(--accent); } .text-link:hover > .arrow { translate: 3px -3px; } .home-hero { position: relative; background: radial-gradient(ellipse at 78% 30%, #fffcfe 0, transparent 47%), linear-gradient(120deg, #f6e3ec, #f4eaf2 63%, #eed6e2); margin-top: -94px; padding-top: 94px; isolation: isolate; } .hero-orbit { position: absolute; right: -12%; top: -27%; width: 75%; aspect-ratio: 1; border: 1px solid #d6b5c480; border-radius: 50%; z-index: -1; box-shadow: 0 0 0 64px #ffffff25, 0 0 0 65px #e3c8d250, 0 0 0 150px #ffffff14; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.13fr); align-items: center; gap: 42px; padding-top: 78px; padding-bottom: 84px; } .hero-copy { position: relative; z-index: 3; padding-block: 10px 20px; } .hero-eyebrow { font-family: var(--display); font-weight: 700; letter-spacing: 0.04em; } .hero-copy h1 { font-size: clamp(2.45rem, 3.85vw, 3.6rem); line-height: 1.5; letter-spacing: -0.025em; margin: 0 0 24px; } .hero-copy h1 > span { display: table; } .hero-description { font-size: 1rem; line-height: 2.15; letter-spacing: 0.025em; margin: 0 0 30px; } .hero-scene { position: relative; aspect-ratio: 0.98; isolation: isolate; padding-top: 10px; } .hero-scene::before { content: ""; position: absolute; inset: 9% -1% 2% 8%; border: 1px solid #fff9fc; border-radius: 48% 48% 30px 30px; transform: rotate(-5deg); background: #f9e8f080; box-shadow: 12px 18px 36px #78435910; z-index: -1; } .scene-label { position: absolute; right: -25px; top: 22%; writing-mode: vertical-rl; font: 400 0.75rem/1 var(--latin); letter-spacing: 0.14em; color: var(--muted); } .hero-main-photo { position: relative; width: 87%; margin-left: auto; background: #fffafb; padding: 12px 12px 34px; border: 1px solid white; border-radius: 47% 47% 24px 24px; box-shadow: 0 22px 42px #6743531b, 0 4px 7px #67435306; transform: perspective(1200px) rotate(3deg) rotateY(var(--tilt-y, 0deg)) rotateX(var(--tilt-x, 0deg)); transform-style: preserve-3d; transition: transform 0.65s var(--ease); } .hero-main-photo > img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 48% 48% 15px 15px; } .hero-main-photo figcaption { position: absolute; top: 21%; left: 50%; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; background: #fffdfd; padding: 8px 18px; border-radius: 99px; font: 700 0.9375rem/1.8 var(--display); box-shadow: 0 4px 10px #56334708; } .specimen-note { position: absolute; bottom: 8px; left: 22px; right: 22px; text-align: center; font: 400 0.75rem/1.8 var(--latin); letter-spacing: 0.12em; color: var(--muted); } .hero-choco-photo { position: absolute; width: 45%; bottom: 1%; left: -1%; padding: 9px 9px 12px; background: white; border: 1px solid #eedfe6; border-radius: 16px; transform: rotate(-8deg); box-shadow: 0 19px 28px #6743531a; } .hero-choco-photo img { width: 100%; aspect-ratio: 1.85; object-fit: cover; object-position: 50% 64%; border-radius: 9px; } .hero-choco-photo figcaption { padding-top: 9px; font: 700 0.875rem/1.7 var(--display); text-align: center; } .hero-aside { position: absolute; right: 1%; bottom: -3%; display: flex; flex-direction: column; font: 700 0.875rem/1.9 var(--display); transform: rotate(4deg); } .hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 18px; border-top: 1px solid #d8b7c680; font: 700 0.875rem/1.8 var(--display); } .hero-bottom a { font: 400 0.75rem/1.8 var(--latin); letter-spacing: 0.12em; padding-block: 8px; } .hero-bottom a span { margin-left: 16px; } [data-depth] { translate: 0 var(--depth-y, 0px); } .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 46px; } .section-heading h2 { margin: 0; } .section-heading p:not(.eyebrow) { margin: 0 0 14px; color: var(--muted); line-height: 2; } .section-heading .eyebrow { margin-bottom: 16px; } .home-creations { background: #fbf5f1; position: relative; border-top: 1px solid #fefaf7; } .home-product-grid, .catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-items: start; } .creation-link { display: block; padding: 11px 11px 25px; border: 1px solid #fff; border-radius: 27px; background: var(--paper); box-shadow: 0 10px 30px #5638470a, 0 1px 3px #5638470a; transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); } .creation-link:hover { transform: translateY(-8px); box-shadow: 0 22px 40px #56384717; } .creation-photo { position: relative; border-radius: 18px; overflow: hidden; } .creation-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: scale 0.8s var(--ease); } .creation-link:hover .creation-photo img { scale: 1.035; } .creation-category { position: absolute; top: 14px; left: 14px; font: 700 0.875rem/1.8 var(--display); padding: 5px 13px; background: #fffafbef; border-radius: 99px; } .creation-link:hover .creation-caption :is(h2, h3), .creation-link:focus-visible .creation-caption :is(h2, h3) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; } .creation-caption { padding: 18px 12px 0; } .creation-caption .micro { margin: 0 0 6px; } .creation-caption :is(h2, h3) { font-size: clamp(1.5rem, 2vw, 1.8rem); margin: 0 0 7px; } .creation-caption > p:last-child { margin: 0; font-size: 1rem; color: var(--muted); } .tone-rose { --object-color: #edcfdf; } .tone-cream { --object-color: #eee0cb; } .tone-lilac { --object-color: #dcd2e6; } .creation-link { border-bottom: 5px solid var(--object-color); } .home-about { position: relative; background: linear-gradient(120deg, #ebdbe8, #f0dae5 66%, #f8e7e9); border-block: 1px solid #e0c6d3; isolation: isolate; } .home-about-inner { display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr); gap: 100px; align-items: center; padding-block: 84px; position: relative; } .about-index { position: absolute; left: -3%; bottom: 0; font: 700 clamp(7rem, 15vw, 15rem) / 1 var(--latin); letter-spacing: -0.06em; color: #b1849b16; z-index: -1; } .home-making-photo { width: 90%; margin-left: 5%; padding: 11px 11px 17px; background: #fffbfd; transform: rotate(-5deg); border-radius: 16px; border: 1px solid white; box-shadow: 0 24px 44px #6242531a; } .home-making-photo img { width: 100%; aspect-ratio: 1.02; object-fit: cover; border-radius: 8px; } .home-making-photo figcaption { padding-top: 12px; font: 700 0.8125rem/1.8 var(--display); text-align: center; } .home-about-copy h2 { font-size: clamp(2.2rem, 3.5vw, 3.25rem); margin-bottom: 22px; } .home-about-copy > p:not(.eyebrow) { line-height: 2.1; margin: 0 0 26px; } .home-work { position: relative; } .work-teaser { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); background: #fffbf7; border: 1px solid #fff; border-radius: 30px; overflow: hidden; box-shadow: 0 18px 42px #5638470b; } .work-teaser-image { overflow: hidden; } .work-teaser-image img { width: 100%; height: 100%; aspect-ratio: 1.23; object-fit: cover; transition: scale 0.8s var(--ease); } .work-teaser:hover .work-teaser-image img { scale: 1.035; } .work-teaser-copy { padding: clamp(28px, 4.4vw, 60px); align-self: center; } .work-teaser-copy h3 { font-size: clamp(1.8rem, 2.6vw, 2.5rem); margin: 18px 0; } .work-teaser-copy p { margin: 0 0 24px; color: var(--muted); } .home-note, .renewal-note, .detail-note { display: grid; grid-template-columns: auto 1fr auto; gap: 27px; align-items: start; border: 1px solid var(--line); border-radius: 20px; background: #ffffff8c; padding: 30px 34px; } .home-note h2, .renewal-note h2, .detail-note h2 { font-size: 1.125rem; line-height: 1.8; margin: 0 0 8px; } .home-note p, .renewal-note p, .detail-note p { margin: 0; line-height: 1.9; color: var(--muted); } .home-note .text-link, .renewal-note .text-link { white-space: nowrap; gap: 14px; } .invitation { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 45px; padding: 54px 58px; margin-block: var(--space); background: linear-gradient(120deg, #eec5d9, #f5dce1 68%, #f4e1d9); border: 1px solid #fff5fb; border-radius: 32px; box-shadow: 0 22px 48px #683e5010, inset 0 0 0 7px #ffffff21; } .invitation h2 { font-size: clamp(1.75rem, 2.65vw, 2.4rem); margin: 0; } .invitation p:not(.eyebrow) { margin: 0 0 24px; font-size: 1rem; } .invitation .eyebrow { margin-bottom: 14px; } .breadcrumb { margin-top: 44px; margin-bottom: 34px; } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px 13px; list-style: none; padding: 0; margin: 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.8; } .breadcrumb li + li::before { content: "/"; margin-right: 13px; color: #b393a4; } .breadcrumb a { text-decoration: underline; text-underline-offset: 4px; } .page-intro { position: relative; padding: 16px 0 58px; isolation: isolate; } .page-intro::after { content: ""; position: absolute; right: 3%; top: -38%; width: 38%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient( circle at 32% 28%, #fffaff 0, #ecd3e333 66%, transparent 67% ); border: 1px solid #e5cddb52; z-index: -1; box-shadow: 25px 24px 0 #f2dfeb40; } .page-intro h1 { font-size: clamp(2.75rem, 5.1vw, 4.5rem); line-height: 1.45; letter-spacing: 0.01em; margin: 0 0 27px; } .page-lead { font-size: 1.0625rem; line-height: 2; margin: 0; } .catalog-section { background: linear-gradient(180deg, #f0e2eb, #f6edf2); border-block: 1px solid #e4d3dd; padding-bottom: 76px; } .catalog-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; } .catalog-heading p { font-size: 1rem; margin: 0; color: var(--muted); } .renewal-note { margin-top: 60px; } .detail-note { margin-top: 54px; grid-template-columns: auto 1fr; } .page-products .invitation { margin-top: 76px; } .detail-hero { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 18px clamp(40px, 6vw, 85px); align-items: start; padding-top: 12px; padding-bottom: var(--space); } .detail-heading { grid-column: 2; grid-row: 1; } .detail-intro { grid-column: 2; grid-row: 2; } .detail-intro > .object-facts { margin: 28px 0 0; } .detail-portrait { grid-column: 1; grid-row: 1 / span 2; align-self: center; position: relative; background: var(--paper); border: 1px solid white; border-radius: 30px; padding: 12px 12px 18px; box-shadow: 0 24px 45px #57384912, 10px 12px 0 var(--object-color); transform: rotate(-1.5deg); } .detail-portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 21px; } .detail-portrait figcaption { font: 400 0.75rem/1.8 var(--latin); letter-spacing: 0.1em; text-align: center; margin-top: 14px; color: var(--muted); } .detail-heading h1 { font-size: clamp(2rem, 3.2vw, 3rem); margin: 0 0 19px; } .detail-heading .eyebrow { margin-bottom: 12px; font-size: 0.8125rem; } .detail-tagline { font: 700 clamp(1.7rem, 2.5vw, 2.4rem) / 1.6 var(--display); margin: 0; } .detail-summary { line-height: 2; margin: 0 0 26px; } .object-facts { margin: 0 0 27px; font-size: 0.875rem; } .object-facts > div { display: grid; grid-template-columns: 100px 1fr; gap: 15px; padding-block: 12px; border-top: 1px solid var(--line); } .object-facts > div:last-child { border-bottom: 1px solid var(--line); } .object-facts dt { color: var(--muted); } .object-facts dd { margin: 0; } .detail-intro > .fine-print { margin-top: 15px; } .detail-story { padding-block: 82px; border-block: 1px solid #dfd0d9; } .band-rose { background: #efdde7; } .band-cream { background: #f1e6dc; } .band-lilac { background: #ebe2f0; } .detail-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; } .detail-story h2 { font-size: clamp(2rem, 3vw, 2.7rem); margin-bottom: 26px; } .detail-story p:not(.eyebrow) { margin: 18px 0; line-height: 2.1; } .story-photo { padding: 10px 10px 14px; border: 1px solid white; border-radius: 23px; background: #fffcfb; box-shadow: 0 20px 35px #5334470d; transform: rotate(2deg); } .story-photo img { width: 100%; aspect-ratio: 1.15; object-fit: cover; border-radius: 15px; } .story-photo figcaption { font-size: 0.8125rem; color: var(--muted); line-height: 1.8; padding: 12px 4px 0; } .photo-chocolate img { aspect-ratio: 1.85; object-position: 50% 64%; } .detail-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .detail-gallery img { width: 100%; aspect-ratio: 1.13; object-fit: cover; border: 10px solid white; border-radius: 24px; box-shadow: 0 12px 28px #5638470a; } .detail-gallery figcaption, .hand-photo figcaption { font-size: 0.8125rem; line-height: 1.8; margin-top: 14px; color: var(--muted); } .related { border-top: 1px solid var(--line); } .related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .creation-compact .creation-link { display: grid; grid-template-columns: 39% 1fr; align-items: center; padding: 10px; } .creation-compact .creation-category { display: none; } .creation-compact .creation-caption { padding: 10px 22px; } .creation-compact .creation-caption :is(h2, h3) { font-size: 1.4rem; } .creation-compact .creation-caption > p:last-child { font-size: 0.875rem; } .demo-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 70px; align-items: center; } .demo-video { width: min(100%, 365px); justify-self: center; background: white; padding: 10px 10px 14px; border-radius: 29px; box-shadow: 0 24px 38px #5b3e5321; transform: rotate(2deg); } .demo-video video { width: 100%; height: auto; aspect-ratio: 640/756; border-radius: 20px; background: #30272c; } .demo-video figcaption { padding-top: 12px; text-align: center; font-size: 0.8125rem; color: var(--muted); } .hand-section { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; } .hand-photo img { width: 100%; aspect-ratio: 1.1; object-fit: cover; border: 10px solid white; border-radius: 24px; box-shadow: 0 20px 35px #53344712; } .hand-section p:not(.eyebrow) { margin: 0 0 22px; } .about-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 55px; padding-block: 20px 80px; } .about-hero h1 { font-size: clamp(2.6rem, 4.5vw, 4rem); line-height: 1.5; margin: 0 0 28px; } .about-hero .page-lead { font-family: var(--display); font-weight: 700; font-size: 1.3rem; } .about-hero-photo { padding: 12px 12px 17px; background: #fffafb; border: 1px solid white; border-radius: 48% 48% 25px 25px; transform: rotate(3deg); box-shadow: 0 24px 40px #5738491a; } .about-hero-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 48% 48% 17px 17px; } .about-hero-photo figcaption { font: 700 0.875rem/1.8 var(--display); text-align: center; padding-top: 14px; } .making-section { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; align-items: center; } .making-images { position: relative; padding: 0 85px 100px 10px; } .making-main { padding: 11px 11px 15px; background: white; transform: rotate(-4deg); border-radius: 16px; box-shadow: 0 18px 30px #56384712; } .making-main img { width: 100%; aspect-ratio: 0.84; object-fit: cover; border-radius: 7px; } .making-main figcaption { font-size: 0.8125rem; line-height: 1.8; padding-top: 11px; } .making-small { position: absolute; right: 0; bottom: 0; width: 47%; background: #fffafb; padding: 8px 8px 12px; border-radius: 14px; transform: rotate(7deg); box-shadow: 0 20px 35px #57384920; } .making-small img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; } .making-small figcaption { font: 700 0.75rem/1.8 var(--display); text-align: center; padding-top: 10px; } .making-copy p:not(.eyebrow) { line-height: 2.1; margin: 0 0 20px; } .work-case { padding-top: 8px; padding-bottom: var(--space); } .case-heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; border-top: 1px solid var(--line); padding-block: 25px; } .work-case-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 70px; align-items: start; } .case-primary { background: white; padding: 11px 11px 16px; border-radius: 28px; box-shadow: 0 20px 35px #56384710; transform: rotate(-1.5deg); } .case-primary img { width: 100%; aspect-ratio: 0.94; object-fit: cover; border-radius: 19px; } .case-primary figcaption { font-size: 0.8125rem; padding: 13px 6px 0; color: var(--muted); } .case-story { padding-top: 15px; } .case-story h2 { font-size: clamp(2rem, 3.1vw, 2.8rem); margin-bottom: 25px; } .case-story p:not(.eyebrow) { line-height: 2.05; margin: 0 0 18px; } .case-secondary { width: 63%; margin: 30px 0 0 auto; background: #fffafb; padding: 9px 9px 12px; border-radius: 16px; transform: rotate(3deg); box-shadow: 0 17px 35px #56384713; } .case-secondary img { width: 100%; aspect-ratio: 1.16; object-fit: cover; border-radius: 9px; } .case-secondary figcaption { font-size: 0.75rem; line-height: 1.8; padding-top: 10px; } .capabilities-band { padding-block: var(--space); background: linear-gradient(120deg, #ecdfeb, #f0e2e8); border-block: 1px solid #dfccd7; } .capabilities-band .section-heading > p { max-width: 30em; } .capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; } .capability-grid article { padding: 32px 30px; background: #fffafbcc; border: 1px solid white; border-radius: 22px; box-shadow: 0 12px 26px #57384909; } .capability-grid h3 { font-size: 1.375rem; margin: 15px 0; } .capability-grid p { font-size: 1rem; line-height: 2; margin: 0; color: var(--muted); } .consultation { text-align: center; } .consultation .eyebrow { justify-content: center; } .consultation h2 { font-size: clamp(2.3rem, 4vw, 3.4rem); margin: 0 0 20px; } .consultation > p:not(.eyebrow) { margin: 0 0 26px; } .contact-layout { display: grid; grid-template-columns: 1.06fr 1fr; gap: 34px; align-items: stretch; padding-top: 12px; } .contact-main { padding: 50px 45px; border: 1px solid white; border-radius: 30px; background: radial-gradient(circle at 90% 5%, #fff8fb, #efd0df 75%); box-shadow: 0 20px 35px #65374810, inset 0 0 0 8px #ffffff24; } .contact-main h2 { margin: 24px 0; font-size: clamp(2rem, 3vw, 2.7rem); } .contact-main > p { margin: 0 0 28px; } .contact-handle { display: block; font: 400 0.8125rem/1.8 var(--latin); letter-spacing: 0.05em; margin-top: 16px; color: var(--muted); } .contact-guide { padding: 43px 40px; background: #ffffffa8; border: 1px solid white; border-radius: 30px; box-shadow: 0 14px 28px #57384909; } .contact-guide h2 { font-size: 1.75rem; margin: 0 0 28px; } .contact-guide ol { list-style: none; padding: 0; margin: 0; } .contact-guide li { display: flex; gap: 18px; border-top: 1px solid var(--line); padding: 18px 0; } .contact-guide li > span { font: 400 0.75rem/2 var(--latin); color: var(--accent); } .contact-guide h3 { font-size: 1rem; margin: 0 0 5px; } .contact-guide li p { margin: 0; font-size: 0.875rem; color: var(--muted); line-height: 1.9; } .contact-questions { display: grid; grid-template-columns: 0.75fr 1fr; gap: 75px; } .questions details { border-top: 1px solid var(--line); } .questions details:last-child { border-bottom: 1px solid var(--line); } .questions summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px 0; cursor: pointer; list-style: none; font-weight: 700; font-size: 1rem; line-height: 1.8; } .questions summary::-webkit-details-marker { display: none; } .questions summary span { font: 400 1.2rem/1 var(--latin); transition: rotate 0.25s; } .questions details[open] summary span { rotate: 45deg; } .questions details p { font-size: 1rem; line-height: 2; margin: 0 0 24px; color: var(--muted); } .questions details a { text-decoration: underline; text-underline-offset: 4px; color: var(--ink); } .shop-band { background: #eadce9; padding-block: 58px; border-top: 1px solid #dfc9d6; } .shop-band > .shell { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .shop-band h2 { margin: 0 0 12px; } .shop-band p:not(.eyebrow) { margin: 0; color: var(--muted); } .not-found { text-align: center; padding-block: 120px; } .not-found h1 { font-size: clamp(2rem, 4vw, 3.5rem); } .not-found .eyebrow { justify-content: center; } .not-found p:not(.eyebrow) { margin: 0 0 28px; } .site-footer { padding: 64px 0 25px; background: #f0dbe5; border-top: 1px solid #dfbdce; } .footer-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: start; padding-bottom: 42px; } .footer-wordmark { font-size: clamp(2.2rem, 3.3vw, 3.2rem); } .footer-top p { font-size: 0.875rem; margin: 17px 0 0; } .footer-top nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 30px; font-size: 0.875rem; } .footer-top nav a { padding-block: 7px; } .footer-top nav a:hover { text-decoration: underline; text-underline-offset: 5px; } .footer-bottom { display: flex; align-items: center; gap: 30px; padding-top: 20px; border-top: 1px solid #ccafbf88; } .footer-bottom small { font-size: 0.75rem; color: var(--muted); margin-right: auto; } .footer-bottom > div { display: flex; gap: 25px; } .footer-bottom .text-link { font: 400 0.75rem/1.8 var(--latin); border: 0; gap: 10px; } .back-top { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #c6a5b7; border-radius: 50%; font: 400 1.25rem/1 var(--latin); } .back-top:hover { background: #fff7fb; } @view-transition { navigation: auto; } ::view-transition-old(root) { animation: page-out 0.2s ease both; } ::view-transition-new(root) { animation: page-in 0.45s var(--ease) both; } @keyframes page-out { to { opacity: 0; } } @keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes intro-copy { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } } @media (prefers-reduced-motion: no-preference) { .hero-copy > * { animation: intro-copy 0.9s var(--ease) both; } .hero-copy h1 { animation-delay: 0.08s; } .hero-description { animation-delay: 0.16s; } .hero-copy .button { animation-delay: 0.24s; } .page-intro h1, .detail-heading h1, .about-hero h1, .history-hero h1 { animation: intro-copy 0.35s var(--ease) both; } } [data-reveal] { transition: opacity 0.8s ease, translate 1s var(--ease); } [data-reveal].reveal-ready:not(.is-visible) { opacity: 1; translate: 0 24px; } @media (max-width: 1100px) { :root { --gutter: 32px; } .site-header { padding-inline: 23px; gap: 18px; } .site-header .wordmark { font-size: 1.75rem; } .site-header nav { gap: 17px; } .hero-grid { gap: 24px; padding-top: 58px; padding-bottom: 65px; } .hero-copy h1 { font-size: clamp(2.15rem, 4vw, 2.7rem); } .hero-eyebrow { font-size: 0.8125rem; letter-spacing: 0.02em; } .hero-main-photo figcaption { font-size: 0.8125rem; padding-inline: 13px; } .hero-choco-photo figcaption { font-size: 0.8125rem; } .hero-aside { font-size: 0.8125rem; bottom: -6%; } .scene-label { right: -13px; font-size: 0.75rem; } .home-product-grid, .catalog-grid { gap: 20px; } .creation-caption { padding-inline: 9px; } .creation-caption :is(h2, h3) { font-size: 1.45rem; } .creation-caption > p:last-child { font-size: 1rem; } .home-about-inner { gap: 50px; } .home-note, .renewal-note { grid-template-columns: auto 1fr; gap: 18px 24px; } .home-note > .text-link, .renewal-note > .text-link { grid-column: 2; justify-self: start; } .invitation { padding: 44px 36px; gap: 30px; } .detail-hero { gap: 42px; } .detail-heading h1 { font-size: 2.2rem; } .detail-tagline { font-size: 1.85rem; } .object-facts > div { grid-template-columns: 80px 1fr; } .about-hero { gap: 38px; } .about-hero h1 { font-size: 2.8rem; } .making-section, .work-case-grid { gap: 48px; } .making-images { padding-right: 60px; } .capability-grid { gap: 20px; } .capability-grid article { padding: 25px 23px; } .contact-main, .contact-guide { padding: 36px 30px; } .contact-questions { gap: 45px; } .footer-top { gap: 45px; } } @media (max-width: 1000px) { .site-header { flex-wrap: wrap; } .js .site-header { flex-wrap: nowrap; } .js .menu-toggle { display: flex; flex: 0 0 auto; margin-left: auto; align-items: center; gap: 12px; background: #fff8fc; border: 1px solid var(--line); border-radius: 99px; padding: 9px 14px; min-height: 44px; font-size: 0.875rem; line-height: 1.5; } .menu-icon { font: 400 1.25rem/1 var(--latin); } .site-header nav { display: flex; width: 100%; flex-wrap: wrap; padding-block: 8px; gap: 14px; margin-left: 0; } .js .site-header nav { display: none; position: absolute; top: calc(100% + 9px); left: 0; right: 0; width: 100%; padding: 22px 28px; background: #fffafd; border: 1px solid white; border-radius: 22px; box-shadow: 0 20px 35px #5638471c; } .js .site-header nav.is-open { display: flex; } .hero-copy h1 { font-size: clamp(2rem, 4.1vw, 2.4rem); } .hero-description { letter-spacing: 0; } .section-heading { align-items: start; } .section-heading > p { max-width: 23em; } .home-about-copy h2 { font-size: 2.2rem; } .creation-caption :is(h2, h3) { font-size: 1.3rem; } .work-teaser-copy { padding: 32px; } .work-teaser-copy .text-link { gap: 14px; font-size: 0.875rem; } .invitation { grid-template-columns: 1.1fr 1fr; } .invitation .button { gap: 14px; } .detail-heading h1 { font-size: 1.9rem; } .detail-heading .eyebrow { font-size: 0.75rem; } .detail-summary br { display: none; } .detail-hero .button { font-size: 0.875rem; gap: 12px; padding-left: 19px; } .detail-story-grid, .hand-section { gap: 45px; } .demo-layout { gap: 40px; } .about-hero h1 { font-size: 2.4rem; } .case-secondary { width: 80%; } .capability-grid { grid-template-columns: 1fr; } .capability-grid article { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px 30px; } .capability-grid .micro { grid-column: 1; } .capability-grid h3 { grid-column: 1; margin: 0; } .capability-grid p { grid-column: 2; grid-row: 1/3; } .contact-layout { gap: 23px; } .contact-main .button { padding-left: 20px; gap: 14px; font-size: 0.875rem; } } @media (max-width: 760px) { :root { --gutter: 24px; --space: 72px; } html { scroll-padding-top: 114px; } .site-header { top: 10px; width: calc(100% - 28px); margin-top: 10px; padding: 12px 17px; min-height: 71px; border-radius: 22px; } .site-header .wordmark { font-size: 1.6rem; } .site-header nav { flex-direction: column; align-items: stretch; gap: 1px; } .site-header nav > a:not(.nav-shop) { padding-block: 12px; } .site-header nav > a:not(.nav-shop)::after { right: auto; width: 36px; bottom: 7px; } .js .site-header nav { padding: 18px 25px; } .home-hero { margin-top: -81px; padding-top: 81px; } .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 43px; padding-bottom: 56px; } .hero-copy { padding: 0; } .hero-copy h1 { font-size: clamp(2.05rem, 8.65vw, 3.7rem); line-height: 1.48; margin-bottom: 21px; } .hero-eyebrow { font-size: 0.875rem; letter-spacing: 0.015em; margin-bottom: 18px; } .hero-description { font-size: 1rem; line-height: 2; margin-bottom: 25px; } .button { min-height: 58px; } .hero-scene { width: min(100%, 490px); justify-self: center; aspect-ratio: 0.97; } .hero-main-photo { width: 84%; margin-right: 5px; padding: 10px 10px 30px; } .hero-main-photo figcaption { font-size: 0.875rem; top: 20%; } .hero-choco-photo { width: 46%; left: 0; bottom: 0; padding: 7px 7px 11px; } .hero-choco-photo figcaption { font-size: 0.8125rem; } .hero-aside { font-size: 0.8125rem; bottom: -3%; right: 0; } .scene-label { right: -9px; top: 21%; font-size: 0.75rem; } .hero-bottom { gap: 10px; padding-block: 15px; font-size: 0.8125rem; } .hero-bottom a { font-size: 0.75rem; letter-spacing: 0.05em; } .hero-bottom a span { margin-left: 6px; } .hero-orbit { width: 140%; right: -74%; top: 13%; } .section-heading { display: block; margin-bottom: 33px; } .section-heading h2 { font-size: clamp(1.8rem, 6.6vw, 2.6rem); } .section-heading > div + div, .section-heading > p { margin-top: 20px; max-width: none; } .section-heading p:not(.eyebrow) { font-size: 1rem; } .home-product-grid, .catalog-grid { grid-template-columns: minmax(0, 1fr); gap: 29px; } .creation-link { padding: 10px 10px 23px; } .creation-photo img { aspect-ratio: 1.08; } .creation-caption { padding: 19px 14px 0; } .creation-caption :is(h2, h3) { font-size: 1.75rem; } .creation-caption > p:last-child { font-size: 1rem; } .home-about-inner { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-block: 60px; } .home-about-copy { grid-row: 1; } .home-about-copy h2 { font-size: clamp(1.85rem, 7.7vw, 2.8rem); } .home-about-copy > p:not(.eyebrow) { font-size: 1rem; } .home-making-photo { width: min(87%, 390px); margin-inline: auto; } .home-making-photo img { aspect-ratio: 1.12; } .home-making-photo figcaption { font-size: 0.8125rem; } .about-index { font-size: 9rem; bottom: 5%; left: 0; } .work-teaser { grid-template-columns: minmax(0, 1fr); border-radius: 25px; } .work-teaser-image img { aspect-ratio: 1.2; } .work-teaser-copy { padding: 28px; } .work-teaser-copy h3 { font-size: 1.95rem; margin-block: 15px; } .work-teaser-copy .text-link { font-size: 0.875rem; } .home-note, .renewal-note, .detail-note { grid-template-columns: minmax(0, 1fr); padding: 26px 25px; gap: 16px; border-radius: 20px; } .home-note > .text-link, .renewal-note > .text-link { grid-column: 1; } .home-note .note-label, .renewal-note .note-label, .detail-note .note-label { justify-self: start; } .home-note h2, .renewal-note h2, .detail-note h2 { font-size: 1.15rem; } .invitation { grid-template-columns: minmax(0, 1fr); padding: 36px 28px; gap: 22px; margin-block: 60px; border-radius: 26px; box-shadow: 0 15px 28px #683e500b, inset 0 0 0 5px #ffffff24; } .invitation h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); } .invitation p:not(.eyebrow) { line-height: 2; } .invitation p br { display: none; } .breadcrumb { margin-top: 28px; margin-bottom: 28px; } .page-intro { padding: 8px 0 40px; } .page-intro .eyebrow { font-size: 0.8125rem; letter-spacing: 0.08em; } .page-intro h1 { font-size: clamp(1.8rem, 8.4vw, 3.7rem); line-height: 1.5; margin-bottom: 23px; } .page-intro::after { width: 65%; right: -19%; top: -5%; } .page-lead { font-size: 1rem; } .page-lead br { display: none; } .catalog-heading { display: block; margin-bottom: 25px; } .catalog-heading p { margin-top: 9px; } .catalog-section { padding-top: 43px; padding-bottom: 55px; } .renewal-note { margin-top: 40px; } .detail-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 24px; padding-top: 0; padding-bottom: 65px; } .detail-portrait { grid-column: auto; grid-row: auto; width: min(calc(100% - 10px), 290px); margin-inline: auto; padding: 9px 9px 15px; border-radius: 24px; box-shadow: 0 18px 32px #57384910, 8px 9px 0 var(--object-color); } .detail-portrait img { aspect-ratio: 1.18; border-radius: 17px; } .detail-heading, .detail-intro { grid-column: auto; grid-row: auto; } .detail-heading h1 { font-size: clamp(1.9rem, 7.1vw, 2.8rem); margin-bottom: 16px; } .detail-heading .eyebrow { font-size: 0.8125rem; } .detail-tagline { font-size: 1.95rem; } .detail-summary { font-size: 1rem; } .object-facts > div { grid-template-columns: 90px 1fr; gap: 15px; } .detail-hero .button { font-size: 0.9375rem; gap: 24px; padding-left: 24px; } .detail-story { padding-block: 58px; } .detail-story-grid, .demo-layout, .hand-section { grid-template-columns: minmax(0, 1fr); gap: 35px; } .detail-story h2 { font-size: 2.1rem; } .detail-story p br, .hand-section p br { display: none; } .story-photo { width: 94%; justify-self: center; } .story-photo img { aspect-ratio: 1.18; } .photo-chocolate img { aspect-ratio: 1.85; } .detail-gallery { grid-template-columns: minmax(0, 1fr); gap: 29px; } .detail-gallery img { aspect-ratio: 1.15; border-width: 8px; } .related-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } .creation-compact .creation-link { grid-template-columns: 36% 1fr; padding: 8px 8px 8px; } .creation-compact .creation-caption { padding: 9px 13px; } .creation-compact .creation-photo img { aspect-ratio: 1; } .creation-compact .creation-caption :is(h2, h3) { font-size: 1.2rem; } .creation-compact .creation-caption > p:last-child { font-size: 0.875rem; } .demo-video { width: min(88%, 350px); padding: 8px 8px 13px; } .hand-photo img { aspect-ratio: 1.1; } .hand-section h2 { font-size: 2.2rem; } .about-hero { grid-template-columns: minmax(0, 1fr); gap: 33px; padding: 4px 0 60px; } .about-hero h1 { font-size: clamp(2.05rem, 8.4vw, 3rem); } .about-hero .page-lead { font-size: 1.2rem; } .about-hero-photo { width: min(92%, 440px); justify-self: center; padding: 10px 10px 16px; } .about-hero-photo img { aspect-ratio: 1.05; } .about-hero-photo figcaption { font-size: 0.8125rem; } .making-section { grid-template-columns: minmax(0, 1fr); gap: 32px; } .making-images { width: min(100%, 420px); padding: 0 63px 76px 8px; justify-self: center; } .making-main figcaption { font-size: 0.75rem; } .making-small figcaption { font-size: 0.75rem; } .making-copy h2 { font-size: 2rem; } .case-heading { padding-block: 20px; gap: 12px; flex-wrap: wrap; } .case-heading .micro { font-size: 0.75rem; } .work-case-grid { grid-template-columns: minmax(0, 1fr); gap: 33px; } .case-primary { padding: 9px 9px 14px; border-radius: 23px; } .case-primary img { aspect-ratio: 1.05; border-radius: 16px; } .case-story { padding-top: 0; } .case-story h2 { font-size: 2.15rem; } .case-secondary { width: 70%; margin-top: 26px; } .capability-grid article { display: block; padding: 29px; } .capability-grid h3 { margin: 14px 0; font-size: 1.4rem; } .consultation h2 { font-size: 2.4rem; } .consultation p:not(.eyebrow) br { display: none; } .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 25px; } .contact-main { padding: 36px 29px; border-radius: 26px; } .contact-main h2 { font-size: 2.2rem; } .contact-main .button { font-size: 0.875rem; gap: 18px; } .contact-guide { padding: 34px 28px; border-radius: 26px; } .contact-guide h2 { font-size: 1.85rem; } .contact-questions { grid-template-columns: minmax(0, 1fr); gap: 23px; } .contact-questions h2 { font-size: 2rem; } .questions summary { font-size: 0.9375rem; } .shop-band { padding-block: 45px; } .shop-band > .shell { display: block; } .shop-band h2 { font-size: 2rem; } .shop-band .button { margin-top: 25px; } .site-footer { padding-top: 47px; } .footer-top { grid-template-columns: minmax(0, 1fr); gap: 29px; padding-bottom: 30px; } .footer-wordmark { font-size: 2.4rem; } .footer-top p { font-size: 0.8125rem; } .footer-top nav { gap: 5px 25px; } .footer-bottom { flex-wrap: wrap; gap: 13px 20px; } .footer-bottom small { order: 3; width: 100%; margin-top: 3px; } .footer-bottom > div { margin-right: auto; gap: 20px; } .not-found { padding-block: 85px; } } @media (max-width: 370px) { :root { --gutter: 20px; } .site-header { width: calc(100% - 22px); gap: 8px; padding-inline: 13px; } .site-header .wordmark { font-size: 1.35rem; } .js .menu-toggle { padding-inline: 10px; gap: 6px; } .hero-eyebrow { font-size: 0.8125rem; } .hero-copy h1 { font-size: 1.95rem; } .hero-main-photo figcaption { font-size: 0.75rem; padding: 7px 12px; } .hero-choco-photo figcaption { font-size: 0.75rem; } .hero-aside { font-size: 0.75rem; } .hero-bottom a { font-size: 0.75rem; } .home-note, .renewal-note, .detail-note { padding-inline: 22px; } .invitation { padding-inline: 24px; } .invitation .button { padding-left: 20px; gap: 17px; font-size: 0.875rem; } .invitation h2 { font-size: 1.375rem; letter-spacing: 0; } .detail-tagline { font-size: 1.8rem; } .detail-heading h1 { font-size: 1.8rem; } .creation-compact .creation-caption { padding-inline: 10px; } .creation-compact .creation-caption :is(h2, h3) { font-size: 1.125rem; } .contact-main, .contact-guide { padding-inline: 24px; } .contact-main h2 { font-size: 1.95rem; } .contact-main .button { padding-left: 16px; gap: 12px; font-size: 0.875rem; } .footer-wordmark { font-size: 2.05rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } [data-reveal].reveal-ready:not(.is-visible) { opacity: 1; translate: none; } [data-depth] { translate: none !important; } .hero-main-photo { transform: rotate(3deg) !important; } } @media print { .site-header { position: static; background: white; box-shadow: none; } .site-header nav, .site-header > .nav-shop, .menu-toggle, .button, .back-top { display: none !important; } .shell { width: 92%; } [data-reveal] { opacity: 1 !important; translate: none !important; } [data-depth] { translate: none !important; } figure, article { break-inside: avoid; } .home-hero { margin-top: 0; padding-top: 0; } } @media (max-width: 760px) { .hero-bottom .scroll-label { display: none; } } .history-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: 25px 95px; } .history-since { padding-left: 14px; border-left: 1px solid var(--line); color: var(--muted); font-size: 0.75rem; white-space: nowrap; } .history-page-name { color: var(--accent); font-size: 0.9375rem; font-weight: 700; margin: 0 0 16px; } .history-hero h1 { font-size: clamp(2.2rem, 4.1vw, 3.65rem); letter-spacing: 0.02em; line-height: 1.65; margin-bottom: 26px; } .history-lead { margin: 0; line-height: 2.2; } .history-jump { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 26px; font-size: 0.875rem; } .history-jump a { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; border-bottom: 1px solid var(--line); } .history-jump a:hover { border-color: var(--accent); color: var(--accent); } .history-hero-photo { position: relative; padding: 13px 13px 22px; background: var(--paper); border: 1px solid white; border-radius: 120px 120px 24px 24px; box-shadow: 0 24px 50px #633c5014, 12px 14px 0 #ecd6e1; transform: rotate(2deg); } .history-photo-window { overflow: hidden; aspect-ratio: 1.18; border-radius: 108px 108px 15px 15px; background: var(--cream); } .history-photo-window img { width: 100%; height: 100%; object-fit: cover; object-position: center 69%; transform: scale(1.35); } .history-hero-photo figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 20px 12px 0; font-size: 0.875rem; line-height: 1.8; } .history-origin { background: linear-gradient(115deg, #f4e6da, #f5e9e6 68%, #efdfeb); border-block: 1px solid #e8d7d7; padding-block: var(--space); } .history-origin-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 8vw, 115px); } .origin-year { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 30px; font-size: 1rem; color: var(--accent); } .origin-year span { font: 400 clamp(4rem, 7vw, 6.5rem) / 1 var(--latin); letter-spacing: -0.045em; } .history-origin-heading h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin: 0; } .history-origin-prose { max-width: 40em; } .history-origin-prose p { line-height: 2.2; margin: 0 0 24px; } .history-origin-prose p:last-child { margin-bottom: 0; } .history-origin-prose .origin-thought { font-family: var(--display); font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 2.1; color: var(--accent); border-left: 3px solid #d4a2b7; padding-left: clamp(18px, 2vw, 28px); margin-block: 32px; } .history-section { background: linear-gradient(180deg, #fffafc, var(--canvas) 38%, #f5edf5); } .history-section-heading { margin-bottom: 68px; } .history-section-heading h2 { margin-bottom: 22px; } .history-section-heading > p:last-child { color: var(--muted); margin-bottom: 0; } .history-timeline { --date-width: 136px; --entry-gap: 44px; --rail-x: 154px; position: relative; list-style: none; margin: 0; padding: 0; } .history-timeline::before { content: ""; position: absolute; left: var(--rail-x); top: 29px; bottom: 0; width: 1px; background: #d8b8ca; } .history-event { position: relative; display: grid; grid-template-columns: var(--date-width) minmax(0, 1fr); gap: var(--entry-gap); padding-bottom: 38px; } .history-event::before { content: ""; position: absolute; z-index: 1; width: 9px; height: 9px; border: 2px solid var(--accent); border-radius: 50%; top: 26px; left: calc(var(--rail-x) - 4px); background: var(--canvas); box-shadow: 0 0 0 6px var(--canvas); } .history-date { display: flex; flex-direction: column; align-items: flex-end; padding-top: 6px; line-height: 1.7; color: var(--accent); } .history-date > span:first-child { font: 400 2.7rem/1.2 var(--latin); letter-spacing: -0.04em; } .history-date > span:last-child { font-size: 0.9375rem; margin-top: 5px; } .history-entry { min-width: 0; border: 1px solid #eee1e8; border-radius: 24px; padding: clamp(26px, 3.2vw, 44px); background: #fffdfdc9; box-shadow: 0 9px 26px #65374806; } .history-entry-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); align-items: center; gap: clamp(24px, 3vw, 42px); background: var(--paper); border-color: white; box-shadow: 0 16px 36px #6537480c; } .history-copy h3 { font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.7; letter-spacing: 0; margin-bottom: 16px; } .history-copy p { font-size: 1rem; line-height: 2.1; margin: 0; } .history-copy .text-link { font-size: 0.875rem; margin-top: 22px; } .history-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 6px solid #f5ecef; border-radius: 16px; } .history-photo figcaption { font-size: 0.75rem; color: var(--muted); line-height: 1.8; margin-top: 10px; } .history-continuation { display: flex; align-items: center; gap: 22px; margin-left: 154px; font: 400 0.75rem/1.8 var(--latin); color: var(--accent); letter-spacing: 0.1em; } .history-continuation > span { display: block; width: 28px; height: 20px; border-bottom: 1px solid #d8b8ca; border-left: 1px solid #d8b8ca; border-radius: 0 0 0 12px; align-self: flex-start; margin-top: -12px; } .history-closing { text-align: center; padding-block: var(--space); } .history-closing .eyebrow { justify-content: center; letter-spacing: 0.05em; } .history-closing h2 { margin-bottom: 25px; } .history-closing p:not(.eyebrow) { line-height: 2.3; margin: 0; } .history-closing-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 32px; margin-top: 32px; } .history-teaser { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); align-items: center; gap: 32px; padding: clamp(28px, 4vw, 56px); border: 1px solid #e1c9d7; border-radius: 28px; background: linear-gradient(120deg, #efe0eb, #f7e7e9); box-shadow: 8px 9px 0 #f0e7ed; } .history-teaser h2 { font-size: clamp(1.65rem, 2.5vw, 2.4rem); margin: 0; } .history-teaser p:not(.eyebrow) { margin: 0 0 18px; } .home-story-link { display: flex; width: fit-content; margin-top: 20px; font-size: 0.875rem; } @media (max-width: 1100px) { .history-timeline { --date-width: 112px; --entry-gap: 38px; --rail-x: 127px; } .history-continuation { margin-left: 127px; } .history-entry-photo { grid-template-columns: minmax(0, 1fr); } .history-photo { width: min(100%, 340px); } .history-origin-layout { gap: 35px; } .history-origin-prose br, .history-lead br { display: none; } } @media (max-width: 760px) { .history-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 0 65px; } .history-hero h1 { font-size: clamp(2rem, 8.3vw, 3rem); } .history-hero-photo { width: min(94%, 450px); justify-self: center; border-radius: 85px 85px 20px 20px; padding: 9px 9px 16px; box-shadow: 0 16px 35px #633c5014, 7px 9px 0 #ecd6e1; } .history-photo-window { border-radius: 78px 78px 12px 12px; } .history-hero-photo figcaption { padding-top: 14px; font-size: 0.8125rem; } .history-origin-layout, .history-teaser { grid-template-columns: minmax(0, 1fr); gap: 28px; } .history-origin-heading h2 { font-size: 1.9rem; } .origin-year { margin-bottom: 22px; } .history-origin-prose .origin-thought { margin-block: 25px; } .history-section-heading { margin-bottom: 38px; } .history-section-heading h2 { font-size: clamp(1.55rem, 6.1vw, 2.2rem); } .history-timeline { --rail-x: 5px; } .history-timeline::before { top: 20px; } .history-event { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-left: 27px; padding-bottom: 30px; } .history-event::before { top: 17px; } .history-date { flex-direction: row; align-items: baseline; gap: 10px; padding-top: 0; } .history-date > span:first-child { font-size: 2rem; } .history-date > span:last-child { margin: 0; } .history-entry { padding: 24px 21px; border-radius: 18px; } .history-copy h3 { font-size: 1.25rem; } .history-photo { width: 100%; } .history-continuation { margin-left: 5px; } .history-closing h2 { font-size: 1.9rem; } .history-closing p:not(.eyebrow) br { display: none; } .history-closing-links { flex-direction: column; align-items: center; } } @media print { .history-event, .history-origin, .history-teaser { break-inside: avoid; } .history-hero-photo { transform: none; box-shadow: none; } } .maker-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr); align-items: center; gap: clamp(32px, 6vw, 88px); padding-block: 24px 64px; } .maker-hero h1 { font-size: 1.25rem; margin-bottom: 18px; } .maker-headline { font: 700 clamp(2.4rem, 4.3vw, 4rem) / 1.4 var(--display); margin: 0 0 24px; } .maker-keyrule { border-left: 3px solid var(--accent); padding: 10px 0 10px 20px; margin: 28px 0 0; } .maker-keyrule strong { font-size: 1.25rem; color: var(--accent); } .maker-photo { background: var(--paper); padding: 12px 12px 20px; border-radius: 32px; box-shadow: 12px 14px 0 var(--rose), 0 22px 45px #57384912; transform: rotate(2deg); } .maker-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 23px; } .maker-photo figcaption { text-align: center; font-size: 0.875rem; margin-top: 14px; padding-inline: 8px; } .maker-jumps { display: flex; flex-wrap: wrap; gap: 10px; padding-block: 0 40px; } .maker-jumps a { border: 1px solid var(--line); background: var(--paper); border-radius: 99px; padding: 10px 20px; font-size: 0.875rem; min-height: 44px; transition: background 180ms ease; } .maker-jumps a:hover { background: var(--rose); } .maker-band { background: #f3e5ec; border-block: 1px solid #e9d9e2; } .maker-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; } .maker-card { border: 1px solid #fff; background: var(--paper); border-radius: 28px; padding: clamp(24px, 3vw, 40px); box-shadow: 0 12px 30px #68425809; } .maker-card h3 { margin: 22px 0 15px; } .maker-label { display: inline-block; align-self: start; width: fit-content; font-size: 0.875rem; line-height: 1.7; color: #fff; background: var(--accent); border-radius: 99px; padding: 7px 15px; margin: 0; } .maker-label-soft { color: var(--ink); background: #efe7ed; } .maker-card p:last-child { margin-bottom: 0; } .maker-past { margin: 28px 0 0; max-width: 880px; } .maker-editorial { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: clamp(32px, 7vw, 100px); } .maker-section-title h2 { font-size: clamp(1.8rem, 2.8vw, 2.7rem); } .maker-prose > h3 { margin-top: 38px; } .maker-prose > h3:first-child { margin-top: 0; } .maker-prose p { margin-block: 0 20px; } .maker-credit-example { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px 28px; box-shadow: 5px 6px 0 #e9dde4; margin-block: 25px 34px; } .maker-credit-example > span { color: var(--muted); font-size: 0.875rem; } .maker-credit-example p { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 700; margin: 10px 0 0; } .maker-part-note { background: #f0eaf4; padding: 25px 28px; border-radius: 20px; } .maker-part-note h3 { font-size: 1.2rem; margin-bottom: 12px; } .maker-part-note p { margin: 0; } .maker-socials { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 25px; } .maker-socials dt { font-size: 0.875rem; color: var(--muted); } .maker-socials dd { margin: 3px 0 0; font-weight: 700; } .maker-socials dd a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .maker-boundaries { background: #eee8e4; border-block: 1px solid #e2d8d2; } .maker-list { padding-left: 1.3em; } .maker-list li { padding-left: 0.3em; margin-block: 12px; } .maker-list li::marker { color: var(--accent); } .maker-rights { padding-top: 28px; margin-top: 30px; border-top: 1px solid #d5c7ce; } .maker-rights h3 { font-size: 1.2rem; } .maker-license-intro { max-width: 780px; } .maker-draft { background: #f5e8dc; border: 1px solid #dcc7b7; border-radius: 14px; padding: 18px 24px; margin: 30px 0; } .maker-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .maker-price-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .maker-price { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(22px, 2.7vw, 36px); border: 1px solid var(--line); border-radius: 26px; background: #fff; } .maker-price h3 { font-size: 1.15rem; margin: 24px 0 12px; } .maker-price-value { font: 700 clamp(1.8rem, 3vw, 2.6rem) / 1.5 var(--display); margin: 0; } .maker-price-value span { display: block; font: 400 1rem/1.8 var(--body); margin-top: 2px; } .maker-price-standard { background: #efeaf1; } .maker-price-standard .maker-price-value { font-size: clamp(1.5rem, 2.4vw, 2rem); } .maker-unavailable { display: block; width: 100%; text-align: center; background: #f0e9ed; color: #6d5964; padding: 10px; border-radius: 12px; margin-top: auto; font-size: 0.875rem; } .maker-price > .text-link { margin-top: auto; font-size: 0.875rem; } .maker-license-terms { padding-block: 32px 16px; max-width: 920px; } .maker-license-terms h3 { font-size: 1.25rem; } .maker-license-contact { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 28px 32px; border-radius: 24px; background: var(--rose); } .maker-license-contact p { margin: 0; } .maker-faq { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: clamp(32px, 7vw, 100px); border-top: 1px solid var(--line); padding-top: 60px; } .maker-teaser { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 36px; border: 1px solid #dacbd3; border-radius: 26px; background: #efeaf4; margin-block: 48px; box-shadow: 6px 7px 0 #e1d7e7; } .maker-teaser h2 { font-size: 1.6rem; margin-bottom: 8px; } .maker-teaser p { margin: 0; } .maker-teaser .eyebrow { margin-bottom: 10px; } @media (max-width: 900px) { .maker-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 28px; } .maker-photo { transform: none; } .maker-break { display: none; } .maker-price-grid { grid-template-columns: minmax(0, 1fr); } .maker-price { padding: 28px; } .maker-price-value { font-size: 2.4rem; } .maker-price-standard .maker-price-value { font-size: 1.8rem; } .maker-unavailable { width: auto; padding-inline: 24px; } } @media (max-width: 760px) { .maker-hero, .maker-rule-grid, .maker-editorial, .maker-faq { grid-template-columns: minmax(0, 1fr); } .maker-hero { padding-block: 8px 38px; } .maker-headline { font-size: clamp(2.2rem, 9vw, 3.2rem); } .maker-photo { width: min(100% - 12px, 360px); justify-self: center; margin: 10px 0 14px; } .maker-jumps { gap: 8px; } .maker-jumps a { padding-inline: 15px; } .maker-rule-grid { gap: 18px; } .maker-editorial, .maker-faq { gap: 24px; } .maker-prose > h3 { font-size: 1.3rem; } .maker-credit-example, .maker-part-note { padding: 22px; } .maker-draft { padding: 18px; } .maker-license-contact { padding: 24px; } .maker-license-contact .button { width: 100%; gap: 12px; padding-inline: 20px; font-size: 0.9375rem; } .maker-teaser { padding: 26px; } .maker-teaser h2 { font-size: 1.3rem; } } @media print { .maker-photo { transform: none; box-shadow: none; } .maker-card, .maker-price, .maker-credit-example { break-inside: avoid; } .maker-jumps { display: none; } }
.brand-logo-link { display: inline-flex; flex: 0 0 auto; align-items: center; letter-spacing: 0; } .brand-logo { display: block; width: auto; max-width: 100%; height: auto; } .brand-logo-header { width: clamp(170px, 17vw, 220px); } .footer-logo-link { display: inline-flex; width: clamp(220px, 24vw, 300px); max-width: 100%; } .footer-logo { width: 100%; } .contact-secondary-link { font-size: 0.875rem; } @media (max-width: 760px) { .brand-logo-header { width: clamp(120px, 36vw, 150px); } .footer-logo-link { width: 220px; } } @media (max-width: 370px) { .brand-logo-header { width: 120px; } } body { background: radial-gradient(ellipse at 93% 200px, #f1e0e8 0, transparent 680px), var(--canvas); } main { position: relative; } .micro, .fine-print, .breadcrumb ol { font-size: 0.875rem !important; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } .site-header { background: #fffcf8e8; border-radius: 20px; border-color: #fff; box-shadow: var(--shadow-near), 0 12px 36px #633c4e09; transition: background 0.3s, box-shadow 0.3s; } .site-header.is-scrolled { background: #fffdf7f5; box-shadow: 0 8px 28px #633c4e20; } .nav-socials { position: relative; } .nav-socials > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; } .nav-socials > summary::-webkit-details-marker { display: none; } .nav-socials > summary::after { content: "+"; font: 400 1.1rem/1 var(--latin); } .nav-socials[open] > summary::after { content: "−"; } .nav-socials-menu { position: absolute; top: calc(100% + 14px); right: -18px; display: grid; gap: 3px; min-width: 220px; padding: 12px; margin: 0; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-raised); } .nav-socials-menu a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 10px; white-space: nowrap; } .nav-socials-menu a:hover, .nav-socials-menu a:focus-visible { background: var(--rose); } .nav-socials-menu img { width: 19px; height: 19px; } @media (max-width: 1000px) { .js #site-nav { max-height: calc(100dvh - 110px); overflow-y: auto; } .nav-socials { flex-basis: 100%; } .nav-socials-menu { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; margin-top: 5px; box-shadow: none; } .nav-socials-menu a { padding: 9px 7px; gap: 9px; font-size: 0.8125rem; } } @media (max-width: 370px) { .nav-socials-menu { grid-template-columns: minmax(0, 1fr); } .menu-toggle .menu-icon { display: none; } } .site-header .wordmark { letter-spacing: -0.075em; } .nav-shop { background: var(--ink); color: #fffaf3; border-color: var(--ink); } .nav-shop:hover { background: var(--accent); } .site-header nav { gap: clamp(14px, 1.7vw, 26px); } .site-header::after { content: ""; position: absolute; bottom: 0; left: 22px; right: 22px; height: 2px; background: var(--accent); transform: scaleX(var(--reading-progress, 0)); transform-origin: left; opacity: 0.6; pointer-events: none; } .button { min-height: 62px; } .button-dark { background: var(--accent); box-shadow: 0 6px 0 #6b2d480e, 0 14px 30px #873a5c17; } .button-dark:hover { background: #693247; } .button-dark:hover > .arrow { transform: rotate(0deg); } .button > .arrow { background: #fffaf314; } .button:active { transform: translateY(1px); } .eyebrow { font-size: 0.875rem; letter-spacing: 0.1em; } .section-index { width: 39px; height: 29px; flex-basis: 39px; background: #fff8f5; color: var(--accent); } .home-hero { background: radial-gradient(ellipse at 77% 25%, #fff9e9 0, transparent 48%), linear-gradient(120deg, #f4dcdf 0%, #f3d9e4 49%, #e6dced 100%); } .home-hero::before { content: ""; position: absolute; inset: 94px 0 0; background-image: radial-gradient(#98677820 0.65px, transparent 0.65px); background-size: 8px 8px; opacity: 0.3; z-index: -1; pointer-events: none; } .hero-orbit { width: 78%; right: -25%; top: -8%; border: 1px solid #fff8f49c; background: linear-gradient(145deg, #ffffff48, #b8a7c617); box-shadow: -45px 35px 70px #ad7e9220, inset 20px 20px 50px #ffffff52, 0 0 0 70px #ffffff18; } .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 36px; padding-top: clamp(62px, 6vw, 100px); padding-bottom: 60px; } .hero-copy h1 { margin: 25px 0 26px; letter-spacing: -0.045em; line-height: 1.22; } .hero-copy h1 .hero-prelude { font-size: clamp(1.35rem, 2.25vw, 2.05rem); letter-spacing: 0.015em; line-height: 1.6; margin-bottom: 12px; } .hero-copy h1 .hero-punch { font-size: clamp(3.4rem, 6.2vw, 5.9rem); line-height: 1.3; } .hero-copy h1 .hero-punch-last { color: var(--accent); } .hero-description { margin-bottom: 25px; } .hero-description br:last-child { display: none; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; } .hero-actions .text-link { margin-top: 0; font-size: 0.875rem; } .catalog-other-shops { margin: 18px 4px 0; font-size: 0.8125rem; } .catalog-other-shops .text-link { margin-top: 0; } .hero-scene { aspect-ratio: 0.97; padding-top: 38px; } .hero-edition { position: absolute; top: 0; left: 10%; right: 1%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px; padding-bottom: 11px; border-bottom: 1px solid #a67e9552; font: 600 0.875rem/1.6 var(--latin); } .hero-edition span { font: 400 0.875rem/1.6 var(--body); } .hero-main-photo { width: 91%; padding: 10px 10px 34px; border-radius: 31% 31% 23px 23px; transform: perspective(1200px) rotate(4deg) rotateY(var(--tilt-y, 0deg)) rotateX(var(--tilt-x, 0deg)); box-shadow: 0 45px 58px -23px #68435657, 0 3px 6px #55344b14; } .hero-main-photo > img { border-radius: 30% 30% 14px 14px; aspect-ratio: 1.03; } .hero-main-media { position: relative; width: 100%; aspect-ratio: 1.03; overflow: hidden; border-radius: 30% 30% 14px 14px; background: #eadbd8; } .hero-main-media > img, .hero-main-media > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .hero-video { z-index: 1; pointer-events: none; } .hero-main-photo figcaption, .hero-main-photo .specimen-note { z-index: 2; } .hero-motion-toggle { position: absolute; right: 13px; bottom: 13px; z-index: 3; padding: 7px 12px; border: 1px solid #fff; border-radius: 999px; color: #44383d; background: #fffaf1de; box-shadow: 0 5px 16px #55344b24; font: 700 0.75rem/1.4 var(--body); cursor: pointer; backdrop-filter: blur(8px); } .hero-motion-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .hero-video, .hero-motion-toggle { display: none; } } .hero-main-photo figcaption { top: 14%; background: #fff9e8; padding: 10px 20px; border: 1px solid #fff; box-shadow: 3px 5px 0 #6f4d6720; } .hero-scene::before { inset: 13% -2% 8% 12%; border-radius: 31% 31% 24px 24px; transform: rotate(-6deg); background: #bfa7c67a; border: 1px solid #e9d7e7; box-shadow: 0 25px 40px #87647f29; } .hero-choco-photo { width: 44%; left: -2%; bottom: -1%; box-shadow: 0 26px 38px -16px #68435664; transform: rotate(-9deg); } .hero-choco-window { position: relative; aspect-ratio: 1.7; overflow: hidden; border-radius: 12px; } .hero-choco-window img { position: absolute; width: 145%; max-width: none; height: auto; aspect-ratio: 1; left: -22.5%; top: 50%; transform: translateY(-55%); } .chocolate-demo video { aspect-ratio: 608 / 720; } .chocolate-demo figcaption strong, .chocolate-demo figcaption span { display: block; } .chocolate-demo figcaption span { margin-top: 8px; line-height: 1.8; } .hero-aside { right: 0; bottom: -9%; font-size: 0.875rem; } .scene-label { top: 30%; right: -22px; } .hero-bottom { margin-top: 34px; padding-block: 20px; border-color: #b286a34d; } .home-creations { background: #fcf8ec; padding-top: 64px; border-radius: 54px 54px 0 0; margin-top: -1px; box-shadow: 0 -20px 50px #76415e08; } .home-creations::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: #fff; } .section-heading { margin-bottom: 50px; } .section-heading h2 { font-size: clamp(2rem, 3.5vw, 3.2rem); } .home-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.7vw, 38px); align-items: stretch; } .home-collection-card { min-width: 0; } .home-collection-mold { --collection-color: #efcfdd; } .home-collection-goods { --collection-color: #e5dcef; } .home-collection-link { display: flex; flex-direction: column; height: 100%; padding: 11px; border: 1px solid #e6d5ce; border-radius: 30px; background: var(--collection-color); box-shadow: var(--shadow-near), 0 20px 30px -21px #59405055; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); } .home-collection-link:hover, .home-collection-link:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow-near), 0 28px 42px -18px #59405055; } .home-collection-copy { min-height: 172px; padding: 26px 23px 22px; } .home-collection-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; } .home-collection-kicker-label { display: inline-flex; align-items: center; padding: 4px 14px 5px; border: 1px solid #ba8fa4; border-radius: 999px; background: #fff9f6; color: #4b3041; font: 700 1.0625rem/1.4 var(--display); letter-spacing: 0.05em; } .home-collection-kicker-index { font: 600 0.75rem/1.4 var(--latin); letter-spacing: 0.12em; color: var(--label-ink); } .home-collection-copy h3 { margin: 0 0 9px; font: 700 clamp(1.8rem, 2.5vw, 2.5rem)/1.35 var(--display); } .home-collection-copy > p:last-child { margin: 0; color: #594c55; font-size: 0.9375rem; line-height: 1.7; } .home-collection-visual { position: relative; display: grid; width: 100%; aspect-ratio: 1.27; overflow: hidden; border-radius: 21px; } .home-collection-visual img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--ease); } .home-collection-link:hover .home-collection-visual img { scale: 1.035; } .home-collection-visual-mold img { object-position: center; } .home-collection-visual-goods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: #f8f0f5; } .home-collection-visual-item { position: relative; min-width: 0; overflow: hidden; } .home-collection-visual-item span { position: absolute; left: 11px; bottom: 12px; max-width: calc(100% - 22px); padding: 6px 10px; border-radius: 99px; background: #fffcf4f2; font: 700 0.75rem/1.4 var(--display); } .home-collection-action { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px 15px; font-weight: 700; } .home-collection-action span { font: 400 1.4rem/1 var(--latin); } .creation-link { border: 1px solid #e6d5ce; border-bottom: 0; border-radius: 150px 150px 22px 22px; padding: 9px 9px 24px; background: var(--object-color, #f3e7ec); box-shadow: var(--shadow-near), 0 20px 30px -21px #59405055; } .creation-photo { border-radius: 140px 140px 14px 14px; } .creation-photo img { aspect-ratio: 0.94; } .creation-category { top: auto; bottom: 15px; left: 15px; background: #fffcf4f2; border: 1px solid #fff; } .creation-caption { padding: 22px 18px 3px; } .creation-caption :is(h2, h3) { font-size: clamp(1.55rem, 2.2vw, 2rem); } .creation-caption > p:last-child { color: #66515d; } .tone-rose { --object-color: #edcad9; } .tone-cream { --object-color: #f0e2b7; } .tone-lilac { --object-color: #ded5ec; } .creation-compact .creation-link, .creation-compact .creation-photo { border-radius: 22px; } .creation-compact .creation-photo img { aspect-ratio: 1; } .home-about { background: radial-gradient(ellipse at 20% 30%, #f3edf7, transparent 58%), linear-gradient(135deg, #d6c9e3, #e9d8e2); border: 0; } .home-about::after { content: ""; position: absolute; inset: 28px; border: 1px solid #ffffff60; border-radius: 32px; z-index: -1; pointer-events: none; } .home-about-inner { padding-block: 100px; } .about-index { color: #8e739829; bottom: 0; left: -2%; font-size: clamp(8rem, 22vw, 21rem); } .home-about-copy h2 { font-size: clamp(2.2rem, 4vw, 3.7rem); } .home-making-photo { box-shadow: 12px 18px 0 #bca9c13b, 0 34px 50px -20px #51355f55; } .home-work::before { content: ""; position: absolute; width: 65%; height: 66%; right: -10%; bottom: 2%; background: radial-gradient(ellipse, #f0d4df, transparent 69%); z-index: -1; } .work-teaser { border-radius: 28px; border: 1px solid #ead9d5; background: #f3e8df; box-shadow: var(--shadow-raised); } .work-teaser-copy h3 { font-size: clamp(2rem, 3vw, 2.9rem); } .home-social-section { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(58px, 7vw, 96px); background: #f6e9e9; border-block: 1px solid #ead7d8; } .home-social-section::before { content: ""; position: absolute; z-index: -1; width: 58%; aspect-ratio: 1; right: -15%; top: -65%; border-radius: 50%; background: radial-gradient(circle, #fffaf7 0%, #fffaf700 70%); pointer-events: none; } .home-social-inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(35px, 5vw, 90px); } .home-social-copy h2 { margin: 16px 0 18px; font-size: clamp(2rem, 3.2vw, 3.35rem); line-height: 1.45; } .home-social-copy > p:last-child { max-width: 34ch; margin: 0; color: var(--muted); line-height: 1.9; } .home-social-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .home-social-links a { display: flex; align-items: center; gap: 15px; min-width: 0; min-height: 92px; padding: 17px 20px; border: 1px solid #e8d5d3; border-radius: 20px; background: #fffcf9; box-shadow: 0 13px 23px -20px #74525e88; transition: transform 180ms ease, box-shadow 180ms ease; } .home-social-links a:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -18px #74525e77; } .home-social-links img { display: block; flex: none; width: 24px; height: 24px; } .home-social-links a > span:not(.sr-only) { display: grid; min-width: 0; gap: 2px; } .home-social-links strong { font-size: 0.95rem; } .home-social-links small { color: var(--muted); font-size: 0.72rem; } .home-note, .renewal-note, .detail-note { background: #fffaf3; border-radius: 10px; border-left: 4px solid #b7849c; } .invitation, .maker-teaser, .history-teaser { position: relative; isolation: isolate; overflow: hidden; } .invitation { background: #e9b7cb; border-radius: 35px 35px 10px 35px; box-shadow: var(--shadow-raised); border: 1px solid #ffeef7; } .invitation::before { content: ""; position: absolute; width: 42%; aspect-ratio: 1; border: 45px solid #ffecf54a; border-radius: 50%; top: -85%; right: -12%; z-index: -1; } .maker-teaser { background: #e5def0; border-radius: 10px 28px 28px 28px; box-shadow: 7px 8px 0 #d3c5df6b; } .maker-teaser::before { content: ""; position: absolute; inset: 12px; border: 1px solid #ffffff6e; border-radius: 6px 20px 20px 20px; z-index: -1; } .breadcrumb { margin-top: 38px; } .page-intro { padding: 35px 0 62px; } .page-intro::after { right: -8%; top: -25%; width: 43%; border-radius: 40px; transform: rotate(-11deg); background: linear-gradient(135deg, #e8dfeea3, #f1debf66); border: 1px solid #fff8; box-shadow: 18px 22px 0 #dcc3d134, 0 25px 60px #9b6e8f10; } .page-intro h1 { font-size: clamp(2.8rem, 5.4vw, 5.1rem); letter-spacing: -0.025em; } .page-contact .page-intro::after, .page-privacy .page-intro::after { opacity: 0.38; transform: rotate(-4deg); box-shadow: none; } .page-privacy .page-intro { padding-bottom: 28px; } .page-privacy .page-intro h1 { font-size: clamp(2.1rem, 4vw, 3.5rem); } #contact-form { scroll-margin-top: 16px; } [data-turnstile-retry] { margin-block: 12px; padding: 10px 16px; min-height: 44px; border: 1px solid var(--accent); border-radius: 12px; background: var(--paper); } .catalog-section { background: #f2e8dd; padding-top: 52px; border-radius: 42px 42px 0 0; border-color: #fff; } .page-products .page-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px 40px; align-items: end; padding-block: 18px 40px; } .page-products .page-intro .eyebrow { grid-column: 1 / -1; margin-bottom: 8px; } .page-products .page-intro h1 { font-size: clamp(2.4rem, 4vw, 3.8rem); margin: 0; } .page-products .page-intro h1 br { display: none; } .page-products .page-intro::after { display: none; } .catalog-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; counter-reset: collection; } .catalog-grid .creation { counter-increment: collection; } .catalog-grid .creation-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 14px; gap: clamp(25px, 5vw, 70px); align-items: center; border-radius: 32px; } .catalog-grid .creation-photo { border-radius: 22px; } .catalog-grid .creation-photo img { aspect-ratio: 1.25; } .catalog-grid .goods-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; aspect-ratio: 1.25; background: #f7eff5; } .catalog-grid .goods-preview-grid img { display: block; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; } .catalog-grid .creation:nth-child(even) .creation-photo { order: 2; } .catalog-grid .creation:nth-child(even) .creation-caption { padding-left: 40px; } .catalog-grid .creation-caption { padding: 26px 24px 36px 0; } .catalog-grid .creation-caption::before { content: "0" counter(collection); display: block; font: 400 clamp(3rem, 7vw, 6rem) / 1 var(--latin); color: #8b637444; margin-bottom: 24px; } .catalog-grid .creation-caption :is(h2, h3) { font-size: clamp(2rem, 3.5vw, 3.4rem); } .catalog-grid #collection-mold .creation-caption :is(h2, h3) span { white-space: nowrap; } .catalog-grid .creation-caption p:last-child { font-size: 1.125rem; } .detail-hero { position: relative; isolation: isolate; } .detail-hero::before { content: ""; position: absolute; inset: 3% 47% 9% -9%; background: var(--object-color); border-radius: 44% 38% 28px 40px; z-index: -1; transform: rotate(-5deg); } .detail-portrait { box-shadow: 0 35px 55px -25px #55364c55, 9px 12px 0 #fff8; } .detail-heading h1 { color: var(--accent); } .clicker-title span { white-space: nowrap; } .detail-tagline { font-size: clamp(2rem, 3.3vw, 3.25rem); } .detail-story { position: relative; border-block: 1px solid #fff; background-image: radial-gradient( ellipse at 80% 10%, #ffffff70, transparent 65% ); } .story-photo, .demo-video, .case-primary { box-shadow: var(--shadow-raised); } .about-hero { padding-top: 35px; } .about-hero h1 { font-size: clamp(2.8rem, 4.9vw, 4.6rem); } .about-hero-photo { border-radius: 32px; box-shadow: -13px 16px 0 #d3c3dc, var(--shadow-raised); } .about-hero-photo img { border-radius: 23px; } .about-shop-intro { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 90px); align-items: start; margin-bottom: 0; padding: clamp(30px, 5vw, 68px); overflow: hidden; border: 1px solid #eadbd0; border-radius: 34px 34px 12px 34px; background: radial-gradient(circle at 92% 12%, #efd4df 0, transparent 34%), #fffaf1; box-shadow: 9px 10px 0 #eadfe6; } .about-shop-intro h2 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.8rem); line-height: 1.65; } .about-shop-intro-copy { position: relative; z-index: 1; } .about-shop-intro-copy p { margin: 0 0 20px; line-height: 2.05; } .about-shop-intro-copy p:last-child { margin-bottom: 0; } .about-shop-intro-copy .about-shop-intro-identity { font-family: var(--display); font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 700; line-height: 1.8; } .about-shop-intro-copy .about-shop-intro-lead { color: var(--accent); font-family: var(--display); font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 700; } @media (max-width: 760px) { .about-shop-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 24px 42px; border-radius: 26px 26px 10px 26px; box-shadow: 5px 6px 0 #eadfe6; } .about-shop-intro h2 { font-size: clamp(1.4rem, 6.8vw, 1.9rem); } } .history-teaser { background: #e8dfee; box-shadow: 9px 10px 0 #d9cadf; } .work-case { padding-top: 16px; } .case-heading { border-color: #bfa3b3; } .capabilities-band { background: #e4d9ea; border-radius: 44px 44px 0 0; border-color: #fff; } .capability-grid article { border-radius: 12px 28px 28px 28px; box-shadow: 0 16px 28px -20px #60415d70; } .consultation { background: radial-gradient(ellipse, #f1d5e2, transparent 68%); } .contact-main { background: radial-gradient(ellipse at 85% 4%, #fff3d4, transparent 65%), #e9b8cc; border-radius: 34px 34px 12px 34px; box-shadow: var(--shadow-raised); } .contact-guide { border: 1px solid #e9ddd1; background: #fffaf1; } .contact-main .contact-handle { color: #604450; } .questions details { transition: background 0.3s; } .questions details[open] { background: #fff9f2; } .questions summary, .questions details p { padding-inline: 16px; } .questions details p { padding-bottom: 22px; margin-bottom: 0; } .questions summary span { display: grid; place-items: center; min-width: 30px; height: 30px; border: 1px solid #dac2d1; border-radius: 50%; } .history-hero-photo { border-radius: 34px; } .history-photo-window { border-radius: 24px; } .history-origin { background: radial-gradient(ellipse at 10% 20%, #fff4d9, transparent 70%), #eee0e8; } .history-section { background: #fcf9f3; } .history-entry { border-color: #e3d4d5; border-radius: 12px 28px 28px 28px; background: #fffbf7; box-shadow: 0 10px 25px -17px #72516835; } .history-entry-photo { background: #f0e6ec; } .history-timeline::after { content: ""; position: absolute; width: 2px; top: 29px; bottom: 0; left: var(--rail-x); background: var(--accent); transform: scaleY(var(--timeline-progress, 0)); transform-origin: top; } .history-event { z-index: 1; } .history-event.is-passed::before { background: var(--accent); box-shadow: 0 0 0 6px #f1dbe5; } .history-date { transition: color 0.35s; } .history-date > span:first-child { font-size: 3rem; } .history-closing { background: radial-gradient(ellipse, #f0dce6, transparent 70%); } .maker-hero { padding-top: 30px; } .maker-photo { box-shadow: 12px 15px 0 #e9bfd1, var(--shadow-raised); } .maker-band { background: #ecdae5; } .maker-boundaries { background: #eee5db; } .maker-card { box-shadow: 0 15px 28px -18px #6e426a30; } .maker-jumps { position: relative; z-index: 2; } .maker-jumps a:hover, .maker-jumps a[aria-current="location"] { color: #fff; background: var(--accent); border-color: var(--accent); } .maker-section-title h2 { line-height: 1.65; } .maker-license { position: relative; } .maker-credit-example { box-shadow: 5px 6px 0 #d9c2d2; } .site-footer { position: relative; overflow: hidden; padding-top: 88px; background: linear-gradient(150deg, #fffdfa, #faf4ef 66%, #f6edeb); border-top: 1px solid #e7d4d3; } .site-footer::after { content: "gisichoco_LAB"; display: block; margin: 35px auto -30px; width: max-content; max-width: 100%; font: 800 clamp(3rem, 13.8vw, 13rem) / 0.85 var(--latin); letter-spacing: -0.065em; color: #ad8a9027; pointer-events: none; } .footer-top nav a { border-bottom: 1px solid #b7959855; } .footer-wordmark { font-size: clamp(2.4rem, 4.3vw, 4rem); } .footer-top { gap: 55px; } .footer-bottom { border-color: #b7959866; } .footer-socials { margin-top: 27px; } .footer-top .footer-socials-label { margin: 0 0 12px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; } .footer-socials-links { display: flex; flex-wrap: wrap; gap: 8px; } .footer-socials-links a { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid #caaeb0; border-radius: 999px; background: #f8eded; font-size: 0.8125rem; line-height: 1.3; transition: background 180ms ease, transform 180ms ease; } .footer-socials-links img { display: block; width: 17px; height: 17px; flex: none; } .footer-socials-links a:hover { background: #f1dfe2; transform: translateY(-2px); } .not-found { background: radial-gradient(ellipse, #edd1de, transparent 68%); } @media (min-width: 1001px) { .maker-section-title { position: sticky; top: 145px; align-self: start; } .case-primary { position: sticky; top: 145px; } } .about-history { margin-bottom: var(--space); scroll-margin-top: 24px; } .about-history-card { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); overflow: hidden; border: 1px solid #dac8d9; border-radius: 30px; color: var(--ink); text-decoration: none; background: linear-gradient(125deg, #f6e9ed, #eae1f0); box-shadow: 9px 10px 0 #e0d3e4; } .about-history-photo { padding: clamp(20px, 3vw, 42px); display: grid; align-items: center; background: #fffcf54d; } .about-history-photo img { display: block; width: 100%; height: auto; border-radius: 22px; transform: rotate(-3deg); box-shadow: 0 18px 32px -24px #68485499; } .about-history-copy { min-width: 0; padding: clamp(26px, 4vw, 58px); align-self: center; } .about-history-copy h2 { margin: 0 0 24px; font-size: clamp(1.5rem, 3vw, 2.5rem); } .about-history-lead { font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.8; } .about-history-copy > p:not(.eyebrow) { margin: 0 0 22px; } .about-history-copy > .text-link { margin-top: 10px; } .about-history-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .about-history-photo img { transition: transform 350ms ease; } .about-history-card:hover .about-history-photo img { transform: rotate(0); } } @media (max-width: 760px) { .about-history-card { grid-template-columns: minmax(0, 1fr); border-radius: 24px; box-shadow: 5px 6px 0 #e0d3e4; } .about-history-photo { padding: 26px 40px; } .about-history-photo img { max-width: 330px; justify-self: center; } .about-history-copy { padding: 28px 24px 34px; } } @media (prefers-reduced-motion: no-preference) { [data-reveal] { transition-delay: var(--reveal-delay, 0ms); } .hero-copy > * { animation: none; } .hero-copy .hero-eyebrow, .hero-copy .hero-prelude, .hero-copy .hero-description, .hero-copy > .button { animation: atelier-rise 0.85s var(--ease) both; } .hero-copy .hero-punch { animation: atelier-rise 1s var(--ease) both; animation-delay: 0.1s; } .hero-copy .hero-punch-last { animation-delay: 0.2s; } .hero-copy .hero-description { animation-delay: 0.25s; } .hero-copy > .button { animation-delay: 0.32s; } .hero-main-photo { animation: atelier-photo 1.2s var(--ease) both; } .hero-choco-photo { animation: atelier-photo 1.2s 0.15s var(--ease) both; } .js .site-header nav.is-open { animation: atelier-rise 0.3s var(--ease) both; } .questions details[open] p { animation: atelier-rise 0.3s var(--ease) both; } } @keyframes atelier-rise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } } @keyframes atelier-photo { from { opacity: 0; scale: 0.96; } to { opacity: 1; scale: 1; } } @media (max-width: 1100px) { .hero-copy h1 .hero-punch { font-size: clamp(3.1rem, 6.5vw, 4.5rem); } .hero-grid { gap: 26px; } .hero-edition { left: 4%; font-size: 0.8125rem; } .hero-edition span { display: none; } .catalog-grid .creation-caption { padding-right: 10px; } } @media (max-width: 760px) { .page-products .page-intro { grid-template-columns: minmax(0, 1fr); gap: 15px; padding-block: 8px 32px; } .page-products .page-intro h1 { font-size: clamp(1.95rem, 8vw, 2.8rem); } .site-header { border-radius: 17px; gap: 6px; padding-inline: 13px; } .site-header .brand-logo-link { flex: 0 1 auto; min-width: 0; } .js .menu-toggle { gap: 6px; padding-inline: 10px; font-size: 0.75rem; } .site-header > .nav-shop { justify-content: center; padding: 9px 10px; font-size: 0.75rem; } .site-header > .nav-shop .arrow { display: none; } .hero-grid { grid-template-columns: minmax(0, 1fr); padding-top: 37px; gap: 30px; padding-bottom: 40px; } .hero-copy { padding-block: 0; } .hero-copy h1 { margin-block: 18px 20px; } .hero-copy h1 .hero-prelude { font-size: 1.25rem; } .hero-copy h1 .hero-punch { font-size: clamp(3.25rem, 13vw, 5rem); } .hero-copy .hero-eyebrow { margin-bottom: 12px; } .hero-description { font-size: 1rem; line-height: 1.95; } .hero-scene { width: min(100%, 465px); margin-inline: auto; aspect-ratio: 0.98; padding-top: 30px; } .hero-main-photo { width: 83%; padding: 8px 8px 28px; } .hero-main-photo figcaption { font-size: 0.8125rem; padding: 7px 12px; } .hero-choco-photo { width: 43%; left: 0; bottom: 0; } .hero-aside { right: 0; bottom: -8%; font-size: 0.8125rem; } .hero-edition { left: 0; right: 0; } .scene-label { display: none; } .hero-orbit { width: 150%; top: 18%; right: -65%; } .hero-bottom { margin-top: 8px; padding-block: 16px; } .home-creations { border-radius: 30px 30px 0 0; padding-top: 40px; } .section-heading h2 { font-size: 2rem; } .home-product-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; } .home-collection-link { border-radius: 24px; } .home-collection-copy { min-height: 0; padding: 20px 17px 22px; } .home-collection-copy h3 { font-size: 1.75rem; } .home-collection-visual { aspect-ratio: 1.18; border-radius: 16px; } .home-collection-action { padding: 16px 17px 12px; } .home-social-section { padding-block: 55px 62px; } .home-social-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; } .home-social-copy h2 { font-size: 2.1rem; } .home-social-links { grid-template-columns: minmax(0, 1fr); gap: 9px; } .home-social-links a { min-height: 70px; padding: 13px 17px; } .home-about-inner { padding-block: 65px; } .home-about::after { inset: 14px; border-radius: 22px; } .about-index { font-size: 9rem; } .home-about-copy h2 { font-size: 2.2rem; } .invitation { border-radius: 26px 26px 8px 26px; } .breadcrumb { margin-block: 28px; } .page-intro { padding: 10px 0 40px; } .page-intro h1 { font-size: clamp(2rem, 8.5vw, 3rem); } .page-intro::after { width: 65%; top: 4%; right: -27%; border-radius: 25px; } .catalog-section { border-radius: 28px 28px 0 0; padding-block: 36px 45px; } .catalog-grid { gap: 28px; } .catalog-grid .creation-link { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 10px; border-radius: 26px; } .catalog-grid .creation-photo { border-radius: 19px; } .catalog-grid .creation-caption, .catalog-grid .creation:nth-child(even) .creation-caption { padding: 22px 14px 18px; } .catalog-grid .creation:nth-child(even) .creation-photo { order: 0; } .catalog-grid .creation-caption::before { font-size: 2rem; float: right; margin: 0; } .catalog-grid .creation-caption :is(h2, h3) { font-size: 1.8rem; } .catalog-grid .creation-caption p:last-child { font-size: 1rem; } .detail-hero::before { inset: 0 -8% 45%; border-radius: 38% 38% 30px 30px; } .detail-tagline { font-size: 1.625rem; } .about-hero h1 { font-size: 2.3rem; } .about-hero-photo { border-radius: 26px; } .about-hero-photo img { border-radius: 19px; } .history-hero-photo { border-radius: 27px; } .history-photo-window { border-radius: 19px; } .history-date > span:first-child { font-size: 2.2rem; } .history-date { flex-direction: row; } .capabilities-band { border-radius: 28px 28px 0 0; } .questions summary, .questions details p { padding-inline: 10px; } .maker-hero { padding-top: 8px; } .maker-section-title h2 { font-size: 1.85rem; } .site-footer { padding-top: 50px; } .footer-top { gap: 30px; } .site-footer::after { margin-top: 30px; margin-bottom: -26px; font-size: 14vw; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; } .site-header::after { display: none; } .history-timeline::after { transform: none; background: #d8b8ca; } } .home-origin-note { font-size: 1rem; margin-top: 28px; } .audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .audience-card { display: flex; flex-direction: column; border: 1px solid #fff9; border-radius: 32px; color: var(--ink); overflow: hidden; text-decoration: none; box-shadow: 0 22px 55px -35px #64395266; transition: transform 0.3s, box-shadow 0.3s; } .audience-maker { background: #ece5f0; } .audience-business { background: #f3ddd9; } .audience-photo { aspect-ratio: 1.6; overflow: hidden; margin: 12px 12px 0; border-radius: 23px; } .audience-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .audience-maker .audience-photo img { object-position: center 48%; } .audience-copy { padding: 30px 36px 36px; flex: 1; display: flex; flex-direction: column; align-items: flex-start; } .audience-copy h3 { font-size: clamp(1.65rem, 2.6vw, 2.5rem); line-height: 1.55; margin: 12px 0; } .audience-copy > p:not(.eyebrow) { margin: 0 0 28px; } .audience-copy .text-link { margin-top: auto; } .collection-jumps, .contact-topics { display: flex; gap: 12px; flex-wrap: wrap; margin-block: 0 42px; } .collection-jumps a, .contact-topics a { padding: 13px 21px; border: 1px solid #b9a4b1; border-radius: 999px; text-decoration: none; background: #fffc; font-size: 1rem; transition: background 0.2s; } .collection-jumps a span { color: #873a5c; margin-right: 10px; font-size: 0.875rem; } .collection-jumps a:hover, .contact-topics a:hover { background: #f4dbe5; } .catalog-grid [id], .contact-topic, #process, #scope, #choose-mold, #contact-channel { scroll-margin-top: 16px; } .product-clarifier { padding: 14px 18px; border-left: 3px solid #b06486; background: #ffffff70; margin: 22px 0; font-size: 1rem; } .mold-name-note { margin: 0 0 24px; } .mold-name-note h3 { margin: 0 0 8px; font-size: 1.125rem; line-height: 1.8; } .mold-renewal-note { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); } .mold-status { flex: none; padding: 4px 12px; border-radius: 99px; color: var(--accent); background: var(--rose); font-size: 0.875rem; font-weight: 700; } .mold-renewal-note p { flex: 1 1 340px; margin: 0; font-size: 0.875rem; } .mold-jumps { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 28px 20px; } .mold-comparison { margin-block: 32px; padding: clamp(18px, 3vw, 36px); border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(135deg, var(--rose), var(--canvas) 70%); scroll-margin-top: 20px; } .comparison-heading { margin-bottom: 24px; } .comparison-heading h3 { margin: 8px 0 14px; font-size: clamp(1.35rem, 2.5vw, 2rem); } .comparison-heading > p:last-child { margin: 0; } .comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .comparison-card { display: flex; flex-direction: column; min-width: 0; margin: 0; } .comparison-card > .mold-photo-link { margin-top: auto; } .comparison-card figcaption { min-height: 112px; padding-bottom: 18px; } .comparison-kicker { color: var(--accent); font-size: 0.875rem; font-weight: 700; } .comparison-card h4 { margin: 5px 0 8px; font-size: 1.25rem; } .comparison-card p { margin: 0; font-size: 0.875rem; } .mold-photo-link { display: block; overflow: hidden; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow-near); text-decoration: none; } .mold-photo-link img { width: 100%; height: auto; object-fit: contain; } .photo-expand { display: flex; justify-content: flex-end; align-items: center; min-height: 44px; padding: 10px 16px; color: var(--accent); font-size: 0.875rem; font-weight: 700; } .mold-photo-link:hover .photo-expand { text-decoration: underline; } .comparison-note { margin: 22px 0 0; font-size: 0.875rem; line-height: 1.9; } .mold-usage-note { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); align-items: center; gap: 28px; margin-top: 12px; padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); } .mold-usage-note h4 { margin: 12px 0; font-size: 1.25rem; } .mold-usage-note p { font-size: 0.875rem; line-height: 1.9; } .mold-usage-note .text-link { margin-top: 20px; } .mold-usage-note figure { margin: 0; min-width: 0; } .mold-usage-note figcaption { margin-top: 12px; font-size: 0.8125rem; line-height: 1.8; } .mold-jumps a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 99px; background: var(--paper); font-size: 0.875rem; transition: background 180ms ease; } .mold-jumps strong { color: var(--accent); font-family: var(--display); font-size: 1.125rem; } .mold-jumps a:hover { background: var(--rose); } .mold-options { border-top: 1px solid var(--line); } .mold-option { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(240px, 340px); grid-template-rows: auto 1fr; grid-template-areas: "index heading photo" "index description photo"; gap: 14px 28px; padding: 36px 12px; align-items: center; border-bottom: 1px solid var(--line); scroll-margin-top: 20px; } .mold-option h3 { grid-area: heading; align-self: end; font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin: 0; } .option-variant { display: block; margin-top: 8px; font-size: 0.75em; line-height: 1.7; } .option-photo { grid-area: photo; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow-near); } .option-photo img { width: 100%; height: auto; object-fit: contain; } .option-description { grid-area: description; align-self: start; max-width: 40ch; } .mold-option p { margin: 5px 0; } .option-index { grid-area: index; font-family: var(--latin); font-size: 1.5rem; color: var(--accent); align-self: start; } .option-tagline { color: var(--accent); font-size: 0.875rem; font-weight: 700; } .option-specs { display: grid; gap: 9px; margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.875rem; line-height: 1.85; } .option-specs > div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 8px; } .option-specs dt { color: var(--muted); } .option-specs dd { margin: 0; } @media (max-width: 370px) { .option-specs > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } } .option-shop-link { min-height: 44px; margin-top: 8px; font-size: 0.875rem; } .selection-note { font-size: 0.875rem; margin-block: 25px; max-width: 850px; line-height: 1.9; } .purchase-guide { display: grid; grid-template-columns: 1fr 1.4fr; gap: 50px; padding: 48px; margin-block: 65px; border-radius: 28px; background: #f1e6ec; } .purchase-guide h2 { font-size: 2rem; } .purchase-guide h3 { font-size: 1.125rem; margin: 0 0 6px; } .purchase-guide p { margin: 0 0 25px; } .case-brief { margin: 30px 0; } .case-brief > div, .making-principles > div { padding: 18px 0; border-top: 1px solid #cdbfc6; } .case-brief dt, .making-principles dt { font-size: 0.875rem; color: #873a5c; font-weight: 700; margin-bottom: 7px; } .case-brief dd, .making-principles dd { margin: 0; line-height: 1.9; } .record-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); } .record-grid article { display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 2.4vw, 32px); background: var(--paper); border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--shadow-near); } .record-grid h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); margin: 4px 0 24px; } .record-grid dt { color: var(--muted); font-size: 0.875rem; margin-top: 18px; } .record-grid dd { margin: 6px 0 18px; } .record-photo img, .record-detail img { width: 100%; height: auto; border-radius: 18px; } .record-photo figcaption, .record-detail figcaption { color: var(--muted); font-size: 0.8125rem; line-height: 1.85; } .record-photo figcaption { margin-top: 12px; } .record-detail { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 20px; align-items: center; padding-top: 24px; margin-bottom: 28px; border-top: 1px solid var(--line); } .record-grid .text-link { margin-top: auto; align-self: flex-start; } .record-delivery { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 32px; margin-top: 32px; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: 24px; background: var(--cream); } .record-delivery h3 { font-size: 1.375rem; margin-bottom: 0; } .record-delivery p:first-child { margin-top: 0; } .process-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding: 0; margin: 40px 0 0; counter-reset: none; } .process-list li { padding-top: 24px; border-top: 2px solid #d1afc0; } .process-number { font-size: 2.5rem; color: #873a5c; line-height: 1; } .process-list h3 { font-size: 1.35rem; margin: 22px 0 12px; } .making-principles { margin: 30px 0; } .contact-topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 0; } .contact-topic { display: flex; flex-direction: column; padding: 36px; border: 1px solid #e2d5dd; border-radius: 25px; background: #fffc; box-shadow: 0 16px 35px -32px #543647; } .contact-topic:nth-child(2), .contact-topic:nth-child(3) { background: #f3edf5; } .contact-topic h2 { font-size: 1.65rem; line-height: 1.6; margin: 15px 0; } .contact-topic ul { padding-left: 1.3em; line-height: 2; margin-block: 0 20px; } .contact-topic > .text-link { align-self: flex-start; margin-block: 8px 20px; } .topic-note { font-size: 0.875rem; color: #71606b; } .topic-action { display: flex; gap: 16px; justify-content: space-between; padding-top: 18px; border-top: 1px solid #d1c1ca; margin-top: auto; color: #873a5c; font-weight: 700; text-decoration: none; } .contact-form-section { padding: 52px; display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(34px, 6vw, 74px); align-items: start; border-radius: 30px; background: linear-gradient(125deg, #f2cbd9, #ece1f0); } .contact-form-intro { position: sticky; top: 145px; } .contact-form-intro h2 { font-size: 2.4rem; line-height: 1.5; } .contact-safety-list { list-style: none; padding: 0; margin: 30px 0; border-top: 1px solid #cdb7c5; } .contact-safety-list li { position: relative; padding: 14px 0 14px 24px; border-bottom: 1px solid #cdb7c5; font-size: 0.875rem; line-height: 1.8; } .contact-safety-list li::before { content: "✓"; position: absolute; left: 0; color: #873a5c; font-weight: 700; } .contact-form { position: relative; padding: clamp(26px, 4vw, 42px); border: 1px solid #fff; border-radius: 25px; background: #fffdfbe8; box-shadow: 0 24px 48px -38px #54364788; } .contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; } .form-field { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .form-field-wide { grid-column: 1 / -1; } .form-field > span, .form-consent { font-size: 0.875rem; font-weight: 700; line-height: 1.7; } .form-field strong { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px; background: #ead1dc; color: #71324e; font-size: 0.6875rem; letter-spacing: 0.06em; vertical-align: 1px; } .form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid #bcaab5; border-radius: 12px; background: #fff; color: #392e3a; font: inherit; font-size: 1rem; line-height: 1.65; transition: border-color 0.2s ease; } .form-field input, .form-field select { min-height: 50px; padding: 10px 13px; } .form-field textarea { min-height: 190px; padding: 13px; resize: vertical; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 3px solid var(--accent); outline-offset: 3px; border-color: var(--accent); } .form-field small, .form-security-note, .form-preview-note { font-size: 0.875rem; line-height: 1.8; color: #71606b; } .contact-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } .cf-turnstile { min-height: 140px; margin-top: 24px; } .form-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; cursor: pointer; } .form-consent input { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; accent-color: #873a5c; } .form-submit-row { display: flex; align-items: center; gap: 22px; margin-top: 26px; } .contact-form .button { border: 0; cursor: pointer; } .contact-form .button:disabled { cursor: wait; opacity: 0.58; } .form-status { min-height: 1.8em; margin: 0; font-size: 0.875rem; font-weight: 700; } .form-status[data-state="success"] { color: #386a4b; } .form-status[data-state="error"] { color: #9a2f45; } .form-preview-note { margin: 20px 0 0; padding: 11px 14px; border-radius: 10px; background: #f3e9c8; color: #5f5030; } .form-security-note { margin: 18px 0 0; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .audience-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px #64395277; } .audience-card:hover img { transform: scale(1.025); } } @media (max-width: 1000px) { .contact-form-section { grid-template-columns: 1fr; } .contact-form-intro { position: static; } .contact-topic-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .record-grid, .record-delivery { grid-template-columns: 1fr; } .record-delivery { gap: 20px; } .record-grid article { padding: 16px; border-radius: 24px; } .record-detail { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; } .audience-grid, .contact-topic-grid, .purchase-guide, .process-list { grid-template-columns: 1fr; } .audience-grid { gap: 24px; } .audience-copy { padding: 23px; } .audience-photo { aspect-ratio: 1.5; } .audience-copy h3 { font-size: 1.7rem; } .collection-jumps, .contact-topics { gap: 8px; margin-bottom: 28px; } .collection-jumps a, .contact-topics a { padding: 10px 13px; font-size: 0.875rem; } .mold-option { grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "index heading" "photo photo" "description description"; gap: 20px 12px; padding: 28px 0; } .mold-option h3 { align-self: center; font-size: 1.25rem; } .option-variant { font-size: 0.8em; margin-top: 4px; } .option-photo { width: 100%; max-width: 460px; justify-self: center; border-radius: 18px; } .option-description { max-width: none; } .mold-renewal-note { padding: 18px; } .comparison-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .comparison-card figcaption { min-height: 0; } .comparison-heading br { display: none; } .mold-usage-note { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 18px; } .mold-jumps { gap: 8px; } .mold-jumps a { padding: 8px 14px; gap: 8px; } .option-index { font-size: 1.5rem; } .purchase-guide { padding: 26px; gap: 24px; } .contact-topic { padding: 23px; } .contact-topic h2 { font-size: 1.4rem; } .contact-form-section { padding: 28px; } .contact-form-intro h2 { font-size: clamp(1.3rem, 6.4vw, 1.6rem); } .contact-form-grid { grid-template-columns: 1fr; } .form-field-wide { grid-column: auto; } .form-submit-row { align-items: flex-start; flex-direction: column; } .process-list { gap: 25px; } } .goods-hero { position: relative; overflow: hidden; margin-top: 10px; border-radius: 46px 46px 0 0; background: radial-gradient(circle at 78% 28%, #fdf5e6 0, transparent 36%), linear-gradient(130deg, #e9d8e7, #e3d9ed 72%, #f2e8e8); } .goods-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(30px, 4vw, 64px); min-height: 490px; padding-block: 58px 68px; } .goods-hero-copy h1 { max-width: 12em; margin: 16px 0 24px; font-size: clamp(2.25rem, 4.2vw, 4.25rem); line-height: 1.3; } .goods-hero-copy > p:last-child { margin: 0; line-height: 2; } .goods-hero-showcase { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; width: 100%; max-width: 550px; justify-self: center; padding: 8px 8px 38px; } .goods-hero-showcase::before { content: ""; position: absolute; inset: 5% -5% 8%; z-index: -1; border: 1px solid var(--paper); border-radius: 48% 48% 36% 42%; background: color-mix(in srgb, var(--paper) 42%, transparent); transform: rotate(-8deg); } .goods-hero-item { position: relative; display: flex; min-width: 0; flex-direction: column; padding: 7px; border: 1px solid var(--paper); border-radius: 21px; background: var(--paper); box-shadow: var(--shadow-raised); text-decoration: none; transform: rotate(var(--photo-angle, -3deg)); transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); } .goods-hero-item:nth-child(even) { --photo-angle: 3deg; top: 20px; } .goods-hero-item--hagunet { --photo-angle: -2deg; } .goods-hero-item--haniwa { --photo-angle: 2deg; } .goods-hero-photo { display: block; aspect-ratio: 1.16; overflow: hidden; border-radius: 15px; background: var(--ink); } .goods-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .goods-hero-item--stapler img { object-position: 50% 60%; } .goods-hero-item--haniwa .goods-hero-photo { background: #222223; } .goods-hero-item--haniwa img { object-fit: contain; transform: scale(1.2); } .goods-hero-label { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: center; min-height: 76px; padding: 10px 6px 9px; } .goods-hero-verb { margin-bottom: 3px; color: var(--label-ink); font-size: 0.75rem; font-weight: 400; line-height: 1.5; } .goods-hero-name { color: var(--ink); font-size: clamp(0.875rem, 1.15vw, 1rem); font-weight: 700; line-height: 1.55; } .goods-hero-name > span { display: block; } .goods-hero-stamp { position: absolute; bottom: -8px; right: 6px; color: var(--label-ink); font: 700 1.15rem/1 var(--latin); letter-spacing: -0.04em; transform: rotate(-3deg); } .goods-hero-item:focus-visible { z-index: 2; outline: 3px solid var(--accent); outline-offset: 5px; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .goods-hero-item:hover { transform: translateY(-5px) rotate(0deg); } } .goods-collection { border-radius: 44px 44px 0 0; background: #fcf8ef; } .goods-shop-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px 40px; margin-block: clamp(50px, 7vw, 90px); } .goods-shop-cta h2 { margin: 8px 0 12px; font-size: clamp(1.4rem, 2.5vw, 2rem); } .goods-shop-cta p:last-child { margin: 0; color: var(--muted); } .goods-shop-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .goods-shop-actions .text-link { margin-top: 0; font-size: 0.8125rem; } .goods-section-heading { margin-bottom: 34px; } .goods-section-heading h2 { margin: 12px 0 8px; font-size: clamp(2rem, 3.5vw, 3.4rem); } .goods-section-heading > p:last-child { margin: 0; color: var(--muted); } .goods-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); } .goods-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #e5d8d8; border-radius: 28px; background: var(--goods-card-color); box-shadow: 0 18px 35px #59405012; scroll-margin-top: 16px; } .goods-card-cream { --goods-card-color: #f4e6bf; } .goods-card-lilac { --goods-card-color: #e8e0f1; } .goods-card-rose { --goods-card-color: #f1dae3; } .goods-card-pink { --goods-card-color: #f5e2e6; } .goods-card-visual { position: relative; width: 100%; aspect-ratio: 1.42; overflow: hidden; } .goods-card-visual img { width: 100%; height: 100%; object-fit: cover; } .goods-card-visual--haniwa { background: #222223; } .goods-card-visual--haniwa img { object-fit: contain; } .goods-card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 27px 29px 30px; } .goods-card-kicker { margin: 0 0 10px; font: 600 0.75rem/1.4 var(--latin); letter-spacing: 0.08em; color: var(--label-ink); } .goods-card-copy h3 { margin: 0 0 13px; font-size: clamp(1.7rem, 2.5vw, 2.4rem); } .goods-card-copy > p:not(.goods-card-kicker) { margin: 0 0 22px; line-height: 1.8; } .goods-card-copy .text-link { margin-top: auto; } .page-haniwa .story-photo img, .page-haniwa .hand-photo img { object-fit: contain; background: #29272a; } .page-hagunet .hand-photo img { object-fit: contain; background: #eae4df; } @media (max-width: 760px) { .goods-hero { border-radius: 30px 30px 0 0; } .goods-hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 32px 48px; gap: 28px; } .goods-hero-copy h1 { margin: 12px 0 18px; font-size: clamp(2rem, 8.5vw, 3.5rem); } .goods-hero-copy > p:last-child { line-height: 1.85; font-size: 0.9375rem; } .goods-hero-showcase { gap: 12px; max-width: 440px; padding: 4px 4px 26px; } .goods-hero-item { padding: 5px; border-radius: 17px; --photo-angle: -2deg; } .goods-hero-item:nth-child(even) { top: 10px; --photo-angle: 2deg; } .goods-hero-photo { border-radius: 12px; } .goods-hero-label { min-height: 70px; padding: 8px 4px; } .goods-hero-name { font-size: clamp(0.75rem, 3.1vw, 0.9375rem); } .goods-hero-verb { font-size: 0.6875rem; } .goods-hero-stamp { right: 4px; bottom: -6px; font-size: 1rem; } .goods-collection { border-radius: 28px 28px 0 0; } .goods-card-grid { grid-template-columns: minmax(0, 1fr); } .goods-card-visual { aspect-ratio: 1.25; } .goods-card-copy { padding: 23px 21px 25px; } } .alternate-shops { display: flex; flex-wrap: wrap; gap: 10px 17px; margin-top: 23px; padding-top: 17px; border-top: 1px solid #ad9bac77; font-size: 0.875rem; } .alternate-shops p { flex: 0 0 100%; margin: 0 0 2px; color: var(--muted); font-size: 0.8125rem; } .alternate-shops a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .alternate-shops a:hover { color: #873a5c; } .shops-hero { position: relative; isolation: isolate; overflow: hidden; margin-top: 12px; border-radius: 46px 46px 0 0; background: radial-gradient(circle at 82% 25%, #fff8e9 0, transparent 34%), linear-gradient(120deg, #f4e4eb, #eae2f2 78%); } .shops-hero::after { content: ""; position: absolute; width: min(42vw, 560px); aspect-ratio: 1; right: -6%; top: -36%; border: 1px solid #fff9; border-radius: 46% 54% 60% 40%; box-shadow: 0 0 0 55px #fff3, 0 0 0 110px #fff2; z-index: -1; transform: rotate(18deg); } .shops-hero-inner { padding-block: clamp(85px, 11vw, 155px); } .shops-hero h1 { margin: 15px 0 24px; max-width: 13em; font-size: clamp(3rem, 6.7vw, 6.5rem); line-height: 1.35; } .shops-hero-inner > p:last-child { max-width: 45rem; margin: 0; line-height: 2; font-size: clamp(1rem, 1.5vw, 1.25rem); } .shops-heading { margin-bottom: 32px; } .shops-heading h2 { margin: 7px 0 8px; font-size: clamp(2rem, 3.5vw, 3.2rem); } .shops-heading > p:last-child { margin: 0; color: var(--muted); } .shop-destination-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .shop-destination { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 355px; padding: clamp(27px, 3vw, 40px); border: 1px solid #ffffffae; border-radius: 30px; box-shadow: 0 20px 35px -24px #49334b42; } .shop-destination::after { content: ""; position: absolute; width: 200px; aspect-ratio: 1; right: -65px; top: -75px; border: 1px solid #fff8; border-radius: 42% 58% 48% 52%; box-shadow: 0 0 0 38px #fff3; z-index: -1; } .shop-destination-base { background: #f7e8df; } .shop-destination-minne { background: #f2dfeb; } .shop-destination-mercari { background: #e9e3f2; } .shop-number { margin: 0 0 55px; font: 700 0.75rem/1.5 var(--latin); letter-spacing: 0.11em; } .shop-destination h3 { margin: 0 0 14px; font-size: clamp(2rem, 3vw, 3.2rem); line-height: 1.3; } .shop-destination > p:not(.shop-number) { margin: 0 0 30px; line-height: 1.85; } .shop-destination > a { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid #43354557; color: var(--ink); font-weight: 700; text-decoration: none; } .shop-destination > a:hover { color: #873a5c; } .shops-fine-print { margin: 22px 0 0; color: var(--muted); font-size: 0.875rem; line-height: 1.8; } .shops-browse { display: flex; justify-content: space-between; align-items: center; gap: 35px; margin-bottom: clamp(75px, 10vw, 135px); padding: clamp(30px, 4vw, 52px); border: 1px solid #e6d4e4; border-radius: 30px; background: #fcf8f4; } .shops-browse h2 { margin: 5px 0 10px; font-size: clamp(1.7rem, 2.7vw, 2.5rem); } .shops-browse p:last-child { margin: 0; color: var(--muted); } .shops-browse-links { display: grid; min-width: min(100%, 270px); gap: 12px; } .shops-browse-links a { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid #d8c7d4; color: var(--ink); text-decoration: none; font-weight: 700; } @media (max-width: 900px) { .shop-destination-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .shop-destination:last-child { grid-column: 1 / -1; } } @media (max-width: 650px) { .shops-hero { border-radius: 30px 30px 0 0; } .shops-hero::after { width: 250px; right: -90px; top: -65px; } .shops-hero-inner { padding-block: 64px 74px; } .shops-hero h1 { font-size: clamp(2.5rem, 10vw, 4rem); } .shops-hero-inner > p:last-child br { display: none; } .shop-destination-grid { grid-template-columns: minmax(0, 1fr); } .shop-destination:last-child { grid-column: auto; } .shop-destination { min-height: 315px; } .shop-number { margin-bottom: 40px; } .shops-browse { align-items: stretch; flex-direction: column; } .shops-browse-links { min-width: 0; } } @media print { body, .home-hero, .site-footer { background: #fff; } .site-footer::after, .site-header::after, .history-timeline::after { display: none; } .maker-section-title, .case-primary { position: static; } .hero-copy h1 .hero-punch { font-size: 3rem; } }
#home-creations .shop-section-heading { align-items: flex-end; gap: 24px; margin-bottom: 30px; } #home-creations .shop-section-heading h2 { font-size: clamp(1.75rem, 2.8vw, 2.4rem); line-height: 1.5; } #home-creations .shop-section-heading .eyebrow { gap: 10px; margin-bottom: 12px; letter-spacing: 0.06em; } #home-creations .shop-section-english { color: var(--muted); font: 700 0.6875rem/1.5 var(--latin); } #home-creations .shop-section-heading p:not(.eyebrow) { font-size: 0.875rem; line-height: 1.8; margin-bottom: 8px; } #home-creations .shop-section-heading .text-link { margin-top: 0; font-size: 0.875rem; } #base-catalog-section[hidden], #base-catalog-section [hidden] { display: none !important; } #base-catalog-section { min-width: 0; scroll-margin-top: 24px; } #base-catalog-section .base-catalog-group { min-width: 0; padding: clamp(16px, 2vw, 24px); border: 1px solid var(--line); border-radius: 24px; } #base-catalog-section .base-catalog-group + .base-catalog-group { margin-top: 24px; } #base-catalog-section .base-catalog-group-molds { background: linear-gradient(120deg, var(--paper), var(--cream)); } #base-catalog-section .base-catalog-group-goods { background: linear-gradient(120deg, var(--paper), var(--lilac)); } #base-catalog-section .base-catalog-group-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; } #base-catalog-section .base-catalog-titleline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } #base-catalog-section .base-catalog-group-heading h3 { margin: 0; font: 700 clamp(1.25rem, 2vw, 1.65rem)/1.5 var(--display); } #base-catalog-section .base-catalog-titleline + p { margin: 8px 0 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.8; } #base-catalog-section .base-catalog-group-heading > .text-link { flex-shrink: 0; margin: 0; font-size: 0.8125rem; } #base-catalog-section .base-catalog-kicker { margin: 0; padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font: 700 0.8125rem/1.5 var(--display); letter-spacing: 0.08em; } #base-catalog-section .base-catalog-grid { --catalog-gap: 20px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 12px - var(--catalog-gap) * 3) / 4); gap: var(--catalog-gap); min-width: 0; margin: -8px -6px 0; padding: 8px 6px 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 6px; scrollbar-width: thin; scrollbar-color: var(--label-ink) transparent; } #base-catalog-section .base-catalog-grid:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 12px; } #base-catalog-section .base-catalog-card { min-width: 0; margin: 0; scroll-snap-align: start; } #base-catalog-section .base-catalog-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; } #base-catalog-section .base-catalog-scroll-hint { margin: 0; color: var(--label-ink); font-size: 0.8125rem; line-height: 1.7; } #base-catalog-section .base-catalog-navigation { display: flex; align-items: center; gap: 10px; margin-left: auto; } #base-catalog-section .base-catalog-status { min-width: 72px; margin: 0 6px 0 0; color: var(--label-ink); font: 400 0.75rem/1.5 var(--body); font-variant-numeric: tabular-nums; text-align: right; } #base-catalog-section .base-catalog-scroll-button { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; padding: 0; border: 1px solid var(--label-ink); border-radius: 50%; background: var(--paper); color: var(--ink); font: 400 1.35rem/1 var(--body); cursor: pointer; } #base-catalog-section .base-catalog-scroll-button:disabled { opacity: 0.35; cursor: default; } #base-catalog-section .base-catalog-scroll-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; } #base-catalog-section .base-catalog-controls[data-scrollable="false"] .base-catalog-scroll-hint, #base-catalog-section .base-catalog-controls[data-scrollable="false"] .base-catalog-scroll-button { display: none; } #base-catalog-section .base-catalog-link { display: flex; flex-direction: column; height: 100%; min-width: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--ink); text-decoration: none; transition: transform 180ms var(--ease); } #base-catalog-section .base-catalog-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; } #base-catalog-section .base-catalog-media { display: grid; place-items: center; width: 100%; min-width: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); } #base-catalog-section .base-catalog-image { display: block; width: 100%; height: 100%; min-width: 0; aspect-ratio: 1; object-fit: contain; } #base-catalog-section .base-catalog-image-fallback { padding: 16px; color: var(--muted); font-size: 0.8125rem; line-height: 1.7; text-align: center; } #base-catalog-section .base-catalog-title { min-height: 3.3em; margin: 12px 0 10px; font-family: var(--body); font-size: 0.875rem; font-weight: 700; line-height: 1.65; overflow-wrap: anywhere; text-wrap: initial; } #base-catalog-section .base-catalog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto; } #base-catalog-section .base-catalog-price { margin: 0; font-family: var(--latin); font-size: 1rem; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; } #base-catalog-section .base-catalog-sold-out { display: inline-block; padding: 2px 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-family: var(--latin); font-size: 0.6875rem; font-weight: 700; line-height: 1.6; letter-spacing: 0.04em; } #base-catalog-section .base-catalog-action { display: block; margin-top: 8px; color: var(--accent); font-size: 0.75rem; font-weight: 700; line-height: 1.6; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } #base-catalog-section #base-catalog-updated { color: var(--muted); font-size: 0.8125rem; overflow-wrap: anywhere; } #base-catalog-section .base-catalog-note { margin: 24px 4px 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.8; } #base-catalog-section .base-catalog-fallback { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(20px, 4vw, 48px); padding: clamp(16px, 2.5vw, 32px); border-radius: 22px; background: var(--paper); } #base-catalog-section .base-catalog-fallback > img { width: 100%; max-height: 300px; object-fit: contain; border-radius: 16px; } #base-catalog-section .base-catalog-fallback-label { margin: 0; font: 700 clamp(1.1rem, 2vw, 1.5rem)/1.7 var(--display); } #base-catalog-section .base-catalog-fallback p:not(.base-catalog-fallback-label) { font-size: 0.9375rem; line-height: 1.9; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { #base-catalog-section .base-catalog-link:hover { transform: translateY(-2px); } #base-catalog-section .base-catalog-link:hover .base-catalog-title { text-decoration: underline; text-underline-offset: 4px; } #base-catalog-section .base-catalog-scroll-button:not(:disabled):hover { background: var(--ink); color: var(--paper); } } @media (max-width: 1000px) { #base-catalog-section .base-catalog-grid { --catalog-gap: 16px; grid-auto-columns: calc((100% - 12px - var(--catalog-gap) * 2) / 3); } } @media (max-width: 760px) { #home-creations > .shell { width: calc(100% - 32px); } #home-creations .shop-section-heading { gap: 16px; margin-bottom: 24px; } #home-creations .shop-section-heading h2 { font-size: clamp(1.5rem, 6.2vw, 1.875rem); } #home-creations .shop-section-heading p:not(.eyebrow) { font-size: 0.8125rem; } #base-catalog-section .base-catalog-group { padding: 16px 12px; border-radius: 18px; } #base-catalog-section .base-catalog-group-heading { display: block; margin-bottom: 16px; } #base-catalog-section .base-catalog-group-heading > .text-link { margin-top: 8px; padding-bottom: 4px; } #base-catalog-section .base-catalog-group-heading h3 { font-size: clamp(1.125rem, 4.8vw, 1.5rem); } #base-catalog-section .base-catalog-titleline { gap: 8px; } #base-catalog-section .base-catalog-titleline + p { font-size: 0.75rem; } #base-catalog-section .base-catalog-grid { --catalog-gap: 12px; grid-auto-columns: calc((100% - 12px - var(--catalog-gap)) / 2); } #base-catalog-section .base-catalog-fallback { grid-template-columns: minmax(0, 1fr); gap: 18px; } #base-catalog-section .base-catalog-fallback > img { max-height: 240px; } #base-catalog-section .base-catalog-title { font-size: 0.8125rem; } #base-catalog-section .base-catalog-controls { gap: 6px 8px; } #base-catalog-section .base-catalog-scroll-hint { font-size: 0.75rem; } #base-catalog-section .base-catalog-navigation { gap: 6px; } #base-catalog-section .base-catalog-status { min-width: 0; margin-right: 2px; font-size: 0.6875rem; } } @media (prefers-reduced-motion: reduce) { #base-catalog-section .base-catalog-link { transition: none; } }