/*
Theme Name: QTD Theme
Theme URI: https://q-t-d.com
Author: QTD PRODUCTIONS
Description: QTD custom WordPress theme
Version: 1.0
*/
/* =========================================================
   Q・T・D PRODUCTIONS
   STYLE SHEET
========================================================= */

/* =========================================================
   FONT
========================================================= */

@font-face {

    font-family: 'mincho';

    src: url('font/JF-Dot-AyuMin18.ttf')
    format('truetype');

}

/* =========================================================
   RESET
========================================================= */

*{
    box-sizing:border-box;
}

html,
body {

    min-height:100vh;

    margin:0;
    padding:0;

    background-color:#000000;

    color:#DDDDDD;

    font-family:'mincho', sans-serif;

    position:relative;

    scroll-behavior:smooth;

}

/* =========================================================
   CRT OVERLAY
========================================================= */

body::after {

    content:"";

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    z-index:9999;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(17,17,17,0.55) 0px,
            rgba(17,17,17,0.55) 1px,
            transparent 2px,
            transparent 5px
        );

    background-size:100% 5px;

    animation:lines 10s linear infinite;

    opacity:0.28;

    mix-blend-mode:soft-light;

    pointer-events:none;

}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1{
    font-size:40px;
    color:#8bd2f0;
}

h2{
    font-size:30px;
    color:#d28bf0;
}

h3{
    font-size:30px;
    color:#f0d28b;
}

p{
    font-size:20px;
    color:#8bd2f0;
}

li{
    font-size:20px;
    color:#dddddd;
}

a{

    font-size:20px;

    color:#8bd2f0;

    text-decoration:none;

    transition:
        color 0.2s,
        transform 0.2s,
        opacity 0.2s;

}

a:visited{
    color:#8bd2f0;
}

a:hover{

    color:#d28bf0;

}

/* =========================================================
   WALLPAPER
========================================================= */

#wallpaper {

    width:100%;

    height:70vh;

    position:relative;

    background:
        url('img/home.png')
        center center / cover
        no-repeat;

    background-attachment:fixed;

}

#wallpaper #noise {

    position:absolute;

    top:calc(70vh - 380px);

    left:2vw;

    z-index:4;

}

#wallpaper h1 {

    position:absolute;

    left:18vw;

    top:50vh;

    font-size:5vh;

    color:rgb(240,240,240);

    text-shadow:
        3px 6px #000,
        0px -1px #000,
        0px 1px #000,
        -1px 0px #000,
        1px 0px #000,
        -1px -1px #000,
        1px 1px #000,
        -1px 1px #000,
        1px -1px #000;

    transition:top 0s;

    animation:giggle 1s ease-in-out infinite;

    -webkit-animation:
        giggle 1s ease-in-out infinite;

    z-index:5;

}

/* =========================================================
   LAYOUT
========================================================= */

.padded{

    position:relative;

    z-index:2;

    padding-left:5vw;
    padding-right:5vw;

}

.main-layout{

    padding-top:60px;
    padding-bottom:80px;

}

.content-grid{

    display:grid;

    grid-template-columns:
        minmax(280px,380px)
        1fr;

    gap:60px;

    align-items:start;

}

.content-column{

    min-width:0;

}

.story-column{

    overflow:hidden;

}

.hero-content{

    position:absolute;

    left:5vw;

    top:5vw;

    z-index:5;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.hero-label{

    display:inline-block;

    margin-bottom:18px;

    padding:10px 16px;

    border:
        1px solid rgba(255,255,255,0.22);

    background:
        rgba(0,0,0,0.45);

    backdrop-filter:blur(4px);

    color:#dddddd;

    font-size:0.8rem;

    letter-spacing:0.18em;

    line-height:1;

    box-shadow:
        0 0 18px rgba(0,0,0,0.35);

    text-transform:uppercase;

}

/* =========================================================
   PANELS
========================================================= */

.panel{

    margin-bottom:40px;

    padding:28px;

    border:
        1px solid rgba(139,210,240,0.2);

    background:
        rgba(255,255,255,0.02);

    backdrop-filter:blur(3px);

}

.panel h3{

    margin-top:0;

}

.link-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.link-list a{

    display:inline-block;

    width:fit-content;

}

.link-list a:hover{

    transform:translateX(6px);

}

/* =========================================================
   TABLE
========================================================= */

.table,
.table th,
.table td{

    border:1px solid;

    border-color:#8bd2f0;

    font-size:17px;

    color:#f0d28b;

}

/* =========================================================
   STORY
========================================================= */

.mainstory{

    max-width:900px;

    margin:auto;

    color:#dddddd;

    line-height:2;

}

.story-header{

    text-align:center;

    margin-bottom:60px;

}

.story-header h2{

    font-size:4rem;

    letter-spacing:0.3rem;

    color:#f0d28b;

    margin-bottom:10px;

}

.tagline{

    color:#9dc7ff;

    font-style:italic;

    font-size:1.2rem;

}

.story-quote{

    text-align:center;

    margin:50px auto;

    padding:30px;

    border:
        1px solid rgba(255,255,255,0.15);

    background:
        rgba(255,255,255,0.03);

    color:#cccccc;

    font-style:italic;

}

.story-body p{

    margin-bottom:32px;

    font-size:1.05rem;

    line-height:2.2;

}

.terminal{

    background:#060b14;

    border:
        1px solid rgba(0,255,200,0.2);

    color:#7fffd4;

    padding:25px;

    margin:40px 0;

    font-family:monospace;

    overflow-x:auto;

    box-shadow:
        0 0 25px rgba(0,255,180,0.08);

}

.ending{

    text-align:left;

    font-size:2rem;

    color:#9dc7ff;

    margin-top:80px;

    letter-spacing:0.15rem;

}

/* =========================================================
   ID CARD
========================================================= */

.id-card-page{

    padding-top:40px;
    padding-bottom:80px;

}

.id-card-layout{

    display:grid;

    grid-template-columns:400px 1fr;

    gap:40px;

    align-items:start;

}

.id-card-image{

    position:sticky;

    top:30px;

}

.id-card-image img{

    width:100%;

    display:block;

    border:
        1px solid rgba(139,210,240,0.35);

    box-shadow:
        0 0 30px rgba(0,0,0,0.6);

    background:#111;

}

.id-table{

    width:100%;

    border-collapse:collapse;

    background:
        rgba(255,255,255,0.02);

    border:
        1px solid rgba(139,210,240,0.3);

}

.id-table tr{

    border-bottom:
        1px solid rgba(139,210,240,0.15);

}

.id-table td{

    padding:20px;

    vertical-align:top;

    line-height:2;

}

.id-table td:first-child{

    width:220px;

    color:#f0d28b;

    font-weight:bold;

    letter-spacing:0.08em;

    border-right:
        1px solid rgba(139,210,240,0.15);

    background:
        rgba(139,210,240,0.04);

}

.id-table td:last-child{

    color:#dddddd;

}

.id-notice{

    margin-top:40px;

    padding:24px;

    border-left:
        4px solid #8bd2f0;

    background:
        rgba(255,255,255,0.03);

    color:#cccccc;

    line-height:2;

    font-style:italic;

}

/* =========================================================
   BUTTON
========================================================= */

.back-button{

    display:inline-block;

    padding:14px 32px;

    margin-top:40px;

    border:
        1px solid #8bd2f0;

    color:#8bd2f0;

    background:
        rgba(139,210,240,0.05);

    transition:0.2s;

}

.back-button:hover{

    background:#8bd2f0;

    color:#000;

}

/* =========================================================
   SEPARATORS
========================================================= */

.seperator1,
.seperator2,
.seperator3{

    position:relative;

    z-index:5;

    width:100vw;

    margin-left:calc(50% - 50vw);

    background-repeat:repeat-x;

}

.seperator1{

	width:100%;
	height:30px;

	background-image:
        url(img/seperator1.png);

}

.seperator2{

	width:100%;
	height:31px;

	background-image:
        url(img/seperator2.png);

}

.seperator3{

	width:100%;
	height:51px;

	background-image:
        url(img/seperator3.png);

}

/* =========================================================
   FOOTER
========================================================= */

#footer,
#footer-bottom {

    position:relative;

    z-index:5;

    clear:both;

    width:100vw;

    margin-left:calc(50% - 50vw);

    text-align:center;

    color:#000;

    background-color:#ffff00;

}

#footer{

    padding:40px 20px;

}

#footer-bottom{

    padding:25px 20px;

}

#footer img{

    transition:
        transform 0.2s,
        opacity 0.2s;

}

#footer img:hover{

    transform:scale(1.05);

    opacity:0.85;

}

.brand-small {

    font-size:
        clamp(28px,3.5vw,40px);

    font-weight:700;

    color:#000;

    display:block;

    line-height:1.2;

    margin-bottom:6px;

}

.brand-large {

    font-size:
        clamp(44px,6vw,72px);

    font-weight:800;

    color:#000;

    display:block;

    line-height:1.1;

}

/* =========================================================
   ANIMATION
========================================================= */

@-webkit-keyframes giggle {

    0%,100% {

        transform:translateY(-4px);

    }

    50% {

        transform:translateY(4px);

    }

}

@keyframes giggle {

    0%,100% {

        transform:translateY(-4px);

    }

    50% {

        transform:translateY(4px);

    }

}

@keyframes lines {

    0% {

        background-position:0px 0px;

    }

    100% {

        background-position:0px 25px;

    }

}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:1000px){

    .content-grid{

        grid-template-columns:1fr;

    }

    .id-card-layout{

        grid-template-columns:1fr;

    }

}

@media(max-width:700px){

    #wallpaper{

        height:65vh;

        background-position:center;

        background-attachment:scroll;

    }

    #wallpaper h1{

        left:6vw;

        top:46vh;

        font-size:
            clamp(2rem,8vw,4rem);

    }

    #wallpaper #noise{

        width:120px;

        top:calc(65vh - 170px);

    }

    .story-header h2{

        font-size:2.5rem;

    }

    .terminal{

        font-size:0.9rem;

    }

    .brand-large{

        font-size:
            clamp(28px,8vw,56px);

    }

    .id-table td{

        display:block;

        width:100%;

    }

    .id-table td:first-child{

        border-right:none;

        border-bottom:
            1px solid rgba(139,210,240,0.15);

    }

}

/* =========================================================
   WORDPRESS FRONT PAGE POSTS
========================================================= */

.latest-post-content {
    max-width:900px;
    width:100%;
}

.latest-post-content .story-body {
    color:#dddddd;
    line-height:2.2;
}

.latest-post-content .story-body p {
    color:#dddddd;
    font-size:1.05rem;
    line-height:2.2;
}

.latest-post-content .story-body a {
    color:#8bd2f0;
    border-bottom:1px solid rgba(139,210,240,0.5);
}

.latest-post-content .story-body a:hover {
    color:#d28bf0;
}

.latest-posts {
    width:100%;
}

.post-list {
    display:flex;
    flex-direction:column;
    gap:32px;
}

.post-card {
    padding:28px;
    border:1px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.03);
}

.post-card h3 {
    margin-top:0;
    margin-bottom:10px;
}

.post-card h3 a {
    color:#f0d28b;
    font-size:1.6rem;
}

.post-meta {
    margin-bottom:18px;
    color:#9dc7ff;
    font-size:0.9rem;
    letter-spacing:0.12em;
}

.post-excerpt p {
    color:#dddddd;
    line-height:2;
    font-size:1rem;
}

.read-more {
    display:inline-block;
    margin-top:12px;
    color:#8bd2f0;
    border-bottom:1px solid rgba(139,210,240,0.5);
}

/* =========================================================
   BACK NUMBER
========================================================= */

.backnumber-list {
    max-height:520px;
    overflow-y:auto;
    padding-right:8px;
}

.backnumber-list::-webkit-scrollbar {
    width:8px;
}

.backnumber-list::-webkit-scrollbar-track {
    background:rgba(255,255,255,0.04);
}

.backnumber-list::-webkit-scrollbar-thumb {
    background:rgba(139,210,240,0.35);
}

.link-list span {
    font-size:1rem;
    color:#999999;
}

/* =========================================================
   POST NAVIGATION
========================================================= */

.post-navigation {
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-top:60px;
    padding-top:30px;
    border-top:1px solid rgba(255,255,255,0.15);
}

.nav-button {
    display:inline-block;
    padding:12px 20px;
    border:1px solid rgba(139,210,240,0.5);
    background:rgba(139,210,240,0.05);
    color:#8bd2f0;
    font-size:1rem;
}

.nav-button:hover {
    background:#8bd2f0;
    color:#000;
}

/* =========================================================
   SINGLE / PAGE FALLBACK
========================================================= */

.single-post,
.page-content {
    max-width:900px;
    margin:0 auto;
}

.single-post .story-body,
.page-content .story-body {
    color:#dddddd;
    line-height:2.2;
}

.single-post .story-body p,
.page-content .story-body p {
    color:#dddddd;
    font-size:1.05rem;
}

/* =========================================================
   WORDPRESS ADMIN BAR ADJUSTMENT
========================================================= */

.admin-bar body::after {
    top:32px;
}

@media(max-width:782px){
    .admin-bar body::after {
        top:46px;
    }
}

/* =========================================================
   MOBILE ADDITIONS
========================================================= */

@media(max-width:700px){

    .post-navigation {
        flex-direction:column;
    }

    .nav-button {
        width:100%;
        text-align:center;
    }

    .backnumber-list {
        max-height:360px;
    }

}