:root {
    color-scheme: light;
    --paper: #f7f4ed;
    --parchment: #f0ebe1;
    --ink: #252620;
    --muted: #55574b;
    --olive: #454e35;
    --olive-dark: #323b26;
    --rule: #d8d1c3;
    --serif: Georgia, 'Times New Roman', serif;
    --gutter: 24px;
    --header-height: 68px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 16px/1.65 system-ui, -apple-system, 'Segoe UI', sans-serif;
    overflow-wrap: anywhere;
}

img, video { display: block; max-width: 100%; }
figure, blockquote, h1, h2, h3, p, dl, dd { margin: 0; }
a { color: inherit; text-underline-offset: .23em; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #68754a; outline-offset: 4px; }
[id] { scroll-margin-top: calc(var(--header-offset, var(--header-height)) + 16px); }
#atas, #isi { scroll-margin-top: 0; }

h1, h2, h3, .wordmark { font-family: var(--serif); font-weight: 400; }
h1 { font-size: 62px; line-height: 1.04; white-space: pre-line; }
h2 { font-size: 42px; line-height: 1.15; }
h3 { font-size: 25px; line-height: 1.18; }
.shell { width: min(calc(100% - 2 * var(--gutter)), 1160px); margin-inline: auto; }
.skip { position: fixed; z-index: 10; top: 8px; left: 8px; padding: 8px 16px; background: var(--paper); }
.skip:not(:focus) { clip-path: inset(50%); }

.site-header {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.nav-shell {
    position: relative;
    width: min(calc(100% - 2 * var(--gutter)), 1320px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--header-height);
    padding-block: 9px;
}

.wordmark {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 26px;
    line-height: 1.12;
    text-decoration: none;
}

.wordmark img { width: 38px; height: 38px; object-fit: contain; flex: none; }
.site-header .wordmark { max-width: 33%; }
.main-nav, .nav-actions, .hero-actions, .social-links { display: flex; align-items: center; gap: 20px; }
.main-nav { flex-wrap: wrap; justify-content: center; }
.main-nav a { text-decoration: none; }
.main-nav a:hover, .social-links a:hover { color: var(--olive); text-decoration: underline; }
.nav-actions { gap: 8px; min-width: 0; }
.nav-actions:empty { display: none; }

.button, .menu-toggle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 17px;
    border: 1px solid var(--olive);
    border-radius: 999px;
    background: var(--paper);
    color: var(--olive);
    font: 600 16px/1.28 system-ui, sans-serif;
    text-decoration: none;
    text-align: center;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.button:hover, .menu-toggle:hover { background: #e8eadd; }
.button--primary { background: var(--olive); color: #fffdf6; }
.button--primary:hover { background: var(--olive-dark); color: white; }
.menu-toggle { cursor: pointer; }
.text-link { color: var(--olive-dark); font-weight: 600; padding-block: 10px; }
.text-link:hover { color: var(--ink); }

.hero {
    position: relative;
    display: grid;
    isolation: isolate;
    background: var(--parchment);
    min-height: 340px;
}

.hero--photo { min-height: clamp(475px, calc(100svh - 180px), 640px); }
.hero-photo, .hero--photo::after { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-photo { object-fit: cover; object-position: 50% 53%; z-index: -2; }
.hero--photo::after {
    content: '';
    z-index: -1;
    background: linear-gradient(90deg, #f4eee3f7 0%, #f4eee3ed 22%, #f4eee39c 44%, #f4eee328 61%, transparent 74%);
}
.is-demo .hero--photo::after {
    background: linear-gradient(90deg, #f4eee3c9 0%, #f4eee3ae 27%, #f4eee34f 42%, transparent 63%);
}

.hero--media-only::after { content: none; }
.hero-inner { display: flex; align-items: center; padding-block: 54px; }
.hero-copy { max-width: 530px; }
.hero-name, .kicker { color: var(--olive-dark); font-weight: 650; letter-spacing: .04em; }
.hero-name { margin-bottom: 12px; }
.hero-description { margin-top: 18px; max-width: 39ch; font-size: 17px; }
.hero-actions { margin-top: 24px; gap: 14px 22px; flex-wrap: wrap; }

.section { padding-block: 76px; position: relative; background: var(--paper); }
.section-heading .kicker { margin-bottom: 5px; }
.products .section-heading { margin-bottom: 31px; }
.products-layout { max-width: 840px; }
.products-layout.has-photo {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(30px, 6vw, 90px);
    align-items: start;
    max-width: none;
}

.product-photo img { width: 100%; max-height: 540px; object-fit: contain; object-position: top left; }
.is-demo .product-photo img { aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 54%; }
.line-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.line-list li { border-bottom: 1px solid var(--rule); padding-block: 14px 15px; }
.line-list p { margin-top: 4px; color: var(--muted); }
.line-list p:first-child { margin-top: 0; }

.about { background: var(--parchment); }
.about-intro, .editorial-row {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(26px, 6vw, 90px);
    align-items: start;
}
.about-intro > p { max-width: 56ch; }
.about-photos {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    gap: 18px;
    margin-top: 32px;
}

.about-lead-photo { grid-column: span 9; }
.about-lead-photo:only-child { grid-column: span 12; }
.about-detail { grid-column: span 4; }
.about-lead-photo + .about-detail { grid-column: span 3; }
.about-photos img { width: 100%; max-height: 620px; object-fit: contain; object-position: center left; }
.about-detail img { max-height: 330px; }

.gallery-layout {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 18px;
    margin-top: 26px;
}
.gallery-layout figure:first-child { grid-column: span 2; }
.gallery-layout a { display: block; }
.gallery-layout img { width: 100%; height: auto; max-height: 460px; object-fit: contain; }
.gallery-layout figure:first-child:last-child { grid-column: span 3; }

.testimonials, .contact { background: var(--parchment); }
.quotes { border-top: 1px solid var(--rule); }
.quotes > figure { border-bottom: 1px solid var(--rule); padding-block: 19px; }
.quotes blockquote { font: 400 24px/1.35 var(--serif); }
.quotes figcaption { display: flex; gap: 11px; align-items: center; margin-top: 9px; }
.quotes figcaption img { border-radius: 50%; object-fit: cover; flex: none; }
.quotes figcaption strong, .quotes figcaption span span { display: block; }
.quotes figcaption span span { color: var(--muted); }
.contact p { margin-top: 10px; }
.contact dl { display: grid; grid-template-columns: minmax(70px, 25%) minmax(0, 1fr); gap: 10px 16px; }
.contact dt { color: var(--muted); }
.contact .button { margin-top: 20px; }

.scenic-chapter {
    position: relative;
    isolation: isolate;
    background: #20271e;
}
.scenic {
    position: absolute;
    inset: 0;
    z-index: -1;
    --bleed: 40px;
    --scene-position: 50% 50%;
}
.scenic--opening { --scene-position: 50% 54%; }
.scenic--workbench, .scenic--packing { --scene-position: 50% 34%; }
.scenic--oven { --scene-position: 50% 53%; }
.scenic-media {
    position: sticky;
    top: var(--header-height);
    height: min(100%, 65svh, 56.25vw);
    min-height: min(100%, 250px);
    overflow: clip;
    mask-image: linear-gradient(#000 74%, transparent);
}
.scenic-media img, .scenic-media video {
    position: absolute;
    inset: calc(-1 * var(--bleed)) 0 auto;
    width: 100%; height: calc(100% + 2 * var(--bleed)); object-fit: cover; object-position: var(--scene-position);
    transform: translateY(var(--scene-shift, 0px));
}
.scenic-media video { visibility: hidden; }
.scenic-media video.is-playing { visibility: visible; }
.scenic-chapter > .section {
    --ink: #fffdf6;
    --muted: #f0eee5;
    --rule: #ffffff60;
    color: var(--ink);
    background: linear-gradient(110deg, #192118bd, #19211865);
}
.scenic-chapter :is(h2, h3, .kicker) { color: var(--ink); }
.scenic-chapter .button:not(.button--primary) { background: #fffdf6; color: #20271e; }

.site-footer { border-top: 1px solid var(--rule); }
.footer-inner { padding-block: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }
.footer-inner > p { color: var(--muted); margin-left: auto; }
.social-links { flex-wrap: wrap; }

@media (max-width: 1024px) {
    h1 { font-size: 56px; }
    h2 { font-size: 38px; }
    .nav-shell { gap: 14px; }
    .main-nav { gap: 9px 14px; }
}

@media (max-width: 960px) {
    :root { --header-height: 60px; }
    .nav-shell { flex-wrap: wrap; }
    .site-header .wordmark { max-width: 50%; }
    .main-nav { order: 3; width: 100%; padding-block: 7px; justify-content: flex-start; }
    .nav-shell.is-enhanced .main-nav {
        position: absolute;
        top: 100%;
        right: 0;
        width: min(320px, 100%);
        display: grid;
        gap: 0;
        max-height: 68svh;
        overflow-y: auto;
        border: 1px solid var(--rule);
        background: var(--paper);
        padding: 6px 16px;
    }
    .nav-shell.is-enhanced .main-nav a { padding: 10px 5px; border-bottom: 1px solid var(--rule); }
    .nav-shell.is-enhanced .main-nav a:last-child { border-bottom: 0; }
    .section { padding-block: 60px; }
}

@media (max-width: 620px) {
    :root { --gutter: 20px; }
    h1 { font-size: 38px; }
    h2 { font-size: 31px; }
    h3 { font-size: 22px; }
    .wordmark { font-size: 23px; }
    .wordmark img { width: 30px; height: 30px; }
    .nav-shell { width: calc(100% - 28px); }
    .nav-actions { flex: 0 1 auto; max-width: 62%; }
    .site-header .wordmark { max-width: 42%; }
    .nav-actions .button, .menu-toggle { padding-inline: 11px; }
    .nav-actions .button span, .menu-toggle span { display: none; }

    .hero--photo { min-height: clamp(420px, calc(100svh - 145px), 570px); }
    .hero-inner { align-items: flex-end; padding-block: 40px 31px; }
    .hero-photo { object-position: 86% 50%; }
    .hero--photo::after, .is-demo .hero--photo::after {
        background: linear-gradient(0deg, #f4eee3fc 0%, #f4eee3f3 31%, #f4eee3d9 45%, #f4eee36b 59%, transparent 77%);
    }
    .hero--media-only::after { content: none; }
    .hero-description { margin-top: 12px; font-size: 16px; }
    .hero-name { margin-bottom: 7px; }
    .hero-actions { margin-top: 17px; gap: 2px 14px; }
    .section { padding-block: 39px; }
    .products .section-heading { margin-bottom: 19px; }
    .products-layout.has-photo, .about-intro, .editorial-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .product-photo img { max-height: 350px; }
    .about-photos { gap: 12px; margin-top: 19px; }
    .about-lead-photo { grid-column: 1 / -1; }
    .about-detail, .about-lead-photo + .about-detail { grid-column: span 6; }
    .gallery-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
    .gallery-layout figure:first-child:last-child { grid-column: span 2; }
    .scenic {
        --bleed: 22px;
    }
    .footer-inner { align-items: flex-start; }
    .footer-inner > p { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
    .scenic-media img { transform: none; }
    .scenic-media video { visibility: hidden !important; }
}

@media (min-width: 961px) {
    .main-nav { order: 1; }
    .nav-actions { order: 2; }
}