/*
Theme Name: INVISILENT
Theme URI: https://invisilent.com
Author: INVISILENT
Description: Invisible. Silent. Not unheard. A custom dark theme where every page is a card.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: invisilent
*/

body{margin:0;background:#0A0A0B}
a{color:#E8E2D6;text-decoration:none}a:hover{color:#FFFFFF}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #E8E2D6;outline-offset:3px}
::selection{background:#8E1B20;color:#F4EFE6}
.inv-hero-img{position:relative;width:100%;aspect-ratio:2880 / 1618;overflow:hidden;background:#0A0A0B}
.inv-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.inv-void-text{position:absolute;left:57%;top:67%;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.inv-wm{font-size:clamp(30px,3.7vw,60px)}
@media (max-width:820px){.inv-hero-img{aspect-ratio:auto;overflow:visible}.inv-hero-photo{position:relative;height:auto;aspect-ratio:2880 / 1618}.inv-void-text{position:static;transform:none;padding:28px 16px 0}.inv-wm{font-size:clamp(34px,11vw,64px)}.inv-fades{display:none}}
@keyframes inv-pulse{0%{opacity:.35}50%{opacity:1}100%{opacity:.35}}
@media (prefers-reduced-motion: no-preference){.inv-dot{animation:inv-pulse 4.5s ease-in-out infinite}}

/* Generic card page (page.php) */
.inv-entry{max-width:760px;margin:0 auto;padding:clamp(48px,7vw,96px) clamp(16px,4vw,48px) clamp(72px,10vw,120px);box-sizing:border-box}
.inv-prose{min-width:0;font-size:19px;line-height:1.85;color:#D6D1C6}
.inv-prose h1{margin:0 0 24px;font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(40px,6vw,72px);line-height:1.04;color:#E8E2D6}
.inv-prose h2,.inv-prose h3{font-family:'Cormorant Garamond',serif;font-weight:300;color:#E8E2D6;line-height:1.15}
.inv-prose p{margin:0 0 22px}
.inv-prose a{border-bottom:1px solid #5A5853}
.inv-prose blockquote{margin:28px 0;padding:0 0 0 20px;border-left:2px solid #8E1B20;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.4em;line-height:1.3}
.inv-prose ul,.inv-prose ol{padding-left:1.2em}
.inv-prose img{max-width:100%;height:auto}
.inv-prose .wp-block-button__link{display:inline-flex;align-items:center;min-height:52px;padding:0 30px;background:#8E1B20;border:1px solid #8E1B20;color:#F4EFE6;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.18em;text-transform:uppercase;border-radius:0}

/* ---------- Card art as the page background ---------- */
/* Art keeps its proportions, never stretched. Phones: full-bleed behind the text, darkened.
   Desktop: the whole card stands on one side and fades into the dark, so nothing is cropped or blown up. */
.inv-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0A0A0B;pointer-events:none}
.inv-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block;filter:brightness(.55) contrast(1.05)}
.inv-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,11,.45) 0%,rgba(10,10,11,.78) 100%)}
@media (max-width:899px){.inv-bg-label{display:none}}
.inv-bg ~ div{position:relative;z-index:1;background:transparent !important}
.inv-bg ~ div section{background:transparent !important}
.inv-bg ~ div header{background:rgba(10,10,11,.6)}
.inv-bg-label{position:absolute;left:clamp(16px,4vw,48px);bottom:18px;z-index:2;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#8C8A85}
@media (min-width:900px){
  .inv-bg--side img{left:auto;right:0;width:min(56.2vh,52vw);filter:brightness(.7) contrast(1.05);object-fit:cover;object-position:50% 50%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 38%);mask-image:linear-gradient(to right,transparent 0,#000 38%)}
  .inv-bg--side::after{background:linear-gradient(to bottom,rgba(10,10,11,.25) 0%,rgba(10,10,11,.1) 40%,rgba(10,10,11,.45) 100%)}
  .inv-bg--side ~ div{padding-right:min(56.2vh,52vw);box-sizing:border-box}
  .inv-bg--side .inv-bg-label{left:auto;right:18px;text-align:right}
  .inv-bg--center img{left:50%;right:auto;width:min(56.2vh,60vw);transform:translateX(-50%);filter:brightness(.75) contrast(1.05);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 30%,#000 70%,transparent 100%)}
  .inv-bg--center::after{background:rgba(10,10,11,.3)}
}
@media (prefers-reduced-motion:no-preference){.inv-bg img{animation:inv-in 1.2s ease both}}
@keyframes inv-in{from{opacity:0}to{opacity:1}}