
.area-photo{box-sizing:border-box;max-inline-size:48rem;margin:1.5rem 0;overflow:hidden;border:1px solid #d5dfdf;border-radius:1rem;background:#fff;color:#183b3d}
.area-photo__picture,.area-photo__picture img{display:block;inline-size:100%}
.area-photo__picture img{block-size:auto;background:#e6eceb}
.area-photo__caption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.65rem 1rem;padding:.85rem 1rem}
.area-photo__meta{display:grid;gap:.18rem;min-inline-size:0}
.area-photo__label{font-size:.95rem;font-weight:650;line-height:1.4;overflow-wrap:anywhere}
.area-photo__year,.photo-credits__year{color:#49666a;font-weight:400;white-space:nowrap}
.area-photo__context{color:#49666a;font-size:.78rem;line-height:1.4}
.area-photo__credit{display:inline-flex;align-items:center;min-block-size:2.75rem;padding:.2rem .45rem;border-radius:.4rem;white-space:nowrap;font-size:.84rem;font-weight:600}
.area-photo__credit,.photo-credits a{color:#075b60;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.area-photo__credit:focus-visible,.photo-credits a:focus-visible{outline:3px solid #087c80;outline-offset:3px}
.photo-credits{max-inline-size:48rem;color:inherit;line-height:1.65}
.photo-credits__list{list-style:none;margin:1rem 0;padding:0}
.photo-credits__entry{scroll-margin-block-start:6rem;padding:1.15rem 0;border-block-start:1px solid #d5dfdf;overflow-wrap:anywhere}
.photo-credits__entry h3{margin:0 0 .45rem;font-size:1rem;line-height:1.5}
.photo-credits__entry p{margin:.45rem 0;font-size:.9rem}
.photo-credits__entry cite{font-style:normal}
@media(max-width:26rem){.area-photo__caption{align-items:flex-start;padding:.7rem .8rem}.area-photo__credit{margin-inline-start:-.45rem}}
@media(prefers-reduced-motion:no-preference){.area-photo__credit{transition:background-color .15s ease}.area-photo__credit:hover{background:#e9f4f2}}

.photo-context{padding:48px 0;border-top:1px solid var(--line);margin-top:36px}
.photo-context__heading{max-inline-size:42rem;margin-block-end:24px}
.photo-context__heading h2{margin:0 0 10px;font:500 clamp(26px,3vw,34px)/1.2 var(--display);letter-spacing:-.04em;color:var(--text)}
.photo-context__heading p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.photo-context__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.photo-context .area-photo{max-inline-size:none;min-inline-size:0;margin:0;border-color:var(--line);border-radius:8px;background:var(--surface);color:var(--text)}
.photo-context .area-photo__picture img{background:var(--surface)}
.photo-context .area-photo__caption{padding:12px 14px;gap:4px 12px}
.photo-context .area-photo__label{font:500 17px/1.4 var(--display);letter-spacing:-.02em}
.photo-context .area-photo__year,.photo-context .area-photo__context,.photo-credits .photo-credits__year{color:var(--muted)}
.photo-context .area-photo__context{font-size:11px}
.photo-context .area-photo__credit,.photo-credits a{color:var(--accent);font-size:12px}
.photo-context .area-photo__credit:focus-visible,.photo-credits a:focus-visible{outline-color:var(--accent)}
.photo-credits{max-inline-size:none;color:var(--text)}
.photo-credits>h2{font:500 clamp(26px,3vw,34px)/1.2 var(--display);letter-spacing:-.04em;margin:0 0 20px}
.photo-credits>p{max-inline-size:48rem;color:var(--muted);font-size:13px;line-height:1.7}
.photo-credits .photo-credits__entry{border-color:var(--line)}
.photo-credits .photo-credits__entry h3{font:500 19px/1.4 var(--display);color:var(--text)}
.photo-credits .photo-credits__entry p{color:var(--muted);font-size:13px}
@media(min-width:48rem){.photo-context__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:60rem){.photo-context__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:47.5rem){.photo-context{padding:32px 0;margin-top:24px}}
@media(prefers-reduced-motion:no-preference){.photo-context .area-photo__credit:hover{background:#edb68f12}}
@media(prefers-reduced-motion:reduce){.photo-context *,.photo-credits *{transition:none!important;animation:none!important}}
@media(forced-colors:active){.photo-context .area-photo,.photo-credits .photo-credits__entry{border-color:CanvasText}.photo-context .area-photo__credit,.photo-credits a{color:LinkText}}
