/* ============================================================
   Home page: hero, motion and the sections around it.
   ============================================================ */

/* ---- hero ---- */
/* clipped sideways only: the search's suggestion list must be free to
   hang below the search box, over the buttons and past the section's edge */
.hero { background: #fff; padding: 46px 0 78px; overflow: visible; overflow-x: clip; }
.hero-copy { max-width: 530px; padding: 26px 0; }
.hero-title {
    font-family: "Playfair Display", serif;
    font-size: 56px;
    line-height: 1.08;
    color: var(--ink);
    margin: 0 0 22px;
    font-weight: 400;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span {
    display: block;
    transform: translateY(105%);
    animation: rise .9s cubic-bezier(.22, .7, .2, 1) forwards;
}
.hero-title .line:nth-child(1) > span { animation-delay: .05s; }
.hero-title .line:nth-child(2) > span { animation-delay: .17s; }
.hero-title .line:nth-child(3) > span { animation-delay: .29s; }
@keyframes rise { to { transform: translateY(0); } }

.hero-lede { font-size: 16px; line-height: 29px; color: var(--ink-soft); margin: 0 0 26px; max-width: 450px; }

.hero-search {
    position: relative; z-index: 100; /* the theme lifts .cr-btn to 99: the suggestions must still win */
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    background: #fff;
    padding: 6px 6px 6px 16px;
    max-width: 460px;
    box-shadow: 0 12px 30px -26px rgba(34, 31, 29, .5);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.hero-search:focus-within { border-color: var(--ink); box-shadow: 0 14px 34px -24px rgba(34, 31, 29, .55); }
.hero-search i { color: #b9aca5; font-size: 15px; }
.hero-search input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    height: 44px;
    font-size: 14px;
    color: var(--ink);
    background: transparent;
    box-shadow: none !important;
}
.hero-search input::placeholder { color: #b0a49d; }
.hero-search button {
    border: 0;
    background: var(--ink);
    color: #fff;
    height: 44px;
    padding: 0 22px;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .3s ease;
}
.hero-search button:hover { background: var(--accent-deep); }

.hero-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: #9c918b; }
.hero-chips a { color: var(--ink-soft); border-bottom: 1px solid transparent; }
.hero-chips a:hover { color: var(--accent-deep); border-color: currentColor; }

.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
.hero-actions .btn-style { padding: 16px 34px; z-index: 1; }

.hero-media { position: relative; padding-left: 22px; }
.hero-media-tint { position: absolute; left: 62px; right: 0; top: 38px; bottom: 34px; background: #f7ece8; }

/* the hero rotates through the featured pieces */
.hero-slider { position: relative; outline: none; }
.hero-slider:focus-visible { box-shadow: 0 0 0 3px rgba(243, 163, 149, .45); }
.hero-stage { position: relative; height: 520px; }
.hero-slide {
    position: absolute; inset: 0;
    opacity: 0; pointer-events: none;
    transition: opacity .9s ease;
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-photo { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--paper-warm); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slide.is-active .hero-photo img { animation: kenburns 14s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
.hero-tag {
    position: absolute; left: 0; top: 22px;
    background: var(--ink); color: #fff;
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    padding: 6px 12px;
}
.hero-card {
    position: absolute; left: -22px; bottom: 24px;
    display: flex; align-items: center; gap: 12px;
    background: #fff; padding: 12px 18px 12px 12px;
    box-shadow: 0 18px 40px -22px rgba(34, 31, 29, .45);
    text-decoration: none;
    transition: transform .3s ease;
}
.hero-card:hover { transform: translateY(-3px); }
.hero-card img { width: 46px; height: 46px; object-fit: cover; display: block; }
.hero-card strong { display: block; font-size: 13px; color: var(--ink); font-weight: 500; }
.hero-card em { display: block; font-size: 13px; color: var(--accent-deep); font-style: normal; }
/* the owner's own slide: the card is a caption rather than a product */
.hero-card-story { padding: 14px 22px 14px 18px; border-left: 3px solid var(--accent); }
.hero-card-story strong { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 400; line-height: 1.2; }
.hero-card-story em { margin-top: 3px; }

.hero-nav {
    position: absolute; right: 18px; bottom: 22px; z-index: 2;
    display: flex; align-items: center; gap: 4px;
    background: rgba(255, 255, 255, .95);
    padding: 5px 10px;
    box-shadow: 0 14px 34px -24px rgba(34, 31, 29, .5);
}
.hero-arrow {
    border: 0; background: none; cursor: pointer;
    width: 30px; height: 30px; line-height: 1;
    color: var(--ink); font-size: 15px;
    transition: color .25s ease;
}
.hero-arrow:hover { color: var(--accent-deep); }
.hero-count { font-size: 11px; letter-spacing: .12em; color: #a9a29d; padding: 0 4px; }
.hero-count b { color: var(--ink); font-weight: 500; }
.hero-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(34, 31, 29, .1); z-index: 2; }
.hero-progress span { display: block; height: 100%; width: 0; background: var(--accent-deep); }
@keyframes heroFill { from { width: 0; } to { width: 100%; } }

/* two more pieces beside the slider, so the first screen shows the range */
.hero-media.has-picks { display: grid; grid-template-columns: minmax(0, 1fr) 36%; gap: 16px; align-items: stretch; }
.hero-media.has-picks .hero-media-tint { right: 38%; }
.has-picks .hero-stage { height: 500px; }
.hero-picks { position: relative; z-index: 1; display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.hero-pick {
    position: relative; display: block; overflow: hidden;
    background: var(--paper-warm); text-decoration: none;
}
.hero-pick img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .9s cubic-bezier(.22, .7, .2, 1);
}
.hero-pick:hover img { transform: scale(1.06); }
.hero-pick::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
    background: linear-gradient(to top, rgba(28, 23, 21, .72), rgba(28, 23, 21, 0));
}
.hero-pick-tag {
    position: absolute; left: 12px; top: 12px; z-index: 1;
    background: #fff; color: var(--ink);
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    padding: 5px 10px;
}
.hero-pick-text { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; color: #fff; }
.hero-pick-text strong {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13px; font-weight: 500; line-height: 1.35;
}
.hero-pick-text em { display: block; font-style: normal; font-size: 13px; color: #f8cfc4; margin-top: 2px; }
.hero-pick:hover .hero-pick-text strong { text-decoration: underline; text-underline-offset: 3px; }

/* ---- marquee ---- */
.marquee { background: var(--ink); color: #efe7e3; overflow: hidden; padding: 13px 0; }
.marquee-track {
    display: flex; align-items: center; gap: 26px; width: max-content;
    animation: slide 38s linear infinite;
    font-size: 12px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
}
.marquee .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); display: inline-block; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---- trust strip ---- */
.trust-strip { padding: 30px 0; }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
.trust-grid > div { display: flex; align-items: center; gap: 14px; }
.trust-grid i { font-size: 24px; color: var(--ink); }
.trust-grid strong { display: block; font-size: 14px; color: var(--ink); font-weight: 500; }
.trust-grid span { font-size: 13px; color: #8a807a; }

/* ---- category tiles ---- */
.cat-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 210px; gap: 18px; }
.cat-tile { position: relative; display: block; overflow: hidden; background: var(--paper-warm); text-decoration: none; }
.cat-tile img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.1s cubic-bezier(.2, .6, .2, 1);
}
.cat-tile:hover img { transform: scale(1.07); }
.cat-veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20, 17, 16, 0) 38%, rgba(20, 17, 16, .62) 100%);
    transition: background .4s ease;
}
.cat-tile:hover .cat-veil { background: linear-gradient(180deg, rgba(20, 17, 16, .12) 20%, rgba(20, 17, 16, .72) 100%); }
.cat-copy { position: absolute; left: 24px; right: 20px; bottom: 22px; color: #fff; transition: transform .4s cubic-bezier(.2, .6, .2, 1); }
.cat-tile:hover .cat-copy { transform: translateY(-4px); }
.cat-copy em { display: block; font-style: normal; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .85; margin-bottom: 5px; }
.cat-copy strong { display: block; font-family: "Playfair Display", serif; font-size: 24px; font-weight: 400; line-height: 1.1; }
.cat-copy strong.big { font-size: 34px; }
.cat-copy i {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    font-style: normal; font-size: 13px; line-height: 1.5; margin-top: 8px; opacity: .9;
}

/* ---- last one left ---- */
.last-ones { background: var(--ink); }
.last-ones .section-head h2 { color: #fff; }
.last-ones .section-head p { color: #b3a8a2; }
.last-ones .product-wrapper { background: transparent; }
.last-ones .product-content > h4 a { color: #fff; }
.last-ones .product-price > span { color: #fff; }
.last-ones .product-price > span.old { color: #8d827c; }
.last-ones .product-wrapper:hover { box-shadow: none; }
.last-ones .product-wrapper .h13 { border-color: #6d635e; color: #fff; }
.last-ones .product-wrapper .h13:hover { background: #fff; color: var(--ink); }

/* ---- maker ---- */
.maker { background: var(--paper-warm); }
.maker-photo { position: relative; }
.maker-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.maker-badge {
    position: absolute; right: -14px; bottom: 26px;
    background: #fff; padding: 14px 20px;
    box-shadow: 0 18px 40px -24px rgba(34, 31, 29, .5);
}
.maker-badge strong { display: block; font-size: 13px; color: var(--ink); font-weight: 500; }
.maker-badge em { display: block; font-style: normal; font-size: 12px; color: var(--accent-deep); letter-spacing: .08em; }
.maker-copy { padding-left: 44px; max-width: 560px; }
.maker-copy h2 { font-family: "Playfair Display", serif; font-size: 36px; line-height: 1.15; font-weight: 400; margin: 0 0 16px; color: var(--ink); }
.maker-copy > p { font-size: 15px; line-height: 27px; margin: 0 0 30px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 22px; margin-bottom: 30px; }
.steps > div { background: #fff; padding: 24px 22px; }
.steps em { display: block; font-family: "Playfair Display", serif; font-style: normal; font-size: 24px; color: var(--accent); margin-bottom: 10px; }
.steps strong { display: block; font-size: 14px; color: var(--ink); font-weight: 500; margin-bottom: 6px; }
.steps span { font-size: 13px; line-height: 21px; color: #8a807a; }

/* ---- photo wall ---- */
.photo-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.photo-wall a { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper-warm); }
.photo-wall img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .6, .2, 1), opacity .3s ease; }
.photo-wall a:hover img { transform: scale(1.08); opacity: .92; }

/* ---- closing ---- */
.closing { background: var(--ink); padding: 74px 0; }
.closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.closing h2 { font-family: "Playfair Display", serif; font-size: 30px; font-weight: 400; color: #fff; margin: 0 0 8px; }
.closing p { color: #b3a8a2; font-size: 14px; margin: 0; }
.closing-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.closing-actions .btn-style { background: var(--accent); border-color: var(--accent); padding: 15px 28px; }
.closing-actions .btn-style:hover { background: #fff; border-color: #fff; color: var(--ink); }
.closing-actions .ghost {
    display: inline-flex; align-items: center; padding: 15px 26px;
    border: 1px solid #57504c; color: #fff;
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
    transition: border-color .3s ease, background .3s ease;
}
.closing-actions .ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }

/* ---- scroll reveal ---- */
html.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, .7, .2, 1); }
html.js-reveal .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .hero-title .line > span { transform: none; animation: none; }
    .hero-slide.is-active .hero-photo img { animation: none; }
    .hero-slide { transition: none; }
    .hero-progress { display: none; }
    .marquee-track { animation: none; }
    html.js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- responsive ---- */
/* the copy's column is narrower beside the picks: the heading steps down a size */
@media (min-width: 992px) {
    .row:has(.has-picks) .hero-title { font-size: 50px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .row:has(.has-picks) .hero-title { font-size: 40px; }
    .has-picks .hero-stage { height: 440px; }
}
@media (max-width: 1199px) {
    .hero-title { font-size: 46px; }
    .maker-copy { padding-left: 24px; }
}
@media (max-width: 991px) {
    .section { padding: 72px 0 56px; }
    .hero-copy { max-width: none; }
    .hero-media { padding-left: 0; margin-bottom: 30px; }
    .hero-stage { height: 420px; }
    .hero-card { left: 0; }
    /* the picks go under the slider, side by side */
    .hero-media.has-picks { grid-template-columns: 1fr; }
    .hero-media.has-picks .hero-media-tint { display: none; }
    .has-picks .hero-stage { height: 420px; }
    .hero-picks { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
    .hero-pick { aspect-ratio: 1 / 1; }
    /* the card owns the bottom of the photo here, so the arrows move up top */
    .hero-nav { top: 16px; right: 14px; bottom: auto; }
    .cat-grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 200px; }
    .cat-tile { grid-column: span 1 !important; grid-row: span 1 !important; }
    .cat-copy strong.big { font-size: 26px; }
    .maker-copy { padding-left: 0; margin-top: 40px; }
    .photo-wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
    .hero-title { font-size: 38px; }
    .section-head h2, .maker-copy h2 { font-size: 28px; }
    .cat-grid { grid-template-columns: 1fr !important; grid-auto-rows: 220px; }
    /* the line's collections in two lines at most, under its name, never over it */
    .cat-copy { left: 18px; right: 16px; bottom: 18px; }
    .cat-copy i { -webkit-line-clamp: 2; font-size: 12px; }
    .hero-search { flex-wrap: wrap; padding: 10px; gap: 8px; }
    .hero-search i { display: none; }
    .hero-search input { flex-basis: 100%; height: 46px; padding: 0 12px; background: var(--paper-warm); }
    .hero-search button { width: 100%; height: 46px; }
    .hero-card { padding: 10px 14px 10px 10px; }
    .hero-card img { width: 40px; height: 40px; }
    .photo-wall { grid-template-columns: repeat(2, 1fr); }
}