/*
Theme Name: Infinite Kreations
Theme URI: https://www.infinitekreations.com
Author: Infinite Kreations
Author URI: https://www.infinitekreations.com
Description: Custom theme for Infinite Kreations — a branding, print and digital design studio. Includes a Work portfolio post type with a Project Type taxonomy, editable hero/contact/stats content via the Customizer, and a built-in contact form (no plugin required).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: infinite-kreations
*/

:root{
  --bone:#F4F1E9;
  --bone-2:#EBE6D9;
  --ink:#191714;
  --ink-2:#2A2723;
  --teal:#0E7A82;
  --teal-dark:#0A5D63;
  --raspberry:#D6336C;
  --amber:#E8A33D;
  --line: rgba(25,23,20,0.14);
  --line-on-ink: rgba(244,241,233,0.16);
  --radius: 2px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  background:var(--bone);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-0.02em; line-height:1.08;}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.14em; color:var(--teal-dark);}
.eyebrow.on-ink{color:var(--amber);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block; height:auto;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 20px;}}

.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}
.skip-link{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--bone); padding:12px 20px; z-index:999; font-family:'IBM Plex Mono',monospace; font-size:13px;}
.skip-link:focus{left:12px; top:12px;}

/* NAV */
header.site{position:sticky; top:0; z-index:50; background:rgba(244,241,233,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 32px; max-width:1180px; margin:0 auto;}
.brandmark{display:flex; align-items:center; gap:10px;}
.brandmark .grid{width:26px; height:26px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:2px;}
.brandmark .grid span{background:var(--ink);}
.brandmark .grid span:nth-child(2){background:var(--teal);}
.brandmark .grid span:nth-child(4){background:var(--raspberry);}
.brandmark .grid span:nth-child(6){background:var(--amber);}
.brandmark .grid span:nth-child(8){background:var(--teal);}
.brandmark .word{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px;}
nav.links{display:flex; align-items:center; gap:28px;}
nav.links ul{list-style:none; display:flex; gap:28px;}
nav.links a{font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.04em; opacity:0.65; padding:4px 0; border-bottom:2px solid transparent;}
nav.links a:hover, nav.links li.current-menu-item a{opacity:1; border-bottom-color:var(--raspberry);}
.btn{font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.03em; display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:var(--radius); cursor:pointer; border:1px solid var(--ink); background:var(--ink); color:var(--bone);}
.btn:hover{background:var(--teal-dark); border-color:var(--teal-dark); color:var(--bone);}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--ink);}
.btn.ghost:hover{background:var(--ink); color:var(--bone);}
.btn.on-ink{background:var(--amber); border-color:var(--amber); color:var(--ink);}
.btn.on-ink:hover{background:var(--bone); border-color:var(--bone);}
.menu-toggle{display:none; background:none; border:1px solid var(--ink); border-radius:var(--radius); padding:8px 12px; font-family:'IBM Plex Mono',monospace; cursor:pointer;}
@media(max-width:800px){
  nav.links{position:fixed; top:64px; left:0; right:0; background:var(--bone); flex-direction:column; align-items:flex-start; gap:0; border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:max-height 0.25s ease;}
  nav.links.open{max-height:420px;}
  nav.links ul{flex-direction:column; width:100%; gap:0;}
  nav.links a, nav.links .btn{display:block; width:100%; padding:16px 32px; border-bottom:1px solid var(--line); border-radius:0;}
  .menu-toggle{display:block;}
}

section{padding:96px 0;}
@media(max-width:640px){section{padding:56px 0;}}
.band-ink{background:var(--ink); color:var(--bone);}
.band-teal{background:var(--teal); color:var(--bone);}
.band-bone2{background:var(--bone-2);}

/* HERO */
.hero{padding-top:72px; padding-bottom:72px;}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.hero h1{font-size:clamp(34px,5vw,60px);}
.hero h1 .hl{color:var(--raspberry);}
.hero p.lead{font-size:18px; color:var(--ink-2); max-width:46ch; margin-top:20px;}
.hero .cta-row{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.pixel-hero{aspect-ratio:1/1; display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(6,1fr); gap:4px; border:1px solid var(--line);}
.pixel-hero div{background:var(--bone-2);}
.pixel-hero div.t{background:var(--teal);} .pixel-hero div.r{background:var(--raspberry);}
.pixel-hero div.a{background:var(--amber);} .pixel-hero div.i{background:var(--ink);}
.pixel-hero div.anim{animation:shuffle 5s ease-in-out infinite;}
@keyframes shuffle{0%,100%{opacity:1;} 50%{opacity:0.35;}}
@media(prefers-reduced-motion:reduce){.pixel-hero div.anim{animation:none;}}

.trust-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0;}
.trust-strip .wrap{display:flex; flex-wrap:wrap; gap:14px 40px; align-items:center; justify-content:space-between;}
.trust-strip .item{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-2); letter-spacing:0.02em;}

.section-head{max-width:640px; margin-bottom:48px;}
.section-head h2{font-size:clamp(26px,3.4vw,38px); margin-top:10px;}

.swatches{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media(max-width:800px){.swatches{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.swatches{grid-template-columns:1fr;}}
.swatch{border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px; min-height:150px; display:flex; flex-direction:column; justify-content:space-between; background:var(--bone);}
.swatch .num{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-2); opacity:0.6;}
.swatch h3{font-size:19px; margin-top:14px;}
.swatch p{font-size:14px; color:var(--ink-2); margin-top:8px;}
.swatch.c-teal{border-color:var(--teal); background:#EAF4F3;}
.swatch.c-rasp{border-color:var(--raspberry); background:#FBEAF0;}
.swatch.c-amber{border-color:var(--amber); background:#FBF2E2;}

.filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.filter-chip{font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:8px 14px; border:1px solid var(--line); border-radius:20px; display:inline-block;}
.filter-chip.active{background:var(--ink); color:var(--bone); border-color:var(--ink);}
.work-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media(max-width:900px){.work-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.work-grid{grid-template-columns:1fr;}}
.work-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bone); transition:transform 0.15s ease;}
.work-card:hover{transform:translateY(-3px);}
.work-card .thumb{aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:30px; overflow:hidden;}
.work-card .thumb img{width:100%; height:100%; object-fit:cover;}
.work-card .meta{padding:14px 16px; border-top:1px solid var(--line);}
.work-card .meta h4{font-size:15px; font-weight:600; font-family:'Inter',sans-serif;}
.work-card .meta .tags{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-2); opacity:0.7; margin-top:4px; text-transform:uppercase; letter-spacing:0.04em;}

.process{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line-on-ink); border-radius:var(--radius); overflow:hidden;}
@media(max-width:800px){.process{grid-template-columns:1fr;}}
.process .step{padding:32px 26px; border-right:1px solid var(--line-on-ink);}
.process .step:last-child{border-right:none;}
@media(max-width:800px){.process .step{border-right:none; border-bottom:1px solid var(--line-on-ink);}}
.process .step .n{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--amber);}
.process .step h3{font-size:18px; margin-top:12px; color:var(--bone);}
.process .step p{font-size:14px; color:rgba(244,241,233,0.72); margin-top:8px;}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat .num{font-family:'Space Grotesk',sans-serif; font-size:clamp(30px,4vw,46px); font-weight:700; color:var(--teal-dark);}
.stat .label{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-2); margin-top:6px;}

.panels{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:760px){.panels{grid-template-columns:1fr;}}
.panel{padding:36px 32px; border-radius:var(--radius);}
.panel.p-teal{background:var(--teal); color:var(--bone);}
.panel.p-ink{background:var(--ink); color:var(--bone);}
.panel h3{font-size:22px;}
.panel p{margin-top:14px; font-size:15px; opacity:0.92;}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
@media(max-width:800px){.contact-grid{grid-template-columns:1fr;}}
form.contact-form{display:flex; flex-direction:column; gap:16px;}
form.contact-form label{font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-2); display:block; margin-bottom:6px;}
form.contact-form input, form.contact-form select, form.contact-form textarea{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bone); font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink);}
form.contact-form input:focus, form.contact-form select:focus, form.contact-form textarea:focus{outline:2px solid var(--teal); outline-offset:1px;}
form.contact-form textarea{min-height:120px; resize:vertical;}
.form-notice{padding:14px 16px; border-radius:var(--radius); font-size:14px; margin-bottom:20px;}
.form-notice.success{background:#EAF4F3; border:1px solid var(--teal); color:var(--teal-dark);}
.form-notice.error{background:#FBEAF0; border:1px solid var(--raspberry); color:var(--raspberry);}
.hp-field{position:absolute; left:-9999px;}
.contact-info .row{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); align-items:flex-start;}
.contact-info .row .k{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-2); width:90px; flex-shrink:0; padding-top:2px;}
.contact-info .row .v{font-size:15px;}
.contact-info .row .v.muted{color:var(--ink-2); font-style:italic; opacity:0.75;}

footer.site{border-top:1px solid var(--line); padding:44px 0;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; max-width:1180px; margin:0 auto; padding:0 32px;}
.footer-inner .fmark{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px;}
.footer-links{display:flex; gap:22px; font-family:'IBM Plex Mono',monospace; font-size:12.5px;}
.footer-links a{opacity:0.7;} .footer-links a:hover{opacity:1;}

.single-work-hero{aspect-ratio:16/9; background:var(--bone-2); display:flex; align-items:center; justify-content:center; border-radius:var(--radius); overflow:hidden; margin-bottom:32px;}
.single-work-hero img{width:100%; height:100%; object-fit:cover;}
.single-work-hero .fallback{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:64px; color:var(--bone);}