/* Personal Branding Tips (/personal-branding-tips and its 365 pages). Built by tools/tips_build.py. */
.tips-hero h1 em{font-style:normal; color:var(--platinum);}

/* The card and its actions, side by side from tablet up. */
.tip-layout{display:grid; gap:clamp(28px, 4vw, 56px); align-items:center; margin-top:8px;}
@media (min-width:860px){.tip-layout{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);}}
.tip-card{margin:0;}
.tip-card img{display:block; width:100%; height:auto; border-radius:6px; box-shadow:0 24px 60px rgba(10,10,10,0.22), 0 2px 6px rgba(10,10,10,0.12);}
.tip-card a{display:block; border-radius:6px;}
.tip-card a:focus-visible{outline:2px solid var(--ink); outline-offset:4px;}
.tip-side h2{margin-top:0;}
.tip-note{font-size:0.95rem;}
.tip-dls{display:grid; gap:10px; margin:20px 0;}
.tip-dl{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:14px 18px; border:1px solid var(--rule-light); border-radius:4px; color:var(--ink); text-decoration:none; transition:border-color .2s var(--ease), background .2s var(--ease);}
.tip-dl b{font-family:var(--display); font-weight:700; font-size:0.95rem; letter-spacing:0.02em;}
.tip-dl b::before{content:'\2193'; display:inline-block; margin-right:10px; color:var(--slate);}
.tip-dl span{color:var(--ink-label); font-size:0.88rem;}
.tip-dl:hover,.tip-dl:focus-visible{border-color:var(--ink);}
.tip-acts{display:flex; flex-wrap:wrap; gap:10px;}
.tip-acts .done{opacity:0.75;}

/* Today, on the hub. */
.tip-today-h{font-size:clamp(1.9rem, 3.4vw, 2.8rem); line-height:1.1; margin:10px 0 16px;}
.tip-today-p{font-size:1.15rem; color:var(--ink);}
.tip-today-why{color:var(--ink-body);}
.tip-today-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;}

/* A tip page's reading column. */
.tip-prose{margin-top:clamp(40px, 6vw, 72px);}
.tip-pn{display:grid; gap:12px; margin:36px 0 18px;}
@media (min-width:640px){.tip-pn{grid-template-columns:1fr 1fr;}}
.tip-pn a{display:flex; flex-direction:column; gap:4px; padding:16px 18px; border:1px solid var(--rule-light); border-radius:4px; text-decoration:none; color:var(--ink);}
.tip-pn a[rel="next"]{text-align:right;}
.tip-pn a span{font-family:var(--display); font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-label);}
.tip-pn a b{font-family:var(--display); font-weight:700;}
.tip-pn a:hover,.tip-pn a:focus-visible{border-color:var(--ink);}
.tip-today-line{font-size:0.95rem;}

/* The grid: every card as it appears in a feed. */
.tip-filter{display:flex; flex-direction:column; gap:14px; margin:0 0 18px;}
.tip-filter input{width:100%; max-width:420px; padding:12px 14px; background:var(--panel); border:1px solid var(--rule-dark); border-radius:4px; color:var(--white); font:inherit;}
.tip-filter input:focus{outline:2px solid var(--platinum); outline-offset:1px;}
.tip-chips{display:flex; flex-wrap:wrap; gap:8px;}
.tip-chips button{padding:8px 14px; border:1px solid var(--rule-dark); border-radius:999px; background:transparent; color:var(--platinum); font:600 0.8rem/1 var(--display); letter-spacing:0.08em; text-transform:uppercase; cursor:pointer;}
.tip-chips button[aria-pressed="true"]{background:var(--white); color:var(--ink); border-color:var(--white);}
.tip-chips button:focus-visible{outline:2px solid var(--platinum); outline-offset:2px;}
.tip-count{color:var(--steel); font-size:0.9rem; margin:0 0 18px; min-height:1.2em;}
.tip-grid{list-style:none; margin:0; padding:0; display:grid; gap:clamp(10px, 1.6vw, 18px); grid-template-columns:repeat(2, minmax(0, 1fr));}
@media (min-width:720px){.tip-grid{grid-template-columns:repeat(3, minmax(0, 1fr));}}
@media (min-width:1100px){.tip-grid:not(.tip-grid-3){grid-template-columns:repeat(4, minmax(0, 1fr));}}
.tip-tile{margin:0;}
.tip-tile[hidden]{display:none;}
.tip-tile a{display:block; position:relative; border-radius:4px; overflow:hidden; text-decoration:none; color:var(--white); background:var(--panel);}
.tip-tile img{display:block; width:100%; height:auto; aspect-ratio:1; transition:transform .5s var(--ease), opacity .3s var(--ease);}
.tip-tile-cap{position:absolute; inset:auto 0 0 0; padding:14px; background:linear-gradient(to top, rgba(10,10,10,0.94), rgba(10,10,10,0)); display:flex; flex-direction:column; gap:4px; opacity:0; transform:translateY(8px); transition:opacity .3s var(--ease), transform .3s var(--ease);}
.tip-tile-k{font:600 0.7rem/1.2 var(--display); letter-spacing:0.14em; text-transform:uppercase; color:var(--platinum);}
.tip-tile-cap b{font-family:var(--display); font-size:0.95rem; line-height:1.2;}
.tip-tile-p{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.tip-tile a:hover img,.tip-tile a:focus-visible img{transform:scale(1.03); opacity:0.55;}
.tip-tile a:hover .tip-tile-cap,.tip-tile a:focus-visible .tip-tile-cap{opacity:1; transform:none;}
.tip-tile a:focus-visible{outline:2px solid var(--platinum); outline-offset:3px;}
.tip-tile.is-today a{outline:2px solid var(--platinum); outline-offset:3px;}
.tip-tile.is-today a::after{content:'Today'; position:absolute; top:10px; left:10px; padding:5px 9px; border-radius:3px; background:var(--white); color:var(--ink); font:700 0.68rem/1 var(--display); letter-spacing:0.14em; text-transform:uppercase;}
.tip-empty{color:var(--platinum);}
.tip-reset{background:none; border:0; padding:0; color:var(--white); text-decoration:underline; font:inherit; cursor:pointer;}
.tip-more-wrap{text-align:center; margin-top:28px;}
@media (prefers-reduced-motion:reduce){.tip-tile img,.tip-tile-cap{transition:none;}}
@media (hover:none){.tip-tile a:hover img{transform:none; opacity:1;}}
.tips-band h2{margin-bottom:18px;}