/* ---- Topic page v53 — the Conscious Parenting tradition-page layout ---- */
.t2{ --ta:var(--m-color,#B4560F); --tad:var(--m-deep,#7A360A); --tas:color-mix(in srgb, var(--ta) 14%, #fff); --gold1:#FFE57A; --gold3:#F2B21B; --gold4:#C98A0C; --spring:cubic-bezier(0.34,1.56,0.64,1); }
.t2 button::before{ display:none !important; }
.t2 :where(button){ font:inherit; }
.t2 .watch-play{ border-radius:0 !important; padding:0 !important; display:block; width:100%; }
.t2 a{ border-bottom:0; }
.t2-hero{ position:relative; margin:.2em 0 0; border-radius:20px; overflow:hidden; height:180px; background:linear-gradient(150deg,var(--ta),var(--tad)); box-shadow:0 14px 34px color-mix(in srgb, var(--ta) 30%, transparent); }
.t2-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.t2-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.02) 18%, color-mix(in srgb, var(--tad) 90%, black) 100%); }
.t2-hero-in{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:.9em 1.1em 1em; color:#fff; }
.t2-era{ display:inline-block; font:800 .64rem/1 -apple-system,system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; padding:.5em .8em; border-radius:999px; background:rgba(255,255,255,.22); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.t2-hero h1{ margin:.3em 0 .12em; font-weight:800; font-size:clamp(1.7rem,7.5vw,2.2rem); line-height:1; letter-spacing:-.035em; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.25); }
.t2-hero p{ margin:0; font-size:.9rem; line-height:1.35; color:rgba(255,255,255,.94); max-width:42ch; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.t2-block{ margin:2em 0 0; }
.t2-h{ display:flex; align-items:baseline; justify-content:space-between; gap:.6em; flex-wrap:wrap; margin:0 0 .8em; }
.t2-h h2{ margin:0; font-weight:800; font-size:1.42rem; letter-spacing:-.025em; color:var(--tad); }
.t2-h h2::after{ display:none; }
.t2-sub{ font:600 .84rem/1.3 -apple-system,system-ui,sans-serif; color:#7a7488; }
.t2-sub b{ color:var(--gold4); }

/* Spot it today — the eye-line card */
.t2-try{ position:relative; margin:1.1em 0 0; border-radius:22px; overflow:hidden; background:var(--paper-card); box-shadow:0 2px 6px rgba(60,45,20,.08),0 14px 30px color-mix(in srgb, var(--ta) 24%, transparent); }
.t2-try::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2.5px; z-index:3; pointer-events:none; background:linear-gradient(135deg,var(--ta),var(--gold3)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.t2-try-pic{ position:relative; aspect-ratio:16/10; background:var(--tas); overflow:hidden; }
.t2-try-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.t2-kick{ position:absolute; top:10px; left:10px; z-index:2; padding:.48em .8em; border-radius:999px; font:800 .72rem/1 -apple-system,system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#7A4E00; background:linear-gradient(135deg,var(--gold1),#FFCE3D); box-shadow:0 2px 8px rgba(0,0,0,.15); }
.t2-another{ position:absolute; top:10px; right:10px; z-index:2; cursor:pointer; border:0; padding:.48em .8em; border-radius:999px; font:800 .74rem/1 -apple-system,system-ui,sans-serif; color:var(--tad); background:rgba(255,255,255,.95); box-shadow:0 2px 8px rgba(0,0,0,.15); }
.t2-try-b{ padding:.9em 1.05em 1.1em; }
.t2-try-k{ font:800 .68rem/1.2 -apple-system,system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--tad); }
.t2-try-t{ margin:.25em 0 .3em; font-weight:800; font-size:1.42rem; line-height:1.12; letter-spacing:-.025em; color:var(--ink,#2A2038); }
.t2-try-x{ margin:0; font-size:1rem; line-height:1.5; color:#4d4658; }
.t2-try-x u, .t2-check u{ text-decoration:none; font-weight:800; color:var(--tad); box-shadow:inset 0 -.4em 0 color-mix(in srgb, var(--ta) 18%, transparent); }
.t2-try-row{ display:flex; align-items:center; gap:.7em; margin-top:.9em; flex-wrap:wrap; }
.t2-spot{ cursor:pointer; border:0; padding:.68em 1.2em; border-radius:999px; font:800 .95rem/1 -apple-system,system-ui,sans-serif; color:#fff; background:linear-gradient(135deg,var(--ta),var(--tad)); box-shadow:0 4px 13px color-mix(in srgb, var(--ta) 35%, transparent); transition:transform .2s var(--spring); }
.t2-spot:active{ transform:scale(.95); }
.t2-spot.done{ color:#6B4700; background:radial-gradient(circle at 35% 30%, var(--gold1), var(--gold3) 60%, var(--gold4)); }
.t2-count{ font:700 .82rem/1.2 -apple-system,system-ui,sans-serif; color:#7a7488; }

/* At a glance — a side-scrolling strip */
.t2-strip{ display:flex; gap:.6em; overflow-x:auto; margin:0 -16px; padding:.2em 16px .8em; scrollbar-width:none; scroll-snap-type:x mandatory; }
.t2-strip::-webkit-scrollbar{ display:none; }
.t2-gl{ flex:0 0 auto; width:min(62vw,230px); scroll-snap-align:start; display:flex; flex-direction:column; gap:.35em; padding:.85em .95em 1em; border-radius:16px; background:var(--paper-card); box-shadow:0 1px 3px rgba(60,45,20,.07),0 8px 20px rgba(60,45,20,.07); border-top:4px solid var(--ta); }
.t2-gl:nth-child(2n){ border-top-color:var(--gold3); }
.t2-gl-l{ font:800 .68rem/1.2 -apple-system,system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--tad); }
.t2-gl-v{ font:700 .95rem/1.35 -apple-system,system-ui,sans-serif; color:var(--ink,#2A2038); }

/* Key parts — numbered swipe cards */
.t2-row{ display:grid; grid-auto-flow:column; grid-auto-columns:62%; gap:.8em; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:.3em 16px 1em; scrollbar-width:none; }
@media(min-width:640px){ .t2-row{ grid-auto-columns:32%; } }
.t2-row::-webkit-scrollbar{ display:none; }
.t2-card{ scroll-snap-align:start; position:relative; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; text-align:left; padding:0; border:0; cursor:pointer; color:var(--ink,#2A2038); background:var(--paper-card); border-radius:20px; overflow:hidden; box-shadow:0 2px 6px rgba(60,45,20,.08),0 10px 24px color-mix(in srgb, var(--ta) 18%, transparent); transition:transform .25s var(--spring); }
.t2 .t2-card::before{ display:block !important; content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; z-index:3; pointer-events:none; background:linear-gradient(135deg,var(--ta),var(--tad)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; }
.t2-card:active{ transform:scale(.97); }
.t2-card-pic{ position:relative; display:block; aspect-ratio:1/1; background:linear-gradient(150deg,var(--ta),var(--tad)); overflow:hidden; }
.t2-card-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.t2-no{ position:absolute; top:10px; left:10px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font:800 .95rem/1 -apple-system,system-ui,sans-serif; color:#fff; background:var(--tad); box-shadow:0 0 0 3px #fff; }
.t2-tick{ position:absolute; right:10px; bottom:10px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:900; background:radial-gradient(circle at 35% 30%, var(--gold1), var(--gold3) 60%, var(--gold4)); box-shadow:0 0 0 3px #fff, 0 3px 10px rgba(120,80,0,.35); transform:scale(0); transition:transform .45s var(--spring); }
.t2-card.is-got .t2-tick{ transform:none; }
.t2 .t2-card.is-got::before{ opacity:1; padding:3px; background:linear-gradient(135deg,var(--gold1),var(--gold3) 45%,var(--gold4) 70%,var(--gold1)); }
.t2-card-t{ display:block; padding:.75em .9em 0; font-weight:800; font-size:1.06rem; line-height:1.15; letter-spacing:-.015em; }
.t2-card-h{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; padding:.35em .9em 1em; font-size:.86rem; line-height:1.4; color:#6b6478; }

/* Where to see it — two-column picture tiles */
.t2-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:.8em; }
@media(min-width:640px){ .t2-tiles{ grid-template-columns:1fr 1fr 1fr; } }
.t2-tile{ position:relative; display:flex; flex-direction:column; align-items:stretch; text-align:left; padding:0; border:0; cursor:pointer; border-radius:18px; overflow:hidden; background:var(--paper-card); color:var(--ink,#2A2038); box-shadow:0 2px 6px rgba(60,45,20,.08),0 10px 24px color-mix(in srgb, var(--ta) 14%, transparent); transition:transform .25s var(--spring); }
.t2-tile:active{ transform:scale(.97); }
.t2-tile-pic{ display:block; aspect-ratio:4/3; background:var(--tas); overflow:hidden; }
.t2-tile-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.t2-tile-b{ display:flex; flex-direction:column; gap:.2em; padding:.65em .8em .85em; }
.t2-tile-n{ font-weight:800; font-size:.96rem; line-height:1.2; letter-spacing:-.01em; }
.t2-tile-w{ font:800 .64rem/1.25 -apple-system,system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--tad); }

/* How to remember it — bright flash cards */
.t2-mem{ flex:0 0 auto; width:min(70vw,260px); scroll-snap-align:start; display:flex; flex-direction:column; gap:.45em; padding:1em 1.05em 1.15em; border-radius:18px; color:#fff; background:linear-gradient(150deg,var(--ta),var(--tad)); box-shadow:0 8px 20px color-mix(in srgb, var(--ta) 30%, transparent); }
.t2-mem:nth-child(3n+2){ background:linear-gradient(150deg,#F2B21B,#C98A0C); color:#3A2600; }
.t2-mem:nth-child(3n+3){ background:linear-gradient(150deg,#4CA6D8,#2D6FA8); }
.t2-mem-k{ font:800 .7rem/1.2 -apple-system,system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; opacity:.9; }
.t2-mem-x{ font:700 1rem/1.42 -apple-system,system-ui,sans-serif; }

/* The architects — round portraits in a strip */
.t2-arch{ flex:0 0 auto; width:128px; display:flex; flex-direction:column; align-items:center; gap:.45em; padding:.9em .6em 1em; text-align:center; cursor:pointer; border:0; border-radius:18px; background:var(--paper-card); color:var(--ink,#2A2038); box-shadow:0 1px 3px rgba(60,45,20,.07),0 8px 20px rgba(60,45,20,.07); transition:transform .25s var(--spring); }
.t2-arch:active{ transform:scale(.96); }
.t2-face{ width:76px; height:76px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:linear-gradient(150deg,var(--ta),var(--tad)); box-shadow:0 0 0 3px #fff, 0 0 0 5px color-mix(in srgb, var(--ta) 45%, transparent); font:800 1.7rem/1 Georgia,'Times New Roman',serif; color:#fff; }
.t2-face img{ width:100%; height:100%; object-fit:cover; display:block; }
.t2-arch-n{ font:800 .84rem/1.2 -apple-system,system-ui,sans-serif; }
.t2-arch-d{ font:600 .7rem/1.2 -apple-system,system-ui,sans-serif; color:#7a7488; }

/* Folds at the foot of the page */
.t2-folds{ display:flex; flex-direction:column; gap:.7em; margin:2em 0 0; }
.t2-fold{ border-radius:16px; background:var(--paper-card); box-shadow:0 1px 3px rgba(60,45,20,.07),0 8px 20px rgba(60,45,20,.06); overflow:hidden; }
.t2-fold > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:.7em; padding:.95em 1.05em; font:800 1rem/1.25 -apple-system,system-ui,sans-serif; color:var(--ink,#2A2038); }
.t2-fold > summary::-webkit-details-marker{ display:none; }
.t2-fold-ic{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; font-size:1rem; background:linear-gradient(150deg,var(--ta),var(--tad)); }
.t2-fold-t{ flex:1; }
.t2-fold-c{ font:800 .74rem/1 -apple-system,system-ui,sans-serif; color:var(--tad); background:var(--tas); padding:.4em .6em; border-radius:999px; }
.t2-fold-ch{ opacity:.5; transition:transform .2s; } .t2-fold[open] .t2-fold-ch{ transform:rotate(180deg); }
.t2-fold-b{ padding:0 1.1em 1.2em; font-size:1rem; line-height:1.62; color:#3a3448; }
.t2-fold-b p{ margin:0 0 .9em; }
.t2-fold-b figure{ margin:.4em 0 1em; } .t2-fold-b figure img{ width:100%; border-radius:14px; display:block; }
.t2-fold-b figcaption{ margin-top:.4em; font-size:.84em; color:#7a7488; }
.t2-check{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.7em; }
.t2-check li{ position:relative; padding-left:1.7em; } .t2-check li::before{ content:"✓"; position:absolute; left:0; top:0; font-weight:900; color:var(--ta); }
.t2-faq details{ border-top:1px solid #EEE7DA; } .t2-faq details:first-child{ border-top:0; }
.t2-faq summary{ cursor:pointer; list-style:none; padding:.75em 0; font-weight:800; color:var(--ink,#2A2038); }
.t2-faq summary::-webkit-details-marker{ display:none; }
.t2-faq summary::after{ content:" +"; color:var(--ta); }
.t2-faq details[open] summary::after{ content:" –"; }
.t2-faq .fa{ padding:0 0 .9em; color:#4d4658; }
.t2-book{ padding:.75em 0; border-top:1px solid #EEE7DA; } .t2-book:first-child{ border-top:0; padding-top:0; }
.t2-book b{ color:var(--ink,#2A2038); } .t2-book span{ color:#7a7488; }
.t2-book em{ display:block; font-style:normal; font-size:.88em; color:#6b6478; margin-top:.15em; }
.t2-read{ cursor:pointer; border:1.6px solid var(--ta); background:var(--paper-card); color:var(--tad); padding:.55em 1.05em; border-radius:999px; font:800 .9rem -apple-system,system-ui,sans-serif; margin-bottom:1em; }

/* Next topic */
.t2-next{ display:flex; align-items:stretch; margin:1.6em 0 .5em; border-radius:18px; overflow:hidden; text-decoration:none; color:#fff; background:linear-gradient(135deg,var(--nc),var(--ncd)); box-shadow:0 8px 22px color-mix(in srgb, var(--nc) 30%, transparent); }
.t2-next img{ width:104px; object-fit:cover; display:block; flex:none; }
.t2-next-b{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:.2em; padding:.9em 1em; }
.t2-next-k{ font:800 .66rem/1.2 -apple-system,system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; opacity:.9; }
.t2-next-n{ font-weight:800; font-size:1.2rem; letter-spacing:-.02em; }
.t2-next-go{ align-self:center; padding:0 1em; font-size:1.4rem; font-weight:800; }

/* Pop-up — centred, room on every side, scrolls inside */
.t2-ov{ position:fixed; inset:0; z-index:90; background:rgba(30,22,15,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:max(64px,calc(env(safe-area-inset-top) + 40px)) 32px max(64px,calc(env(safe-area-inset-bottom) + 40px)); opacity:0; pointer-events:none; transition:opacity .2s ease; }
.t2-ov.open{ opacity:1; pointer-events:auto; }
.t2-sheet{ position:relative; width:100%; max-width:440px; max-height:100%; overflow-y:auto; background:var(--paper-card); border-radius:22px; box-shadow:0 24px 64px rgba(0,0,0,.38); transform:scale(.9); transition:transform .26s cubic-bezier(0.34,1.56,0.64,1); }
.t2-ov.open .t2-sheet{ transform:scale(1); }
.t2-sheet img.t2-sh-img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.t2-sh-b{ padding:1.05em 1.25em 1.4em; color:#3a3448; font-size:1rem; line-height:1.6; }
.t2-sh-k{ font:800 .7rem/1.2 -apple-system,system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--tad); }
.t2-sh-t{ margin:.25em 0 .4em; font-weight:800; font-size:1.45rem; line-height:1.12; letter-spacing:-.025em; color:var(--ink,#2A2038); }
.t2-sh-cap{ font-style:italic; color:#6b6478; margin:0 0 .7em; }
.t2-sh-b p{ margin:0 0 .8em; }
.t2-sh-b ul{ margin:.2em 0 .9em; padding-left:1.2em; }
.t2-sh-row{ display:flex; gap:.6em; flex-wrap:wrap; margin-top:.4em; }
.t2-sh-link{ display:inline-block; padding:.62em 1.1em; border-radius:999px; font:800 .9rem -apple-system,system-ui,sans-serif; text-decoration:none; color:var(--tad); border:1.6px solid var(--ta) !important; }