/* Standalone directory: approved palette and artwork, fluid in both directions. */
.categories-page{max-width:1360px;padding-block:24px 72px}
.categories-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,56px);padding:8px 2% 28px}
.categories-eyebrow{color:var(--gold);font-size:12px;letter-spacing:.12em;margin-block-end:16px}
.categories-intro h1{font-size:clamp(32px,4vw,52px);font-weight:400;line-height:1.35;color:var(--burgundy);margin-block-end:22px}
.categories-intro-copy>p:not(.categories-eyebrow){max-width:480px;font-size:clamp(16px,1.5vw,20px);color:#72543c;line-height:1.9}
.categories-intro .button{margin-block-start:22px;border-radius:30px;padding:14px 26px;gap:24px}
/* The approved artwork already includes its frame and logo. Never mask or crop it. */
.categories-character{min-width:0;width:100%;max-width:480px;justify-self:center;margin:0}
.categories-character picture{display:block}
.categories-character img{display:block;width:100%;height:auto;object-fit:contain}
.directory-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;border-block-start:1px solid var(--line);padding-block:32px 26px}
.directory-heading .categories-eyebrow{margin-block-end:6px}
.directory-heading h2{font-size:clamp(24px,3vw,36px);font-weight:400}
.directory-heading>p{color:#72543c;font-size:14px}
.directory-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.directory-card{min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:26px;overflow:hidden}
.directory-card>a{display:flex;flex-direction:column;height:100%;color:var(--ink)}
.directory-card>a:focus-visible{outline-offset:-5px}
.directory-photo{position:relative;aspect-ratio:1.35;overflow:hidden;background:#f3e2cc;border-radius:24px 24px 64px 0}
.directory-photo img{width:100%;height:100%;object-fit:cover}
.directory-number{position:absolute;inset-block-start:16px;inset-inline-start:16px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--paper);color:var(--burgundy);font-size:12px}
.directory-card-copy{padding:24px;display:flex;flex-direction:column;flex:1}
.directory-card h3{font-size:20px;margin-block-end:18px}
.directory-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--gold);margin-block-start:auto}
.directory-cta>span{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:20px}
.directory-placeholder{height:100%;display:grid;place-items:center;color:var(--gold)}
.directory-placeholder .icon{width:60px;height:60px}
@media(min-width:960px){.directory-card:last-child:nth-child(3n + 1){grid-column:2}}
@media(max-width:959px){.directory-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.categories-intro{padding-inline:2%;gap:28px}}
@media(max-width:599px){.categories-page{padding-block:12px 32px}.categories-intro{grid-template-columns:1fr;padding:4px 8px 16px;gap:12px}.categories-intro-copy{text-align:center}.categories-intro-copy>p:not(.categories-eyebrow){margin-inline:auto}.categories-intro h1{font-size:30px;margin-block-end:10px}.categories-intro .categories-eyebrow{margin-block-end:8px}.categories-intro-copy>p:not(.categories-eyebrow){font-size:14px;line-height:1.7}.categories-intro .button{margin-block-start:14px;padding:10px 20px}.categories-character{max-width:200px}.directory-heading{align-items:start;flex-direction:column;gap:10px;padding-block:18px 16px}.directory-grid{gap:14px}.directory-card-copy{padding:16px}.directory-card h3{font-size:18px}.directory-photo{border-end-end-radius:40px}.directory-cta{font-size:12px}}
@media(max-width:479px){.directory-grid{grid-template-columns:minmax(0,1fr)}.directory-photo{aspect-ratio:1.6}.directory-card-copy{padding:20px}.directory-card h3{margin-block-end:10px}}
@media(prefers-reduced-motion:no-preference){.directory-card{transition:box-shadow .2s,transform .2s}.directory-photo img{transition:transform .3s}.directory-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px #29190e10}.directory-card:hover img{transform:scale(1.025)}}
