/* =========================================
   DDD Website — Layout
   Framework / positioning / sizing
   ========================================= */

* {box-sizing: border-box;}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

/* Keep the layout width identical when a page/state gains or loses
   enough content to require vertical scrolling. */
html {
    scrollbar-gutter: stable;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
}

img {
    display: block;
    max-width: 100%;
    padding: 8px 0;
    box-sizing: border-box;

}

a {text-decoration: none;}


/* ------------ */
/*  GRID DEMON  */
/* ------------ */

/* Align go center */
/* margin */ .out-warper, .logo, .logo img, header, footer, main-warper, {margin-left: auto;margin-right: auto;}
/* text-align */ footer {text-align: center;}
/* align-items */ .logo, .candy-river, footer {align-items: center;}
/* Flex CENTER */ .logo, footer {display: flex;justify-content: space-around;}
/* Flex CENTER2 */ main-warper {display: flex;flex-direction: column;align-items: center;}


/* position */ header, footer {position: fixed;}
/* z-index MAX */ header, footer {z-index: 1000;}


/* ------------- */
/*  WIDTH DEMON  */
/* ------------- */

/* width 100% */ header, footer, main-warper {width: 100%;}
/* MAX 500px */ /* {max-width: 500px;}*/
/* MAX 360px */ .out-warper, .main-warper { max-width: 360px;}


/* ------------- */
/* POSITION DEMON */
/* ------------- */

/* out-warper = DDD domain */ .out-warper {position: relative;width: 100%;min-height: 100vh;margin-left: auto;margin-right: auto;}

/* Post page full-width background wrappers.
   The wrappers own the viewport-wide background; the actual header/footer
   layout stays constrained to the existing 340px reading width. */
.post-header-wrap,
.post-footer-wrap {
    position: fixed;
    left: 0;
    width: 100%;
    background: #ffffff;
    z-index: 1000;
}

.post-header-wrap {
    top: 0;
    height: 100px;
}

.post-footer-wrap {
    bottom: 0;
    height: 80px;
}

.post-header-wrap > header,
.post-footer-wrap > footer {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: 340px;
    max-width: calc(100vw - 20px);
    margin-left: auto;
    margin-right: auto;
}

.post-header-wrap > header {
    height: 100px;
}

.post-footer-wrap > footer.post {
    height: 80px;
}

/* Keep the reading surface dark without using a viewport-spilling pseudo-element.
   Header/footer wrappers above remain explicitly white. */
body.reader-dark {
    background: #111111;
}

body.reader-dark .post-text.post::before {
    display: none;
}

/* header */ header {
    top: 0;
    left: 0;
}

/* footer */ footer {
    bottom: 0;
    left: 0;
}

/* main-warper */ main-warper {min-height: calc(100vh - 200px);padding-top: 100px;padding-bottom: 100px;}



/* ------------ */
/*     DIVs     */
/* ------------ */

/* header */ .logo {height: 100px;}
/* logo */ .logo img {width: 66px;}

/* nav */ .nav {}

/* burger / summon */ .burger {}
.summon {}

/* footer */
footer {
    height: 100px;
    letter-spacing: 2px;
}
footer.post {
    width: 340px;
    max-width: calc(100vw - 20px);
    height: 80px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}
footer.codex { 
    height:30px;
}

.footer-info::after  {
    content: "R16+";
    display: inline-block;
    margin: 0 5px;
    padding: 1px 5px;
    /* border: 1px solid #ffffff; */
    font-size: 9px;
    background-color: #fa6699;
    color: #ffffff;
    border-radius: 100%;    
    letter-spacing: 0px;
}

/* ------------ */
/*  Index.html  */
/* ------------ */

/* content */ .content {width: 100%;}

/* post */ 
.post-title {}
.post-cover {}
.post-text {}
.index {}
.sub {}
.post-tag {}

/* Post header/footer wrapper alignment fixes.
   The wrapper is full-width; the actual 340px layout stays centered inside it. */
.post-header-wrap > header.ai-header,
.post-footer-wrap > footer.post {
    left: auto;
    transform: none;
}

/* Extend only the breadcrumb row's white background to the viewport edges. */
.post-catalog.post {
    box-shadow: 0 0 0 100vmax #ffffff;
    clip-path: inset(0 -100vmax);
}