/* ANKH Demo 2 — playful editorial theme */

:root {
    --play-blue: #1262b3;
    --play-blue-dark: #07366c;
    --play-blue-soft: #dceeff;
    --play-pink: #ee0b87;
    --play-pink-dark: #bb0067;
    --play-pink-soft: #fff0f8;
    --play-yellow: #ffd55f;
    --play-ink: #15324f;
    --play-muted: #68788c;
    --play-line: #d9e4ef;
    --play-surface: #fffafd;
    --play-display: Rockwell, "Roboto Slab", Georgia, serif;
    --play-body: "Trebuchet MS", "Segoe UI", Arial, sans-serif;

    --primary-color: var(--play-blue);
    --primary-color-light: #2580d7;
    --primary-color-very-light: var(--play-blue-soft);
    --primary-color-dark: var(--play-blue-dark);
    --primary-color-20: rgba(18, 98, 179, .14);
    --primary-color-30: rgba(18, 98, 179, .24);
    --secondary-color: var(--play-pink);
    --secondary-color-light: #ff53ae;
    --secondary-color-dark: var(--play-pink-dark);
    --secondary-color-20: rgba(238, 11, 135, .14);
    --secondary-color-30: rgba(238, 11, 135, .24);
    --body-color: #fff7fb;
    --box-bg-color: var(--play-surface);
    --border-color: var(--play-line);
    --border-radius: 22px;
    --box-shadow: 0 13px 0 rgba(238, 11, 135, .07), 0 25px 55px rgba(18, 98, 179, .09);
    --font-family: var(--play-body);
    --header-font: var(--play-display);
    --header-weight: 600;
    --link-color: var(--play-blue);
    --link-color-hover: var(--play-pink);
    --breadcrumb-bg-color: transparent;
    --breadcrumb-text-color: var(--play-muted);
    --breadcrumb-link-color: var(--play-blue);
    --breadcrumb-divider-color: #a8b6c6;

    --spectrum-1-color: #4F8F87; /* Soft teal */
    --spectrum-2-color: #B46791; /* Muted raspberry */
    --spectrum-3-color: #6687B8; /* Cornflower blue */
    --spectrum-4-color: #B78A55; /* Warm caramel */
}

html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--play-ink);
    background:
        radial-gradient(circle at 7% 28%, rgba(255, 213, 95, .19), transparent 20rem),
        radial-gradient(circle at 94% 52%, rgba(238, 11, 135, .08), transparent 24rem),
        #fff7fb;
    font-family: var(--play-body);
    -webkit-font-smoothing: antialiased;
}

body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    background-image: radial-gradient(rgba(18, 98, 179, .13) 1.2px, transparent 1.2px);
    background-size: 27px 27px;
    content: "";
    opacity: .42;
    pointer-events: none;
}

::selection { color: var(--play-blue-dark); background: var(--play-yellow); }
a { color: var(--play-blue); text-underline-offset: .2em; }
a:hover { color: var(--play-pink); }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.play-skip-link { position: fixed; z-index: 9999; top: 12px; left: 12px; padding: .75rem 1.1rem; color: #fff; background: var(--play-pink); border-radius: 999px; font-weight: 800; transform: translateY(-170%); transition: transform .2s ease; }
.play-skip-link:focus { transform: translateY(0); }

.play-header { position: relative; z-index: 100; padding-bottom: 36px; }
.play-header__sky {
    min-height: 118px;
    color: #fff;
    background:
        radial-gradient(circle at 78% -80%, rgba(255,255,255,.22), transparent 24rem),
        linear-gradient(120deg, #082c61, #1262b3 62%, #2f8bdd);
}
.play-header__top { display: grid; grid-template-columns: minmax(310px, 1fr) auto 1fr; align-items: center; gap: 28px; width: min(100% - 48px, 1400px); min-height: 118px; margin-inline: auto; }
.play-brand { display: inline-flex; width: fit-content; padding: 10px 22px; background: #fff; border-radius: 20px 20px 7px 20px; }
.play-brand:hover { transform: rotate(0deg) scale(1.01); transition: transform .2s ease; }
.play-brand img { display: block; width: min(390px, 27vw); height: 66px; object-fit: contain; object-position: left center; }
.play-header__motto { display: flex; align-items: center; gap: 9px; margin: 0; font-family: var(--play-display); font-size: 15px; font-style: italic; white-space: nowrap; }
.play-header__motto span { color: var(--play-yellow); font-size: 22px; }
.play-header__tools { display: flex; justify-content: flex-end; align-items: center; gap: 13px; }
.play-search { display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; color: #fff; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; font-size: 12px; font-weight: 800; text-decoration: none; }
.play-search:hover { color: var(--play-blue-dark); background: #fff; }
.play-search i { font-size: 18px; }
.play-language { display: flex; gap: 3px; padding: 4px; background: rgba(5,33,76,.28); border-radius: 999px; }
.play-language a { padding: 6px 8px; color: rgba(255,255,255,.67); border-radius: 999px; font-size: 10px; font-weight: 800; text-decoration: none; }
.play-language a[aria-current="true"] { color: var(--play-pink-dark); background: #fff; }

.play-nav-shell { position: absolute; right: 24px; bottom: -16px; left: 24px; width: min(calc(100% - 48px), 1320px); min-height: 74px; margin-inline: auto; }
.play-nav { display: flex; justify-content: space-around; align-items: stretch; min-height: 60px; padding: 0 22px; background: #fff; border: 1px solid rgba(18,98,179,.12); border-radius: 36px 10px 36px 36px; box-shadow: 0 15px 40px rgba(7,54,108,.16); }
.play-nav a { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 clamp(11px, 2vw, 25px); color: var(--play-blue-dark); font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.play-nav a::after { position: absolute; bottom: 9px; left: 50%; width: 7px; height: 7px; background: var(--play-pink); border-radius: 50%; content: ""; opacity: 0; transform: translateX(-50%) scale(0); transition: transform .2s ease, opacity .2s ease; }
.play-nav a:hover,
.play-nav a[aria-current="page"] { color: var(--play-pink); }
.play-nav a:hover::after,
.play-nav a[aria-current="page"]::after { opacity: 1; transform: translateX(-50%) scale(1); }
.play-nav i { color: var(--play-blue); font-size: 19px; }
.play-nav-toggle, .play-nav-button { display: none; }

.content-wrapper > .content-container { width: min(100% - 48px, 1320px); padding-top: clamp(36px, 5vw, 72px); padding-bottom: clamp(70px, 9vw, 125px); margin-inline: auto; }
h1, h2, h3, h4, h5, h6 { color: var(--play-blue-dark); font-family: var(--play-display); }
h1 { letter-spacing: -.035em; }
h1::after { display: block;
    width: 40px;
    height: 9px;
    /* margin-top: .28em; */
    background: var(--play-pink);
    border-radius: 5px;
 }
.subtitle { color: var(--play-pink); font-family: var(--play-display); }
.breadcrumb-container { margin-bottom: 30px; background: transparent; }
.breadcrumb, .breadcrumbs { color: var(--play-muted); font-size: 12px; font-weight: 700; }

.card, .box, .panel, article.card { background: rgba(255,250,253,.97); border: 1px solid #eadde6; border-radius: 24px; box-shadow: 0 9px 0 rgba(238,11,135,.055), 0 18px 40px rgba(18,98,179,.06); }
.card { overflow: hidden; }
.card:hover { border-color: rgba(238,11,135,.38); box-shadow: var(--box-shadow); transform: translateY(-2px) rotate(-.15deg); }
.btn, button, input[type="submit"] { font-family: var(--play-body); font-weight: 800; }
.btn-primary, .btn.primary.filled, button.primary, input[type="submit"] { color: #fff; background: linear-gradient(110deg, var(--play-blue), #2786db); border-color: transparent; border-radius: 999px; box-shadow: 0 7px 0 #07366c; }
.btn-primary:hover, .btn.primary.filled:hover, button.primary:hover, input[type="submit"]:hover { color: #fff; background: linear-gradient(110deg, var(--play-pink), #ff55af); box-shadow: 0 5px 0 var(--play-pink-dark); transform: translateY(2px); }
input, select, textarea { color: var(--play-ink); background: #fff; border: 1px solid #c9d8e7; border-radius: 16px; }
input:focus, select:focus, textarea:focus { border-color: var(--play-pink); box-shadow: 0 0 0 4px rgba(238,11,135,.14); outline: 0; }
table.dataTable, .table { overflow: hidden; background: #fff; border: 1px solid var(--play-line); border-radius: 22px; box-shadow: 0 12px 35px rgba(18,98,179,.07); }
table.dataTable thead th, .table thead th { color: #fff; background: var(--play-blue); border-bottom-color: var(--play-pink); }
table.dataTable tbody tr:hover, .table tbody tr:hover { background: var(--play-pink-soft); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { color: #fff !important; background: var(--play-pink) !important; border-color: var(--play-pink) !important; border-radius: 999px !important; }
.badge, .tag, .label { color: var(--play-pink-dark); background: var(--play-pink-soft); border-color: #ffc0df; border-radius: 999px; }
:focus-visible { outline: 3px solid var(--play-pink); outline-offset: 3px; }

/* Home composition */
.portfolio-home { min-height: 610px; border: 5px solid #fff; border-radius: 34px 12px 34px 34px; box-shadow: 11px 11px 0 var(--play-pink), 0 30px 60px rgba(7,54,108,.2); }
.portfolio-home::before { background: linear-gradient(90deg, rgba(5,31,70,.88), rgba(18,98,179,.59) 56%, rgba(238,11,135,.18)); }
.portfolio-home__backdrop { background: radial-gradient(circle at 84% 12%, rgba(255,213,95,.34), transparent 18rem); }
.portfolio-home__eyebrow { display: inline-flex; padding: 8px 14px; color: var(--play-blue-dark); background: var(--play-yellow); border-radius: 999px; font-family: var(--play-body); letter-spacing: .04em; transform: rotate(-1deg); }
.portfolio-home .portfolio-home__title { max-width: 800px; font-family: var(--play-display); font-weight: 600; letter-spacing: -.04em; }
.portfolio-home .portfolio-home__title::after { background: var(--play-pink); border-radius: 999px; }
.portfolio-home__intro { max-width: 710px; }
.portfolio-search__form { border: 4px solid #fff; border-radius: 999px; box-shadow: 0 13px 0 rgba(7,54,108,.32); }
.portfolio-search__form:focus-within { border-color: var(--play-yellow); box-shadow: 0 0 0 5px rgba(255,213,95,.25), 0 13px 0 rgba(7,54,108,.32); }
.portfolio-search__button { color: #fff; background: var(--play-pink); border-radius: 50%; }
.portfolio-search__button:hover { background: var(--play-blue); }
.portfolio-search__panel { border-radius: 24px; }
.portfolio-search__result:hover,
.portfolio-search__result[aria-selected="true"] { background: var(--play-pink-soft); }
.portfolio-home-sections { gap: clamp(62px, 8vw, 110px); }
.portfolio-section__eyebrow { color: var(--play-pink); font-family: var(--play-body); }
.portfolio-quick-access__tile,
.portfolio-news-card,
.portfolio-home-map__frame { background: var(--play-surface); border-radius: 25px; }
.portfolio-quick-access__tile:nth-child(even) { background: #f4faff; transform: rotate(.35deg); }
.portfolio-quick-access__tile:nth-child(odd) { transform: rotate(-.35deg); }
.portfolio-quick-access__tile:hover { border-color: var(--play-pink); box-shadow: 8px 8px 0 rgba(238,11,135,.13); transform: translateY(-5px) rotate(0); }
.portfolio-quick-access__icon { color: var(--play-pink); background: var(--play-pink-soft); border-radius: 50%; }
.portfolio-news-card time,
.portfolio-news-detail time { color: var(--play-pink-dark); }

/* Footer */
.page-footer { color: #fff; background: var(--play-blue-dark); }
.page-footer > .link-parade { padding: 14px 20px; color: #6f7690; }
.play-footer { position: relative; overflow: hidden; padding: 70px 24px 24px; background: linear-gradient(145deg, #07366c, #1262b3 64%, #1679ca); }
.play-footer__orbit { position: absolute; border: 2px solid rgba(255,255,255,.12); border-radius: 50%; }
.play-footer__orbit--one { top: -230px; right: -150px; width: 500px; height: 500px; }
.play-footer__orbit--two { bottom: -130px; left: 18%; width: 260px; height: 260px; }
.play-footer__hello { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; width: min(100%, 1280px); padding: 28px 34px; margin: -50px auto 65px; color: var(--play-blue-dark); background: var(--play-yellow); border: 5px solid #fff; border-radius: 34px 12px 34px 34px; box-shadow: 9px 9px 0 var(--play-pink); }
.play-footer__spark { color: var(--play-pink); font-size: 44px; }
.play-footer__hello p { margin: 0 0 3px; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.play-footer__hello h2 { margin: 0; color: var(--play-blue-dark); font-size: clamp(1.5rem, 3vw, 2.5rem); }
.play-footer__hello > a { display: inline-flex; align-items: center; gap: 7px; padding: 12px 18px; color: #fff; background: var(--play-pink); border-radius: 999px; font-weight: 800; text-decoration: none; }
.play-footer__hello > a:hover { background: var(--play-blue-dark); }
.play-footer__grid { position: relative; display: grid; grid-template-columns: 1.2fr .65fr 1.25fr; gap: clamp(34px, 6vw, 85px); width: min(100%, 1280px); margin-inline: auto; }
.play-footer__brand img { width: min(100%, 330px); height: 62px; padding: 8px 13px; background: #fff; border-radius: 14px; object-fit: contain; }
.play-footer__brand p { max-width: 390px; margin-top: 20px; color: rgba(255,255,255,.75); line-height: 1.7; }
.play-footer h2 { color: #fff; }
.play-footer__nav { display: flex; flex-direction: column; gap: 10px; }
.play-footer__nav h2 { margin: 0 0 8px; color: var(--play-yellow); font-size: 17px; }
.play-footer__nav a { width: fit-content; color: #fff; text-decoration-color: var(--play-pink); }
.play-footer__nav a:hover { color: var(--play-yellow); }
.play-footer__note { position: relative; padding: 25px; color: var(--play-blue-dark); background: #fff4fa; border-radius: 7px 25px 25px 25px; box-shadow: 8px 8px 0 var(--play-pink); transform: rotate(1deg); }
.play-footer__note > span { position: absolute; top: -18px; right: 20px; padding: 7px 13px; color: #fff; background: var(--play-pink); border-radius: 999px; font-weight: 800; transform: rotate(5deg); }
.play-footer__note h2 { margin: 0 0 10px; color: var(--play-blue-dark); font-size: 20px; }
.play-footer__note p { margin: 0; font-size: 12px; line-height: 1.55; }
.play-footer__bottom { position: relative; display: flex; justify-content: space-between; gap: 20px; width: min(100%, 1280px); padding-top: 21px; margin: 55px auto 0; color: rgba(255,255,255,.56); border-top: 1px dashed rgba(255,255,255,.34); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 1080px) {
    .play-header__top { grid-template-columns: 1fr auto; }
    .play-header__motto { display: none; }
    .play-nav a { padding-inline: 10px; }
    .play-nav i { display: none; }
}

@media (max-width: 760px) {
    .play-header { padding-bottom: 0; }
    .play-header__sky { min-height: 92px; }
    .play-header__top { width: min(100% - 28px, 1400px); min-height: 92px; gap: 10px; }
    .play-brand { padding: 8px 13px; box-shadow: 4px 4px 0 var(--play-pink); }
    .play-brand img { width: min(230px, 48vw); height: 48px; }
    .play-search { width: 38px; height: 38px; padding: 0; justify-content: center; }
    .play-search span, .play-language { display: none; }
    .play-nav-shell { position: relative; right: auto; bottom: auto; left: auto; width: 100%; min-height: 0; }
    .play-nav-button { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; color: var(--play-blue-dark); background: #fff; font-weight: 800; cursor: pointer; }
    .play-nav-button i { font-size: 22px; }
    .play-nav { display: none; min-height: 0; padding: 10px 18px 20px; border: 0; border-radius: 0 0 24px 24px; box-shadow: 0 18px 35px rgba(7,54,108,.15); }
    .play-nav a { min-height: 48px; border-bottom: 1px solid #edf1f6; }
    .play-nav i { display: inline; }
    .play-nav a::after { top: 50%; right: 8px; bottom: auto; left: auto; transform: translateY(-50%) scale(0); }
    .play-nav a:hover::after,
    .play-nav a[aria-current="page"]::after { transform: translateY(-50%) scale(1); }
    .play-nav-toggle:checked ~ .play-nav { display: flex; flex-direction: column; }
    .content-wrapper > .content-container { width: min(100% - 28px, 1320px); }
    .play-footer__hello { grid-template-columns: auto 1fr; padding: 24px; margin-top: -98px; }
    .play-footer__hello > a { grid-column: 1 / -1; justify-content: center; }
    .play-footer__grid { grid-template-columns: 1fr 1fr; }
    .play-footer__brand, .play-footer__note { grid-column: 1 / -1; }
    .play-footer__bottom { flex-direction: column; }
}

@media (max-width: 460px) {
    .play-footer__hello { grid-template-columns: 1fr; }
    .play-footer__spark { display: none; }
    .play-footer__grid { grid-template-columns: 1fr; }
    .play-footer__brand, .play-footer__note { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}