/* トップページ（editorial テーマ）専用スタイル。static_html 01 の <style> をそのまま移設。 */

body {
    background-color: #F4EFE6;
    color: #1A1918;
    font-family: "Zen Kaku Gothic New", sans-serif;
    -webkit-font-smoothing: antialiased;
    background-image: radial-gradient(rgba(163, 120, 56, 0.08) 1px, transparent 0);
    background-size: 32px 32px;
}

/* Tactile Washed Paper Texture Overlay */
.washi-texture {
    position: relative;
}
.washi-texture::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

/* Vertical Writing Mode for Japanese Letterpress Editorial Accent */
.writing-vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

/* Staggered Scroll Animations */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

/* Asymmetric Editorial Border Styling */
.border-debossed {
    border: 1px solid #E2D9C8;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}

.border-brass-accent {
    border-left: 3px solid #A37838;
}

/* Bespoke Button Styling */
.btn-sumi-primary {
    background-color: #0D131A;
    color: #F4EFE6;
    border: 1px solid #0D131A;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.btn-sumi-primary:hover {
    background-color: #A8382B;
    border-color: #A8382B;
    color: #FCFAF7;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(168, 56, 43, 0.25);
}

.btn-brass-outline {
    background: transparent;
    color: #0D131A;
    border: 1px solid #A37838;
    transition: all 0.3s ease;
}
.btn-brass-outline:hover {
    background-color: #A37838;
    color: #F4EFE6;
}

/* Dropcap Letterpress */
.dropcap-editorial::first-letter {
    font-family: "Shippori Mincho", serif;
    font-size: 3.4rem;
    line-height: 0.85;
    float: left;
    margin-right: 0.8rem;
    margin-top: 0.1rem;
    color: #A8382B;
    font-weight: 700;
}

/* Hero MV Visual: Parker nib photo, right-aligned and flush to the bottom edge of the hero
   (desktop). Positioned as a full-height box (inset-y-0) so background-position:bottom lands
   exactly on the section's outer edge, giving the "growing from below" effect requested. */
.hero-mv-visual {
    background-image: url("/assets/images/top_mv_parker.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 94%;
}

/* Mobile/tablet: same photo as a full-bleed banner flush to the hero's bottom edge.
   Negative margins cancel the section's own py-16/py-24 padding so the image still
   touches the true bottom edge instead of floating inside the padding. */
.hero-mv-visual-mobile {
    background-image: url("/assets/images/top_mv_parker.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto 100%;
    height: 220px;
}
@media (min-width: 480px) {
    .hero-mv-visual-mobile {
        height: 260px;
    }
}

/* Brand Logo Chip: consistent frame for the 12 manufacturer logos in "メーカーから選ぶ".
   Logos are sourced from each brand's own public site (see assets/images/brands/SOURCES.md)
   and vary in aspect ratio/background, so each sits in a fixed-size light frame with
   object-contain. platinum.svg is white-on-transparent, so it gets a dark frame instead. */
.brand-logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 40px;
    padding: 4px 6px;
    background-color: #FCFAF7;
    border: 1px solid rgba(163, 120, 56, 0.25);
    flex-shrink: 0;
}
.brand-logo-chip.is-dark {
    background-color: #0D131A;
    border-color: rgba(163, 120, 56, 0.4);
}
.brand-logo-chip img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 7px;
}
::-webkit-scrollbar-track {
    background: #F4EFE6;
}
::-webkit-scrollbar-thumb {
    background: #A37838;
}