/*
Theme Name: Moravichi
Theme URI: https://moravichi.com
Author: Moravichi Construction Co.
Description: A single-page landing theme for Moravichi Construction Co. White paper background, graphite-and-orange drafting palette, and an architectural pencil sketch that is revealed under the cursor. Edit the headline, contact details and social links at the top of index.php.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moravichi
*/

:root{
  --paper:#FFFFFF;
  --orange:#D96A26;
  --orange-soft:#E9A374;
  --graphite:#3F4550;
  --gray:#6B7280;
  --gray-soft:#9AA1AC;
  --blue:#2E5AAC;
  --rule:#E7E4DE;
  --peach:#F8E7DA;
  --sand:#F4EFE6;
  --sky:#E9EFF9;
  --sage:#E8EEE8;
  --frame:22px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:#FFFFFF; color-scheme:light}
body{
  background:var(--paper); color:var(--gray);
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-weight:300;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* ---------------- background sketch ---------------- */
.sketch{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.sketch svg{position:absolute; inset:0; width:100%; height:100%}
.sk{position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease}
.sk-in{position:absolute; inset:-4%; will-change:transform}
.sketch.on .sk{opacity:1}
.sketch.on .sk-masked{opacity:.375}
.sk-ambient{opacity:.15 !important}

.sk-masked{
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx,50%) var(--my,42%),
    rgba(0,0,0,1) 0%, rgba(0,0,0,.72) 42%, rgba(0,0,0,0) 76%);
  mask-image:radial-gradient(circle var(--r) at var(--mx,50%) var(--my,42%),
    rgba(0,0,0,1) 0%, rgba(0,0,0,.72) 42%, rgba(0,0,0,0) 76%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
#lyGuide{--r:420px}
#lyMass{--r:250px}
#lyPlant{--r:320px}

.page{position:relative; z-index:1}

/* ---------------- sheet frame ---------------- */
.frame{position:fixed; inset:var(--frame); border:1px solid var(--rule); z-index:5; pointer-events:none}
.frame::before,.frame::after{content:""; position:absolute; width:14px; height:14px; border:1px solid var(--orange-soft)}
.frame::before{top:-1px; left:-1px; border-right:0; border-bottom:0}
.frame::after{bottom:-1px; right:-1px; border-left:0; border-top:0}
.tick{
  position:fixed; z-index:6; pointer-events:none;
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gray-soft);
}
.tick-tl{top:calc(var(--frame) + 10px); left:calc(var(--frame) + 12px); color:var(--graphite)}
.tick-tr{top:calc(var(--frame) + 10px); right:calc(var(--frame) + 12px)}
.tick-bl{bottom:calc(var(--frame) + 10px); left:calc(var(--frame) + 12px)}
.tick-br{bottom:calc(var(--frame) + 10px); right:calc(var(--frame) + 12px); font-variant-numeric:tabular-nums; color:var(--orange)}

.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(28px,6vw,84px)}

/* ---------------- hero ---------------- */
.hero{min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:140px 0 80px}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--orange); margin:0 0 26px}
.eyebrow span{color:var(--gray-soft)}
h1{
  font-family:"Archivo",sans-serif; font-weight:200;
  font-size:clamp(44px,9.2vw,132px); line-height:.95; letter-spacing:-.03em;
  color:var(--graphite); margin:0; text-transform:uppercase;
}
h1 em{font-style:normal; color:var(--orange); display:block}
.hero-rule{height:1px; background:var(--rule); margin:44px 0 26px; transform-origin:left; transform:scaleX(0); transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .3s}
.loaded .hero-rule{transform:scaleX(1)}
.hero-foot{display:flex; flex-wrap:wrap; gap:40px 72px; align-items:flex-start}
.lede{max-width:38ch; font-size:16px; line-height:1.65; margin:0; color:var(--gray)}
.specs{display:flex; gap:38px; flex-wrap:wrap}
.spec b{display:block; font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--gray-soft); margin-bottom:8px}
.spec p{margin:0; font-size:14px; color:var(--graphite)}

/* ---------------- sections ---------------- */
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:24px; border-top:1px solid var(--rule); padding-top:18px; margin-bottom:56px}
.sec-head h2{font-family:"Archivo",sans-serif; font-weight:300; text-transform:uppercase; font-size:clamp(20px,2.4vw,30px); color:var(--graphite); margin:0}
.sec-head span{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray-soft)}

.work{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(28px,4vw,64px) clamp(24px,3vw,48px); padding-bottom:96px}
.item{grid-column:span 12; opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.item.in{opacity:1; transform:none}
.item.w8{grid-column:span 8} .item.w7{grid-column:span 7}
.item.w5{grid-column:span 5} .item.w4{grid-column:span 4}
.item.offset{margin-top:64px}

.plate{position:relative; overflow:hidden; background:var(--paper); border:1px solid var(--rule); aspect-ratio:4/3}
.plate.tall{aspect-ratio:3/4}
.plate.wide{aspect-ratio:16/9}
.plate svg{position:absolute; inset:0; width:100%; height:100%}
.tint{position:absolute; inset:0; opacity:.45; transition:opacity .7s ease}
.item:hover .tint{opacity:1}
.t-peach{background:var(--peach)} .t-sand{background:var(--sand)}
.t-sky{background:var(--sky)} .t-sage{background:var(--sage)}

.stamp{
  position:absolute; left:12px; top:12px; z-index:3;
  font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gray-soft); background:rgba(255,255,255,.88); padding:4px 7px; border:1px solid var(--rule);
}
.cap{display:flex; justify-content:space-between; gap:20px; margin-top:14px; align-items:baseline}
.cap h3{font-family:"Archivo",sans-serif; font-weight:400; font-size:15px; color:var(--graphite); margin:0}
.cap p{margin:5px 0 0; font-size:13px; color:var(--gray-soft)}
.cap .no{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.2em; color:var(--orange)}

.item.w12{grid-column:span 12}
.soon-wrap{padding-bottom:88px}
.soon-plate{display:grid; place-items:center; aspect-ratio:21/9; min-height:300px}
.soon-plate .tint{opacity:.5}
.soon-copy{position:relative; z-index:3; text-align:center; max-width:46ch; padding:32px 24px}
.soon-label{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--gray-soft); margin:0 0 18px}
.soon-title{font-family:"Archivo",sans-serif; font-weight:200; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(30px,5.4vw,62px); line-height:1; color:var(--graphite); margin:0}
.soon-title em{font-style:normal; color:var(--orange)}
.soon-note{font-size:14px; line-height:1.7; color:var(--gray); margin:22px 0 0}
.soon-note a{color:var(--graphite); text-decoration:none; border-bottom:1px solid var(--rule); transition:color .3s, border-color .3s}
.soon-note a:hover{color:var(--orange); border-color:var(--orange)}
@media (max-width:820px){ .soon-plate{aspect-ratio:auto; min-height:360px} }
.ba{cursor:ew-resize; touch-action:pan-y}
.ba .after{position:absolute; inset:0; clip-path:inset(0 0 0 var(--p,50%))}
.ba .handle{position:absolute; top:0; bottom:0; left:var(--p,50%); width:1px; background:var(--orange); z-index:4}
.ba .handle::after{content:""; position:absolute; top:50%; left:50%; width:26px; height:26px; margin:-13px 0 0 -13px; border:1px solid var(--orange); background:rgba(255,255,255,.92); transform:rotate(45deg)}
.ba .lbl{position:absolute; bottom:12px; z-index:4; font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray-soft); background:rgba(255,255,255,.88); padding:3px 6px}
.ba .lbl.l{left:12px} .ba .lbl.r{right:12px; color:var(--orange)}
.ba:focus-visible{outline:1px solid var(--orange); outline-offset:4px}

.play{position:absolute; inset:0; display:grid; place-items:center; z-index:3}
.play svg{position:static; width:64px; height:64px; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.item:hover .play svg{transform:scale(1.08)}

footer{border-top:1px solid var(--rule); padding:56px 0 96px}
.foot-grid{display:flex; flex-wrap:wrap; gap:36px 80px; justify-content:space-between; align-items:flex-end}
.foot-mark{font-family:"Archivo",sans-serif; font-weight:200; text-transform:uppercase; font-size:clamp(26px,4.4vw,52px); line-height:1; letter-spacing:-.02em; color:var(--graphite); margin:0}
.foot-mark em{font-style:normal; color:var(--orange)}
.foot-links{display:flex; gap:34px; flex-wrap:wrap; font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.06em}
.foot-links a{color:var(--graphite); text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:3px; transition:color .3s, border-color .3s}
.foot-links a:hover{color:var(--orange); border-color:var(--orange)}
.foot-links a.social{display:inline-flex; align-items:center; gap:9px}
.foot-links a.social svg{width:15px; height:15px; fill:currentColor}
.legal{width:100%; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gray-soft); margin-top:48px}

@media (max-width:820px){
  .item.w8,.item.w7,.item.w5,.item.w4{grid-column:span 12}
  .item.offset{margin-top:0}
  .tick-bl,.tick-tr{display:none}
  :root{--frame:12px}
  #lyGuide{--r:300px} #lyMass{--r:190px} #lyPlant{--r:240px}
}
@media (hover:none), (pointer:coarse), (max-width:1100px){
  .sk-masked{display:none !important}
  .sk-ambient{opacity:.05 !important}
  .sk-in{transform:none !important; will-change:auto; inset:0}
  .tick-br{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  .item{opacity:1; transform:none}
  .hero-rule{transform:scaleX(1)}
}

/* ---------------- WordPress admin bar offset (logged-in views only) ---------------- */
body.admin-bar .frame{top:calc(var(--frame) + 32px)}
body.admin-bar .tick-tl,body.admin-bar .tick-tr{top:calc(var(--frame) + 42px)}
@media screen and (max-width:782px){
  body.admin-bar .frame{top:calc(var(--frame) + 46px)}
  body.admin-bar .tick-tl,body.admin-bar .tick-tr{top:calc(var(--frame) + 56px)}
}