/*
Theme Name: Kavisamrat Kinetic
Theme URI: https://kavisamrat.com/
Author: Kavisamrat Theme
Description: Lightweight kinetic manuscript-style WordPress theme. Generic templates, no custom post types forced.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: kavisamrat
*/

:root {
  --paper: #ead2a0;
  --paper2: #f8e7bf;
  --ink: #20120a;
  --red: #9d2f19;
  --blue: #1e5566;
  --green: #496437;
  --gold: #bd7a2c;
  --shadow: rgba(45, 22, 7, .28);
  --portrait-url: url('assets/images/kavisamrat.png');
  --x: 50vw;
  --y: 50vh;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, 'Noto Serif Telugu', 'Times New Roman', serif;
  background: #1b1009;
  overflow-x: hidden;
}
body.admin-bar .corner-nav { top: 54px; }
button, a { font: inherit; color: inherit; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; }

.site-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at var(--x) var(--y), rgba(255, 229, 165, .34), transparent 0 13rem, rgba(27, 16, 9, .55) 28rem),
    radial-gradient(circle at 20% 20%, rgba(157,47,25,.22), transparent 22rem),
    radial-gradient(circle at 80% 70%, rgba(30,85,102,.20), transparent 24rem),
    linear-gradient(135deg, #24150b, #130b06 62%, #2d170b);
  position: relative;
}
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: .08;
  background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
  background-size: 17px 17px;
  mix-blend-mode: overlay;
}
.ink-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(32,18,10,.78);
  pointer-events: none;
  z-index: 199;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 12px rgba(189,122,44,.08), 0 0 42px rgba(248,231,191,.2);
  transition: width .2s ease, height .2s ease, background .2s ease;
  mix-blend-mode: multiply;
}
.ink-cursor.big { width: 56px; height: 56px; background: rgba(157,47,25,.38); }
.corner-nav {
  position: fixed;
  right: 22px;
  top: 22px;
  z-index: 90;
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(248,231,191,.82);
  border: 1px solid rgba(32,18,10,.16);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}
.corner-nav a {
  padding: 10px 13px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background .2s ease, transform .2s ease;
}
.corner-nav a:hover { background: rgba(32,18,10,.09); transform: translateY(-2px); }
.corner-nav .menu { display: flex; list-style: none; margin: 0; padding: 0; gap: 8px; }
.corner-nav .menu-item { margin: 0; }

.hero {
  min-height: 100vh;
  position: relative;
  padding: 7rem clamp(1.2rem, 5vw, 5rem) 4rem;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 620px);
  align-items: center;
  gap: 4rem;
  overflow: hidden;
}
.desk-lines {
  position: absolute;
  inset: 0;
  opacity: .11;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49%, #f8e7bf 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, #f8e7bf 50%, transparent 51%);
  background-size: 84px 84px;
  transform: rotate(-7deg) scale(1.3);
}
.hero-copy { position: relative; z-index: 2; max-width: 920px; }
.tag {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  padding: 9px 13px;
  margin-bottom: 26px;
  border: 1px solid rgba(248,231,191,.22);
  border-radius: 999px;
  color: #f8e7bf;
  background: rgba(248,231,191,.06);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.tag::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .55; }
.hero h1, .site-title-large {
  color: #f8e7bf;
  margin: 0;
  font-size: clamp(4rem, 11vw, 10.4rem);
  line-height: .78;
  letter-spacing: -.085em;
  font-weight: 900;
  max-width: 1100px;
}
.hero h1 em, .site-title-large em {
  display: block;
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1px rgba(248,231,191,.78);
  text-shadow: 0 0 50px rgba(248,231,191,.12);
}
.hero-text {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 26px;
  max-width: 880px;
}
.hero-text p { margin: 0; color: #e6c995; line-height: 1.7; font-size: 18px; }
.hero-text p:first-child { font-size: clamp(1.4rem, 2vw, 2.1rem); line-height: 1.18; color: #f8e7bf; }
.desk { position: relative; height: min(78vh, 720px); min-height: 560px; z-index: 2; perspective: 1100px; }
.portrait-card {
  position: absolute;
  right: 7%;
  top: 7%;
  width: min(78%, 440px);
  height: 560px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 36%, rgba(248,231,191,.95), rgba(234,210,160,.45) 52%, rgba(32,18,10,.12) 100%),
    var(--portrait-url) center 54% / 86% auto no-repeat,
    var(--paper2);
  box-shadow: 0 50px 120px rgba(0,0,0,.42);
  transform: rotate(3deg) translateZ(0);
  overflow: hidden;
  border: 1px solid rgba(32,18,10,.18);
}
.portrait-card::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(32,18,10,.18); z-index: 2; pointer-events: none; }
.portrait-card::after { content: "KAVISAMRAT"; position: absolute; left: 24px; bottom: 24px; z-index: 3; color: var(--paper2); background: rgba(32,18,10,.78); padding: 10px 13px; border-radius: 999px; letter-spacing: .24em; font-size: 11px; }
.portrait-glow { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 48%, rgba(32,18,10,.24)); z-index: 1; pointer-events: none; }
.paper-slip { position: absolute; width: 260px; min-height: 150px; padding: 22px; background: var(--paper); border: 1px solid rgba(32,18,10,.16); box-shadow: 0 28px 70px rgba(0,0,0,.25); transition: transform .35s ease, box-shadow .35s ease; }
.paper-slip:hover { transform: rotate(var(--hover-rot, 0deg)) translateY(-14px) scale(1.03); box-shadow: 0 45px 100px rgba(0,0,0,.36); }
.paper-slip small { display: block; letter-spacing: .24em; text-transform: uppercase; font-size: 10px; color: var(--red); margin-bottom: 12px; }
.paper-slip strong { display: block; font-size: 24px; line-height: 1.05; }
.paper-slip span { display: block; margin-top: 12px; line-height: 1.55; color: rgba(32,18,10,.7); }
.slip-1 { left: 3%; top: 10%; transform: rotate(-8deg); --hover-rot:-4deg; }
.slip-2 { left: 9%; bottom: 9%; transform: rotate(7deg); --hover-rot:3deg; }
.slip-3 { right: 0; bottom: 6%; transform: rotate(-5deg); --hover-rot:-1deg; }
.stamp { position: absolute; left: 47%; bottom: 16%; width: 160px; height: 160px; border: 3px double rgba(157,47,25,.8); color: rgba(157,47,25,.85); border-radius: 50%; display: grid; place-items: center; transform: rotate(-17deg); font-size: 25px; font-weight: bold; text-align: center; opacity: .86; mix-blend-mode: multiply; }

.section { position: relative; padding: 7rem clamp(1.2rem, 5vw, 5rem); overflow: hidden; }
.paper-section { background: linear-gradient(120deg, #f8e7bf, #e8c98f); color: var(--ink); }
.dark-section { background: #140b06; color: var(--paper2); }
.section-head { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items: end; margin-bottom: 4rem; }
.section-head small { display: block; color: var(--red); letter-spacing: .35em; text-transform: uppercase; margin-bottom: 18px; font-size: 11px; }
.dark-section .section-head small { color: #e58b54; }
.section-head h1, .section-head h2 { margin: 0; font-size: clamp(3.4rem, 8vw, 8.3rem); line-height: .78; letter-spacing: -.075em; }
.section-head p { margin: 0; font-size: 20px; line-height: 1.7; color: rgba(32,18,10,.72); }
.dark-section .section-head p { color: #d9bd91; }
.scanner { position: relative; min-height: 650px; border: 1px solid rgba(32,18,10,.16); border-radius: 38px; background: linear-gradient(90deg, rgba(32,18,10,.05) 1px, transparent 1px), linear-gradient(rgba(32,18,10,.05) 1px, transparent 1px), #f3ddb0; background-size: 40px 40px; overflow: hidden; box-shadow: 0 40px 110px rgba(45,22,7,.24); }
.scanner::before { content: ""; position: absolute; top: var(--scanY, 25%); left: 0; right: 0; height: 170px; transform: translateY(-50%); background: linear-gradient(to bottom, transparent, rgba(157,47,25,.16), transparent); pointer-events: none; transition: top .16s linear; }
.work-node { position: absolute; width: clamp(190px, 22vw, 310px); padding: 22px; border-radius: 28px; background: rgba(248,231,191,.84); border: 1px solid rgba(32,18,10,.15); box-shadow: 0 22px 70px rgba(45,22,7,.22); transform: translate(-50%, -50%) rotate(var(--r)); transition: transform .35s ease, background .35s ease; cursor: pointer; }
.work-node:hover { transform: translate(-50%, -50%) rotate(0deg) scale(1.06); background: #fff0c8; }
.work-node b { display: block; font-size: clamp(1.6rem, 3vw, 2.7rem); line-height: .95; }
.work-node em { display: block; font-style: normal; margin-top: 8px; color: var(--red); font-size: 24px; }
.work-node p { margin: 14px 0 0; color: rgba(32,18,10,.67); line-height: 1.55; }
.work-node::after { content: attr(data-code); position: absolute; right: 16px; top: 14px; font-size: 11px; letter-spacing: .2em; color: rgba(32,18,10,.35); }
.node-1 { left: 22%; top: 30%; --r:-8deg; }
.node-2 { left: 58%; top: 22%; --r:5deg; }
.node-3 { left: 76%; top: 62%; --r:-4deg; }
.node-4 { left: 34%; top: 72%; --r:6deg; }
.thread { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .42; }
.thread path { fill: none; stroke: rgba(32,18,10,.42); stroke-width: 2; stroke-dasharray: 8 12; }
.mechanism, .archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mechanism-card, .post-card { position: relative; min-height: 320px; border-radius: 32px; border: 1px solid rgba(248,231,191,.16); background: rgba(248,231,191,.06); overflow: hidden; padding: 24px; transition: transform .35s ease, background .35s ease; color: var(--paper2); }
.post-card { min-height: 260px; }
.mechanism-card:hover, .post-card:hover { transform: translateY(-12px); background: rgba(248,231,191,.1); }
.mechanism-card::before, .post-card::before { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(to top, var(--c, #e58b54), transparent); opacity: .28; }
.mechanism-card .num, .post-card .num { color: var(--c, #e58b54); letter-spacing: .24em; font-size: 11px; text-transform: uppercase; }
.mechanism-card h3, .post-card h2, .post-card h3 { position: relative; margin: 34px 0 0; font-size: 36px; line-height: .95; }
.mechanism-card p, .post-card p { position: relative; color: #d9bd91; line-height: 1.65; margin-top: 20px; }
.wp-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.wp-card, .content-card { border-radius: 32px; background: #f8e7bf; border: 1px solid rgba(32,18,10,.16); box-shadow: 0 25px 80px rgba(45,22,7,.22); padding: clamp(1.3rem, 4vw, 3rem); }
.wp-card h3 { margin: 0 0 18px; font-size: 38px; line-height: .95; }
.wp-card ul { margin: 0; padding-left: 20px; line-height: 1.9; color: rgba(32,18,10,.74); }
.content-card { line-height: 1.85; font-size: 18px; }
.content-card a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.content-card h1, .content-card h2, .content-card h3 { line-height: 1.05; }
.content-card blockquote { border-left: 4px solid var(--red); margin-left: 0; padding-left: 1.2rem; color: rgba(32,18,10,.75); }

.site-footer { position: relative; padding: 5rem clamp(1.2rem, 5vw, 5rem) 3rem; background: radial-gradient(circle at 20% 10%, rgba(157,47,25,.20), transparent 22rem), linear-gradient(180deg, #140b06, #080504); color: var(--paper2); overflow: hidden; border-top: 1px solid rgba(248,231,191,.12); }
.site-footer::before { content: ""; position: absolute; inset: 0; opacity: .08; background: linear-gradient(90deg, #f8e7bf 1px, transparent 1px), linear-gradient(#f8e7bf 1px, transparent 1px); background-size: 56px 56px; transform: rotate(-5deg) scale(1.2); }
.footer-inner { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: end; }
.footer-title { margin: 0; font-size: clamp(2.6rem, 7vw, 7rem); line-height: .82; letter-spacing: -.075em; }
.footer-note { margin: 1.5rem 0 0; max-width: 760px; color: #d9bd91; font-size: 18px; line-height: 1.75; }
.footer-links { display: grid; gap: 12px; justify-items: end; }
.footer-links a, .footer-links .menu a { border: 1px solid rgba(248,231,191,.18); border-radius: 999px; padding: 12px 16px; color: #f8e7bf; background: rgba(248,231,191,.04); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; transition: transform .25s ease, background .25s ease; display: inline-block; }
.footer-links a:hover { transform: translateX(-6px); background: rgba(248,231,191,.10); }
.footer-links .menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; justify-items: end; }
.footer-bottom { position: relative; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid rgba(248,231,191,.12); color: rgba(248,231,191,.58); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.show { opacity: 1; transform: translateY(0); }
.screen-reader-text { position: absolute; left: -9999px; }

.pagination { margin-top: 3rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.pagination a, .pagination span { background: #f8e7bf; color: var(--ink); padding: .75rem 1rem; border-radius: 999px; }

@media (max-width: 1050px) {
  .hero, .section-head, .wp-panel, .footer-inner { grid-template-columns: 1fr; }
  .desk { display: none; }
  .mechanism, .archive-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-links, .footer-links .menu { justify-items: start; }
}
@media (max-width: 720px) {
  .corner-nav { display: none; }
  .hero { padding-top: 4rem; }
  .hero-text, .mechanism, .archive-grid { grid-template-columns: 1fr; }
  .scanner { min-height: 850px; }
  .work-node { width: 78%; }
  .node-1 { left: 50%; top: 18%; }
  .node-2 { left: 50%; top: 40%; }
  .node-3 { left: 50%; top: 62%; }
  .node-4 { left: 50%; top: 82%; }
  .ink-cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}