/* ===========================================================================
   ATELIER — fashion_blog
   Haute editorial, black & white luxury.
   Bone-paper canvas · ink near-black · whisper-champagne accent.
   Playfair Display (masthead/titles) · Cormorant Garamond (prose)
   · Archivo (labels/nav). Signature: photography is grayscale at rest and
   blooms to full colour on hover. Prefix: fb-
   =========================================================================== */

:root{
    --ink:        #0c0c0c;
    --ink-soft:   #2a2824;
    --paper:      #f4f1ea;
    --paper-pure: #fbfaf5;
    --muted:      #6c685f;
    --line:       rgba(12,12,12,.16);
    --line-soft:  rgba(12,12,12,.10);
    --accent:     #9b7d4e;          /* whisper champagne, used sparingly */
    --paper-line: rgba(244,241,234,.22);

    --serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --body:  "Cormorant Garamond", Georgia, serif;
    --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;

    --container: 1240px;
    --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body.fb-body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-size:1.075rem;
    line-height:1.7;
    font-weight:500;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.fb-body img{ display:block; max-width:100%; }

.fb-body a{ color:inherit; text-decoration:none; }

.fb-body .container{
    width:100%;
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:clamp(1.15rem,4vw,3rem);
}

.fb-wrap{ padding-block:clamp(2.5rem,6vw,5rem); }

::selection{ background:var(--ink); color:var(--paper); }

/* ---- shared atoms ------------------------------------------------------- */

.fb-kicker{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    font-family:var(--sans);
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.26em;
    text-transform:uppercase;
    color:var(--ink);
    line-height:1;
}
.fb-kicker--sm{ font-size:.62rem; letter-spacing:.22em; gap:.4rem; }
.fb-kicker--light{ color:var(--paper); }
.fb-kicker__tick{
    width:1.65rem; height:1px;
    background:var(--accent);
    display:inline-block;
}
.fb-kicker:hover{ color:var(--accent); }
.fb-kicker--light:hover{ color:var(--paper); opacity:.7; }

.fb-meta{
    font-family:var(--sans);
    font-size:.66rem;
    font-weight:500;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--muted);
}
.fb-meta--light{ color:rgba(244,241,234,.78); }

.fb-readmore{
    font-family:var(--sans);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.24em;
    text-transform:uppercase;
    padding-bottom:.35rem;
    border-bottom:1px solid currentColor;
    transition:color .3s var(--ease), opacity .3s var(--ease);
}
.fb-readmore:hover{ color:var(--accent); }
.fb-readmore--light{ color:var(--paper); }
.fb-readmore--light:hover{ color:var(--paper); opacity:.65; }

/* =========================================================================
   HEADER
   ========================================================================= */

.fb-head{
    background:var(--paper);
    border-bottom:1px solid var(--ink);
}

.fb-head__util{ border-bottom:1px solid var(--line-soft); }
.fb-head__utilrow{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    min-height:2.6rem;
}

.fb-burger{
    width:2.1rem; height:1.5rem;
    background:none; border:0; padding:0;
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    cursor:pointer;
}
.fb-burger span{ display:block; height:1px; width:100%; background:var(--ink); transition:.3s var(--ease); }

.fb-head__masthead{
    text-align:center;
    padding-block:clamp(1.6rem,4.4vw,2.9rem);
}
.fb-brand{
    display:inline-flex;
    align-items:center;
    gap:.85rem;
}
.fb-brand__img{ height:46px; width:auto; }
.fb-brand__text{
    font-family:var(--serif);
    font-weight:900;
    font-size:clamp(1.54rem,4.37vw,2.67rem);
    letter-spacing:.16em;
    text-transform:uppercase;
    line-height:1;
}

.fb-nav-wrap{ border-top:1px solid var(--line-soft); }
.fb-nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:clamp(1.1rem,3vw,2.6rem);
    padding-block:1rem;
}
.fb-nav__link{
    font-family:var(--sans);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--ink);
    position:relative;
    padding-bottom:.25rem;
}
.fb-nav__link::after{
    content:"";
    position:absolute; left:50%; bottom:0;
    width:0; height:1px;
    background:var(--accent);
    transform:translateX(-50%);
    transition:width .35s var(--ease);
}
.fb-nav__link:hover{ color:var(--accent); }
.fb-nav__link:hover::after{ width:100%; }

/* ---- CRITICAL : un-hide Bootstrap .collapse nav on desktop -------------- */
@media (min-width:992px){
    .fb-burger{ display:none; }
    .fb-head__util{ display:none; }
    .fb-nav-wrap.collapse{ display:block !important; }
}
@media (max-width:991.98px){
    .fb-head__masthead{ padding-block:clamp(1.3rem,5vw,1.9rem); }
    .fb-nav{ flex-direction:column; gap:.2rem; padding-block:.4rem 1rem; }
    .fb-nav__link{ padding-block:.7rem; }
}

/* =========================================================================
   FULL-BLEED COVER
   ========================================================================= */

.fb-cover{
    position:relative;
    min-height:clamp(30rem,82vh,52rem);
    display:flex;
    align-items:flex-end;
    background:var(--ink);
    overflow:hidden;
}
.fb-cover__media{ position:absolute; inset:0; }
.fb-cover__media img{ width:100%; height:100%; object-fit:cover; }
.fb-cover__scrim{
    position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(8,8,8,.12) 0%,rgba(8,8,8,.18) 42%,rgba(8,8,8,.78) 100%);
}
.fb-cover__inner{
    position:relative;
    padding-block:clamp(2.5rem,7vw,5.5rem);
    color:var(--paper);
    max-width:60rem;
}
.fb-cover--noimg{ min-height:clamp(22rem,48vh,32rem); }
.fb-cover--noimg .fb-cover__inner{
    border-left:1px solid var(--paper-line);
    padding-left:clamp(1.4rem,4vw,2.6rem);
}
.fb-cover__title{
    font-family:var(--serif);
    font-weight:700;
    font-size:clamp(2.5rem,7vw,5.6rem);
    line-height:1.04;
    letter-spacing:-.01em;
    margin:1.4rem 0 1rem;
    max-width:16ch;
}
.fb-cover__title a{ color:inherit; }
.fb-cover__dek{
    font-size:clamp(1.1rem,1.8vw,1.4rem);
    line-height:1.55;
    color:rgba(244,241,234,.86);
    max-width:46ch;
    margin:0 0 1.9rem;
}
.fb-cover__foot{
    display:flex;
    align-items:center;
    gap:2rem;
    flex-wrap:wrap;
}

/* =========================================================================
   SECTION HEADINGS
   ========================================================================= */

.fb-sectionhead{
    display:flex;
    align-items:baseline;
    gap:1.4rem;
    margin-bottom:clamp(1.8rem,4vw,3rem);
}
.fb-sectionhead__title{
    font-family:var(--serif);
    font-weight:700;
    font-size:clamp(1.5rem,3.4vw,2.4rem);
    letter-spacing:.01em;
    margin:0;
    flex:none;
}
.fb-sectionhead__rule{
    flex:1;
    height:1px;
    background:var(--ink);
    align-self:center;
    transform:translateY(2px);
}

.fb-masthead{
    text-align:center;
    padding-block:clamp(1rem,4vw,2.4rem) clamp(1.6rem,4vw,2.6rem);
}
.fb-masthead__kicker{
    font-family:var(--sans);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--muted);
}
.fb-masthead__title{
    font-family:var(--serif);
    font-weight:700;
    font-size:clamp(2rem,5.4vw,3.8rem);
    line-height:1.1;
    margin:1rem 0 1.4rem;
}
.fb-masthead__rule{
    display:block;
    width:3.4rem; height:2px;
    background:var(--accent);
    margin:0 auto;
}

/* =========================================================================
   THE EDIT — asymmetric feature split
   ========================================================================= */

.fb-edit{ padding-bottom:clamp(2.5rem,6vw,4.5rem); }

.fb-edit__grid{
    display:grid;
    grid-template-columns:1.45fr 1fr;
    gap:clamp(2rem,4.5vw,4rem);
    align-items:start;
}

.fb-feature__media{
    display:block;
    aspect-ratio:4/3;
    overflow:hidden;
    background:var(--ink);
}
.fb-feature__media img{ width:100%; height:100%; object-fit:cover; }
.fb-feature--noimg .fb-feature__media{ display:none; }
.fb-feature__body{ padding-top:1.5rem; }
.fb-feature__title{
    font-family:var(--serif);
    font-weight:700;
    font-size:clamp(1.7rem,3.4vw,2.6rem);
    line-height:1.12;
    margin:1rem 0 .8rem;
}
.fb-feature__title a:hover{ color:var(--accent); }
.fb-feature__dek{
    font-size:1.18rem;
    line-height:1.6;
    color:var(--ink-soft);
    margin:0 0 1.1rem;
    max-width:52ch;
}

.fb-edit__side{
    display:flex;
    flex-direction:column;
}
.fb-brief{
    display:flex;
    gap:1.2rem;
    padding-block:1.5rem;
    border-top:1px solid var(--line);
}
.fb-brief:first-child{ border-top:0; padding-top:0; }
.fb-brief:last-child{ padding-bottom:0; }
.fb-brief__media{
    position:relative;
    flex:0 0 96px;
    width:96px; height:118px;
    overflow:hidden;
    background:var(--ink);
}
.fb-brief__media img{ width:100%; height:100%; object-fit:cover; }
.fb-brief--noimg .fb-brief__media{
    background:var(--ink);
}
.fb-brief__no{
    position:absolute; left:0; bottom:0;
    font-family:var(--serif);
    font-style:italic;
    font-size:.95rem;
    color:var(--paper);
    background:rgba(12,12,12,.55);
    padding:.15rem .5rem;
}
.fb-brief__body{ display:flex; flex-direction:column; gap:.5rem; }
.fb-brief__title{
    font-family:var(--serif);
    font-weight:600;
    font-size:1.16rem;
    line-height:1.22;
    margin:0;
}
.fb-brief__title a:hover{ color:var(--accent); }

/* =========================================================================
   THE JOURNAL — staggered article grid
   ========================================================================= */

.fb-latest{ padding-block:clamp(1rem,3vw,2rem) clamp(2rem,5vw,3.5rem); }

.fb-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(1.6rem,3vw,2.6rem) clamp(1.6rem,3vw,3rem);
    align-items:start;
}

.fb-card__media{
    position:relative;
    display:block;
    aspect-ratio:3/4;
    overflow:hidden;
    background:var(--ink);
}
.fb-card__media img{ width:100%; height:100%; object-fit:cover; }
.fb-card--noimg .fb-card__media{
    aspect-ratio:3/4;
    background:
        repeating-linear-gradient(45deg,var(--ink) 0 2px,transparent 2px 26px),
        var(--ink-soft);
}
.fb-card__frame{
    position:absolute; inset:.7rem;
    border:1px solid rgba(244,241,234,.6);
    opacity:0;
    transition:opacity .4s var(--ease);
    pointer-events:none;
}
.fb-card__media:hover .fb-card__frame{ opacity:1; }
.fb-card__body{ padding-top:1.15rem; }
.fb-card__title{
    font-family:var(--serif);
    font-weight:700;
    font-size:1.4rem;
    line-height:1.18;
    margin:.75rem 0 .6rem;
}
.fb-card__title a:hover{ color:var(--accent); }
.fb-card__dek{
    font-size:1.06rem;
    line-height:1.55;
    color:var(--muted);
    margin:0 0 1rem;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.fb-card__foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:.85rem;
    border-top:1px solid var(--line);
}
.fb-card__more{
    font-family:var(--sans);
    font-size:.64rem;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--ink);
    transition:color .3s var(--ease);
}
.fb-card:hover .fb-card__more{ color:var(--accent); }

/* =========================================================================
   ARTICLE (single post)
   ========================================================================= */

.fb-article{ padding-bottom:clamp(2.5rem,6vw,5rem); }

.fb-articlehead{
    text-align:center;
    padding-block:clamp(2.4rem,6vw,4.2rem) clamp(1.8rem,4vw,2.8rem);
}
.fb-articlehead__inner{ max-width:54rem; }
.fb-articlehead .fb-kicker{ justify-content:center; }
.fb-articlehead__title{
    font-family:var(--serif);
    font-weight:700;
    font-size:clamp(2.1rem,5.6vw,4rem);
    line-height:1.1;
    margin:1.3rem auto 1.6rem;
    max-width:20ch;
}
.fb-articlehead__meta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    font-family:var(--sans);
    font-size:.66rem;
    font-weight:500;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--muted);
}
.fb-articlehead__k{
    color:var(--ink);
    margin-right:.5rem;
}
.fb-articlehead__meta a:hover{ color:var(--accent); }
.fb-articlehead__dot{ width:4px; height:4px; background:var(--accent); border-radius:50%; }

.fb-article__lede{
    margin:0 auto clamp(2rem,5vw,3.5rem);
    max-width:1100px;
    padding-inline:clamp(1.15rem,4vw,3rem);
}
.fb-article__lede img{
    width:100%;
    max-height:78vh;
    object-fit:cover;
}

.fb-read{
    max-width:44rem;
    margin-inline:auto;
}

/* =========================================================================
   PROSE
   ========================================================================= */

.fb-prose{
    font-family:var(--body);
    font-size:1.28rem;
    line-height:1.78;
    color:var(--ink-soft);
}
.fb-prose > p:first-of-type::first-letter{
    font-family:var(--serif);
    font-weight:700;
    font-size:4.2rem;
    line-height:.78;
    float:left;
    margin:.35rem .7rem 0 0;
    color:var(--ink);
}
.fb-prose p{ margin:0 0 1.35rem; }
.fb-prose h2,.fb-prose h3,.fb-prose h4{
    font-family:var(--serif);
    font-weight:700;
    line-height:1.2;
    margin:2.6rem 0 1rem;
    color:var(--ink);
}
.fb-prose h2{ font-size:1.95rem; }
.fb-prose h3{ font-size:1.55rem; }
.fb-prose h4{ font-size:1.28rem; }
.fb-prose a{
    color:var(--ink);
    border-bottom:1px solid var(--accent);
    transition:color .25s var(--ease);
}
.fb-prose a:hover{ color:var(--accent); }
.fb-prose img{ width:100%; height:auto; margin:2rem 0; }
.fb-prose blockquote{
    margin:2.4rem 0;
    padding-left:1.6rem;
    border-left:2px solid var(--accent);
    font-style:italic;
    font-size:1.5rem;
    line-height:1.5;
    color:var(--ink);
}
.fb-prose ul,.fb-prose ol{ margin:0 0 1.35rem; padding-left:1.3rem; }
.fb-prose li{ margin-bottom:.5rem; }
.fb-prose hr{ border:0; border-top:1px solid var(--line); margin:2.6rem 0; }
.fb-prose strong{ font-weight:600; color:var(--ink); }

.fb-author{
    margin-top:clamp(2.5rem,6vw,4rem);
}
.fb-author__rule{ display:block; width:100%; height:1px; background:var(--ink); margin-bottom:1.6rem; }
.fb-author__label{
    font-family:var(--sans);
    font-size:.66rem;
    font-weight:600;
    letter-spacing:.26em;
    text-transform:uppercase;
    color:var(--muted);
}
.fb-author p{
    font-family:var(--body);
    font-style:italic;
    font-size:1.22rem;
    line-height:1.6;
    margin:.8rem 0 0;
    color:var(--ink-soft);
}

/* =========================================================================
   FROM THE EDITOR (intro_post)
   ========================================================================= */

.fb-editorial{
    margin-top:clamp(2.5rem,6vw,4.5rem);
    padding-block:clamp(2rem,5vw,3.5rem);
    border-top:1px solid var(--ink);
    border-bottom:1px solid var(--ink);
    text-align:center;
}
.fb-editorial__label{
    font-family:var(--sans);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--accent);
}
.fb-editorial__body{
    max-width:42rem;
    margin:1.4rem auto 0;
    font-size:1.22rem;
    color:var(--ink-soft);
    text-align:left;
}
.fb-editorial__body p:last-child{ margin-bottom:0; }

/* =========================================================================
   CONTACT FORM
   ========================================================================= */

.fb-form{
    max-width:36rem;
    margin:0 auto;
    padding-bottom:clamp(2rem,5vw,3rem);
}
.fb-form .form-label{
    font-family:var(--sans);
    font-size:.66rem;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:.5rem;
}
.fb-form .form-control{
    font-family:var(--body);
    font-size:1.1rem;
    color:var(--ink);
    background:transparent;
    border:0;
    border-bottom:1px solid var(--ink);
    border-radius:0;
    padding:.65rem 0;
    box-shadow:none;
}
.fb-form .form-control:focus{
    background:transparent;
    border-bottom-color:var(--accent);
    box-shadow:0 1px 0 0 var(--accent);
}
.fb-form textarea.form-control{ resize:vertical; }
.fb-form .form-check-label{
    font-family:var(--sans);
    font-size:.74rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    margin-left:.4rem;
}
.fb-form .form-check-input{ border-radius:0; border-color:var(--ink); }
.fb-form .form-check-input:checked{ background-color:var(--ink); border-color:var(--ink); }

.fb-btn{
    font-family:var(--sans);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.26em;
    text-transform:uppercase;
    color:var(--paper);
    background:var(--ink);
    border:1px solid var(--ink);
    border-radius:0;
    padding:1rem 2.6rem;
    margin-top:1rem;
    transition:.35s var(--ease);
}
.fb-btn:hover{
    background:transparent;
    color:var(--ink);
}

/* =========================================================================
   PAGINATION (shared Bootstrap markup)
   ========================================================================= */

.fb-wrap .pagination,
.fb-latest .pagination{ gap:.4rem; margin-top:clamp(2rem,5vw,3.5rem); }
.fb-body .page-item{ margin:0; }
.fb-body .page-link{
    font-family:var(--sans);
    font-size:.74rem;
    font-weight:600;
    letter-spacing:.12em;
    color:var(--ink);
    background:transparent;
    border:1px solid var(--line);
    border-radius:0;
    min-width:2.7rem;
    text-align:center;
    padding:.55rem .7rem;
    transition:.25s var(--ease);
}
.fb-body .page-link:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.fb-body .page-item.active .page-link{
    background:var(--ink);
    color:var(--paper);
    border-color:var(--ink);
}

/* =========================================================================
   FOOTER — dramatic ink black
   ========================================================================= */

.fb-foot{
    background:var(--ink);
    color:var(--paper);
    padding-block:clamp(2.6rem,6vw,4.5rem);
    margin-top:clamp(2rem,5vw,4rem);
}
.fb-foot__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1.4rem;
}
.fb-foot__brand{
    font-family:var(--serif);
    font-weight:900;
    font-size:clamp(1.44rem,3.6vw,2.34rem);
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--paper);
}
.fb-foot__nav{
    display:flex;
    gap:clamp(1.2rem,3vw,2.4rem);
}
.fb-foot__nav a{
    font-family:var(--sans);
    font-size:.68rem;
    font-weight:500;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(244,241,234,.78);
    transition:color .3s var(--ease);
}
.fb-foot__nav a:hover{ color:var(--paper); }
.fb-foot__rule{
    height:1px;
    background:var(--paper-line);
    margin-block:clamp(1.6rem,4vw,2.6rem);
}
.fb-foot__fine{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:.6rem;
    font-family:var(--sans);
    font-size:.62rem;
    font-weight:500;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:rgba(244,241,234,.6);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width:991.98px){
    .fb-edit__grid{ grid-template-columns:1fr; gap:2.5rem; }
    .fb-edit__side{ border-top:1px solid var(--ink); padding-top:1.5rem; }
    .fb-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:599.98px){
    body.fb-body{ font-size:1.02rem; }
    .fb-grid{ grid-template-columns:1fr; gap:2.5rem; }
    .fb-cover{ min-height:auto; }
    .fb-cover__media{ position:relative; height:62vw; }
    .fb-cover{ display:block; background:var(--ink); }
    .fb-cover__scrim{ display:none; }
    .fb-cover__inner{ color:var(--paper); padding-block:2rem; }
    .fb-brief{ gap:1rem; }
    .fb-brief__media{ flex-basis:78px; width:78px; height:96px; }
    .fb-sectionhead{ gap:1rem; }
    .fb-prose{ font-size:1.18rem; }
    .fb-prose > p:first-of-type::first-letter{ font-size:3.4rem; }
}

@media (prefers-reduced-motion:reduce){
    *{ transition:none !important; }
}