/* Four refinements of the selected Alef / frame / centred direction. */
.refined-opening{font-family:Alef,Arial,sans-serif;min-height:320px;display:grid;place-items:center;text-align:center;padding:38px 24px;position:relative}
.refined-opening h1{font:400 clamp(48px,5.5vw,84px)/1.13 Alef,Arial,sans-serif;letter-spacing:-.035em;margin:0}
.refined-opening p{margin:0}
.refined-role{font-size:18px;line-height:1.55;color:var(--muted)}
.refined-story{font-size:23px;line-height:1.4}
.refined-dot{color:var(--accent)}
.identity-frame{position:relative;display:grid;gap:12px;max-width:100%;padding:27px 45px}
.identity-frame:before,.identity-frame:after{content:'';position:absolute;width:29px;height:29px;border-style:solid;border-color:var(--accent)}
.identity-frame:before{right:0;top:0;border-width:1px 1px 0 0}
.identity-frame:after{left:0;bottom:0;border-width:0 0 1px 1px}
.refined-whole .refined-story{font-size:20px;margin-top:1px;color:var(--accent)}
.refined-whole .refined-role{font-size:18px}
/* 8 — the two sides of a frame, with the story as the introduction. */
.refined-brackets .identity-frame{gap:13px;padding:20px 52px}
.refined-brackets .identity-frame:before,.refined-brackets .identity-frame:after{height:calc(100% - 16px);width:15px;top:8px;bottom:auto;border-width:1px}
.refined-brackets .identity-frame:before{border-left:0}
.refined-brackets .identity-frame:after{border-right:0}
.refined-brackets .refined-story{font-size:18px;color:var(--accent)}
.refined-brackets .refined-role{font-size:16px;margin-top:4px}
/* 9 — one opening credit, with the three roles read as one sentence. */
.refined-credit .identity-frame{gap:20px;padding:24px 38px}
.refined-credit .identity-frame:before,.refined-credit .identity-frame:after{width:19px;height:19px;border-color:#85887e}
.credit-roles{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;column-gap:12px;row-gap:4px;font-size:24px;line-height:1.4}
.credit-roles .story-role{color:var(--accent)}
.credit-medium{color:var(--muted);font-size:13px;margin-top:-10px!important}
/* 10 — a warm title card, leading into the charcoal gallery. */
.refined-light{background:#ebe8df;color:#292b27;margin:22px 0;min-height:290px;padding:30px 24px}
.refined-light h1{font-weight:700;font-size:clamp(46px,5vw,76px)}
.refined-light .identity-frame{gap:10px;padding:22px 38px}
.refined-light .identity-frame:before,.refined-light .identity-frame:after{border-color:#a05b4e;width:23px;height:23px}
.refined-light .refined-role{color:#62675b;font-size:16px}
.refined-light .refined-story{color:#a05b4e;font-size:24px;margin-top:8px}
/* An intentionally simpler direction: let the name do the work. */
.refined-credit{min-height:260px;justify-items:start;text-align:right;padding:40px 0}
.refined-credit .identity-frame{padding:0;gap:15px}
.refined-credit .identity-frame:before,.refined-credit .identity-frame:after{display:none}
.refined-credit h1{font-size:clamp(55px,6vw,88px)}
.refined-credit .credit-roles{justify-content:flex-start;font-size:20px;column-gap:16px}
.refined-credit .credit-roles .story-role{color:var(--ink)}
.refined-credit .credit-medium{font-size:15px;margin-top:0!important;color:var(--accent)}
@media(max-width:1100px){.refined-opening{min-height:300px}.refined-opening h1{font-size:54px}.refined-light h1{font-size:52px}}
@media(max-width:760px){.refined-opening{padding:30px 12px}.refined-opening h1{font-size:48px}.identity-frame{padding:23px 28px}.refined-brackets .identity-frame{padding:20px 34px}.credit-roles{font-size:22px}}
@media(max-width:520px){.refined-opening{min-height:255px;padding:26px 4px}.refined-opening h1{font-size:clamp(31px,9.7vw,43px);letter-spacing:-.04em}.identity-frame{padding:22px 17px;gap:12px}.identity-frame:before,.identity-frame:after{width:19px;height:19px}.refined-whole .refined-role{font-size:14px}.refined-whole .refined-story{font-size:20px}.refined-brackets .identity-frame{padding:17px 20px;gap:15px}.refined-brackets .refined-role{font-size:13px}.refined-brackets .refined-story{font-size:17px}.refined-credit .identity-frame{padding:22px 12px;gap:17px}.credit-roles{column-gap:8px;font-size:19px}.credit-medium{font-size:12px;margin-top:-7px!important}.refined-light{min-height:255px;margin:16px 0;padding:24px 5px}.refined-light .identity-frame{padding:20px 15px;gap:12px}.refined-light .refined-role{font-size:13px}.refined-light .refined-story{font-size:22px;margin-top:3px}}
@media(max-width:1100px){.refined-credit{min-height:245px}.refined-credit h1{font-size:60px}}
@media(max-width:520px){.refined-credit{min-height:230px;padding:28px 0}.refined-credit .identity-frame{padding:0;gap:12px}.refined-credit h1{font-size:clamp(37px,11.2vw,49px)}.refined-credit .credit-roles{font-size:17px}.refined-credit .credit-medium{font-size:16px}}