/* Original green-and-lime palette with consistent gallery dimensions. */
:root { --brand-green: #365c1f; --brand-ink: #202520; --brand-soft: #f2f6ed; --acid: #c5f777; }
.brand-mark, .brand-dot { color: var(--brand-green); }
.brand-caption { color: #62665e; }
.nav-awards { color: var(--brand-green); font-weight: 600; }
.nav-awards:hover { text-decoration: underline; text-underline-offset: 6px; }
.header nav { gap: 24px; }
.hero { background-color: #f9fbf8; background-image: radial-gradient(#d8e5ce .8px, transparent .8px); background-size: 20px 20px; }
.eyebrow { color: var(--brand-green); }
.eyebrow > span { color: var(--brand-green); }
.hero h1 { font-weight: 700; letter-spacing: -.025em; }
.highlight { color: var(--brand-ink); }
.highlight:after { background: var(--acid); bottom: 0; height: 32%; }
.hero-description { color: #606b58; }
.search-box { border-color: #d3e2c9; box-shadow: 5px 5px 0 #ebf1e6; }
.search-box:focus-within { border-color: var(--brand-green); box-shadow: 5px 5px 0 #e1ebda; }
.search-label > span:first-child { color: var(--brand-green); }
.search-bottom > span { color: #6f7a68; }
.search-box textarea::placeholder { color: #798173; }
.search-submit { background: var(--brand-green); min-height: 44px; transition: background .2s, transform .2s; }
.search-submit:hover { background: #587941; transform: translateX(2px); }
.suggestions button { background: #fff; border-color: #dbe7d2; border-radius: 100px; color: #4e5f41; }
.suggestions button span { color: var(--brand-green); }
.suggestions button:last-child { background: var(--acid); border-color: var(--acid); color: var(--brand-ink); }
.suggestions button:hover { border-color: var(--brand-green); background: #f2f7ef; }
.section-kicker { color: var(--brand-green); }
.section-kicker, .eyebrow, .curated-label { font-size: 12px; }
.section-heading > p { color: #66615f; }
.gallery { background: #fff; }
.gallery-toolbar { border: 0; margin-bottom: 20px; }
.category-tabs { gap: 8px; padding: 2px 0 5px; }
.category-tabs button { padding: 10px 17px; margin: 0; border: 1px solid #e1e9dc; border-radius: 100px; color: #61695b; font-size: 14px; }
.category-tabs button.active { color: #fff; background: var(--brand-ink); border-color: var(--brand-ink); }
.category-tabs button:not(.active):hover { color: var(--brand-green); background: var(--brand-soft); border-color: #c0d5b1; }
.curated-label { color: #5f7053; padding-bottom: 0; }
.discovery-scope { padding: 0 0 22px; border-bottom: 1px solid #e7efe1; gap: 16px; }
.region-options { background: #f2f7ef; }
.region-options button { color: #66755b; min-height: 40px; font-size: 14px; }
.region-options button[aria-pressed=true] { color: var(--brand-ink); }
.award-toggle { border: 1px solid #d1e0c6; background: var(--brand-soft); color: #5e8045; border-radius: 100px; padding: 9px 15px; min-height: 44px; font-size: 14px; font-weight: 600; transition: background .2s, color .2s; }
.award-toggle > span { font-size: 19px; line-height: 1; }
.award-toggle input { accent-color: var(--brand-green); width: 17px; height: 17px; }
.award-toggle:has(input:checked) { background: var(--brand-green); color: #fff; border-color: var(--brand-green); }
.award-toggle:focus-within { outline: 3px solid var(--brand-green); outline-offset: 3px; }
.scope-count { color: #626c5b; }
.cards { align-items: stretch; grid-auto-rows: 1fr; gap: 25px 22px; }
.card { display: flex; flex-direction: column; border: 1px solid #e5ebe1; border-radius: 15px; padding: 7px; background: #fff; transition: transform .22s, box-shadow .22s, border-color .22s; }
.card:hover, .card:focus-within { border-color: #bad1a9; box-shadow: 0 8px 0 #eef4ea; }
.card-image-link { border: 0; border-radius: 9px; }
.card-details { display: flex; flex-direction: column; flex: 1; padding: 0 7px 9px; }
.card-headline { align-items: flex-start; min-height: 3.2em; margin-top: 13px; }
.card h3, .results-mode .card h3 { font-size: 16px; font-weight: 600; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.card-external { color: var(--brand-green); flex-shrink: 0; }
.card-tags { gap: 4px 7px; line-height: 1.6; }
.card-tags span { font-size: 12px; color: #666d61; }
.card-tags span + span:before { color: #aab6a1; }
.region-label { font-size: 12px; line-height: 1.6; color: #657858; }
.source-link { color: #6c7864; font-size: 12px; line-height: 1.6; }
.source-link:hover { color: var(--brand-green); }
.card-match-row { gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; min-height: 62px; align-items: flex-end; }
.save-button { width: 36px; height: 36px; }
.card-awarded { background: var(--brand-soft); border-color: #d0e0c5; }
.card-awarded h3 { color: #506e3b; }
.award-line { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: #365c1f; font-size: 12px; line-height: 1.6; }
.award-line span, .award-line time { color: inherit; font-size: inherit; }
.award-line time { color: #6c7864; }
.award-line:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.global-resources { background: var(--brand-ink); color: #fff; padding-top: 48px; padding-bottom: 54px; }
.global-resources .section-heading { align-items: center; margin-bottom: 28px; }
.global-resources .section-kicker { color: var(--acid); }
.global-resources h2 { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.5; letter-spacing: -.02em; font-weight: 600; }
.global-resources h2 > span { color: var(--acid); }
.global-resources .section-heading > p { color: #e9f0e4; font-size: 14px; }
.resource-grid { gap: 18px; }
.resource-link { --resource-ink: #202520; --resource-bg: #fff; --resource-line: #34482733; background: var(--resource-bg); color: var(--resource-ink); border: 1px solid transparent; border-radius: 14px; padding: 23px 22px 20px; box-shadow: 0 4px 0 #141b0f; min-height: 277px; }
.resource-link:hover { border-color: var(--acid); transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 9px 0 #141b0f; }
.resource-link:focus-visible { outline: 3px solid var(--acid); outline-offset: 5px; }
.resource-type { color: var(--resource-ink); font-size: 11px; font-weight: 600; letter-spacing: .04em; align-items: center; }
.resource-type > span { display: grid; place-items: center; border: 1px solid var(--resource-line); border-radius: 50%; width: 32px; height: 32px; font-size: 20px; flex-shrink: 0; }
.resource-link h3 { font-size: clamp(24px, 2.1vw, 33px); font-weight: 700; letter-spacing: -.035em; margin: 25px 0 13px; line-height: 1.12; }
.resource-link p { color: var(--resource-ink); font-size: 14px; line-height: 1.9; margin-bottom: 24px; }
.resource-focus { color: var(--resource-ink); border-color: var(--resource-line); font-size: 12px; }
.resource-awwwards { --resource-bg: var(--acid); }
.resource-cssda { --resource-bg: #365c1f; --resource-ink: #fff; --resource-line: #ffffff55; }
.resource-siteinspire { --resource-bg: #f2f6ef; }
.resource-nicelydone { --resource-bg: #fff; }
.category-section { background: #fcfdfc; }
.mood-list button { color: #435734; border-color: #dce8d4; }
.mood-list button > span:first-child, .mood-list button > span:last-child { color: #719855; }
.mood-list button:hover { color: var(--brand-green); }
.results-heading { background: #f9fbf8; }
footer small, .copyright, .credits { color: #727b6c; font-size: 12px; }
button:focus-visible, a:focus-visible, select:focus-visible { outline-color: var(--brand-green); }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .card:hover { transform: none; }
}
@media (max-width:1100px) {
  .header nav { gap: 16px; }
  .brand-caption { display: none; }
  .resource-link { min-height: 250px; }
  .global-resources .section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
}
@media (max-width:760px) {
  .header nav { gap: 14px; }
  .nav-explore { display: none; }
  .nav-awards { font-size: 13px; }
  .hero h1 { font-size: clamp(27px, 6.7vw, 38px); }
  .hero-description { font-size: 14px; }
  .search-label, .search-box textarea { font-size: 16px; }
  .search-submit { font-size: 14px; }
  .suggestions button { font-size: 12px; padding: 8px 10px; }
  .category-tabs { gap: 7px; }
  .category-tabs button { padding: 9px 14px; }
  .discovery-scope { gap: 12px; padding-bottom: 18px; }
  .region-options button { padding: 7px 10px; font-size: 13px; }
  .award-toggle { font-size: 13px; padding: 8px 11px; }
  .cards, .results-mode .cards { gap: 20px 13px; }
  .card { padding: 5px; border-radius: 12px; }
  .card-details { padding: 0 5px 8px; }
  .card h3, .results-mode .card h3 { font-size: 14px; }
  .card-tags { gap: 2px 4px; }
  .card-tags span, .source-link, .region-label { font-size: 12px; }
  .save-button { right: 7px; top: 7px; width: 32px; height: 32px; }
  .resource-link { padding: 22px; min-height: 245px; }
  .resource-link h3 { font-size: 30px; margin-top: 20px; }
  .resource-link p { font-size: 14px; }
  .resource-grid { grid-template-columns: 1fr; gap: 18px; }
  .global-resources { padding-top: 34px; padding-bottom: 38px; }
  .global-resources h2 > span { display: block; }
  .results-mode textarea { font-size: 16px; }
}
@media (max-width:380px) {
  .cards, .results-mode .cards { grid-template-columns: 1fr; }
  .header nav { gap: 9px; }
}
/* Shared navigation for the separate AI reference menu. */
.nav-ai { color: #365c1f; font-weight: 600; white-space: nowrap; padding: 10px 0; }
.nav-ai:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-ai[aria-current=page] { background: #f3f7f0; border-radius: 7px; padding: 10px 12px; }
@media (max-width:1250px) { .brand-caption { display: none; } }
@media (max-width:900px) {
  .header { height: auto; min-height: 108px; padding-top: 17px; padding-bottom: 10px; position: relative; flex-wrap: wrap; gap: 13px; }
  .header nav { width: 100%; order: 2; margin-left: 0; gap: 22px; justify-content: flex-start; overflow-x: auto; padding: 3px 0; }
  .header nav > a:not(.saved-nav) { display: inline-block; white-space: nowrap; font-size: 14px; }
  .header .saved-nav { position: absolute; right: 5%; top: 13px; }
}
@media (max-width:760px) {
  .header nav { gap: 18px; }
  .header nav > a:not(.saved-nav) { font-size: 13px; }
  .nav-ai[aria-current=page] { padding: 8px 9px; }
}

.results-mode .card-match-row { margin-top: auto; }
.card-match-row > .source-link { margin-left: auto; }

/* Let the conversational search be the hero. */
.hero { padding: 44px 24px 42px; background-image: none; }
.hero h1 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.5; margin: 0 0 27px; }
.hero .search-box { max-width: 760px; }
.hero .search-box textarea { font-size: 18px; line-height: 1.9; min-height: 94px; padding: 6px 0 12px; }
.search-bottom { justify-content: flex-end; }
.hero .search-box textarea::placeholder { color: #77836e; opacity: 1; }
.results-mode .hero .search-box { max-width: none; }
.results-mode .hero textarea { min-height: 48px; height: 48px; padding: 9px 0; font-size: 16px; line-height: 1.7; }
@media (max-width:760px) {
 .hero { padding: 30px 5% 34px; }
 .hero h1 { font-size: clamp(25px, 6.4vw, 36px); margin-bottom: 23px; }
 .hero .search-box textarea { font-size: 16px; min-height: 122px; height: 122px; line-height: 1.9; }
 .results-mode .hero textarea { min-height: 55px; height: 55px; line-height: 1.5; }
}

/* Crisp typography and a quiet luminous input surface. */
.brand-mark { color: var(--ink); }
.brand-dot { color: #80b549; }
.hero { background: #fff; }
.hero h1 { font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; font-weight: 400; letter-spacing: -.055em; font-size: clamp(32px, 4vw, 56px); line-height: 1.5; }
.hero .highlight { font-weight: 500; color: #202520; }
.hero .highlight:after { display: none; }
.hero-ai { font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 1.18em; letter-spacing: -.065em; margin: 0 .06em; color: #365c1f; }
.hero .search-box { border: 1px solid #c8d5bd; border-radius: 20px; box-shadow: 0 0 0 5px #ffffff90, 0 12px 40px #00000008; background: #ffffffed; }
.hero .search-box:focus-within { border-color: #6b963e; box-shadow: 0 0 0 5px #c5f77745, 0 12px 40px #365c1f12; }
.hero .search-box textarea { font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; font-weight: 400; letter-spacing: .015em; }
.search-submit { background: #202520; color: #c5f777; border-radius: 12px; }
.search-submit:hover { background: #365c1f; }
.results-mode .hero { background: #fff; }
.results-mode .hero .search-box { box-shadow: none; border-radius: 12px; }
@media (max-width:760px) {
 .hero h1 { font-size: clamp(25px, 6.5vw, 36px); letter-spacing: -.06em; }
 .hero .search-box { border-radius: 16px; }
}

/* Expose the searchable facets without compressing the card text. */
.card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.card-tags span { padding: 3px 7px; background: #f2f5ee; border: 1px solid #e2e8db; border-radius: 5px; line-height: 1.5; }
.card-tags span + span:before { content: none; }
.card-awarded .card-tags span { background: #fff; }

/* Brand palette: saturated yellow, black and white. */
:root {
  --brand-yellow: #6c3bff;
  --brand-yellow-bright: #a78bfa;
  --brand-ink: #151515;
  --brand-soft: #f1ecff;
  --heart: #f04465;
  --brand-green: var(--brand-yellow);
  --acid: var(--brand-yellow-bright);
  --lime: var(--brand-yellow-bright);
  --green: var(--brand-yellow);
  --ink: var(--brand-ink);
  --muted: #666;
  --line: #dedede;
}
.brand-mark, .brand-dot, .nav-awards, .nav-ai, .section-kicker,
.eyebrow, .eyebrow > span, .card-external, .source-link:hover,
.mood-list button:hover, .hero-ai { color: var(--brand-yellow); }
.brand-caption, .hero-description, .search-bottom > span,
.section-heading > p, .scope-count, .region-label,
footer small, .copyright, .credits { color: #666; }
.curated-label, .source-link, .card-tags span,
.award-line time, .result-status, .results-back,
.conditions-label, .condition-note { color: #666; }
.hero, .gallery, .category-section, .results-heading { background: #fff; }
.hero .search-box { border-color: #cfc3ff; background: #fff; }
.hero .search-box:focus-within {
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 5px #6c3bff2f, 0 12px 40px #0000000a;
}
.search-submit { background: var(--brand-ink); color: var(--brand-yellow-bright); }
.search-submit:hover { background: var(--brand-yellow); color: #fff; }
.category-tabs button:not(.active):hover,
.nav-ai[aria-current=page] { color: var(--brand-ink); background: var(--brand-soft); border-color: var(--brand-yellow); }
.region-options { background: #f7f7f7; }
.award-toggle { border-color: var(--brand-yellow); background: #fff; color: var(--brand-ink); }
.award-toggle input { accent-color: var(--brand-yellow); }
.award-toggle:has(input:checked) { background: var(--brand-yellow); color: #fff; border-color: var(--brand-yellow); }
.award-toggle:focus-within, button:focus-visible, a:focus-visible, select:focus-visible { outline-color: var(--brand-yellow); }
.card:hover, .card:focus-within { border-color: var(--brand-yellow); box-shadow: 0 8px 0 var(--brand-soft); }
.card-awarded { background: #fff; border-color: var(--brand-yellow); }
.card-awarded h3, .award-line { color: var(--brand-ink); }
.award-line { border-bottom: 2px solid var(--brand-yellow); }
.card-tags span, .card-awarded .card-tags span { background: #fff; border-color: #dedede; color: #555; }
.global-resources { background: var(--brand-ink); }
.global-resources .section-kicker,
.global-resources h2 > span { color: var(--brand-yellow-bright); }
.global-resources .section-heading > p { color: #d7d7d7; }
.resource-awwwards, .resource-cssda,
.resource-siteinspire, .resource-nicelydone {
  --resource-bg: #fff;
  --resource-ink: var(--brand-ink);
  --resource-line: #15151533;
}
.resource-link {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #4b4b4b, #7a7a7a) border-box;
  border-color: transparent;
  box-shadow: 0 4px 0 #090909;
  transition: transform .25s ease, box-shadow .25s ease;
}
.resource-link:hover,
.resource-link:focus-visible {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, #4f2bdb 0%, #6c3bff 28%, #8b5cf6 52%, #a855f7 76%, #d946ef 100%) border-box;
  border-color: transparent;
  transform: translateY(-5px);
  box-shadow: 0 9px 0 #090909, 0 18px 42px #00000038;
}
.resource-link:hover .resource-type > span,
.resource-link:focus-visible .resource-type > span {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
}
.mood-list button { color: var(--brand-ink); border-color: #dedede; }
.mood-list button > span:first-child, .mood-list button > span:last-child { color: var(--brand-yellow); }
.save-button { color: var(--heart); }
.save-button svg { stroke: var(--heart); }
.save-button:hover { border-color: var(--heart); }
.save-button[aria-pressed=true] { background: #fff; border-color: var(--heart); }
.save-button[aria-pressed=true] svg { fill: var(--heart); stroke: var(--heart); }
.saved-nav svg { stroke: var(--heart); }
.saved-nav[aria-pressed=true] { background: #fff; border-color: var(--heart); color: var(--brand-ink); }
.match, .condition { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-yellow); }
.detail-link { margin-top: 12px; color: var(--brand-yellow); font-size: 12px; font-weight: 600; text-decoration: underline; text-decoration-color: #6c3bff55; text-underline-offset: 4px; }
.detail-link:hover { text-decoration-color: currentColor; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 12px; }
.footer-nav a { text-decoration: underline; text-decoration-color: #6c3bff55; text-underline-offset: 4px; }
.footer-nav a:hover { color: var(--brand-yellow); }
@media (max-width:760px) { .footer-nav { order: 3; flex-basis: 100%; } }
.account-link{height:42px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border:1px solid #dedbe4;border-radius:999px;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}.account-link:hover{border-color:var(--purple);color:var(--purple)}.account-avatar{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--purple);color:#fff;font-size:12px}.account-signin{background:#181818;color:#fff;border-color:#181818}.account-signin:hover{background:var(--purple);color:#fff}@media(max-width:1080px){.account-link span:not(.account-avatar){display:none}.account-link{width:42px;padding:0;justify-content:center}.account-signin{width:auto;padding:0 13px}}

/* Reference discovery: image-backed records and official links are distinct. */
.match{font-size:12px;background:#f1edff;color:#6032bf}.match-related{background:#f3f3f5;color:#68626f}.official-references{margin-top:64px;padding-top:38px;border-top:1px solid #dedbe4}.official-references[hidden]{display:none}.reference-directory-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.reference-directory-heading p{font-size:13px;color:#786991;margin:0 0 10px}.reference-directory-heading h2{font-size:26px;margin:0}.reference-directory-heading h2 span{font-size:16px;font-weight:500;color:#777;margin-left:10px}.reference-directory-heading>span{font-size:12px;border:1px solid #dedbe4;padding:7px 10px;border-radius:6px;color:#70687c;white-space:nowrap}.reference-directory-note{font-size:14px;line-height:1.9;color:#777;margin:16px 0 28px;max-width:820px}.official-reference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.official-reference-card{padding:24px;border:1px solid #e3dfea;border-radius:10px;background:#fff;transition:border-color .2s,box-shadow .2s;display:flex;flex-direction:column;align-items:start}.official-reference-card:hover{border-color:#9673ef;box-shadow:0 6px 24px #5b3b8510}.official-reference-type{font-size:12px;color:#71617f}.official-reference-card h3{font-size:17px;line-height:1.65;margin:10px 0;overflow-wrap:anywhere}.official-reference-card h3 span{color:#784bd6;white-space:nowrap}.official-reference-card p{font-size:13px;line-height:1.7;color:#777;margin:0 0 20px}.official-reference-domain{font-size:12px;color:#999;margin-top:auto;overflow-wrap:anywhere}.reference-directory-date{font-size:12px;color:#999;margin-top:20px;line-height:1.7}@media(max-width:1000px){.official-reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.official-reference-grid{grid-template-columns:1fr}.official-reference-card{padding:20px}.reference-directory-heading{align-items:start}.reference-directory-heading h2{font-size:21px}.reference-directory-heading>span{display:none}}
.official-reference-jump{display:inline-block;color:#6533d3;text-decoration:underline;text-underline-offset:3px;margin-left:8px}.card-match-row{flex-wrap:wrap;gap:8px}.match{white-space:normal;line-height:1.5}