/*
Theme Name: What Remains Elementor V4.3.1
Theme URI: https://madebywhatremains.com
Author: What Remains
Description: A custom classic WordPress theme built specifically for Elementor. Every page, including the homepage, renders through the_content() so it can be fully designed and responsively adjusted in Elementor.
Version: 4.3.1
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: what-remains-elementor
*/

:root{
  --wr-black:#0b0b0b;
  --wr-black-2:#111111;
  --wr-ink:#f2f0ea;
  --wr-muted:#9e9b93;
  --wr-line:rgba(242,240,234,.15);
  --wr-rust:#b64935;
  --wr-pad:clamp(20px,4vw,70px);
  --wr-max:1600px;
}

html{scroll-behavior:smooth;background:var(--wr-black)}
body{margin:0;background:var(--wr-black);color:var(--wr-ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--wr-ink)}
::selection{background:var(--wr-rust);color:#fff}

h1,h2,h3,h4,h5,h6{font-family:"Inter Tight",Inter,ui-sans-serif,sans-serif;letter-spacing:-.045em;line-height:.96;color:var(--wr-ink);margin-top:0}
h1{font-size:clamp(56px,9vw,150px);font-weight:650;letter-spacing:-.065em}
h2{font-size:clamp(40px,5.5vw,88px);font-weight:620}
h3{font-size:clamp(28px,3vw,48px);font-weight:600}
p{margin-top:0}

/* Theme header: fixed, transparent, intentionally small. The logo is a persistent brand mark, not a hero. */
.wr-site-header{
  position:fixed;
  z-index:9999;
  top:0;
  left:0;
  right:0;
  width:100%;
  min-height:78px;
  padding:22px var(--wr-pad) 30px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(11,11,11,.90) 0%,rgba(11,11,11,.55) 46%,rgba(11,11,11,0) 100%);
}
.admin-bar .wr-site-header{top:32px}
.wr-site-brand,.wr-nav{pointer-events:auto}
.wr-site-brand{
  display:block;
  line-height:0;
  width:110px;
  max-width:110px;
  flex:0 0 110px;
  overflow:visible;
}
.wr-site-brand .custom-logo-link,
.wr-site-brand .wr-fallback-logo-link{
  display:block!important;
  width:110px!important;
  max-width:110px!important;
  line-height:0!important;
}
/* Strong guardrail: WordPress may inject intrinsic custom-logo dimensions.
   These rules intentionally win over them so the persistent mark can never
   become a hero-sized image. */
.wr-site-header .wr-site-brand img,
.wr-site-header img.custom-logo,
.wr-site-header img.wr-fallback-logo{
  display:block!important;
  width:110px!important;
  max-width:110px!important;
  min-width:0!important;
  height:auto!important;
  max-height:72px!important;
  object-fit:contain!important;
  object-position:left top!important;
}
.wr-nav{display:flex;align-items:center;gap:26px;font:500 12px/1 Inter,ui-sans-serif,sans-serif;padding-top:3px}
.wr-nav ul{display:flex;gap:26px;align-items:center;list-style:none;margin:0;padding:0}
.wr-nav a{color:rgba(242,240,234,.67);transition:color .2s ease}
.wr-nav a:hover,.wr-nav .current-menu-item>a{color:var(--wr-ink)}
.wr-menu-toggle{display:none;border:0;background:none;color:var(--wr-ink);font:500 12px/1 Inter,sans-serif;padding:10px 0}

/* Page shell: deliberately does NOT constrain Elementor */
.wr-site-main{width:100%;min-height:70vh}
.wr-content{width:100%}
.wr-content>.elementor{width:100%}

/* Normal WordPress content fallback when a page is not built with Elementor */
.wr-standard-content{width:min(900px,calc(100% - (2 * var(--wr-pad))));margin:0 auto;padding:130px 0 120px}
.wr-standard-content h1{font-size:clamp(48px,7vw,100px);max-width:12ch}
.wr-standard-content p{color:var(--wr-muted);max-width:720px}

/* Footer */
.wr-footer{border-top:1px solid var(--wr-line);padding:62px var(--wr-pad) 30px;background:var(--wr-black)}
.wr-footer-inner{width:min(var(--wr-max),100%);margin:0 auto}
.wr-footer-top{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.wr-footer-name{font-family:"Inter Tight",Inter,sans-serif;font-size:clamp(30px,4vw,64px);font-weight:600;letter-spacing:-.05em;line-height:.96;margin:0}
.wr-footer-meta{font:400 10px/1.65 "IBM Plex Mono",monospace;color:var(--wr-muted);text-transform:uppercase;letter-spacing:.06em;text-align:right;margin:0}
.wr-footer-bottom{display:flex;justify-content:space-between;gap:24px;margin-top:65px;color:#666;font:400 10px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.05em}

/* Helpful WR utility classes you can enter in Elementor > Advanced > CSS Classes */
.wr-kicker{font:500 11px/1.25 "IBM Plex Mono",monospace!important;color:var(--wr-muted)!important;letter-spacing:.08em!important;text-transform:uppercase}
.wr-rust{color:var(--wr-rust)!important}
.wr-muted{color:var(--wr-muted)!important}
.wr-display,.wr-display .elementor-heading-title{font-family:"Inter Tight",Inter,sans-serif!important;letter-spacing:-.06em!important;line-height:.9!important}
.wr-rule{border-top:1px solid var(--wr-line)}
.wr-full-bleed{width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}

/* Elementor-specific cleanup */
.elementor-page .wr-site-main{overflow:hidden}
.elementor-page .elementor-widget-text-editor p:last-child{margin-bottom:0}
.elementor-page .elementor-widget-heading .elementor-heading-title{font-family:"Inter Tight",Inter,sans-serif}
.elementor-page .elementor-button{border-radius:0;background:transparent;color:var(--wr-ink);border:0;border-bottom:1px solid currentColor;padding:0 0 5px;font-weight:600}
.elementor-page .elementor-button:hover{background:transparent;color:var(--wr-rust)}

@media (max-width:767px){
  body{font-size:16px}
  .wr-site-header{min-height:64px;padding:17px 20px 26px}
  .wr-site-brand{width:82px;max-width:82px;flex-basis:82px}
  .wr-site-brand .custom-logo-link,.wr-site-brand .wr-fallback-logo-link{width:82px!important;max-width:82px!important}
  .wr-site-header .wr-site-brand img,.wr-site-header img.custom-logo,.wr-site-header img.wr-fallback-logo{width:82px!important;max-width:82px!important;max-height:56px!important}
  .wr-nav{gap:14px;font-size:10px;padding-top:1px}
  .wr-nav ul{gap:14px}
  .wr-footer{padding-top:48px}
  .wr-footer-top{display:block}
  .wr-footer-meta{text-align:left;margin-top:28px}
  .wr-footer-bottom{flex-direction:column;margin-top:48px}
}


/* --------------------------------------------------------------------------
   Elementor V4.3 visual system
   -------------------------------------------------------------------------- */

/* Force the What Remains system even when Elementor Free still carries its
   own default kit values. Individual widget overrides remain possible. */
.elementor-page,
.elementor-page .elementor,
.elementor-page .e-con,
.elementor-page .elementor-section{color:var(--wr-ink)}
.elementor-page .elementor-widget-heading .elementor-heading-title,
.elementor-page .elementor-widget-text-editor h1,
.elementor-page .elementor-widget-text-editor h2,
.elementor-page .elementor-widget-text-editor h3,
.elementor-page .elementor-widget-text-editor h4{
  font-family:"Inter Tight",Inter,ui-sans-serif,sans-serif;
  color:var(--wr-ink);
}
.elementor-page .elementor-widget-text-editor,
.elementor-page .elementor-widget-text-editor p,
.elementor-page .elementor-widget-text-editor li{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.elementor-page .wr-display .elementor-heading-title,
.elementor-page .elementor-widget-heading.wr-display .elementor-heading-title{
  font-family:"Inter Tight",Inter,ui-sans-serif,sans-serif!important;
  font-weight:600!important;
  letter-spacing:-.065em!important;
  line-height:.9!important;
}
.elementor-page .wr-kicker,
.elementor-page .wr-kicker *{
  font-family:"IBM Plex Mono",ui-monospace,monospace!important;
  font-size:11px!important;
  font-weight:500!important;
  line-height:1.35!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  color:var(--wr-muted)!important;
}

/* Imported V4.2/V4.3 template classes. */
.wr-el-image-placeholder{
  background:#151515;
  border:1px solid rgba(242,240,234,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6f6d68;
  font:500 11px/1.4 "IBM Plex Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.06em;
  text-align:center;
  padding:24px;
}
.wr-el-hero,.wr-el-project,.wr-el-about,.wr-el-game-hero,.wr-el-split,.wr-el-process,.wr-el-gallery,.wr-el-quiet{
  padding-left:var(--wr-pad)!important;
  padding-right:var(--wr-pad)!important;
}
.wr-el-hero{padding-top:clamp(140px,18vh,220px)!important;padding-bottom:9vh!important}
.wr-el-project{padding-top:110px!important;padding-bottom:110px!important;border-top:1px solid var(--wr-line)}
.wr-el-about{padding-top:130px!important;padding-bottom:150px!important}
.wr-el-game-hero{padding-top:clamp(135px,16vh,190px)!important;padding-bottom:80px!important}
.wr-el-full-media{padding:0 var(--wr-pad) 110px!important}
.wr-el-split{padding-top:120px!important;padding-bottom:120px!important;border-top:1px solid var(--wr-line)}
.wr-el-process{padding-top:72px!important;padding-bottom:110px!important;border-top:1px solid var(--wr-line)}
.wr-el-process-item{padding-right:24px}
.wr-el-gallery{padding-top:80px!important;padding-bottom:130px!important}
.wr-el-quiet{padding-top:140px!important;padding-bottom:140px!important}
.wr-el-lede,.wr-el-lede p{font-size:clamp(22px,2.6vw,42px)!important;line-height:1.15!important;max-width:28ch;color:var(--wr-muted)!important}
.wr-el-big-copy,.wr-el-big-copy p{font-size:clamp(20px,2vw,31px)!important;line-height:1.35!important;color:var(--wr-muted)!important}
.wr-el-meta,.wr-el-meta p{font-size:13px!important;color:var(--wr-muted)!important}
.wr-el-meta strong{color:var(--wr-ink)!important;font-weight:600}
.wr-el-text-button .elementor-button{font-family:Inter,sans-serif!important;font-size:13px!important;font-weight:600!important;letter-spacing:-.01em}

/* Give imported headings a useful responsive baseline, while preserving
   Elementor's per-device controls when the user sets an explicit size. */
.wr-el-hero .elementor-widget-heading.wr-display .elementor-heading-title{font-size:clamp(54px,8.6vw,144px)}
.wr-el-game-hero .elementor-widget-heading.wr-display .elementor-heading-title{font-size:clamp(52px,8vw,132px)}
.wr-el-project .elementor-widget-heading.wr-display .elementor-heading-title{font-size:clamp(42px,5.3vw,84px)}
.wr-el-about .elementor-widget-heading.wr-display .elementor-heading-title,
.wr-el-split .elementor-widget-heading.wr-display .elementor-heading-title,
.wr-el-quiet .elementor-widget-heading.wr-display .elementor-heading-title{font-size:clamp(38px,4.8vw,76px)}

@media(max-width:782px){.admin-bar .wr-site-header{top:46px}}
@media(max-width:767px){
  .wr-nav li:nth-child(2){display:none}
  .wr-el-hero{padding-top:118px!important;padding-bottom:62px!important}
  .wr-el-project,.wr-el-split,.wr-el-process,.wr-el-gallery,.wr-el-about,.wr-el-quiet{padding-top:70px!important;padding-bottom:70px!important}
  .wr-el-game-hero{padding-top:112px!important;padding-bottom:55px!important}
  .wr-el-full-media{padding-bottom:70px!important}
  .wr-el-process-item{padding-right:0;margin-bottom:38px}
  .wr-el-image-placeholder{min-height:280px!important}
  .wr-el-lede,.wr-el-lede p{font-size:22px!important}
  .wr-el-big-copy,.wr-el-big-copy p{font-size:19px!important}
  .wr-el-hero .elementor-widget-heading.wr-display .elementor-heading-title{font-size:clamp(44px,13vw,62px)}
  .wr-el-game-hero .elementor-widget-heading.wr-display .elementor-heading-title{font-size:clamp(44px,12vw,60px)}
  .wr-el-project .elementor-widget-heading.wr-display .elementor-heading-title,
  .wr-el-about .elementor-widget-heading.wr-display .elementor-heading-title,
  .wr-el-split .elementor-widget-heading.wr-display .elementor-heading-title,
  .wr-el-quiet .elementor-widget-heading.wr-display .elementor-heading-title{font-size:clamp(36px,10vw,48px)}
}