/*
Theme Name: LawFoyer CLAT
Theme URI: https://clat.lawfoyer.in/
Author: LawFoyer
Author URI: https://lawfoyer.in/
Description: "Prep Diary" theme for clat.lawfoyer.in — a study-notebook design with an editable homepage (Appearance → Customize → CLAT Portal). Pair with the LawFoyer CLAT Core plugin for mock tests, previous papers, NLU guide, daily questions and forms.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: lfct
*/

:root {
	--desk: #EFEBE3; --page: #FFFEFA; --rule: #DCE4F2; --margin: #EAA4A4; --ink: #22202B; --ink2: #4A4757; --ink3: #6E6B7B;
	--v: #5B3FC4; --v2: #3F2A95; --vl: #ECE6FF; --hl: rgba(160, 132, 255, .32); --hly: rgba(255, 214, 92, .55);
	--stk: #FFE68A; --stk2: #FFD1DC; --stk3: #D6F0E4; --ok: #15803D; --bad: #C2410C;
	--serif: "Young Serif", Georgia, serif; --sans: "DM Sans", system-ui, sans-serif; --hand: "Kalam", cursive;
	--ease: cubic-bezier(.2,.7,.2,1); --line: 32px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--desk); color: var(--ink); font: 400 16.5px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--v); outline-offset: 3px; border-radius: 4px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 999; }
.skip:focus { left: 8px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 30px); }
svg { flex-shrink: 0; }

/* paper + handwriting motifs */
.paper { position: relative; background: var(--page); background-image: linear-gradient(transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px)); background-size: 100% var(--line); border-radius: 4px; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 40px -26px rgba(40,30,20,.45); padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 48px) clamp(24px, 4vw, 48px) clamp(56px, 7vw, 92px); }
.paper::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(38px, 5vw, 66px); width: 2px; background: var(--margin); opacity: .7; }
.holes { position: absolute; left: clamp(12px, 1.6vw, 22px); top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-around; padding: 30px 0; }
.holes i { width: 14px; height: 14px; border-radius: 50%; background: var(--desk); box-shadow: inset 0 2px 3px rgba(0,0,0,.18); }
.mk { background: linear-gradient(104deg, transparent 2%, var(--hl) 4%, var(--hl) 94%, transparent 97%) no-repeat; background-size: 0 100%; padding: 0 .1em; border-radius: 3px; transition: background-size 1s var(--ease) .3s; }
.in .mk, .in.mk, .no-js .mk { background-size: 100% 100%; }
.mky { --hl: var(--hly); }
.note { display: inline-block; font: 700 21px/1.2 var(--hand); color: var(--v); }
.h1 { font: 400 clamp(34px, 4.6vw, 58px)/1.12 var(--serif); margin: 6px 0 12px; letter-spacing: -.01em; }
.h2 { font: 400 clamp(30px, 3.8vw, 46px)/1.14 var(--serif); margin: 4px 0 0; }
.sec { padding: clamp(40px, 5vw, 70px) 0; }
.fine { font-size: 13.5px; color: var(--ink3); margin-top: 14px; }
.fine a { text-decoration: underline; }
.shead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 20px; border-radius: 10px; border: 0; font: 600 15px/1 var(--sans); white-space: nowrap; transition: transform .2s, background .2s, box-shadow .2s, color .2s; cursor: pointer; }
.btn svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn.sm { padding: 9px 14px; font-size: 14px; }
.b-v { background: var(--v); color: #fff; box-shadow: 0 3px 0 var(--v2); } .b-v:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--v2); color: #fff; }
.b-ink { background: var(--ink); color: #fff; box-shadow: 0 3px 0 #000; } .b-ink:hover { background: #000; color: #fff; }
.b-ln { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); } .b-ln:hover { background: var(--vl); }
.tape { position: absolute; width: 110px; height: 30px; background: rgba(255,230,138,.78); box-shadow: 0 1px 2px rgba(0,0,0,.08); z-index: 1; }
.tape.p { background: rgba(255,209,220,.8); } .tape.g { background: rgba(214,240,228,.85); }
.sticky { position: relative; padding: 22px 20px 20px; background: var(--stk); box-shadow: 0 14px 22px -14px rgba(60,40,10,.5); }
.sticky::after { content: ""; position: absolute; right: 0; bottom: 0; border-width: 0 0 22px 22px; border-style: solid; border-color: transparent transparent var(--desk) rgba(0,0,0,.08); }
.doodle path { fill: none; stroke: var(--v); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.progress { position: fixed; inset: 0 auto auto 0; height: 3px; width: 0; background: var(--v); z-index: 200; }

/* top bar + header */
.top { background: var(--ink); color: rgba(255,255,255,.82); font-size: 13px; }
.top .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.top b { color: #fff; font: 700 16px var(--hand); }
.top a:hover { color: #fff; }
.top .r { display: flex; gap: 16px; }
.hd { position: sticky; top: 0; z-index: 80; background: rgba(239,235,227,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(34,32,43,.1); }
.admin-bar .hd { top: 32px; }
@media (max-width: 782px) { .admin-bar .hd { top: 46px; } }
@media (max-width: 600px) { .admin-bar .hd { top: 0; } }
.hd > .wrap { display: flex; align-items: center; gap: 16px; height: 74px; }
.lock { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lock img { height: 42px; width: auto; max-width: none; background: #fff; padding: 3px 6px; border-radius: 6px; }
.lock .tag { font: 700 22px/1 var(--hand); color: var(--v); transform: rotate(-4deg); white-space: nowrap; }
.mainnav { margin-left: auto; }
.nav { display: flex; list-style: none; }
.nav > li { position: relative; }
.nav > li > a { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 9px 11px; font: 600 15px var(--sans); color: var(--ink2); white-space: nowrap; z-index: 0; }
.nav > li > a::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 6px; height: 9px; background: var(--hl); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); z-index: -1; }
.nav > li:hover > a::after, .nav > li.current-menu-item > a::after, .nav > li.current-menu-ancestor > a::after, .nav > li.current-menu-parent > a::after { transform: scaleX(1); }
.nav > li.menu-item-has-children > a::before { content: ""; order: 2; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 4px; }
.nav .sub-menu { position: absolute; top: calc(100% + 8px); left: 50%; min-width: 240px; padding: 8px; list-style: none; background: var(--page); border-radius: 8px; box-shadow: 0 16px 40px -14px rgba(40,30,20,.45); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: all .25s var(--ease); z-index: 90; }
.nav .sub-menu::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.nav > li:hover > .sub-menu, .nav > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav .sub-menu a { display: block; padding: 9px 12px; border-radius: 6px; font-size: 14.5px; color: var(--ink2); }
.nav .sub-menu a:hover, .nav .sub-menu .current-menu-item > a { background: var(--vl); color: var(--v); }
.hd .r { display: flex; gap: 10px; align-items: center; }
.icon-btn { width: 44px; height: 44px; border-radius: 10px; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.icon-btn svg { width: 20px; height: 20px; }
.burger { display: none; width: 46px; height: 46px; border-radius: 10px; border: 0; background: #fff; place-items: center; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.burger svg { width: 22px; height: 22px; }
.searchbar { padding: 12px 0 16px; border-top: 1px solid rgba(34,32,43,.08); }
@media (max-width: 1140px) { .mainnav, .hd .hide-m { display: none; } .burger { display: grid; } .hd .r { margin-left: auto; } }
@media (max-width: 700px) { .top .r { display: none; } .top .wrap { justify-content: center; text-align: center; } }
@media (max-width: 420px) { .lock .tag { font-size: 18px; } .lock img { height: 36px; } }

/* drawer */
.drawer { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.drawer .scrim { position: absolute; inset: 0; background: rgba(20,16,30,.5); opacity: 0; transition: opacity .3s; }
.drawer .panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 100%); background: var(--page); padding: 18px 22px 30px; overflow-y: auto; transform: translateX(100%); transition: transform .4s var(--ease); }
.drawer.open { pointer-events: auto; } .drawer.open .scrim { opacity: 1; } .drawer.open .panel { transform: none; }
.d-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.d-x { width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(34,32,43,.2); background: none; display: grid; place-items: center; }
.d-x svg { width: 20px; height: 20px; }
.dnav { list-style: none; margin-top: 14px; }
.dnav > li { border-bottom: 1px solid var(--rule); }
.dnav > li > a { display: block; padding: 13px 2px; font: 400 21px var(--serif); }
.dnav .sub-menu { list-style: none; padding: 0 0 10px 12px; }
.dnav .sub-menu a { display: block; padding: 6px 10px; border-left: 2px solid var(--vl); color: var(--ink2); }
.dnav .sub-menu a:hover { border-color: var(--v); color: var(--v); }
.d-cta { width: 100%; margin-top: 22px; }

/* search form */
.sform { position: relative; display: flex; gap: 8px; align-items: center; background: #fff; border-radius: 12px; padding: 6px 6px 6px 40px; box-shadow: inset 0 0 0 1.5px rgba(34,32,43,.18); }
.sform > svg { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--ink3); }
.sform input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 8px 4px; font-size: 16px; }

/* ads */
.adtop { padding: 18px 0 0; }
.ad, .ad-slot { width: min(100%, calc(var(--aw) * 1px)); margin: 0 auto; }
.ad-l { display: block; text-align: center; font: 400 13px var(--hand); color: var(--ink3); margin-bottom: 4px; }
.ad .ad-box { aspect-ratio: var(--aw) / var(--ah); display: grid; place-content: center; text-align: center; gap: 4px; background: repeating-linear-gradient(135deg, #fff 0 10px, #F7F3EA 10px 20px); border: 1.5px dashed #B8B1A2; border-radius: 4px; color: var(--ink3); font-size: 12.5px; padding: 8px; }
.ad .ad-s { font-weight: 700; font-size: 14px; }
.ad-code { display: flex; justify-content: center; overflow: hidden; }
.bb { margin: 10px auto 0; }
.infeed { display: flex; align-items: center; justify-content: center; }

/* hero */
.hero { padding: 28px 0 10px; }
.hero .paper { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 34px; }
.date { font: 400 20px var(--hand); color: var(--ink3); line-height: var(--line); }
.hero h1 { font: 400 clamp(38px, 5vw, 66px)/1.1 var(--serif); margin: 6px 0 14px; letter-spacing: -.01em; }
.hero .lead { font-size: 18px; color: var(--ink2); margin: 0 0 24px; max-width: 50ch; line-height: var(--line); }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.arrow-note { display: flex; align-items: center; gap: 8px; margin-top: 22px; }
.arrow-note svg { width: 70px; height: 40px; }
.side-col { display: grid; gap: 26px; align-content: start; padding-top: 8px; }
.cd { transform: rotate(2.2deg); text-align: center; }
.cd .tape { left: 50%; top: -14px; translate: -50% 0; rotate: -4deg; }
.cd .lbl { font: 700 20px var(--hand); }
.cd .num { font: 400 82px/1 var(--serif); margin: 6px 0 2px; }
.cd .sub { font: 400 17px var(--hand); color: var(--ink2); }
.cd .fine { font-size: 12px; margin-top: 6px; }
.todo { background: #fff; border-radius: 4px; padding: 18px 18px 14px; box-shadow: 0 14px 22px -16px rgba(60,40,10,.5); transform: rotate(-1.2deg); position: relative; }
.todo .tape { right: 20px; top: -14px; rotate: 6deg; width: 80px; }
.todo h3 { margin: 0 0 8px; font: 700 22px var(--hand); }
.todo label { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 15.5px; border-bottom: 1px dashed var(--rule); }
.todo input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 4px; flex-shrink: 0; margin: 2px 0 0; display: grid; place-items: center; cursor: pointer; }
.todo input:checked { background: var(--v); border-color: var(--v); }
.todo input:checked::after { content: ""; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.todo label span { position: relative; }
.todo label span::after { content: ""; position: absolute; left: -2px; right: -2px; top: 55%; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.todo input:checked + span { color: var(--ink3); }
.todo input:checked + span::after { transform: scaleX(1); }
.todo .prog { margin-top: 10px; font: 400 16px var(--hand); color: var(--v); }
@media (max-width: 900px) { .hero .paper { grid-template-columns: 1fr; } .side-col { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .side-col { grid-template-columns: 1fr; } }

/* index */
.idx { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: start; }
.toc { margin-top: 18px; }
.toc a { display: grid; grid-template-columns: 40px auto 1fr auto; align-items: baseline; gap: 10px; line-height: var(--line); min-height: calc(var(--line) * 2); transition: color .2s; }
.toc a:hover { color: var(--v); }
.toc .n { font: 700 20px var(--hand); color: var(--v); }
.toc .t b { font: 400 21px var(--serif); display: block; }
.toc .t small { display: block; color: var(--ink3); font-size: 14px; line-height: var(--line); }
.toc .dots { border-bottom: 2px dotted var(--ink3); transform: translateY(-8px); align-self: start; margin-top: var(--line); }
.toc .pg { font: 400 18px var(--hand); white-space: nowrap; align-self: start; margin-top: 4px; }
.tabsx { display: grid; gap: 10px; }
.tabsx a { position: relative; display: block; padding: 14px 16px 14px 22px; background: #fff; border-radius: 4px 12px 12px 4px; box-shadow: 0 8px 16px -12px rgba(0,0,0,.4); transition: transform .3s var(--ease); }
.tabsx a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--c); border-radius: 4px 0 0 4px; }
.tabsx a:hover { transform: translateX(8px); }
.tabsx b { font: 700 19px var(--hand); display: block; }
.tabsx span { font-size: 14px; color: var(--ink3); }
@media (max-width: 900px) { .idx { grid-template-columns: 1fr; } .toc a { grid-template-columns: 34px 1fr auto; } .toc .dots { display: none; } }

/* quiz + calculator */
.qwrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 30px; align-items: start; }
.qwrap > :only-child { grid-column: 1 / -1; max-width: 560px; }
.graph { background: #fff; background-image: linear-gradient(rgba(91,63,196,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(91,63,196,.08) 1px, transparent 1px); background-size: 18px 18px; border-radius: 4px; padding: 26px; box-shadow: 0 18px 40px -26px rgba(40,30,20,.45); position: relative; }
.graph .tape { left: 30px; top: -14px; rotate: -5deg; }
.graph .qk { margin-bottom: 8px; }
.q-meta { display: flex; justify-content: space-between; font: 700 17px var(--hand); color: var(--ink3); margin-bottom: 10px; }
.q-pass { margin: 0 0 12px; padding: 12px 14px; background: var(--stk); font-size: 15px; color: var(--ink2); }
.q-q { margin: 0 0 14px; font: 600 17px/1.45 var(--sans); }
.q-opts { display: grid; gap: 8px; }
.q-opt { display: flex; gap: 12px; align-items: center; text-align: left; padding: 10px 12px; background: rgba(255,255,255,.92); border: 1.5px solid rgba(34,32,43,.15); border-radius: 8px; font: 500 15px/1.4 var(--sans); transition: border-color .2s; }
.q-opt:hover { border-color: var(--ink); }
.q-b { position: relative; width: 28px; height: 28px; display: grid; place-items: center; font: 700 17px var(--hand); flex-shrink: 0; }
.q-opt.picked .q-b::after { content: ""; position: absolute; inset: -4px; border: 2.5px solid var(--v); border-radius: 50% 45% 55% 48%; transform: rotate(-12deg); }
.q-opt.right { border-color: var(--ok); background: #EFFAF2; }
.q-opt.picked.wrong { border-color: var(--bad); background: #FFF3EC; }
.q-opt.picked.wrong .q-b::after { border-color: var(--bad); }
.q-ex { margin-top: 12px; padding: 12px 14px; background: var(--stk3); font-size: 15px; }
.q-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 10px; }
.q-hint { font: 400 17px var(--hand); color: var(--ink3); }
.done .q-hint { color: var(--v); font-weight: 700; }
.q-next { border: 0; background: none; font: 600 15px var(--sans); color: var(--v); }
.calc { transform: rotate(1.4deg); background: var(--stk2); }
.calc .tape { right: 30px; top: -14px; rotate: 5deg; }
.calc h3 { margin: 0 0 6px; font: 700 26px/1.1 var(--hand); }
.calc p { margin: 0 0 14px; font-size: 14.5px; color: var(--ink2); }
.fld { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fld label { font: 700 17px var(--hand); display: grid; gap: 2px; }
.fld input { border: 0; border-bottom: 2px solid var(--ink); background: transparent; font: 400 32px var(--serif); width: 100%; outline: 0; padding: 2px; color: var(--ink); }
.over .fld input { border-color: var(--bad); }
.ans { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ans .big { font: 400 64px/1 var(--serif); position: relative; }
.ans .big::after { content: ""; position: absolute; inset: -6px -14px; border: 2.5px solid var(--v); border-radius: 48% 52% 45% 55%; transform: rotate(-4deg); }
.ans small { font: 400 20px var(--hand); }
.ans-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font: 400 17px var(--hand); }
.ans-meta b { font-family: var(--sans); font-size: 15px; }
@media (max-width: 900px) { .qwrap { grid-template-columns: 1fr; } }

/* mock cards */
.papers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; margin-top: 26px; }
.pp { position: relative; background: #fff; padding: 26px 22px 20px; border-radius: 3px; box-shadow: 0 1px 0 rgba(0,0,0,.05), 6px 6px 0 -1px #F7F4EC, 6px 6px 0 0 rgba(0,0,0,.08), 12px 12px 0 -1px #F7F4EC, 12px 12px 0 0 rgba(0,0,0,.06); transition: transform .35s var(--ease); display: flex; flex-direction: column; }
.pp:nth-child(3n+1) { transform: rotate(-.8deg); } .pp:nth-child(3n+2) { transform: rotate(.6deg); }
.pp:hover { transform: rotate(0) translateY(-4px); }
.pp::before { content: ""; position: absolute; left: 16px; top: 12px; width: 26px; height: 6px; border: 2px solid #9AA0AA; border-bottom: 0; border-radius: 2px; transform: rotate(-35deg); }
.pp .k { font: 700 16px var(--hand); color: var(--v); }
.pp h3 { margin: 4px 0 8px; font: 400 21px/1.25 var(--serif); }
.pp h3 a:hover { color: var(--v); }
.pp .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--ink3); }
.pp .meta span { display: inline-flex; gap: 5px; align-items: center; }
.pp .meta svg { width: 15px; height: 15px; }
.pp .ex { font-size: 14.5px; color: var(--ink2); margin: 10px 0 0; }
.pp .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; }
.stamp { font: 700 15px var(--hand); padding: 2px 10px; border: 2px solid currentColor; border-radius: 6px; transform: rotate(-6deg); white-space: nowrap; }
.stamp.live { color: var(--bad); } .stamp.new { color: var(--ok); } .stamp.soon { color: var(--ink3); }
.pp .tag { font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink3); }
.pp .tag.free { color: var(--ok); }
.filt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.filt button, .filt a { border: 0; background: #fff; padding: 8px 14px; border-radius: 999px; font: 600 14px var(--sans); box-shadow: inset 0 0 0 1.5px rgba(34,32,43,.2); transition: background .2s, color .2s; }
.filt button.on, .filt a.on { background: var(--ink); color: #fff; box-shadow: none; }
.anim [data-tt]:not([hidden]) { animation: drop .45s var(--ease) both; animation-delay: calc(var(--n, 0) * 50ms); }
@keyframes drop { from { opacity: 0; transform: translateY(-14px) rotate(-2deg); } }
@media (max-width: 960px) { .papers { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .papers { grid-template-columns: 1fr; } }

/* folders + clippings */
.two { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; align-items: start; }
.one { max-width: 860px; }
.stick-ads, .sidebar { display: grid; gap: 24px; position: sticky; top: 96px; }
.folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 18px; margin-top: 34px; }
.folders.big { margin-top: 20px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.fd { position: relative; padding: 26px 16px 16px; background: #F6D68A; border-radius: 0 10px 10px 10px; box-shadow: 0 10px 18px -12px rgba(60,40,10,.6); transition: transform .3s var(--ease); }
.fd::before { content: ""; position: absolute; left: 0; top: -14px; width: 56%; height: 16px; background: inherit; border-radius: 8px 8px 0 0; }
.fd:nth-child(3n+2) { background: #CDBBFA; } .fd:nth-child(3n) { background: #BFE3D0; }
.fd:hover { transform: translateY(-6px) rotate(-1deg); }
.fd .y { font: 400 36px/1 var(--serif); }
.fd .l { font: 700 16px var(--hand); }
.fd .lk { display: grid; gap: 2px; margin-top: 10px; font-size: 13.5px; }
.fd .lk a { display: flex; gap: 6px; align-items: center; }
.fd .lk a:hover { text-decoration: underline; }
.fd .lk svg { width: 14px; height: 14px; }
.fd .soon { font: 400 15px var(--hand); color: rgba(34,32,43,.7); }
.clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 26px; }
.clips.list { margin-top: 22px; }
.clip { position: relative; background: #FBF8F1; padding: 18px 18px 16px; box-shadow: 0 10px 18px -14px rgba(60,40,10,.6); clip-path: polygon(0 2%, 4% 0, 12% 2%, 22% 0, 33% 2%, 45% 0, 58% 2%, 70% 0, 83% 2%, 94% 0, 100% 2%, 99% 50%, 100% 98%, 90% 100%, 78% 98%, 64% 100%, 50% 98%, 36% 100%, 22% 98%, 10% 100%, 0 98%, 1% 50%); transition: transform .3s var(--ease); }
.clip:hover { transform: rotate(-1deg) scale(1.02); }
.clip .d { font: 700 16px var(--hand); color: var(--v); }
.clip h3 { margin: 4px 0 6px; font: 400 19px/1.3 var(--serif); }
.clip p { margin: 0 0 8px; font-size: 14.5px; color: var(--ink2); }
.clip .tg span { font-size: 12.5px; padding: 1px 8px; background: var(--vl); border-radius: 999px; color: var(--v); }
.clip a.cover { position: absolute; inset: 0; }
@media (max-width: 1000px) { .two { grid-template-columns: 1fr; } .stick-ads, .sidebar { position: static; } }
@media (max-width: 600px) { .clips { grid-template-columns: 1fr; } }

/* NLU */
.nlu-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.srch { position: relative; display: block; }
.srch input { width: 300px; max-width: 100%; padding: 11px 14px 11px 40px; border: 0; border-bottom: 2px solid var(--ink); background: transparent; font: 400 20px var(--hand); outline: 0; }
.srch svg { position: absolute; left: 6px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; }
.pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 26px; margin-top: 18px; }
.pin { display: flex; gap: 10px; align-items: center; line-height: var(--line); min-height: var(--line); transition: color .2s; }
.pin svg { width: 18px; height: 18px; color: #D9534F; transition: transform .3s var(--ease); }
.pin:hover { color: var(--v); } .pin:hover svg { transform: translateY(-3px); }
.pin b { font: 400 17px var(--serif); }
.pin span { color: var(--ink3); font-size: 14px; }
.nlucards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin-top: 22px; }
.nc { position: relative; display: grid; gap: 4px; background: #fff; padding: 18px 18px 16px; border-radius: 4px; box-shadow: 0 10px 18px -14px rgba(60,40,10,.6); transition: transform .3s var(--ease); }
.nc:hover { transform: translateY(-4px) rotate(-.6deg); }
.nc .code { position: absolute; right: 14px; top: 14px; font: 700 15px var(--hand); color: var(--v); background: var(--vl); padding: 1px 8px; border-radius: 999px; }
.nc b { font: 400 22px var(--serif); }
.nc .full { font-size: 14px; color: var(--ink2); padding-right: 40px; }
.nc .city { display: inline-flex; gap: 6px; align-items: center; font: 400 16px var(--hand); color: var(--ink3); margin-top: 4px; }
.nc .city svg { width: 15px; height: 15px; color: #D9534F; }

/* newsletter envelope */
.env { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; background: #fff; border-radius: 6px; padding: clamp(24px, 4vw, 44px); box-shadow: 0 18px 40px -26px rgba(40,30,20,.45); position: relative; overflow: hidden; }
.env::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 10px; background: repeating-linear-gradient(135deg, #D9534F 0 16px, #fff 16px 32px, var(--v) 32px 48px, #fff 48px 64px); }
.env .sub { color: var(--ink2); margin: 10px 0 0; }
.lfc-sub { display: flex; gap: 10px; align-items: flex-end; }
.lfc-sub input[type=email] { flex: 1; min-width: 0; border: 0; border-bottom: 2px solid var(--ink); font: 400 22px var(--hand); padding: 8px 2px; outline: 0; background: transparent; }
.lfc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.lfc-notice { padding: 10px 14px; border-radius: 6px; font-weight: 600; margin: 0 0 12px; }
.lfc-ok { background: #E6F6EC; color: #11622F; } .lfc-err { background: #FDECE6; color: #9A3412; }
@media (max-width: 760px) { .env { grid-template-columns: 1fr; } .lfc-sub { flex-direction: column; align-items: stretch; } }

/* inner page header */
.phead { padding: 28px 0 0; }
.phead .paper { padding-top: clamp(22px, 3vw, 36px); padding-bottom: clamp(22px, 3vw, 36px); }
.crumbs { font: 400 17px var(--hand); color: var(--ink3); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--v); }
.phead .lead { font-size: 18px; color: var(--ink2); margin: 0; max-width: 62ch; line-height: var(--line); }
.pmeta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font: 400 17px var(--hand); color: var(--ink3); }
.pmeta a { color: var(--v); }

/* article / page content */
.entry-wrap { min-width: 0; }
.entry { font-size: 17.5px; line-height: 1.75; color: #2C2A36; }
.entry > * { margin: 0 0 1.1em; }
.entry h2 { font: 400 30px/1.2 var(--serif); margin: 1.6em 0 .5em; color: var(--ink); }
.entry h3 { font: 400 23px/1.25 var(--serif); margin: 1.4em 0 .4em; color: var(--ink); }
.entry h4 { font: 700 18px var(--sans); margin: 1.2em 0 .4em; }
.entry > :first-child { margin-top: 0; }
.entry a { color: var(--v); text-decoration: underline; text-underline-offset: 3px; }
.entry ul, .entry ol { padding-left: 1.3em; }
.entry li { margin-bottom: .4em; }
.entry li::marker { color: var(--v); }
.entry strong { color: var(--ink); }
.entry blockquote, .entry .wp-block-quote { margin: 1.4em 0; padding: 14px 20px; background: var(--stk); border: 0; transform: rotate(-.4deg); font: 400 20px/1.5 var(--hand); }
.entry blockquote p { margin: 0; }
.entry table { width: 100%; border-collapse: collapse; font-size: 15.5px; background: #fff; }
.entry th, .entry td { padding: 10px 12px; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
.entry th { background: var(--vl); font-weight: 700; }
.entry figure { margin: 1.4em 0; }
.entry img { border-radius: 4px; }
.entry figcaption { font: 400 15px var(--hand); color: var(--ink3); text-align: center; margin-top: 6px; }
.entry hr { border: 0; border-top: 2px dashed var(--rule); margin: 2em 0; }
.entry .wp-block-button__link { display: inline-block; background: var(--v); color: #fff; text-decoration: none; padding: 12px 20px; border-radius: 10px; font-weight: 600; box-shadow: 0 3px 0 var(--v2); }
.entry .wp-block-table { overflow-x: auto; }
.entry .has-text-align-center { text-align: center; }
.alignleft { float: left; margin: 0 1.2em 1em 0; } .alignright { float: right; margin: 0 0 1em 1.2em; } .aligncenter { margin-left: auto; margin-right: auto; }
.feat { margin: 0 0 26px; } .feat img { border-radius: 4px; width: 100%; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 0 0 22px; }
.facts div { background: #fff; border-radius: 4px; padding: 12px 14px; box-shadow: 0 8px 16px -14px rgba(0,0,0,.5); }
.facts span { display: block; font: 400 15px var(--hand); color: var(--ink3); }
.facts b { font: 400 20px var(--serif); }
.soonbox { background: var(--stk3); padding: 14px 16px; border-radius: 4px; }
.dlist { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.dlist .btn svg { width: 16px; height: 16px; }
.tags a { display: inline-block; margin: 0 6px 6px 0; padding: 2px 10px; background: var(--vl); color: var(--v); border-radius: 999px; font-size: 13.5px; }
.postnav { display: flex; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 18px; border-top: 2px dashed var(--rule); font: 400 17px var(--hand); }
.postnav a { color: var(--v); }
.kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 26px; }
.kids a { display: block; padding: 16px 18px; background: #fff; border-radius: 4px 12px 12px 4px; border-left: 6px solid var(--v); box-shadow: 0 8px 16px -12px rgba(0,0,0,.4); transition: transform .3s var(--ease); }
.kids a:hover { transform: translateX(6px); }
.kids b { display: block; font: 400 19px var(--serif); }
.kids span { font-size: 14px; color: var(--ink3); }
.tipbox { margin-top: 34px; }
.tipbox ol { margin: 8px 0 0; padding-left: 1.2em; line-height: var(--line); }
.empty .lead { margin-top: 0; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.pager .nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 30px; }
.pager .page-numbers { min-width: 40px; height: 40px; padding: 0 12px; display: grid; place-items: center; background: #fff; border-radius: 8px; font-weight: 600; }
.pager .current { background: var(--ink); color: #fff; }

/* sidebar */
.widget { background: #fff; border-radius: 4px; padding: 18px 20px; box-shadow: 0 10px 18px -16px rgba(0,0,0,.5); }
.widget-title { margin: 0 0 10px; font: 700 20px var(--hand); color: var(--v); }
.widget ul { list-style: none; }
.widget li { padding: 7px 0; border-bottom: 1px dashed var(--rule); font-size: 15px; line-height: 1.4; }
.widget li:last-child { border-bottom: 0; }
.widget li a:hover { color: var(--v); }
.subnav li.on a { color: var(--v); font-weight: 700; }
.side-sub { transform: rotate(1deg); }
.side-sub .tape { right: 24px; top: -14px; rotate: 5deg; width: 80px; }
.side-sub h3 { margin: 0 0 4px; font: 700 24px var(--hand); }
.side-sub p { margin: 0 0 10px; font-size: 14.5px; color: var(--ink2); }
.side-sub .lfc-sub { flex-direction: column; align-items: stretch; }
.side-sub .lfc-sub input[type=email] { font-size: 19px; }

/* contact */
.lfc-contact { margin-top: 10px; }
.lfc-contact .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lfc-contact p { margin: 0 0 14px; }
.lfc-contact label { display: block; font: 700 17px var(--hand); margin-bottom: 4px; }
.lfc-contact input, .lfc-contact select, .lfc-contact textarea { width: 100%; padding: 12px 14px; border: 1.5px solid rgba(34,32,43,.2); border-radius: 8px; background: #fff; font-size: 16px; outline: 0; transition: border-color .2s, box-shadow .2s; }
.lfc-contact input:focus, .lfc-contact select:focus, .lfc-contact textarea:focus { border-color: var(--v); box-shadow: 0 0 0 4px rgba(91,63,196,.12); }
.cdet { transform: rotate(-1deg); }
.cdet .tape { left: 50%; top: -14px; translate: -50% 0; rotate: -3deg; }
.cdet h3 { margin: 0 0 10px; font: 700 24px var(--hand); }
.cdet a { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-weight: 600; word-break: break-word; }
.cdet a svg { width: 20px; height: 20px; color: var(--v); }
@media (max-width: 600px) { .lfc-contact .row2 { grid-template-columns: 1fr; gap: 0; } }

/* comments */
.comments { margin-top: 30px; }
.clist { list-style: none; padding: 0; }
.comment-form input, .comment-form textarea { width: 100%; padding: 10px 12px; border: 1.5px solid rgba(34,32,43,.2); border-radius: 8px; }

/* footer */
.site-footer { margin-top: 50px; background: var(--ink); color: rgba(255,255,255,.78); padding: 52px 0 24px; }
.fg { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 28px; }
.fg p { margin: 14px 0; font-size: 14.5px; max-width: 38ch; }
.site-footer .lock .tag { color: #CDBBFA; }
.soc { display: flex; gap: 8px; flex-wrap: wrap; }
.soc a { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.08); display: grid; place-items: center; transition: background .2s; }
.soc a:hover { background: var(--v); color: #fff; }
.soc svg { width: 17px; height: 17px; }
.soc.dark a { background: var(--vl); color: var(--v); }
.soc.dark a:hover { background: var(--v); color: #fff; }
.fg h5 { margin: 0 0 10px; font: 700 20px var(--hand); color: #FFE68A; }
.fg ul { list-style: none; }
.fg li { margin-bottom: 7px; font-size: 14.5px; }
.fg a:hover { color: #fff; }
.disc { margin-top: 34px; padding-top: 16px; border-top: 1px dashed rgba(255,255,255,.25); font-size: 13px; line-height: 1.6; }
.disc .row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.disc a:hover { color: #fff; }
@media (max-width: 860px) { .fg { grid-template-columns: 1fr 1fr; } .fg .b { grid-column: 1 / -1; } }

/* reveal */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in, .no-js .rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .rv { opacity: 1; transform: none; } .mk { background-size: 100% 100%; } }

/* layout guards: grid/flex children may shrink below their content width */
.paper > *, .two > *, .idx > *, .qwrap > *, .env > *, .side-col > *, .fg > *, .papers > *, .clips > *, .folders > * { min-width: 0; }
.hd > .wrap { max-width: 1320px; }
.hd > .wrap > .lock { min-width: 0; }
.entry, .hero h1, .h1, .h2 { overflow-wrap: break-word; }
@media (max-width: 1300px) { .hd .hide-m { display: none; } }
@media (max-width: 900px) { .hero .paper, .idx, .qwrap, .two, .env { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .side-col { grid-template-columns: minmax(0, 1fr); } .hero h1 { font-size: 36px; } .hero .cta .btn { flex: 1 1 auto; } .paper { padding-left: 46px; padding-right: 16px; } .paper::before { left: 32px; } .holes { left: 9px; } .holes i { width: 11px; height: 11px; } .cd .num { font-size: 64px; } }
@media (max-width: 420px) { .lock .tag { display: none; } }