/* --- Hero --- */
.brand-hero {
    padding: 150px 0 80px;
    text-align: center;
    background: linear-gradient(180deg, rgba(92, 10, 10, 0.4) 0%, transparent 100%);
    position: relative;
    z-index: 10;
}
.brand-hero-logo { width: 110px; margin-bottom: 20px; }
.brand-hero h1 {
    font-size: clamp(36px, 6vw, 72px);
    letter-spacing: 2px;
    margin-bottom: 15px;
}
.brand-lead {
    max-width: 650px;
    margin: 0 auto;
    color: var(--text-dim);
    font-size: 1.1rem;
}
.brand-toc {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 35px;
}
.brand-toc a {
    padding: 8px 20px;
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
}
.brand-toc a:hover { border-color: var(--accent-red); color: var(--accent-red); }

/* --- Sections --- */
.brand-section { padding: 90px 0; z-index: 5; }
.brand-section.alt {
    background: rgba(28, 30, 41, 0.5);
    backdrop-filter: blur(5px);
}
.brand-title {
    font-size: clamp(28px, 4vw, 40px);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.brand-title span { color: var(--accent-red); margin-right: 10px; }
.brand-subtitle {
    margin: 45px 0 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 1rem;
}
.brand-subtitle small {
    margin-left: 10px;
    color: var(--text-dim);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.brand-note { color: var(--text-dim); margin-bottom: 35px; }
.brand-section code {
    background: var(--bg-highlight);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* --- Anatomy --- */
.anatomy-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    align-items: center;
    margin-top: 40px;
}
.anatomy-preview {
    background: var(--bg-panel);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 50px;
}
.anatomy-preview img { width: 100%; display: block; }
.anatomy-item { margin-bottom: 25px; }
.anatomy-item h3 { color: var(--accent-red); text-transform: uppercase; letter-spacing: 2px; font-size: 0.95rem; }
.anatomy-item p { color: var(--text-dim); }

/* --- Files --- */
.file-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.file-card {
    background: var(--bg-panel);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease;
}
.file-card:hover { transform: translateY(-6px); border-color: var(--accent-red); }
.file-preview {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}
.file-preview.on-dark { background: var(--bg-deep); }
.file-preview.on-light { background: #ffffff; }
.file-preview img { max-height: 100%; max-width: 100%; }
.file-card:not(.wide) .file-preview img { height: 120px; }
.file-info { padding: 25px; }
.file-info h3 { margin-bottom: 5px; }
.file-info p { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 18px; }
.file-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 22px;
    border-radius: 50px;
    background: var(--text-main);
    color: var(--bg-deep);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    transition: 0.3s;
}
.file-download:hover { background: var(--accent-red); color: white; }

/* --- Colors --- */
.swatch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.swatch-grid.small { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.swatch {
    display: flex;
    flex-direction: column;
    text-align: left;
    background: var(--bg-panel);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
    color: var(--text-main);
    font-family: inherit;
    cursor: pointer;
    padding: 0 0 15px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.swatch:hover { transform: translateY(-4px); border-color: var(--accent-red); }
.swatch-color { height: 110px; margin-bottom: 12px; }
.swatch-grid.small .swatch-color { height: 70px; }
.swatch-color.bordered { border-bottom: 1px solid var(--glass-border); }
.swatch-name, .swatch-hex { padding: 0 15px; }
.swatch-name { font-weight: 700; font-size: 0.95rem; }
.swatch-hex { color: var(--text-dim); font-family: monospace; font-size: 0.95rem; }

.bg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}
.bg-sample {
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    height: 150px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
.bg-sample img { max-width: 85%; max-height: 60px; }
.bg-sample img.mark { height: 60px; }
.bg-sample span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); }
.bg-sample.light span { color: #12131a; }

/* --- Typography --- */
.type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 40px 0 30px;
}
.type-card {
    background: var(--bg-panel);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 35px;
}
.type-sample { font-size: 80px; line-height: 1.1; margin-bottom: 15px; color: var(--accent-red); }
.type-sample.montserrat { font-family: 'Montserrat', sans-serif; font-weight: 700; }
.type-sample.noto { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; }
.type-card p { color: var(--text-dim); }

/* --- Don'ts --- */
.dont-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 40px;
}
.dont-card {
    background: var(--bg-panel);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    overflow: hidden;
}
.dont-preview {
    position: relative;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-deep);
    overflow: hidden;
}
.dont-preview img { height: 90px; }
.dont-preview img.wide { height: auto; width: 75%; }
.dont-preview::after {
    content: "\f00d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-red);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
.dont-card p { padding: 18px 20px; color: var(--text-dim); font-size: 0.95rem; }

/* --- Copy toast --- */
.copy-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, 20px);
    background: var(--accent-red);
    color: white;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
    z-index: 1000;
}
.copy-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* --- Responsive --- */
@media (max-width: 900px) {
    .anatomy-grid, .file-grid, .type-grid { grid-template-columns: 1fr; }
    .swatch-grid { grid-template-columns: 1fr; }
    .dont-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .dont-grid { grid-template-columns: 1fr; }
    .anatomy-preview { padding: 30px; }
}