/* App additions on top of the design (halcyon.css stays unmodified). */
/* Squarer corners: less rounded than the design's pills and large radii */
:root{--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:14px}
.btn,nav{border-radius:10px!important}
.glass{border-radius:12px!important}
/* Repair: browser focus ring drawn around the hero heading (gradient text) */
h1:focus,h1:focus-visible,main:focus,[tabindex="-1"]:focus{outline:none}
/* Browser surfaces themed from the palette */
::selection{background:var(--color-accent-deep);color:#fff}
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--color-accent-deep);outline-offset:3px;border-radius:10px}
.price,.slot span,.post-card time{font-variant-numeric:tabular-nums}
h1,h2{text-wrap:balance}
.lede,.article .body p{text-wrap:pretty}
/* Gentle hover motion (transform only, ease-out, under 300ms) */
.btn,.gallery-item,.post-card{transition:transform .2s cubic-bezier(.22,1,.36,1),background-color .2s}
.btn:hover,.gallery-item:hover,.post-card:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.btn,.gallery-item,.post-card{transition:none}.btn:hover,.gallery-item:hover,.post-card:hover{transform:none}}
.navlinks a.active{color:var(--color-accent-deep);font-weight:500}
.page-head{padding:40px 0 20px}
.page-head h1{font-size:clamp(40px,7vw,76px)}
.page-head .lede{margin-top:20px}
/* Gallery: own grid, visual treatment borrowed from .glass / .quote */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.gallery-item{margin:0;padding:12px;border-radius:var(--radius-md);background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);box-shadow:0 16px 40px -28px var(--color-shadow)}
.gallery-item .ph{aspect-ratio:4/3;border-radius:6px;overflow:hidden;display:block;width:100%}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-item figcaption{font-size:14px;color:var(--color-ink-soft);padding:12px 6px 4px}
/* Blog */
.post-list{display:grid;gap:14px;margin-top:40px}
.post-card{display:block;text-decoration:none;padding:26px;border-radius:var(--radius-md);background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9)}
.post-card:hover{background:rgba(255,255,255,.8)}
.post-card time{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-deep);font-weight:500}
.post-card h2{font-size:clamp(24px,3vw,32px);font-weight:500;margin-top:10px}
.post-card p{color:var(--color-ink-soft);margin-top:10px;font-size:15.5px}
.article{max-width:68ch;margin:0 auto;padding:32px}
.article h1{font-size:clamp(34px,5.5vw,56px);font-weight:600}
.article time{display:block;margin-top:16px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-soft)}
.article .body p{margin-top:18px;font-size:18px;line-height:1.75}
.back-link{display:inline-block;margin-bottom:20px;text-decoration:none;color:var(--color-accent-deep);font-size:14.5px}
/* Admin area in the design's look */
.admin-shell{background:var(--color-bg,#f8f5fb);background-image:radial-gradient(60% 50% at 15% 0%,rgba(154,111,240,.22),transparent 70%),radial-gradient(50% 40% at 90% 10%,rgba(200,111,174,.16),transparent 70%);font-family:"Outfit","Segoe UI",system-ui,sans-serif;color:#241d33}
.admin-header{background:rgba(255,255,255,.65);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.9);box-shadow:0 16px 40px -28px var(--color-shadow)}
.admin-brand{font-size:18px;font-weight:600;color:var(--color-accent-deep)}
.admin-sub{color:var(--color-ink-soft)}
.admin-link{border-radius:10px;color:#5c5470;text-decoration:none;transition:background-color .2s}
.admin-link:hover{background:rgba(111,79,216,.1)}
.admin-link.is-active{background:#6f4fd8;color:#fff}
.admin-shell main :is(table,form,section){background:rgba(255,255,255,.6)}
.admin-shell .bg-gray-900{background:#6f4fd8}
.admin-shell .bg-white{background:rgba(255,255,255,.7)}
.admin-shell .rounded-lg,.admin-shell .rounded-md,.admin-shell .rounded-xl{border-radius:10px}
/* Undo the design's bare-element rules (header, nav pill, giant thin headings, section padding) inside the admin */
.admin-shell{font-weight:400;font-size:15px;line-height:1.5}
.admin-shell .admin-header{padding:14px 24px;position:sticky;top:0;z-index:30}
.admin-shell nav{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:4px;padding:10px;border-radius:12px!important}
.admin-shell .admin-link{justify-content:flex-start;width:100%}
.admin-shell h1{font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-bottom:6px}
.admin-shell h2{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.admin-shell h3,.admin-shell h4{font-size:16px;font-weight:600;letter-spacing:0;line-height:1.4}
.admin-shell section{padding:0}
/* Sign-in page in the design's look */
.signin-card{background:rgba(255,255,255,.7);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.9);border-radius:12px;box-shadow:0 16px 40px -28px var(--color-shadow)}
.signin-card h1{font-size:28px;line-height:1.2;font-weight:600;color:#241d33;background:none;-webkit-text-fill-color:currentColor}
.signin-card button[type=submit]{background:#6f4fd8;color:#fff;border-radius:10px}
.signin-card button[type=submit]:hover{background:#5b3fc0}
.signin-card input{border-radius:8px}
@media (max-width:960px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.gallery-grid{grid-template-columns:1fr}.article{padding:22px}}