/* Bikaro.site — Multi-Frame Layout #94
   Palette: muted luxury · parchment / ink / copper / sage
   Typography: Cormorant Garamond + DM Sans + IBM Plex Mono */

:root {
    --bk-parchment: #F3EDE4;
    --bk-paper: #FAF7F2;
    --bk-ink: #1C1917;
    --bk-ink-soft: #44403C;
    --bk-copper: #B87333;
    --bk-copper-light: #D4956A;
    --bk-sage: #6B7F6A;
    --bk-sage-muted: #A8B5A7;
    --bk-shadow: rgba(28, 25, 23, 0.12);
    --bk-shadow-deep: rgba(28, 25, 23, 0.22);
    --bk-frame-border: 3px solid var(--bk-ink);
    --bk-rail-w: 72px;
    --bk-font-serif: 'Cormorant Garamond', Georgia, serif;
    --bk-font-sans: 'DM Sans', system-ui, sans-serif;
    --bk-font-mono: 'IBM Plex Mono', monospace;
    --bk-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body.bk-body {
    font-family: var(--bk-font-sans);
    background: var(--bk-paper);
    color: var(--bk-ink);
    line-height: 1.65;
    overflow-x: hidden;
}

body.menu-open,
body.search-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }

.bk-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}

.bk-skip {
    position: absolute; top: -100px; left: 1rem; z-index: 9999;
    padding: .5rem 1rem; background: var(--bk-ink); color: var(--bk-paper);
}
.bk-skip:focus { top: 1rem; }

.bk-micro {
    font-family: var(--bk-font-mono);
    font-size: .65rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bk-sage);
}

.bk-wrap {
    width: min(1140px, 92vw);
    margin-inline: auto;
}

/* ── Left Rail Nav ── */
.bk-rail {
    position: fixed;
    top: 0; left: 0;
    width: var(--bk-rail-w);
    height: 100vh;
    z-index: 200;
    background: var(--bk-ink);
    color: var(--bk-paper);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 0;
    border-right: 1px solid rgba(255,255,255,.06);
}

.bk-rail__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    margin-bottom: 2rem;
    transition: opacity .3s;
}
.bk-rail__logo:hover { opacity: .75; }

.bk-rail__kanji {
    font-family: var(--bk-font-serif);
    font-size: 1.6rem;
    color: var(--bk-copper-light);
    line-height: 1;
}

.bk-rail__name {
    font-family: var(--bk-font-mono);
    font-size: .55rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.bk-rail__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.bk-rail__link {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: .72rem;
    letter-spacing: .08em;
    padding: .75rem .5rem;
    opacity: .55;
    transition: opacity .25s, color .25s;
    position: relative;
}
.bk-rail__link span {
    display: block;
    font-family: var(--bk-font-mono);
    font-size: .55rem;
    opacity: .4;
    margin-bottom: .35rem;
}
.bk-rail__link:hover,
.bk-rail__link.is-active { opacity: 1; color: var(--bk-copper-light); }

.bk-rail__tools {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1rem;
}

.bk-rail__icon {
    background: none; border: none; cursor: pointer;
    color: var(--bk-paper); opacity: .6;
    padding: .35rem; position: relative;
    transition: opacity .25s;
}
.bk-rail__icon:hover { opacity: 1; }

.bk-rail__badge,
.bk-topbar__badge {
    position: absolute; top: -2px; right: -4px;
    background: var(--bk-copper);
    color: #fff;
    font-size: .55rem;
    min-width: 14px; height: 14px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

.bk-rail__meta {
    font-family: var(--bk-font-mono);
    font-size: .5rem;
    letter-spacing: .1em;
    opacity: .35;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* ── Mobile Topbar ── */
.bk-topbar {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; z-index: 300;
    padding: .85rem 1.25rem;
    background: rgba(243, 237, 228, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(28,25,23,.06);
    align-items: center;
    justify-content: space-between;
    transition: box-shadow .3s;
}
.bk-topbar.is-scrolled { box-shadow: 0 4px 24px var(--bk-shadow); }

.bk-topbar__logo {
    font-family: var(--bk-font-serif);
    font-size: 1.35rem;
    font-weight: 600;
}

.bk-topbar__actions { display: flex; align-items: center; gap: .5rem; }

.bk-topbar__btn {
    background: none; border: none; cursor: pointer;
    padding: .4rem; position: relative; color: var(--bk-ink);
}

.bk-burger {
    background: none; border: none; cursor: pointer;
    width: 28px; height: 20px;
    display: flex; flex-direction: column;
    justify-content: space-between; padding: 0;
}
.bk-burger span {
    display: block; height: 2px;
    background: var(--bk-ink);
    transition: transform .3s;
}

.bk-mobile {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(28,25,23,.6);
    opacity: 0; visibility: hidden;
    transition: opacity .35s, visibility .35s;
}
.bk-mobile.is-open { opacity: 1; visibility: visible; }

.bk-mobile__panel {
    position: absolute; top: 0; right: 0;
    width: min(300px, 85vw); height: 100%;
    background: var(--bk-ink);
    color: var(--bk-paper);
    padding: 2.5rem 2rem;
    transform: translateX(100%);
    transition: transform .4s var(--bk-ease);
    display: flex; flex-direction: column; gap: 1.25rem;
}
.bk-mobile.is-open .bk-mobile__panel { transform: translateX(0); }

.bk-mobile__panel a {
    font-family: var(--bk-font-serif);
    font-size: 1.4rem;
    opacity: .75;
    transition: opacity .2s;
}
.bk-mobile__panel a:hover { opacity: 1; }
.bk-mobile__phone {
    margin-top: auto;
    font-family: var(--bk-font-mono);
    font-size: .75rem;
    opacity: .5;
}

/* ── Search Overlay ── */
.bk-search {
    position: fixed; inset: 0; z-index: 500;
    opacity: 0; visibility: hidden;
    transition: opacity .35s, visibility .35s;
}
.bk-search.is-open { opacity: 1; visibility: visible; }

.bk-search__backdrop {
    position: absolute; inset: 0;
    background: rgba(28,25,23,.7);
}

.bk-search__panel {
    position: relative; z-index: 1;
    max-width: 520px; margin: 15vh auto 0;
    background: var(--bk-paper);
    padding: 2.5rem;
    border: var(--bk-frame-border);
    box-shadow: 12px 12px 0 var(--bk-shadow-deep);
}

.bk-search__close {
    position: absolute; top: 1rem; right: 1rem;
    background: none; border: none; font-size: 1.5rem;
    cursor: pointer; color: var(--bk-ink);
}

.bk-search__panel input {
    width: 100%; padding: .75rem 0;
    border: none; border-bottom: 1px solid var(--bk-ink);
    background: transparent; font-size: 1.1rem;
    font-family: var(--bk-font-serif);
    margin: 1rem 0 1.5rem;
    outline: none;
}

/* ── Main Layout ── */
.bk-main {
    margin-left: var(--bk-rail-w);
    min-height: 100vh;
}

/* ── Buttons ── */
.bk-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .75rem 1.75rem;
    font-family: var(--bk-font-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: none; cursor: pointer;
    transition: transform .25s, background .25s, color .25s;
}
.bk-btn--copper {
    background: var(--bk-copper);
    color: #fff;
}
.bk-btn--copper:hover {
    background: var(--bk-ink);
    transform: translateY(-2px);
}
.bk-btn--ghost {
    background: transparent;
    color: var(--bk-ink);
    border: 1px solid var(--bk-ink);
}
.bk-btn--ghost:hover { background: var(--bk-ink); color: var(--bk-paper); }
.bk-btn--outline {
    background: transparent;
    border: 1px solid var(--bk-ink);
    color: var(--bk-ink);
}
.bk-btn--sm { padding: .5rem 1rem; font-size: .65rem; }
.bk-btn--lg { padding: 1rem 2.25rem; font-size: .75rem; }

.bk-link {
    font-family: var(--bk-font-mono);
    font-size: .72rem;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--bk-copper);
    transition: color .2s;
}
.bk-link:hover { color: var(--bk-copper); }

/* ── Frame Component ── */
.mf-frame {
    position: relative;
    overflow: hidden;
    background: var(--bk-parchment);
}
.mf-frame__border {
    position: absolute; inset: 0; z-index: 2;
    border: var(--bk-frame-border);
    pointer-events: none;
}
.mf-frame__border::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 24px; height: 24px;
    background: var(--bk-copper);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.mf-frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s var(--bk-ease);
}
.mf-frame:hover img { transform: scale(1.03); }

.mf-frame__cap {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: .65rem 1rem;
    background: linear-gradient(transparent, rgba(28,25,23,.75));
    color: #fff;
    font-family: var(--bk-font-mono);
    font-size: .65rem;
    z-index: 3;
    display: flex; gap: .75rem; align-items: baseline;
}
.mf-frame__cap span { opacity: .6; }

/* ── Fade Reveal ── */
[data-fade] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s var(--bk-ease), transform .7s var(--bk-ease);
}
[data-fade].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ══════════════════════════════════════
   HOMEPAGE — Multi-Frame Sections
   ══════════════════════════════════════ */

.frame-atlas { overflow: hidden; }

.mf-zone {
    position: relative;
    padding: clamp(4rem, 8vw, 7rem) clamp(2rem, 5vw, 4rem);
}

/* F00 Mosaic Hero */
.mf-zone--mosaic {
    min-height: 100vh;
    display: flex; flex-direction: column;
    justify-content: center;
    background: var(--bk-parchment);
    padding-bottom: 0;
}

.mf-mosaic {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    max-width: 1280px;
    margin-inline: auto;
}

.mf-mosaic__title {
    font-family: var(--bk-font-serif);
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 600;
    line-height: 1.15;
    margin: .75rem 0 1.25rem;
}
.mf-mosaic__title em { font-style: italic; color: var(--bk-copper); }

.mf-mosaic__kanji {
    display: block;
    font-size: 3rem;
    color: var(--bk-copper);
    line-height: 1;
    margin-bottom: .5rem;
}

.mf-mosaic__lead {
    font-size: .95rem;
    color: var(--bk-ink-soft);
    max-width: 42ch;
    margin-bottom: 1.75rem;
}

.mf-mosaic__actions {
    display: flex; flex-wrap: wrap; gap: .75rem;
    margin-bottom: 2rem;
}

.mf-mosaic__meta {
    display: flex; gap: 2rem;
    font-family: var(--bk-font-mono);
    font-size: .65rem;
}
.mf-mosaic__meta dt { opacity: .45; margin-bottom: .15rem; }
.mf-mosaic__meta dd { font-weight: 500; }

.mf-mosaic__frames {
    position: relative;
    height: clamp(420px, 55vh, 580px);
}

.mf-frame--a {
    position: absolute;
    top: 0; left: 0;
    width: 68%; aspect-ratio: 4/3;
    z-index: 3;
    box-shadow: 16px 20px 40px var(--bk-shadow-deep);
}
.mf-frame--b {
    position: absolute;
    top: 18%; right: 0;
    width: 52%; aspect-ratio: 4/3;
    z-index: 2;
    transform: rotate(2deg);
    box-shadow: 10px 14px 32px var(--bk-shadow);
}
.mf-frame--c {
    position: absolute;
    bottom: 0; left: 12%;
    width: 44%; aspect-ratio: 4/3;
    z-index: 1;
    transform: rotate(-3deg);
    box-shadow: 8px 10px 24px var(--bk-shadow);
}

.mf-ticker {
    overflow: hidden;
    border-top: 1px solid rgba(28,25,23,.1);
    margin-top: 3rem;
    padding: .85rem 0;
}
.mf-ticker__track {
    display: flex; gap: 3rem;
    animation: ticker 28s linear infinite;
    white-space: nowrap;
    font-family: var(--bk-font-mono);
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bk-sage);
}
@keyframes ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* F01 Pinned Manifesto */
.mf-zone--manifesto {
    background: var(--bk-ink);
    color: var(--bk-paper);
    min-height: 70vh;
    display: flex; align-items: center;
}

.mf-manifesto {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin-inline: auto;
    width: 100%;
}

.mf-manifesto__pin h2 {
    font-family: var(--bk-font-serif);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.2;
}
.mf-manifesto__pin h2 em { color: var(--bk-copper-light); font-style: italic; }

.mf-manifesto__scroll {
    display: flex; flex-direction: column; gap: 1.5rem;
    font-size: .95rem;
    opacity: .85;
    transition: transform .1s linear;
}
.mf-manifesto__scroll blockquote {
    border-left: 2px solid var(--bk-copper);
    padding-left: 1.25rem;
    font-family: var(--bk-font-serif);
    font-size: 1.15rem;
    font-style: italic;
}
.mf-manifesto__scroll cite {
    display: block;
    font-family: var(--bk-font-mono);
    font-size: .65rem;
    font-style: normal;
    margin-top: .5rem;
    opacity: .5;
}

/* F02 Chronicle */
.mf-zone--chronicle { background: var(--bk-paper); }

.mf-chronicle__head {
    max-width: 520px;
    margin-bottom: 3.5rem;
}
.mf-chronicle__head h2 {
    font-family: var(--bk-font-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    margin: .5rem 0;
}
.mf-chronicle__head h2 span { color: var(--bk-copper); }

.mf-chronicle__track {
    display: flex; flex-direction: column; gap: 4rem;
}

.mf-chronicle__panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.mf-chronicle__panel--flip .mf-chronicle__text { order: -1; }

.mf-frame--story { aspect-ratio: 4/3; }

.mf-chronicle__year {
    font-family: var(--bk-font-mono);
    font-size: .7rem;
    color: var(--bk-copper);
    letter-spacing: .1em;
}
.mf-chronicle__text h3 {
    font-family: var(--bk-font-serif);
    font-size: 1.75rem;
    margin: .35rem 0 .75rem;
}

/* F03 Switcher */
.mf-zone--switcher {
    background: var(--bk-parchment);
}

.mf-switcher__head {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 3rem;
}
.mf-switcher__head h2 {
    font-family: var(--bk-font-serif);
    font-size: clamp(2rem, 4vw, 2.8rem);
}
.mf-switcher__head h2 em { color: var(--bk-copper); font-style: italic; }

.mf-switcher__stage {
    display: grid;
    grid-template-columns: 160px 1fr 280px;
    gap: 2rem;
    max-width: 1100px;
    margin-inline: auto;
    align-items: start;
}

.mf-switcher__tabs {
    display: flex; flex-direction: column; gap: .5rem;
}

.mf-switcher__tab {
    background: transparent;
    border: 1px solid rgba(28,25,23,.15);
    padding: 1rem;
    text-align: left;
    cursor: pointer;
    font-family: var(--bk-font-serif);
    font-size: 1.1rem;
    transition: background .25s, border-color .25s;
}
.mf-switcher__tab.is-active {
    background: var(--bk-ink);
    color: var(--bk-paper);
    border-color: var(--bk-ink);
}
.mf-switcher__tab .bk-micro { display: block; margin-bottom: .25rem; }

.mf-switcher__display {
    position: relative;
    aspect-ratio: 3/2;
}

.mf-switcher__frame {
    position: absolute; inset: 0;
    opacity: 0;
    transform: scale(.96);
    transition: opacity .45s, transform .45s var(--bk-ease);
}
.mf-switcher__frame.is-active {
    opacity: 1;
    transform: scale(1);
}

.mf-switcher__specs {
    display: flex; flex-direction: column; gap: .75rem;
    margin-top: 1rem;
    font-family: var(--bk-font-mono);
    font-size: .7rem;
}
.mf-switcher__specs dt { opacity: .45; }
.mf-switcher__specs dd { font-weight: 500; }

/* F04 Gallery Scroll */
.mf-zone--gallery { background: var(--bk-paper); padding-bottom: 2rem; }

.mf-gallery__head {
    margin-bottom: 2rem;
    max-width: 480px;
}
.mf-gallery__head h2 {
    font-family: var(--bk-font-serif);
    font-size: clamp(2rem, 4vw, 2.8rem);
}
.mf-gallery__head h2 strong { color: var(--bk-copper); font-weight: 600; }

.mf-gallery-scroll {
    display: flex; gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 1rem 0 2rem;
    cursor: grab;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.mf-gallery-scroll::-webkit-scrollbar { display: none; }

.mf-gallery-card {
    flex: 0 0 min(340px, 80vw);
    scroll-snap-align: start;
}
.mf-frame--gallery { aspect-ratio: 3/2; margin-bottom: 1rem; }
.mf-gallery-card h3 {
    font-family: var(--bk-font-serif);
    font-size: 1.25rem;
    margin: .35rem 0;
}
.mf-gallery__cta { margin-top: 1.5rem; }

/* F05 Experimental */
.mf-zone--experimental {
    background: var(--bk-ink);
    color: var(--bk-paper);
    overflow: hidden;
}

.mf-experiment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1100px;
    margin-inline: auto;
    position: relative;
}

.mf-experiment__cut {
    position: absolute;
    top: -20%; left: 45%;
    width: 120%; height: 140%;
    background: var(--bk-copper);
    transform: rotate(-12deg);
    opacity: .08;
    pointer-events: none;
}

.mf-experiment__content h2 {
    font-family: var(--bk-font-serif);
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin: .5rem 0 1rem;
}
.mf-experiment__content h2 em { color: var(--bk-copper-light); font-style: italic; }

.mf-experiment__list {
    list-style: none;
    margin-top: 1.5rem;
    display: flex; flex-direction: column; gap: .65rem;
}
.mf-experiment__list li {
    font-family: var(--bk-font-mono);
    font-size: .75rem;
    display: flex; gap: .75rem; align-items: center;
}
.mf-experiment__list span {
    color: var(--bk-copper-light);
    font-weight: 500;
}

.mf-frame--distort {
    transform: rotate(4deg);
    box-shadow: 20px 24px 48px rgba(0,0,0,.4);
}
.mf-frame--distort .mf-frame__border {
    border-color: var(--bk-copper-light);
}

/* F06 Process */
.mf-zone--process { background: var(--bk-parchment); }

.mf-process__head h2 {
    font-family: var(--bk-font-serif);
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin: .5rem 0 2.5rem;
}

.mf-process__steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.mf-process__step {
    position: relative;
}

.mf-process__num {
    font-family: var(--bk-font-mono);
    font-size: .65rem;
    color: var(--bk-copper);
    letter-spacing: .1em;
    display: block;
    margin-bottom: .75rem;
}

.mf-frame--step { aspect-ratio: 4/3; margin-bottom: 1rem; }

.mf-process__copy h3 {
    font-family: var(--bk-font-serif);
    font-size: 1.2rem;
    margin-bottom: .5rem;
}
.mf-process__copy p { font-size: .85rem; color: var(--bk-ink-soft); }

/* F07 Metrics */
.mf-zone--metrics {
    background: var(--bk-ink);
    color: var(--bk-paper);
    padding: 3rem clamp(2rem, 5vw, 4rem);
}

.mf-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin-inline: auto;
    text-align: center;
}

.mf-metrics__value {
    font-family: var(--bk-font-serif);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    color: var(--bk-copper-light);
    display: block;
    line-height: 1;
}
.mf-metrics__label {
    display: block;
    font-size: .85rem;
    margin: .5rem 0 .25rem;
}
.mf-metrics__item .bk-micro { opacity: .4; }

/* F08 Voices */
.mf-zone--voices { background: var(--bk-paper); }

.mf-voices__head h2 {
    font-family: var(--bk-font-serif);
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin: .5rem 0 2.5rem;
}

.mf-voices__stack {
    position: relative;
    height: 280px;
    max-width: 640px;
    margin: 0 auto 2rem;
}

.mf-voice-frame {
    position: absolute;
    inset: 0;
    padding: 2rem;
    background: var(--bk-parchment);
    border: var(--bk-frame-border);
    transform: translateY(calc(var(--voice-i, 0) * 12px)) scale(calc(1 - var(--voice-i, 0) * 0.03));
    opacity: calc(1 - var(--voice-i, 0) * 0.25);
    transition: transform .5s var(--bk-ease), opacity .5s;
    z-index: calc(10 - var(--voice-i, 0));
}
.mf-voice-frame.is-front { z-index: 10; }

.mf-voice-frame p {
    font-family: var(--bk-font-serif);
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.55;
    margin-bottom: 1.25rem;
}
.mf-voice-frame footer strong { display: block; font-size: .9rem; }
.mf-voice-frame footer span {
    font-family: var(--bk-font-mono);
    font-size: .65rem;
    opacity: .55;
}

.mf-voices__nav {
    display: flex; align-items: center; justify-content: center; gap: 1.5rem;
}
.mf-voices__nav button {
    background: none; border: 1px solid var(--bk-ink);
    width: 40px; height: 40px;
    cursor: pointer;
    font-size: 1rem;
    transition: background .2s;
}
.mf-voices__nav button:hover { background: var(--bk-ink); color: var(--bk-paper); }
.mf-voices__nav span {
    font-family: var(--bk-font-mono);
    font-size: .7rem;
}

/* F09 Convert */
.mf-zone--convert {
    background: var(--bk-parchment);
    border-top: 1px solid rgba(28,25,23,.08);
}

.mf-convert {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1100px;
    margin-inline: auto;
}

.mf-frame--convert { aspect-ratio: 4/3; }

.mf-convert__copy h2 {
    font-family: var(--bk-font-serif);
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin: .5rem 0 1rem;
}

.mf-convert__list {
    list-style: none;
    margin: 1.5rem 0;
    display: flex; flex-direction: column; gap: .5rem;
    font-size: .9rem;
}
.mf-convert__list li::before {
    content: '—';
    color: var(--bk-copper);
    margin-right: .5rem;
}

.mf-convert__actions {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
}

/* ── Page Head ── */
.bk-page-head {
    padding: clamp(5rem, 10vw, 8rem) clamp(2rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem);
    background: var(--bk-parchment);
    border-bottom: 1px solid rgba(28,25,23,.06);
}
.bk-page-head h1 {
    font-family: var(--bk-font-serif);
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    margin: .5rem 0;
}
.bk-page-head h1 em { color: var(--bk-copper); font-style: italic; }
.bk-page-head--legal { padding-bottom: 2rem; }

/* ── About ── */
.bk-about-story {
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.bk-about-story__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.bk-about-story__text h2 {
    font-family: var(--bk-font-serif);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    margin-bottom: 1.25rem;
}
.bk-lead { font-size: 1.05rem; margin-bottom: 1rem; }
.bk-about-story__text p { color: var(--bk-ink-soft); margin-bottom: 1rem; }

.bk-about-mission {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--bk-parchment);
}
.bk-section-head { margin-bottom: 2.5rem; }
.bk-section-head h2 {
    font-family: var(--bk-font-serif);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.bk-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.bk-value {
    padding: 2rem;
    border: 1px solid rgba(28,25,23,.1);
    background: var(--bk-paper);
}
.bk-value__mark {
    font-family: var(--bk-font-serif);
    font-size: 2rem;
    color: var(--bk-copper);
    display: block;
    margin-bottom: .75rem;
}
.bk-value h3 {
    font-family: var(--bk-font-serif);
    font-size: 1.25rem;
    margin-bottom: .5rem;
}
.bk-value p { font-size: .88rem; color: var(--bk-ink-soft); }

.bk-about-timeline {
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.bk-timeline {
    list-style: none;
    border-left: 2px solid var(--bk-copper);
    padding-left: 2rem;
    display: flex; flex-direction: column; gap: 2.5rem;
}
.bk-timeline__year {
    font-family: var(--bk-font-mono);
    font-size: .7rem;
    color: var(--bk-copper);
    letter-spacing: .1em;
}
.bk-timeline__content h3 {
    font-family: var(--bk-font-serif);
    font-size: 1.3rem;
    margin: .25rem 0 .5rem;
}
.bk-timeline__content p { font-size: .9rem; color: var(--bk-ink-soft); }

.bk-about-team {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--bk-parchment);
}
.bk-about-team__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.bk-about-team__grid h2 {
    font-family: var(--bk-font-serif);
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    margin: .5rem 0 1rem;
}
.bk-about-team__grid p { color: var(--bk-ink-soft); margin-bottom: 1rem; font-size: .92rem; }

.bk-cta-strip {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--bk-ink);
    color: var(--bk-paper);
    text-align: center;
}
.bk-cta-strip h2 {
    font-family: var(--bk-font-serif);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    margin-bottom: 1.5rem;
}

/* ── Shop ── */
.bk-shop {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2.5rem;
    padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
    max-width: 1280px;
    margin-inline: auto;
}

.bk-shop__filter h2 {
    font-family: var(--bk-font-mono);
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 1.5rem 0 .75rem;
    color: var(--bk-sage);
}
.bk-shop__filter h2:first-of-type { margin-top: 0; }

.bk-shop__filter input[type="search"],
.bk-shop__filter select {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid rgba(28,25,23,.15);
    background: var(--bk-paper);
    font-family: var(--bk-font-sans);
    font-size: .85rem;
    margin-bottom: .5rem;
}

.bk-filter-btn {
    display: block; width: 100%;
    text-align: left;
    padding: .5rem 0;
    background: none; border: none;
    cursor: pointer;
    font-size: .85rem;
    opacity: .55;
    transition: opacity .2s, color .2s;
    border-bottom: 1px solid transparent;
}
.bk-filter-btn.is-active,
.bk-filter-btn:hover { opacity: 1; color: var(--bk-copper); }
.bk-filter-btn.is-active { border-bottom-color: var(--bk-copper); }

.bk-shop__count {
    margin-top: 1.5rem;
    font-family: var(--bk-font-mono);
    font-size: .7rem;
    color: var(--bk-sage);
}

.bk-shop__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

.bk-shop-card__frame { position: relative; margin-bottom: 1rem; }
.mf-frame--shop { aspect-ratio: 3/2; }

.bk-shop-card__badge {
    position: absolute; top: .75rem; left: .75rem; z-index: 3;
    background: var(--bk-ink);
    color: var(--bk-paper);
    font-family: var(--bk-font-mono);
    font-size: .6rem;
    padding: .25rem .6rem;
    letter-spacing: .06em;
}

.bk-shop-card__wish {
    position: absolute; top: .75rem; right: .75rem; z-index: 3;
    background: var(--bk-paper);
    border: none; width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.bk-shop-card__wish.is-active { color: var(--bk-copper); }
.bk-shop-card__wish:hover { background: var(--bk-parchment); }

.bk-shop-card__cat {
    font-family: var(--bk-font-mono);
    font-size: .65rem;
    color: var(--bk-sage);
}
.bk-shop-card h2 {
    font-family: var(--bk-font-serif);
    font-size: 1.2rem;
    margin: .25rem 0 .75rem;
}
.bk-shop-card__specs {
    font-family: var(--bk-font-mono);
    font-size: .65rem;
    display: flex; flex-direction: column; gap: .35rem;
    margin-bottom: 1rem;
    color: var(--bk-ink-soft);
}
.bk-shop-card__specs dt { opacity: .5; display: inline; }
.bk-shop-card__specs dd { display: inline; margin-left: .35rem; }

.bk-shop-card__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem;
}
.bk-shop-card__price {
    font-family: var(--bk-font-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bk-copper);
}

.bk-shop-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--bk-sage);
}

.bk-shop-note {
    padding: 2rem clamp(2rem, 5vw, 4rem) 4rem;
    max-width: 720px;
}
.bk-shop-note h2 {
    font-family: var(--bk-font-serif);
    font-size: 1.3rem;
    margin-bottom: .75rem;
}
.bk-shop-note p { font-size: .9rem; color: var(--bk-ink-soft); }
.bk-shop-note a { color: var(--bk-copper); border-bottom: 1px solid; }

/* ── FAQ ── */
.bk-faq {
    max-width: 800px;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
}

.bk-faq__tabs {
    display: flex; gap: .5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.bk-faq-tab {
    padding: .6rem 1.25rem;
    background: transparent;
    border: 1px solid rgba(28,25,23,.15);
    cursor: pointer;
    font-family: var(--bk-font-mono);
    font-size: .7rem;
    letter-spacing: .06em;
    transition: background .2s;
}
.bk-faq-tab.is-active {
    background: var(--bk-ink);
    color: var(--bk-paper);
    border-color: var(--bk-ink);
}

.bk-faq-item {
    border-bottom: 1px solid rgba(28,25,23,.08);
    padding: 1.25rem 0;
}
.bk-faq-item summary {
    font-family: var(--bk-font-serif);
    font-size: 1.1rem;
    cursor: pointer;
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
}
.bk-faq-item summary::-webkit-details-marker { display: none; }
.bk-faq-item summary::after {
    content: '+';
    font-family: var(--bk-font-mono);
    font-size: 1rem;
    opacity: .4;
}
.bk-faq-item[open] summary::after { content: '−'; }
.bk-faq-item p {
    margin-top: .75rem;
    font-size: .9rem;
    color: var(--bk-ink-soft);
    line-height: 1.7;
}

.bk-faq-cta {
    padding: clamp(3rem, 6vw, 4rem);
    background: var(--bk-parchment);
    text-align: center;
}
.bk-faq-cta h2 {
    font-family: var(--bk-font-serif);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom: .75rem;
}
.bk-faq-cta p { color: var(--bk-ink-soft); margin-bottom: 1.5rem; }

/* ── Contact ── */
.bk-contact {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
    max-width: 1100px;
    margin-inline: auto;
}

.bk-contact__info h2 {
    font-family: var(--bk-font-serif);
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
}
.bk-contact__detail,
.bk-contact__info address {
    margin-bottom: 1.25rem;
    font-size: .9rem;
}
.bk-contact__detail strong,
.bk-contact__info address strong {
    display: block;
    font-family: var(--bk-font-mono);
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bk-sage);
    margin-bottom: .35rem;
}
.bk-contact__detail a { color: var(--bk-copper); }

.bk-contact__form {
    padding: 2rem;
    border: var(--bk-frame-border);
    background: var(--bk-paper);
    box-shadow: 8px 8px 0 var(--bk-shadow);
}
.bk-contact__form h2 {
    font-family: var(--bk-font-serif);
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
}

.bk-form-row {
    margin-bottom: 1.25rem;
}
.bk-form-row label {
    display: block;
    font-family: var(--bk-font-mono);
    font-size: .65rem;
    letter-spacing: .06em;
    margin-bottom: .4rem;
}
.bk-form-row label span { color: var(--bk-copper); }

.bk-form-row input,
.bk-form-row select,
.bk-form-row textarea {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid rgba(28,25,23,.15);
    background: var(--bk-parchment);
    font-family: var(--bk-font-sans);
    font-size: .9rem;
    outline: none;
    transition: border-color .2s;
}
.bk-form-row input:focus,
.bk-form-row select:focus,
.bk-form-row textarea:focus {
    border-color: var(--bk-copper);
}
.bk-form-note {
    margin-top: 1rem;
    font-size: .8rem;
    color: var(--bk-sage);
}

.bk-contact-map {
    padding: 0 clamp(2rem, 5vw, 4rem) 4rem;
    max-width: 1100px;
    margin-inline: auto;
}
.bk-contact-map h2 {
    font-family: var(--bk-font-serif);
    font-size: 1.3rem;
    margin-bottom: 1rem;
}
.bk-map-embed {
    aspect-ratio: 16/7;
    border: var(--bk-frame-border);
    overflow: hidden;
}
.bk-map-embed iframe {
    width: 100%; height: 100%; border: 0;
}
.bk-map-note {
    margin-top: .75rem;
    font-size: .85rem;
    color: var(--bk-sage);
}

/* ── Cart ── */
.bk-cart {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
    max-width: 1100px;
    margin-inline: auto;
    align-items: start;
}

.bk-cart-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
}
.bk-cart-empty p { margin-bottom: 1.5rem; color: var(--bk-sage); }

.bk-cart-table__head {
    display: grid;
    grid-template-columns: 2fr 1fr 100px 1fr 40px;
    gap: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid rgba(28,25,23,.1);
    font-family: var(--bk-font-mono);
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bk-sage);
}

.bk-cart-row {
    display: grid;
    grid-template-columns: 2fr 1fr 100px 1fr 40px;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(28,25,23,.06);
    font-size: .9rem;
}

.bk-cart-row__product {
    display: flex; align-items: center; gap: 1rem;
}
.bk-cart-row__product img {
    width: 72px; height: 52px;
    object-fit: cover;
    border: 1px solid rgba(28,25,23,.1);
}
.bk-cart-row__name {
    font-family: var(--bk-font-serif);
    font-size: .95rem;
}

.bk-cart-qty {
    display: flex; align-items: center; gap: .5rem;
}
.bk-cart-qty button {
    width: 28px; height: 28px;
    border: 1px solid rgba(28,25,23,.15);
    background: var(--bk-paper);
    cursor: pointer;
    font-size: .9rem;
}
.bk-cart-row__remove {
    background: none; border: none;
    font-size: 1.2rem; cursor: pointer;
    opacity: .4;
    transition: opacity .2s;
}
.bk-cart-row__remove:hover { opacity: 1; }

.bk-cart-side {
    padding: 1.75rem;
    border: var(--bk-frame-border);
    background: var(--bk-parchment);
    position: sticky;
    top: 2rem;
}
.bk-cart-side h2 {
    font-family: var(--bk-font-serif);
    font-size: 1.2rem;
    margin-bottom: 1.25rem;
}

.bk-cart-totals {
    display: flex; flex-direction: column; gap: .65rem;
    font-size: .88rem;
    margin-bottom: 1.5rem;
}
.bk-cart-totals > div {
    display: flex; justify-content: space-between;
}
.bk-cart-totals__total {
    padding-top: .75rem;
    border-top: 1px solid rgba(28,25,23,.1);
    font-weight: 600;
    font-size: 1rem;
}

.bk-cart-coupon label {
    font-family: var(--bk-font-mono);
    font-size: .65rem;
    display: block;
    margin-bottom: .4rem;
}
.bk-cart-coupon__row {
    display: flex; gap: .5rem;
}
.bk-cart-coupon__row input {
    flex: 1;
    padding: .5rem .65rem;
    border: 1px solid rgba(28,25,23,.15);
    font-size: .85rem;
}
.bk-cart-coupon__hint {
    font-size: .75rem;
    color: var(--bk-sage);
    margin-top: .4rem;
}
.bk-cart-note {
    margin-top: 1rem;
    font-size: .75rem;
    color: var(--bk-sage);
}

/* ── Legal ── */
.bk-legal {
    padding: clamp(2rem, 4vw, 3rem) 0 5rem;
}
.bk-legal-intro {
    font-size: .95rem;
    color: var(--bk-ink-soft);
    margin-bottom: 2rem;
    line-height: 1.75;
}
.bk-legal h2 {
    font-family: var(--bk-font-serif);
    font-size: 1.4rem;
    margin: 2rem 0 .75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(28,25,23,.06);
}
.bk-legal h2:first-of-type { border-top: none; padding-top: 0; }
.bk-legal h3 {
    font-family: var(--bk-font-serif);
    font-size: 1.1rem;
    margin: 1.25rem 0 .5rem;
}
.bk-legal p {
    font-size: .9rem;
    color: var(--bk-ink-soft);
    margin-bottom: .75rem;
    line-height: 1.75;
}
.bk-legal ul {
    margin: .5rem 0 1rem 1.25rem;
    font-size: .9rem;
    color: var(--bk-ink-soft);
}
.bk-legal li { margin-bottom: .35rem; line-height: 1.65; }
.bk-legal a { color: var(--bk-copper); border-bottom: 1px solid rgba(184,115,51,.3); }

.bk-legal-contact {
    margin-top: 1rem;
    padding: 1.25rem;
    background: var(--bk-parchment);
    border-left: 3px solid var(--bk-copper);
    font-size: .88rem;
    line-height: 1.75;
}

.bk-cookie-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    margin: 1rem 0;
}
.bk-cookie-table th,
.bk-cookie-table td {
    padding: .65rem .75rem;
    border: 1px solid rgba(28,25,23,.1);
    text-align: left;
}
.bk-cookie-table th {
    background: var(--bk-parchment);
    font-family: var(--bk-font-mono);
    font-size: .65rem;
    letter-spacing: .06em;
}

/* ── Footer ── */
.bk-footer {
    margin-left: var(--bk-rail-w);
    background: var(--bk-ink);
    color: var(--bk-paper);
    position: relative;
}

.bk-footer__frame {
    position: absolute; top: 0; left: 2rem; right: 2rem;
    height: 4px;
    background: linear-gradient(90deg, var(--bk-copper), var(--bk-sage-muted), var(--bk-copper));
}

.bk-footer__inner {
    padding: 3rem clamp(2rem, 5vw, 4rem) 2rem;
    display: grid;
    grid-template-columns: 1.2fr 2fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.bk-footer__logo {
    font-family: var(--bk-font-serif);
    font-size: 1.5rem;
    display: block;
    margin-bottom: .75rem;
}
.bk-footer__kanji { color: var(--bk-copper-light); margin-right: .35rem; }
.bk-footer__lead p {
    font-size: .85rem;
    opacity: .6;
    max-width: 28ch;
}

.bk-footer__links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.bk-footer__links .bk-micro {
    display: block;
    margin-bottom: .75rem;
    opacity: .4;
}
.bk-footer__links a {
    display: block;
    font-size: .85rem;
    opacity: .65;
    margin-bottom: .4rem;
    transition: opacity .2s;
}
.bk-footer__links a:hover { opacity: 1; }

.bk-footer__contact address,
.bk-footer__contact a,
.bk-footer__contact span {
    display: block;
    font-size: .82rem;
    opacity: .65;
    margin-bottom: .3rem;
    line-height: 1.5;
}

.bk-footer__news label {
    font-family: var(--bk-font-mono);
    font-size: .65rem;
    display: block;
    margin-bottom: .5rem;
    opacity: .5;
}
.bk-footer__news-row {
    display: flex; gap: .5rem;
}
.bk-footer__news-row input {
    flex: 1;
    padding: .55rem .75rem;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.05);
    color: var(--bk-paper);
    font-size: .85rem;
}
.bk-footer__news-row input::placeholder { color: rgba(255,255,255,.35); }

.bk-footer__bar {
    padding: 1rem clamp(2rem, 5vw, 4rem);
    border-top: 1px solid rgba(255,255,255,.06);
    display: flex; flex-wrap: wrap; gap: 1.5rem;
    font-family: var(--bk-font-mono);
    font-size: .6rem;
    opacity: .4;
    letter-spacing: .04em;
}

/* ── Back to top ── */
.bk-top {
    position: fixed;
    bottom: 2rem; right: 2rem;
    z-index: 150;
    width: 44px; height: 44px;
    background: var(--bk-ink);
    color: var(--bk-paper);
    border: none; cursor: pointer;
    opacity: 0; visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s, transform .3s, visibility .3s;
}
.bk-top.is-visible {
    opacity: 1; visibility: visible;
    transform: translateY(0);
}
.bk-top:hover { background: var(--bk-copper); }

.bk-toast {
    position: fixed;
    bottom: 2rem; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bk-ink);
    color: var(--bk-paper);
    padding: .75rem 1.5rem;
    font-size: .85rem;
    z-index: 600;
    opacity: 0; visibility: hidden;
    transition: opacity .3s, transform .3s, visibility .3s;
}
.bk-toast.is-visible {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .mf-mosaic { grid-template-columns: 1fr; }
    .mf-mosaic__frames { height: 380px; }
    .mf-manifesto { grid-template-columns: 1fr; }
    .mf-switcher__stage { grid-template-columns: 1fr; }
    .mf-switcher__tabs { flex-direction: row; flex-wrap: wrap; }
    .mf-process__steps { grid-template-columns: repeat(2, 1fr); }
    .mf-metrics { grid-template-columns: repeat(2, 1fr); }
    .mf-convert { grid-template-columns: 1fr; }
    .mf-experiment { grid-template-columns: 1fr; }
    .bk-shop { grid-template-columns: 1fr; }
    .bk-contact { grid-template-columns: 1fr; }
    .bk-cart { grid-template-columns: 1fr; }
    .bk-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    :root { --bk-rail-w: 0px; }

    .bk-rail { display: none; }
    .bk-topbar { display: flex; }
    .bk-main { margin-left: 0; padding-top: 56px; }
    .bk-footer { margin-left: 0; }

    .mf-chronicle__panel,
    .mf-chronicle__panel--flip {
        grid-template-columns: 1fr;
    }
    .mf-chronicle__panel--flip .mf-chronicle__text { order: 0; }

    .mf-process__steps { grid-template-columns: 1fr; }
    .mf-metrics { grid-template-columns: 1fr 1fr; }

    .bk-about-story__grid,
    .bk-about-team__grid { grid-template-columns: 1fr; }
    .bk-values { grid-template-columns: 1fr; }

    .bk-cart-table__head { display: none; }
    .bk-cart-row {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .bk-footer__inner { grid-template-columns: 1fr; }
    .bk-footer__links { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .mf-frame--a { width: 75%; }
    .mf-frame--b { width: 55%; top: 22%; }
    .mf-frame--c { width: 48%; }
    .mf-mosaic__meta { flex-direction: column; gap: .75rem; }
}