html {
    font-size: 100%;
}

body {
    margin: 0;
    overscroll-behavior: contain;
    overflow-x: hidden;
}

.site-header {
    background: linear-gradient(160deg, #F4F0F0 0%, #DCC6C4 100%);
    border-bottom: 2px solid #A8614D;
    position: relative;
}

.site-header-top {
    max-width: 1140px;
    margin: 0 auto;
    padding: 28px 28px 16px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

.brand-zone {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.brand-logo-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border: 1px solid #2c1a14;
    background-color: #ffffff;
    box-shadow: 1px 3px 2px -1px rgba(168, 97, 77, 0.05), 1px 5px 20px -1px rgba(168, 97, 77, 0.11);
    flex-shrink: 0;
}

.brand-logo-frame img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    display: block;
}

.brand-text-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brand-name {
    font-family: 'Exo 2', sans-serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #2c1a14;
    text-decoration: none;
    display: block;
}

.brand-tagline {
    font-family: 'Ubuntu Mono', monospace;
    font-size: 16px;
    line-height: 1.3;
    color: #A8614D;
    letter-spacing: 0.03em;
}

.header-contact-zone {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding-bottom: 4px;
}

.header-contact-label {
    font-family: 'Ubuntu Mono', monospace;
    font-size: 16px;
    line-height: 1.3;
    color: #6b4c42;
    letter-spacing: 0.02em;
}

.header-contact-link {
    font-family: 'Exo 2', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #A8614D;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #A8614D;
    border-radius: 2px;
    background: transparent;
    transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-contact-link:hover {
    background-color: #A8614D;
    color: #ffffff;
}

.header-contact-link .ri-mail-line {
    font-size: 16px;
}

.header-divider {
    border: none;
    border-top: 1px solid rgba(168, 97, 77, 0.25);
    margin: 0;
}

.header-nav-bar {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 28px;
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.primary-nav li {
    display: flex;
}

.primary-nav-link {
    font-family: 'Exo 2', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #2c1a14;
    text-decoration: none;
    padding: 16px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 3px solid transparent;
    transition: color 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 44px;
}

.primary-nav-link:hover {
    color: #A8614D;
    border-bottom-color: #A8614D;
}

.primary-nav-link.active {
    color: #A8614D;
    border-bottom-color: #A8614D;
}

.primary-nav-link i {
    font-size: 16px;
}

.site-footer {
    background: linear-gradient(170deg, #2c1a14 0%, #3d2318 100%);
    margin-top: 56px;
}

.footer-body {
    max-width: 1140px;
    margin: 0 auto;
    padding: 56px 28px 28px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px;
}

.footer-brand-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.footer-logo-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 1px solid rgba(220, 198, 196, 0.4);
    background-color: #ffffff;
    box-shadow: 1px 3px 2px -1px rgba(168, 97, 77, 0.05), 1px 5px 20px -1px rgba(168, 97, 77, 0.11);
}

.footer-logo-frame img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    display: block;
}

.footer-brand-name {
    font-family: 'Exo 2', sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: #F4F0F0;
    text-decoration: none;
    display: block;
}

.footer-brand-desc {
    font-family: 'Exo 2', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #DCC6C4;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Ubuntu Mono', monospace;
    font-size: 16px;
    line-height: 1.5;
    color: #DCC6C4;
    text-decoration: none;
    transition: color 0.17s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-contact-item:hover {
    color: #F4F0F0;
}

.footer-links-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-col-heading {
    font-family: 'Exo 2', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #A8614D;
}

.footer-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-link-list li {
    display: flex;
}

.footer-link-list a {
    font-family: 'Exo 2', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #DCC6C4;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    transition: color 0.2s cubic-bezier(0.0, 0, 0.2, 1);
    min-height: 44px;
}

.footer-link-list a:hover {
    color: #F4F0F0;
}

.footer-link-list a i {
    font-size: 16px;
    color: #A8614D;
    flex-shrink: 0;
}

.footer-bottom-bar {
    border-top: 1px solid rgba(220, 198, 196, 0.15);
    margin: 0 28px;
}

.footer-bottom-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 16px 0 28px;
}

.footer-legal-glass {
    background: rgba(220, 198, 196, 0.07);
    border: 1px solid rgba(220, 198, 196, 0.15);
    border-radius: 8px;
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: inset 0 1px 0 rgba(244, 240, 240, 0.08), inset 0 -1px 0 rgba(44, 26, 20, 0.2);
    flex-wrap: wrap;
}

.footer-copy {
    font-family: 'Ubuntu Mono', monospace;
    font-size: 16px;
    line-height: 1.5;
    color: #DCC6C4;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-legal-links a {
    font-family: 'Ubuntu Mono', monospace;
    font-size: 16px;
    line-height: 1.5;
    color: #DCC6C4;
    text-decoration: none;
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-legal-links a:hover {
    color: #F4F0F0;
}

.footer-legal-links .legal-sep {
    color: rgba(220, 198, 196, 0.3);
    font-family: 'Ubuntu Mono', monospace;
    font-size: 16px;
}

.cookie-tile {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 320px;
    background: #2c1a14;
    border: 1px solid rgba(220, 198, 196, 0.25);
    border-radius: 8px;
    padding: 16px;
    z-index: 4000;
    box-shadow: 1px 10px 60px -1px rgba(168, 97, 77, 0.13);
}

.cookie-tile[hidden] {
    display: none;
}

.cookie-tile-head {
    font-family: 'Exo 2', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #F4F0F0;
    margin-bottom: 8px;
}

.cookie-tile-body {
    font-family: 'Exo 2', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #DCC6C4;
    margin-bottom: 8px;
}

.cookie-tile-list {
    font-family: 'Exo 2', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #DCC6C4;
    padding-left: 16px;
    margin: 0 0 16px;
}

.cookie-tile-actions {
    display: flex;
    gap: 8px;
}

.cookie-btn {
    font-family: 'Exo 2', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    padding: 8px 16px;
    border-radius: 2px;
    border: 1px solid #DCC6C4;
    background: transparent;
    color: #DCC6C4;
    cursor: pointer;
    flex: 1;
    min-height: 44px;
    transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-btn:hover {
    background-color: rgba(220, 198, 196, 0.15);
    color: #F4F0F0;
}

.cookie-btn:focus {
    outline: none;
    position: relative;
}

.cookie-btn:focus::before {
    content: "Fokus";
    position: absolute;
    top: -20px;
    left: 0;
    font-family: 'Ubuntu Mono', monospace;
    font-size: 16px;
    color: #A8614D;
    background: #2c1a14;
    padding: 0 4px;
    border-radius: 2px;
    white-space: nowrap;
}

.primary-nav-link:focus {
    outline: none;
    position: relative;
}

.primary-nav-link:focus::before {
    content: "Fokus";
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Ubuntu Mono', monospace;
    font-size: 16px;
    color: #A8614D;
    white-space: nowrap;
}

.header-contact-link:focus {
    outline: none;
    position: relative;
}

.header-contact-link:focus::before {
    content: "Fokus";
    position: absolute;
    top: -20px;
    left: 0;
    font-family: 'Ubuntu Mono', monospace;
    font-size: 16px;
    color: #A8614D;
    background: #F4F0F0;
    padding: 0 4px;
    border-radius: 2px;
    white-space: nowrap;
}

.footer-link-list a:focus {
    outline: none;
    position: relative;
}

.footer-link-list a:focus::before {
    content: "Fokus";
    position: absolute;
    top: -16px;
    left: 0;
    font-family: 'Ubuntu Mono', monospace;
    font-size: 16px;
    color: #A8614D;
    white-space: nowrap;
}

@media (max-width: 960px) {
    .site-header-top {
        flex-wrap: wrap;
        gap: 16px;
        padding: 16px 16px 16px;
    }

    .header-contact-zone {
        align-items: flex-start;
    }

    .footer-body {
        grid-template-columns: 1fr 1fr;
        padding: 28px 16px 16px;
    }

    .footer-brand-col {
        grid-column: 1 / -1;
    }

    .footer-legal-glass {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .brand-name {
        font-size: 19px;
    }

    .site-header-top {
        padding: 16px;
    }

    .header-nav-bar {
        padding: 0 16px;
    }

    .primary-nav {
        flex-wrap: wrap;
    }

    .footer-body {
        grid-template-columns: 1fr;
    }

    .footer-bottom-inner {
        padding: 16px 0 16px;
    }

    .footer-bottom-bar {
        margin: 0 16px;
    }

    .cookie-tile {
        right: 8px;
        bottom: 8px;
        width: calc(100vw - 16px);
    }

    .brand-logo-frame {
        width: 60px;
        height: 60px;
    }

    .brand-logo-frame img {
        width: 50px;
        height: 50px;
    }
}

.doc-text {
    max-width: 1140px;
    margin: 0 auto;
    padding: 56px 28px;
}

.doc-text h1 {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #2b1a15;
    margin-bottom: 28px;
    margin-top: 0;
}

.doc-text h2 {
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #2b1a15;
    margin-top: 56px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #DCC6C4;
}

.doc-text h3 {
    font-size: 19px;
    line-height: 1.3;
    color: #3d2218;
    margin-top: 28px;
    margin-bottom: 8px;
}

.doc-text h4,
.doc-text h5,
.doc-text h6 {
    font-size: 16px;
    line-height: 1.5;
    color: #3d2218;
    margin-top: 28px;
    margin-bottom: 8px;
}

.doc-text p {
    font-size: 16px;
    line-height: 1.7;
    color: #2b1a15;
    margin-top: 0;
    margin-bottom: 16px;
}

.doc-text ul,
.doc-text ol {
    font-size: 16px;
    line-height: 1.7;
    color: #2b1a15;
    margin-top: 0;
    margin-bottom: 16px;
    padding-left: 28px;
}

.doc-text ul {
    list-style-type: disc;
}

.doc-text ol {
    list-style-type: decimal;
}

.doc-text li {
    margin-bottom: 8px;
}

.doc-text li:last-child {
    margin-bottom: 0;
}

.doc-text ul ul,
.doc-text ol ol,
.doc-text ul ol,
.doc-text ol ul {
    margin-top: 8px;
    margin-bottom: 8px;
}

.doc-text strong,
.doc-text b {
    font-weight: 700;
    color: #2b1a15;
}

.doc-text em,
.doc-text i {
    font-style: italic;
    color: #3d2218;
}

.doc-text a {
    color: #A8614D;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.doc-text a:hover {
    color: #7a4236;
    text-decoration-color: #A8614D;
}

.doc-text a:focus-visible {
    outline: 2px solid #A8614D;
    outline-offset: 2px;
    border-radius: 2px;
}

.doc-text hr {
    border: none;
    border-top: 1px solid #DCC6C4;
    margin-top: 56px;
    margin-bottom: 56px;
}

@media (max-width: 960px) {
    .doc-text {
        padding: 28px 16px;
    }

    .doc-text h1 {
        font-size: 44px;
    }

    .doc-text h2 {
        margin-top: 28px;
    }

    .doc-text hr {
        margin-top: 28px;
        margin-bottom: 28px;
    }
}

@media (max-width: 480px) {
    .doc-text h1 {
        font-size: 19px;
        line-height: 1.3;
    }

    .doc-text {
        padding: 16px;
    }
}

.bld {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 16px;
}

.bld .post-frame {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    padding: 56px 0;
    align-items: start;
}

.bld .post-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px;
    position: relative;
}

.bld .post-mosaic::before {
    content: "";
    position: absolute;
    top: -28px;
    left: -28px;
    width: 120px;
    height: 120px;
    border: 2px solid #DCC6C4;
    border-radius: 30px;
    pointer-events: none;
    z-index: 0;
}

.bld .post-mosaic::after {
    content: "";
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    border: 2px solid #A8614D;
    border-radius: 46px;
    pointer-events: none;
    z-index: 0;
}

.bld .mosaic-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    filter: grayscale(1) sepia(0.5) saturate(1.4) brightness(0.92);
    border-radius: 8px;
    position: relative;
    z-index: 1;
}

.bld .mosaic-img.large {
    grid-column: 1 / 3;
    border-radius: 16px;
}

.bld .mosaic-img.sm {
    border-radius: 8px;
}

.bld .post-lead {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 28px 0;
}

.bld .post-tags {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
}

.bld .tag-badge {
    background: #DCC6C4;
    color: #3a1f18;
    font-size: 16px;
    line-height: 1.3;
    padding: 4px 16px;
    border-radius: 30px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.bld .tag-badge.cat {
    background: #A8614D;
    color: #fff;
}

.bld .post-headline {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #1e0f0b;
    margin: 0;
    position: relative;
    display: inline-block;
}

.bld .post-headline .underline-word {
    position: relative;
    display: inline-block;
}

.bld .post-headline .underline-word::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 4px;
    background: #A8614D;
    border-radius: 2px;
}

.bld .post-slogan {
    font-size: 19px;
    line-height: 1.5;
    color: #5a3328;
    margin: 0;
    font-style: italic;
    border-top: 2px solid #DCC6C4;
    padding-top: 16px;
}

.bld .post-meta-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.bld .meta-item {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    font-size: 16px;
    line-height: 1.5;
    color: #7a4a3a;
}

.bld .meta-item i {
    font-size: 16px;
    color: #A8614D;
}

.bld .meta-sep {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: #DCC6C4;
    display: inline-block;
}

.bld .curve-deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    pointer-events: none;
    opacity: 0.18;
    overflow: hidden;
}

.bld .post-lead-wrap {
    position: relative;
}

.bld .article-area {
    padding: 56px 0;
    border-top: 1px solid #DCC6C4;
}

.bld .article-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 56px;
    align-items: start;
}

.bld .article-body {
    min-width: 0;
}

.bld .article-body .first-para {
    background: #F4F0F0;
    border-radius: 8px;
    padding: 16px 28px;
    font-size: 19px;
    line-height: 1.7;
    color: #2a1208;
    margin: 0 0 28px 0;
}

.bld .article-body p {
    font-size: 16px;
    line-height: 1.7;
    color: #2e1810;
    margin: 0 0 16px 0;
}

.bld .article-body h2 {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #1e0f0b;
    margin: 56px 0 16px 0;
    position: relative;
    display: inline-block;
}

.bld .article-body h2 .hl-strip {
    background: #DCC6C4;
    padding: 0 8px;
    border-radius: 2px;
}

.bld .article-body figure {
    margin: 28px 0;
}

.bld .article-body figure img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 16px;
    display: block;
    filter: grayscale(0.2) sepia(0.15);
}

.bld .article-body figcaption {
    font-size: 16px;
    line-height: 1.5;
    color: #7a4a3a;
    margin-top: 8px;
    text-align: center;
}

.bld .article-body code {
    background: #F4F0F0;
    color: #A8614D;
    font-size: 16px;
    padding: 2px 8px;
    border-radius: 2px;
    border: 1px solid #DCC6C4;
}

.bld .article-body ins {
    text-decoration: none;
    background: linear-gradient(180deg, transparent 60%, #DCC6C4 60%);
    color: #1e0f0b;
}

.bld .article-aside {
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: sticky;
    top: 28px;
}

.bld .aside-card {
    background: #F4F0F0;
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 1px 5px 20px -1px rgba(168, 97, 77, 0.11);
}

.bld .aside-card-title {
    font-size: 19px;
    line-height: 1.3;
    color: #1e0f0b;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
    background: #DCC6C4;
    padding: 4px 8px;
    border-radius: 2px;
    display: inline-block;
}

.bld .aside-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    counter-reset: step-c;
}

.bld .aside-steps li {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    padding: 8px 0;
    position: relative;
    counter-increment: step-c;
}

.bld .aside-steps li::before {
    content: counter(step-c);
    min-width: 28px;
    height: 28px;
    background: #A8614D;
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.bld .aside-steps li::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 36px;
    width: 1px;
    height: calc(100% - 8px);
    background: #DCC6C4;
}

.bld .aside-steps li:last-child::after {
    display: none;
}

.bld .aside-steps li span {
    font-size: 16px;
    line-height: 1.5;
    color: #2e1810;
    padding-top: 4px;
}

.bld .aside-author-block {
    background: linear-gradient(180deg, #A8614D 0%, #DCC6C4 100%);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 1px 10px 60px -1px rgba(168, 97, 77, 0.13);
}

.bld .aside-author-label {
    font-size: 16px;
    line-height: 1.3;
    color: #fff;
    opacity: 0.85;
    margin: 0;
}

.bld .aside-author-name {
    font-size: 19px;
    line-height: 1.3;
    color: #fff;
    font-weight: 700;
    margin: 0;
}

.bld .aside-author-link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #A8614D;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    padding: 8px 16px;
    text-decoration: none;
    margin-top: 8px;
    transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    width: fit-content;
}

.bld .aside-author-link:hover {
    background: #1e0f0b;
    color: #fff;
}

.bld .aside-author-link:focus-visible {
    outline: 2px solid #1e0f0b;
    outline-offset: 2px;
}

.bld .pulse-el {
    animation: soft-pulse 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes soft-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

.bld .divider-asym {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
}

.bld .divider-asym .d-short {
    width: 40px;
    height: 2px;
    background: #A8614D;
    border-radius: 2px;
    flex-shrink: 0;
}

.bld .divider-asym .d-long {
    flex: 1;
    height: 1px;
    background: #DCC6C4;
    border-radius: 2px;
}

.bld .back-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    background: #A8614D;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    padding: 8px 28px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.22s cubic-bezier(0.0, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.0, 0, 0.2, 1);
    box-shadow: 1px 3px 2px -1px rgba(168, 97, 77, 0.05);
    margin-top: 28px;
}

.bld .back-btn:hover {
    background: #1e0f0b;
    box-shadow: 1px 5px 20px -1px rgba(168, 97, 77, 0.11);
}

.bld .back-btn:focus-visible {
    outline: 2px solid #1e0f0b;
    outline-offset: 2px;
}

@media (max-width: 960px) {
    .bld .post-frame {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 28px 0;
    }

    .bld .article-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .bld .article-aside {
        position: static;
    }

    .bld .post-headline {
        font-size: 44px;
    }
}

@media (max-width: 480px) {
    .bld .post-headline {
        font-size: 44px;
    }

    .bld .post-mosaic {
        grid-template-columns: 1fr;
    }

    .bld .mosaic-img.large {
        grid-column: 1;
    }

    .bld .mosaic-img.sm:last-child {
        display: none;
    }

    .bld .post-frame {
        padding: 16px 0;
    }

    .bld .article-area {
        padding: 28px 0;
    }
}

.frt {
    max-width: 100%;
    overflow-x: hidden;
}

.frt .pg-wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 28px;
}

.frt .load-blur {
    animation: blurIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.frt .load-blur.d1 {
    animation-delay: 0.08s;
}

.frt .load-blur.d2 {
    animation-delay: 0.18s;
}

.frt .load-blur.d3 {
    animation-delay: 0.28s;
}

.frt .load-blur.d4 {
    animation-delay: 0.38s;
}

@keyframes blurIn {
    from {
        filter: blur(8px);
        opacity: 0;
    }

    to {
        filter: blur(0);
        opacity: 1;
    }
}

.frt .diamond-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    overflow: hidden;
}

.frt .diamond-divider span {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #A8614D;
    transform: rotate(45deg);
    opacity: 0.35;
    flex-shrink: 0;
}

.frt .diamond-row {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
    overflow: hidden;
}

.frt .diamond-row span {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #A8614D;
    transform: rotate(45deg);
    opacity: 0.28;
    flex-shrink: 0;
}

.frt .sym-icons {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
}

.frt .sym-icons i {
    color: #A8614D;
    font-size: 19px;
    opacity: 0.7;
}

.frt .tag-pill {
    display: inline-block;
    background: #DCC6C4;
    color: #5a2e22;
    font-size: 16px;
    padding: 4px 16px;
    border-radius: 30px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.frt .tag-pill.sec {
    background: #F4F0F0;
    color: #A8614D;
}

.frt .tag-pill.ter {
    background: #A8614D;
    color: #fff !important;
}

.frt .strip-label {
    display: inline-block;
    background: #A8614D;
    color: #fff;
    padding: 4px 16px;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.frt .strip-label.light {
    background: #DCC6C4;
    color: #3d1a12;
}

.frt .strip-label.pale {
    background: #F4F0F0;
    color: #A8614D;
}

.frt .btn-solid {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #A8614D;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 1px 5px 20px -1px rgba(168, 97, 77, 0.11);
}

.frt .btn-solid:hover {
    background: #8f4f3c;
    box-shadow: 1px 10px 60px -1px rgba(168, 97, 77, 0.13);
}

.frt .btn-solid:focus {
    outline: 2px solid #A8614D;
    outline-offset: 3px;
}

.frt .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #A8614D;
    border: 2px solid #A8614D;
    border-radius: 8px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s cubic-bezier(0.0, 0, 0.2, 1), color 0.15s cubic-bezier(0.0, 0, 0.2, 1);
}

.frt .btn-ghost:hover {
    background: #A8614D;
    color: #fff;
}

.frt .btn-ghost:focus {
    outline: 2px solid #A8614D;
    outline-offset: 3px;
}

.frt .sect-pad {
    padding: 56px 0;
}

.frt .sect-pad-sm {
    padding: 28px 0;
}

.frt .grid-bg {
    background-image:
        linear-gradient(rgba(168, 97, 77, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 97, 77, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
}

.frt .abbrev-anchor {
    font-size: 70px;
    font-weight: 900;
    color: #DCC6C4;
    opacity: 0.22;
    line-height: 1.1;
    letter-spacing: -0.04em;
    pointer-events: none;
    user-select: none;
    position: absolute;
    top: -16px;
    right: 0;
}

.frt .rel {
    position: relative;
}

.frt .bento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
}

.frt .bento-img-cell {
    grid-row: 1 / 3;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.frt .bento-img-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    aspect-ratio: 4/3;
    filter: saturate(0.85) brightness(0.97);
    transition: filter 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.frt .bento-img-cell:hover img {
    filter: saturate(1.05) brightness(1.02);
}

.frt .light-leak {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 60%;
    background: linear-gradient(135deg, rgba(220, 198, 196, 0.45) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 16px 0 0 0;
}

.frt .bento-text-top {
    background: #F4F0F0;
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: flex-end;
}

.frt .bento-text-bot {
    background: #A8614D;
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.frt .bento-h1 {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #1e0f09;
    margin: 0;
}

.frt .bento-desc {
    font-size: 19px;
    line-height: 1.5;
    color: #4a2416;
    margin: 0;
}

.frt .bento-sub {
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    margin: 0;
    opacity: 0.92;
}

.frt .bento-sub-head {
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.frt .post-listing {
    background: #F4F0F0;
}

.frt .post-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.frt .post-h2 {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #1e0f09;
    margin: 0;
}

.frt .horiz-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.frt .post-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 1px 3px 2px -1px rgba(168, 97, 77, 0.05);
    text-decoration: none;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.frt .post-card:hover {
    box-shadow: 1px 10px 60px -1px rgba(168, 97, 77, 0.13);
    transform: translateY(-2px);
}

.frt .post-card:focus {
    outline: 2px solid #A8614D;
    outline-offset: 3px;
}

.frt .pc-img {
    overflow: hidden;
    flex-shrink: 0;
}

.frt .pc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 4/3;
    display: block;
    filter: saturate(0.8);
    animation: colorCycle 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes colorCycle {

    0%,
    100% {
        filter: saturate(0.8);
    }

    40% {
        filter: saturate(0) brightness(0.95);
    }

    70% {
        filter: saturate(0.8);
    }
}

.frt .pc-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

.frt .pc-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.frt .pc-title {
    font-size: 19px;
    font-weight: 700;
    color: #1e0f09;
    line-height: 1.3;
    margin: 0;
}

.frt .pc-sub {
    font-size: 16px;
    color: #5a3428;
    line-height: 1.5;
    margin: 0;
}

.frt .pc-desc {
    font-size: 16px;
    color: #4a3028;
    line-height: 1.7;
    margin: 0;
}

.frt .pc-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.frt .pc-author {
    font-size: 16px;
    color: #7a4030;
    display: flex;
    align-items: center;
    gap: 4px;
}

.frt .pc-read {
    font-size: 16px;
    color: #9a6050;
    display: flex;
    align-items: center;
    gap: 4px;
}

.frt .pc-views {
    font-size: 16px;
    color: #9a6050;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.frt .badge-mini {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #F4F0F0;
    color: #A8614D;
    border-radius: 2px;
    padding: 4px 8px;
    font-size: 16px;
    font-weight: 600;
}

.frt .voice-sect {
    background: #fff;
}

.frt .voice-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.frt .voice-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.frt .voice-h2 {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #1e0f09;
    margin: 0;
}

.frt .voice-p {
    font-size: 16px;
    line-height: 1.7;
    color: #3d2018;
    margin: 0;
}

.frt .voice-p.first-p {
    background: #F4F0F0;
    border-radius: 8px;
    padding: 16px;
    font-size: 19px;
    line-height: 1.5;
}

.frt .voice-img-wrap {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 1px 5px 20px -1px rgba(168, 97, 77, 0.11);
}

.frt .voice-img-wrap img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: saturate(0.85);
}

.frt .nav-sect {
    background: linear-gradient(180deg, #A8614D 0%, #DCC6C4 100%);
}

.frt .nav-sect-inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: center;
    text-align: center;
}

.frt .nav-h2 {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0;
}

.frt .nav-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
}

.frt .nav-card {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    text-decoration: none;
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(168, 97, 77, 0.15);
}

.frt .nav-card:hover {
    background: rgba(255, 255, 255, 0.28);
}

.frt .nav-card:focus {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.frt .nav-card-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frt .nav-card-icon i {
    color: #fff;
    font-size: 19px;
}

.frt .nav-card-name {
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.frt .nav-card-desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    line-height: 1.5;
}

.frt .habit-sect {
    background: #1e0f09;
}

.frt .habit-inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 56px;
    align-items: center;
}

.frt .habit-label-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.frt .habit-abbrev {
    font-size: 70px;
    font-weight: 900;
    color: #A8614D;
    opacity: 0.18;
    line-height: 1.1;
    letter-spacing: -0.04em;
    pointer-events: none;
    user-select: none;
}

.frt .habit-h2 {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #F4F0F0;
    margin: 0;
}

.frt .habit-right {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.frt .habit-step-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.frt .habit-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 0;
    position: relative;
}

.frt .habit-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 19px;
    top: 52px;
    width: 2px;
    height: calc(100% - 36px);
    background: linear-gradient(180deg, #A8614D 0%, rgba(168, 97, 77, 0.15) 100%);
}

.frt .step-num {
    width: 40px;
    height: 40px;
    border-radius: 46px;
    background: #A8614D;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 1px 3px 2px -1px rgba(168, 97, 77, 0.05);
}

.frt .step-text {
    flex: 1;
    padding-top: 8px;
}

.frt .step-title {
    font-size: 16px;
    font-weight: 700;
    color: #F4F0F0;
    margin: 0 0 4px;
    line-height: 1.3;
}

.frt .step-desc {
    font-size: 16px;
    color: #c4a090;
    margin: 0;
    line-height: 1.5;
}

.frt .adjacent-sect {
    background: #F4F0F0;
}

.frt .adjacent-inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.frt .adj-head {
    text-align: center;
}

.frt .adj-h2 {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #1e0f09;
    margin: 0 0 8px;
}

.frt .adj-desc {
    font-size: 19px;
    color: #4a2416;
    margin: 0;
    line-height: 1.5;
}

.frt .adj-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.frt .adj-item {
    background: #fff;
    border-radius: 16px;
    padding: 28px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    box-shadow: 1px 3px 2px -1px rgba(168, 97, 77, 0.05);
    transition: box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.frt .adj-item:hover {
    box-shadow: 1px 5px 20px -1px rgba(168, 97, 77, 0.11);
}

.frt .adj-icon {
    width: 44px;
    height: 44px;
    background: #F4F0F0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.frt .adj-icon i {
    color: #A8614D;
    font-size: 19px;
}

.frt .adj-name {
    font-size: 16px;
    font-weight: 700;
    color: #1e0f09;
    margin: 0;
    line-height: 1.3;
}

.frt .adj-blurb {
    font-size: 16px;
    color: #5a3428;
    margin: 0;
    line-height: 1.5;
}

.frt .entry-sect {
    background: #fff;
    position: relative;
}

.frt .entry-inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.frt .entry-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.frt .entry-h2 {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #1e0f09;
    margin: 0;
}

.frt .entry-sub {
    font-size: 19px;
    color: #4a2416;
    margin: 0;
    line-height: 1.5;
}

.frt .entry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.frt .entry-card {
    border-radius: 16px;
    overflow: hidden;
    background: #F4F0F0;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    box-shadow: 1px 3px 2px -1px rgba(168, 97, 77, 0.05);
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.frt .entry-card:hover {
    box-shadow: 1px 10px 60px -1px rgba(168, 97, 77, 0.13);
}

.frt .entry-card:focus {
    outline: 2px solid #A8614D;
    outline-offset: 3px;
}

.frt .entry-card-img {
    overflow: hidden;
}

.frt .entry-card-img img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: saturate(0.82);
    transition: filter 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.frt .entry-card:hover .entry-card-img img {
    filter: saturate(1);
}

.frt .entry-card-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.frt .entry-card-tag {
    margin-bottom: 4px;
}

.frt .entry-card-title {
    font-size: 19px;
    font-weight: 700;
    color: #1e0f09;
    margin: 0;
    line-height: 1.3;
}

.frt .entry-card-desc {
    font-size: 16px;
    color: #4a3028;
    margin: 0;
    line-height: 1.7;
}

.frt .entry-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #A8614D;
    font-size: 16px;
    font-weight: 600;
    margin-top: 8px;
    text-decoration: none;
}

.frt .atm-sect {
    position: relative;
    overflow: hidden;
}

.frt .atm-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    filter: saturate(0.5) brightness(0.45);
}

.frt .atm-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30, 15, 9, 0.72) 0%, rgba(168, 97, 77, 0.55) 100%);
    z-index: 1;
    pointer-events: none;
}

.frt .atm-content {
    position: relative;
    z-index: 2;
    padding: 56px 0;
}

.frt .atm-inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: center;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.frt .atm-h2 {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0;
}

.frt .atm-p {
    font-size: 19px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.5;
}

.frt .underrated-sect {
    background: #fff;
}

.frt .und-inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.frt .und-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.frt .und-h2 {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #1e0f09;
    margin: 0;
}

.frt .und-sub {
    font-size: 19px;
    color: #4a2416;
    margin: 0;
    line-height: 1.5;
}

.frt .und-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.frt .und-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    background: #F4F0F0;
    border-radius: 16px;
    padding: 28px;
    text-decoration: none;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 1px 3px 2px -1px rgba(168, 97, 77, 0.05);
}

.frt .und-item:hover {
    box-shadow: 1px 5px 20px -1px rgba(168, 97, 77, 0.11);
}

.frt .und-item:focus {
    outline: 2px solid #A8614D;
    outline-offset: 3px;
}

.frt .und-num {
    font-size: 44px;
    font-weight: 900;
    color: #DCC6C4;
    line-height: 1.1;
    letter-spacing: -0.04em;
    width: 56px;
    text-align: center;
}

.frt .und-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.frt .und-title {
    font-size: 19px;
    font-weight: 700;
    color: #1e0f09;
    margin: 0;
    line-height: 1.3;
}

.frt .und-reason {
    font-size: 16px;
    color: #5a3428;
    margin: 0;
    line-height: 1.5;
}

.frt .und-arrow {
    color: #A8614D;
    font-size: 19px;
    flex-shrink: 0;
}

.frt .portrait-pair {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.frt .portrait-wrap {
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 1px 5px 20px -1px rgba(168, 97, 77, 0.11);
}

.frt .portrait-wrap img {
    width: 80px;
    height: 107px;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: saturate(0.85);
}

.frt .archive-sect {
    background: #F4F0F0;
}

.frt .archive-inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.frt .arch-head {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.frt .arch-h2 {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #1e0f09;
    margin: 0;
}

.frt .arch-sub {
    font-size: 19px;
    color: #4a2416;
    margin: 0;
    line-height: 1.5;
}

.frt .arch-bars {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.frt .arch-bar-item {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    align-items: center;
    gap: 16px;
}

.frt .arch-bar-label {
    font-size: 16px;
    font-weight: 600;
    color: #1e0f09;
    line-height: 1.3;
}

.frt .arch-bar-track {
    height: 8px;
    background: #DCC6C4;
    border-radius: 46px;
    overflow: hidden;
}

.frt .arch-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #A8614D 0%, #DCC6C4 100%);
    border-radius: 46px;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.frt .arch-bar-count {
    font-size: 16px;
    color: #A8614D;
    font-weight: 700;
    min-width: 56px;
    text-align: right;
}

.frt .arch-note {
    font-size: 16px;
    color: #5a3428;
    line-height: 1.7;
    margin: 0;
    text-align: center;
}

@media (max-width: 960px) {
    .frt .bento-grid {
        grid-template-columns: 1fr;
    }

    .frt .bento-img-cell {
        grid-row: auto;
    }

    .frt .post-card {
        grid-template-columns: 200px 1fr;
    }

    .frt .voice-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .frt .nav-cards {
        grid-template-columns: 1fr 1fr;
    }

    .frt .habit-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .frt .adj-grid {
        grid-template-columns: 1fr 1fr;
    }

    .frt .entry-grid {
        grid-template-columns: 1fr;
    }

    .frt .und-item {
        grid-template-columns: auto 1fr auto;
        gap: 16px;
    }

    .frt .arch-bar-item {
        grid-template-columns: 140px 1fr auto;
    }
}

@media (max-width: 480px) {
    .frt .bento-h1 {
        font-size: 44px;
    }

    .frt .post-card {
        grid-template-columns: 1fr;
    }

    .frt .pc-img img {
        aspect-ratio: 4/3;
        height: auto;
    }

    .frt .nav-cards {
        grid-template-columns: 1fr;
    }

    .frt .adj-grid {
        grid-template-columns: 1fr 1fr;
    }

    .frt .und-item {
        grid-template-columns: auto 1fr;
    }

    .frt .und-arrow {
        display: none;
    }

    .frt .arch-bar-item {
        grid-template-columns: 1fr auto;
    }

    .frt .arch-bar-label {
        grid-column: 1 / -1;
    }

    .frt .habit-abbrev {
        font-size: 44px;
    }

    .frt .post-h2,
    .frt .voice-h2,
    .frt .nav-h2,
    .frt .habit-h2,
    .frt .adj-h2,
    .frt .entry-h2,
    .frt .atm-h2,
    .frt .und-h2,
    .frt .arch-h2 {
        font-size: 44px;
    }
}

.blg {
    max-width: 100%;
    overflow-x: hidden;
}

.blg .pg-band {
    background: linear-gradient(180deg, #F4F0F0 0%, #DCC6C4 100%);
    padding: 56px 28px;
    position: relative;
    overflow: hidden;
}

.blg .pg-band::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle at top right, rgba(168, 97, 77, 0.18) 0%, transparent 70%);
    border-radius: 46px;
    pointer-events: none;
}

.blg .pg-band::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle at bottom left, rgba(220, 198, 196, 0.35) 0%, transparent 70%);
    border-radius: 46px;
    pointer-events: none;
    animation: blg-rotate 18s linear infinite;
}

@keyframes blg-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.blg .pg-inner {
    max-width: 1140px;
    margin: 0 auto;
}

.blg .pg-label {
    display: inline-block;
    background: #A8614D;
    color: #F4F0F0;
    font-size: 16px;
    line-height: 1.3;
    padding: 4px 16px;
    border-radius: 2px;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

.blg .pg-head {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #2a1a16;
    margin: 0 0 16px;
}

.blg .pg-sub {
    font-size: 19px;
    line-height: 1.5;
    color: #5a3a30;
    max-width: 560px;
    margin: 0;
}

.blg .posts-area {
    background: #fff;
    padding: 56px 28px;
}

.blg .posts-grid {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.blg .post-card {
    background: #F4F0F0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 1px 3px 2px -1px rgba(168, 97, 77, 0.05);
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.blg .post-card:hover {
    box-shadow: 1px 5px 20px -1px rgba(168, 97, 77, 0.11);
    transform: translateY(-2px);
}

.blg .card-img-wrap {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #DCC6C4;
    position: relative;
}

.blg .card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.blg .post-card:hover .card-img-wrap img {
    transform: scale(1.04);
}

.blg .card-cat {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #A8614D;
    color: #F4F0F0;
    font-size: 16px;
    line-height: 1.3;
    padding: 4px 8px;
    border-radius: 2px;
    letter-spacing: 0.05em;
}

.blg .card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

.blg .card-tag {
    display: inline-block;
    background: #DCC6C4;
    color: #2a1a16;
    font-size: 16px;
    line-height: 1.3;
    padding: 4px 8px;
    border-radius: 2px;
    align-self: flex-start;
}

.blg .card-title {
    font-size: 19px;
    line-height: 1.3;
    color: #2a1a16;
    letter-spacing: -0.01em;
    margin: 0;
}

.blg .card-sub {
    font-size: 16px;
    line-height: 1.5;
    color: #5a3a30;
    margin: 0;
}

.blg .card-desc {
    font-size: 16px;
    line-height: 1.7;
    color: #4a3028;
    margin: 0;
    flex: 1;
}

.blg .card-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding-top: 8px;
    border-top: 1px solid rgba(168, 97, 77, 0.12);
}

.blg .card-author {
    font-size: 16px;
    line-height: 1.3;
    color: #5a3a30;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.blg .card-author i {
    color: #A8614D;
    font-size: 16px;
}

.blg .card-readtime {
    font-size: 16px;
    line-height: 1.3;
    color: #5a3a30;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.blg .card-readtime i {
    color: #A8614D;
    font-size: 16px;
}

.blg .card-views {
    font-size: 16px;
    line-height: 1.3;
    color: #5a3a30;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.blg .card-views i {
    color: #A8614D;
    font-size: 16px;
}

.blg .card-link {
    display: inline-block;
    margin-top: 8px;
    background: #A8614D;
    color: #F4F0F0;
    font-size: 16px;
    line-height: 1.3;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    align-self: flex-start;
    transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.blg .card-link:hover {
    background: #8a4d3b;
}

.blg .texture-strip {
    padding: 56px 28px;
    background: #F4F0F0;
    position: relative;
    overflow: hidden;
}

.blg .texture-strip .tx-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.blg .texture-strip .tx-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.06;
}

.blg .tx-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    position: relative;
}

.blg .tx-text-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blg .tx-heading-wrap {
    display: inline-block;
    background: #DCC6C4;
    padding: 4px 16px;
    border-radius: 2px;
    align-self: flex-start;
}

.blg .tx-heading-wrap h2 {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #2a1a16;
    margin: 0;
}

.blg .tx-first-p {
    font-size: 19px;
    line-height: 1.5;
    color: #2a1a16;
    background: rgba(168, 97, 77, 0.07);
    border-radius: 8px;
    padding: 16px;
    margin: 0;
}

.blg .tx-p {
    font-size: 16px;
    line-height: 1.7;
    color: #4a3028;
    margin: 0;
}

.blg .tx-vis-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blg .tx-stat-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.blg .tx-stat {
    flex: 1;
    background: #fff;
    border-radius: 16px;
    padding: 28px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 1px 5px 20px -1px rgba(168, 97, 77, 0.11);
    text-align: center;
}

.blg .tx-stat i {
    font-size: 44px;
    color: #A8614D;
}

.blg .tx-stat-num {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #2a1a16;
}

.blg .tx-stat-lbl {
    font-size: 16px;
    line-height: 1.3;
    color: #5a3a30;
}

.blg .tx-cta-link {
    display: inline-block;
    background: #A8614D;
    color: #F4F0F0;
    font-size: 19px;
    line-height: 1.3;
    padding: 16px 28px;
    border-radius: 8px;
    text-decoration: none;
    align-self: flex-start;
    transition: background 0.2s cubic-bezier(0.0, 0, 0.2, 1);
}

.blg .tx-cta-link:hover {
    background: #8a4d3b;
}

.blg .nl-area {
    background: #2a1a16;
    padding: 56px 28px;
}

.blg .nl-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    text-align: center;
}

.blg .nl-badge {
    display: inline-block;
    background: rgba(168, 97, 77, 0.25);
    color: #DCC6C4;
    font-size: 16px;
    line-height: 1.3;
    padding: 4px 16px;
    border-radius: 30px;
    letter-spacing: 0.06em;
}

.blg .nl-head {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #F4F0F0;
    margin: 0;
    max-width: 600px;
}

.blg .nl-desc {
    font-size: 19px;
    line-height: 1.5;
    color: #DCC6C4;
    margin: 0;
    max-width: 500px;
}

.blg .nl-form {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    max-width: 480px;
}

.blg .nl-input {
    flex: 1;
    background: rgba(244, 240, 240, 0.08);
    border: 1px solid rgba(220, 198, 196, 0.3);
    border-radius: 8px;
    padding: 16px;
    font-size: 16px;
    line-height: 1.3;
    color: #F4F0F0;
    outline: none;
    transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.blg .nl-input::placeholder {
    color: rgba(220, 198, 196, 0.5);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.blg .nl-input:focus::placeholder {
    opacity: 0;
}

.blg .nl-input:focus {
    border-color: #A8614D;
}

.blg .nl-btn {
    background: #A8614D;
    color: #F4F0F0;
    border: none;
    border-radius: 8px;
    padding: 16px 28px;
    font-size: 16px;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.blg .nl-btn:hover {
    background: #8a4d3b;
}

.blg .nl-btn:focus-visible {
    outline: 2px solid #DCC6C4;
    outline-offset: 2px;
}

@media (max-width: 960px) {
    .blg .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blg .tx-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .blg .tx-heading-wrap h2 {
        font-size: 44px;
    }

    .blg .nl-form {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .blg .posts-grid {
        grid-template-columns: 1fr;
    }

    .blg .pg-head {
        font-size: 44px;
    }

    .blg .tx-stat-row {
        flex-direction: column;
    }

    .blg .nl-head {
        font-size: 44px;
    }
}

.auth-pg {
    max-width: 100%;
    overflow-x: hidden;
}

.auth-pg .pg-limiter {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 28px;
    padding-right: 28px;
}

.auth-pg .divider-grad {
    height: 1px;
    background: linear-gradient(90deg, transparent, #A8614D, transparent);
    border: none;
    margin: 0;
}

.auth-pg .reveal-child {
    opacity: 0;
    transform: translateY(24px);
    animation: revealUp 0.5s cubic-bezier(0.0, 0, 0.2, 1) forwards;
}

@keyframes revealUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-pg .reveal-child:nth-child(1) {
    animation-delay: 0.08s;
}

.auth-pg .reveal-child:nth-child(2) {
    animation-delay: 0.18s;
}

.auth-pg .reveal-child:nth-child(3) {
    animation-delay: 0.28s;
}

.auth-pg .reveal-child:nth-child(4) {
    animation-delay: 0.38s;
}

.auth-pg .reveal-child:nth-child(5) {
    animation-delay: 0.48s;
}

.auth-pg .scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-pg .scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.auth-pg .scroll-reveal:nth-child(2) {
    transition-delay: 0.07s;
}

.auth-pg .scroll-reveal:nth-child(3) {
    transition-delay: 0.14s;
}

.auth-pg .scroll-reveal:nth-child(4) {
    transition-delay: 0.21s;
}

.auth-pg .scroll-reveal:nth-child(5) {
    transition-delay: 0.28s;
}

.auth-pg .title-blk {
    background: #F4F0F0;
    position: relative;
    padding-bottom: 56px;
}

.auth-pg .title-blk-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.auth-pg .title-img-zone {
    position: relative;
    overflow: hidden;
    border-radius: 0 0 16px 16px;
    aspect-ratio: 4/3;
    max-height: 420px;
}

.auth-pg .title-img-zone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: blur(0px);
    transition: filter 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-pg .title-img-zone:hover img {
    filter: blur(0px);
}

.auth-pg .light-leak {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 60%;
    background: linear-gradient(135deg, rgba(220, 198, 196, 0.55) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 0;
}

.auth-pg .title-deco {
    position: absolute;
    bottom: 16px;
    right: 28px;
    width: 56px;
    height: 56px;
    opacity: 0.18;
    pointer-events: none;
}

.auth-pg .title-text-zone {
    padding-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-pg .title-kicker {
    display: inline-block;
    background: #DCC6C4;
    color: #5a2e22;
    font-size: 16px;
    line-height: 1.3;
    padding: 4px 16px;
    border-radius: 2px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    align-self: flex-start;
}

.auth-pg .title-h1 {
    font-size: 70px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #1e0e08;
    margin: 0;
    font-weight: 800;
}

.auth-pg .title-h1 em {
    font-style: normal;
    font-size: 44px;
    display: block;
    color: #A8614D;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.auth-pg .title-sub {
    font-size: 19px;
    line-height: 1.7;
    color: #3d1f16;
    margin: 0;
    max-width: 560px;
}

.auth-pg .title-sub strong {
    color: #A8614D;
}

@media (max-width: 960px) {
    .auth-pg .title-h1 {
        font-size: 44px;
    }

    .auth-pg .title-h1 em {
        font-size: 28px;
    }

    .auth-pg .title-img-zone {
        max-height: 300px;
    }
}

@media (max-width: 480px) {
    .auth-pg .title-h1 {
        font-size: 36px;
    }

    .auth-pg .title-img-zone {
        max-height: 220px;
    }
}

.auth-pg .bio-blk {
    background: #fff;
    padding-top: 56px;
    padding-bottom: 56px;
    position: relative;
}

.auth-pg .bio-blk-inner {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 56px;
    align-items: start;
}

.auth-pg .bio-portrait-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.auth-pg .portrait-frame {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 1px 5px 20px -1px rgba(168, 97, 77, 0.11);
    position: relative;
}

.auth-pg .portrait-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: blur(3px);
    transition: filter 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-pg .portrait-frame:hover img {
    filter: blur(0px);
}

.auth-pg .portrait-name-tag {
    text-align: center;
}

.auth-pg .portrait-name-tag strong {
    display: block;
    font-size: 19px;
    line-height: 1.3;
    color: #1e0e08;
    font-weight: 700;
}

.auth-pg .portrait-name-tag span {
    font-size: 16px;
    line-height: 1.5;
    color: #7a4035;
}

.auth-pg .bio-tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.auth-pg .bio-tag {
    background: #F4F0F0;
    color: #5a2e22;
    font-size: 16px;
    line-height: 1.3;
    padding: 4px 8px;
    border-radius: 8px;
    font-weight: 500;
}

.auth-pg .bio-text-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-pg .bio-heading-wrap {
    display: inline-block;
    background: #DCC6C4;
    padding: 4px 16px;
    border-radius: 2px;
    align-self: flex-start;
}

.auth-pg .bio-heading-wrap h2 {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #1e0e08;
    margin: 0;
    font-weight: 700;
}

.auth-pg .bio-first-p {
    font-size: 19px;
    line-height: 1.7;
    color: #2a1008;
    margin: 0;
    background: #F4F0F0;
    padding: 16px;
    border-radius: 8px;
}

.auth-pg .bio-p {
    font-size: 16px;
    line-height: 1.7;
    color: #3d1f16;
    margin: 0;
}

.auth-pg .bio-chart-label {
    font-size: 16px;
    line-height: 1.5;
    color: #7a4035;
    font-weight: 600;
    margin-top: 8px;
}

.auth-pg .chart-wrap {
    background: #F4F0F0;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 1px 3px 2px -1px rgba(168, 97, 77, 0.05);
}

.auth-pg .chart-wrap svg {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 960px) {
    .auth-pg .bio-blk-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .auth-pg .bio-portrait-col {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
    }

    .auth-pg .portrait-frame {
        width: 120px;
        flex-shrink: 0;
    }

    .auth-pg .bio-heading-wrap h2 {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .auth-pg .bio-portrait-col {
        flex-direction: column;
        align-items: center;
    }

    .auth-pg .portrait-frame {
        width: 160px;
    }

    .auth-pg .bio-heading-wrap h2 {
        font-size: 28px;
    }
}

.auth-pg .approach-blk {
    background: #2a1008;
    padding-top: 56px;
    padding-bottom: 56px;
    position: relative;
    overflow: hidden;
}

.auth-pg .approach-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(10, 3, 1, 0.55) 100%);
    pointer-events: none;
}

.auth-pg .approach-geo-deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    height: 320px;
    overflow: hidden;
    pointer-events: none;
}

.auth-pg .approach-geo-deco svg {
    width: 100%;
    height: 100%;
    opacity: 0.07;
}

.auth-pg .approach-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.auth-pg .approach-heading-strip {
    display: inline-block;
    background: #A8614D;
    padding: 4px 16px;
    border-radius: 2px;
    align-self: center;
}

.auth-pg .approach-heading-strip h2 {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
    font-weight: 700;
    text-align: center;
}

.auth-pg .approach-lead {
    font-size: 19px;
    line-height: 1.7;
    color: #DCC6C4;
    margin: 0;
    text-align: center;
    max-width: 640px;
    align-self: center;
}

.auth-pg .approach-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step-counter;
}

.auth-pg .approach-steps li {
    counter-increment: step-counter;
    background: rgba(220, 198, 196, 0.07);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    box-shadow: 1px 3px 2px -1px rgba(168, 97, 77, 0.05);
}

.auth-pg .approach-steps li::before {
    content: counter(step-counter, decimal-leading-zero);
    font-size: 44px;
    line-height: 1.1;
    font-weight: 800;
    color: #A8614D;
    letter-spacing: -0.03em;
}

.auth-pg .step-connector {
    display: none;
}

.auth-pg .approach-steps li h4 {
    font-size: 19px;
    line-height: 1.3;
    color: #F4F0F0;
    margin: 0;
    font-weight: 700;
}

.auth-pg .approach-steps li p {
    font-size: 16px;
    line-height: 1.7;
    color: #c4a09a;
    margin: 0;
}

.auth-pg .approach-img-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}

.auth-pg .approach-img-frame {
    aspect-ratio: 4/3;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 1px 10px 60px -1px rgba(168, 97, 77, 0.13);
}

.auth-pg .approach-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: blur(3px);
    transition: filter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-pg .approach-img-frame:hover img {
    filter: blur(0px);
}

@media (max-width: 960px) {
    .auth-pg .approach-steps {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .auth-pg .approach-img-row {
        grid-template-columns: 1fr;
    }

    .auth-pg .approach-heading-strip h2 {
        font-size: 32px;
    }
}

.auth-pg .voices-blk {
    background: #F4F0F0;
    padding-top: 56px;
    padding-bottom: 56px;
    position: relative;
}

.auth-pg .voices-blk-texture {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.auth-pg .voices-blk-texture svg {
    width: 100%;
    height: 100%;
    opacity: 0.04;
}

.auth-pg .voices-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.auth-pg .voices-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.auth-pg .voices-head-strip {
    display: inline-block;
    background: #A8614D;
    padding: 4px 16px;
    border-radius: 2px;
}

.auth-pg .voices-head-strip h2 {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
    font-weight: 700;
}

.auth-pg .voices-sub {
    font-size: 16px;
    line-height: 1.7;
    color: #5a2e22;
    margin: 0;
    max-width: 500px;
}

.auth-pg .voices-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.auth-pg .voice-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 1px 5px 20px -1px rgba(168, 97, 77, 0.11);
    box-shadow: inset 0 1px 0 rgba(220, 198, 196, 0.6), inset 0 -1px 0 rgba(168, 97, 77, 0.08), 1px 5px 20px -1px rgba(168, 97, 77, 0.11);
}

.auth-pg .voice-quote {
    font-size: 16px;
    line-height: 1.7;
    color: #2a1008;
    margin: 0;
    font-style: italic;
}

.auth-pg .voice-person {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.auth-pg .voice-portrait {
    width: 48px;
    height: 48px;
    border-radius: 30px;
    overflow: hidden;
    flex-shrink: 0;
}

.auth-pg .voice-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: blur(2px);
    transition: filter 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-pg .voice-portrait:hover img {
    filter: blur(0px);
}

.auth-pg .voice-meta strong {
    display: block;
    font-size: 16px;
    line-height: 1.3;
    color: #1e0e08;
    font-weight: 700;
}

.auth-pg .voice-meta span {
    font-size: 16px;
    line-height: 1.3;
    color: #7a4035;
}

.auth-pg .voices-cta-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.auth-pg .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #A8614D;
    color: #fff !important;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    padding: 16px 28px;
    border-radius: 8px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 1px 5px 20px -1px rgba(168, 97, 77, 0.11);
}

.auth-pg .btn-primary:hover {
    background: #8f4f3c;
    box-shadow: 1px 10px 60px -1px rgba(168, 97, 77, 0.13);
}

.auth-pg .btn-primary:focus {
    outline: 2px solid #A8614D;
    outline-offset: 3px;
}

.auth-pg .btn-primary:active {
    background: #7a3e2e;
}

.auth-pg .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #A8614D;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
    padding: 16px 28px;
    border-radius: 8px;
    text-decoration: none;
    border: 2px solid #A8614D;
    cursor: pointer;
    transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-pg .btn-secondary:hover {
    background: #A8614D;
    color: #fff;
}

.auth-pg .btn-secondary:focus {
    outline: 2px solid #A8614D;
    outline-offset: 3px;
}

@media (max-width: 960px) {
    .auth-pg .voices-grid {
        grid-template-columns: 1fr;
    }

    .auth-pg .voices-head-strip h2 {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .auth-pg .voices-cta-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

.success-page {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 28px;
    background-color: #F4F0F0;
}

.success-page .success-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 1px 5px 20px -1px rgba(168, 97, 77, 0.11);
    padding: 56px 56px;
    max-width: 560px;
    width: 100%;
    text-align: center;
}

.success-page .success-icon {
    width: 64px;
    height: 64px;
    border-radius: 46px;
    background: #DCC6C4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 28px;
}

.success-page .success-icon svg {
    width: 32px;
    height: 32px;
}

.success-page .success-heading {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #A8614D;
    margin: 0 0 16px;
}

.success-page .success-text {
    font-size: 19px;
    line-height: 1.5;
    color: #3d2b27;
    margin: 0 0 28px;
}

.success-page .success-note {
    font-size: 16px;
    line-height: 1.7;
    color: #6b4c44;
    background: #F4F0F0;
    border-radius: 8px;
    padding: 16px 28px;
    margin: 0 0 28px;
}

.success-page .success-link {
    display: inline-block;
    background: #A8614D;
    color: #fff;
    font-size: 16px;
    line-height: 1.3;
    padding: 16px 28px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.0, 0, 0.2, 1);
}

.success-page .success-link:hover {
    background: #8f4e3c;
    box-shadow: 1px 5px 20px -1px rgba(168, 97, 77, 0.11);
}

.success-page .success-link:focus-visible {
    outline: 2px solid #A8614D;
    outline-offset: 4px;
}

@media (max-width: 480px) {
    .success-page .success-card {
        padding: 28px 16px;
    }

    .success-page .success-heading {
        font-size: 44px;
    }
}