@layer dg.tokens, dg.base, dg.layout, dg.components, dg.responsive;

@layer dg.layout {
  .dg-media-rail { display: grid; gap: 0; position: sticky; top: .75rem; }
  .dg-media-panel { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .dg-media-heading { padding: .1rem 0 1rem; }
  .dg-media-heading h1 { margin-top: .45rem; font-size: clamp(1.25rem, 2.1vw, 1.85rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; overflow-wrap: anywhere; }
  .dg-media-collection, .dg-media-discussion { margin-top: 1rem; }
  .dg-media-metadata { margin-top: 1rem; border-top: 1px solid var(--dg-border); }
  .dg-media-metadata__grid { display: grid; grid-template-columns: minmax(13rem, .8fr) minmax(18rem, 1.35fr) minmax(14rem, 1fr); column-gap: clamp(1rem, 2.2vw, 2rem); align-items: start; }
  .dg-media-section--file { grid-column: 1; grid-row: 1; }
  .dg-media-section--exif { grid-column: 2; grid-row: 1 / span 3; }
  .dg-media-section--location { grid-column: 3; grid-row: 1; }
  .dg-media-section--tags { grid-column: 1; grid-row: 2; }
  .dg-media-section--palette { grid-column: 3; grid-row: 2; }
  .dg-media-metadata .dg-media-edit { grid-column: 1; grid-row: 3; justify-self: start; }
  .dg-media-collection > header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: .2rem 0 .6rem; }
  .dg-media-collection h2 { font-size: 1.15rem; font-weight: 500; letter-spacing: -.025em; }
  .dg-media-strip { display: flex; gap: .45rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-snap-type: inline mandatory; scrollbar-width: none; touch-action: pan-x; cursor: grab; }
  .dg-media-strip::-webkit-scrollbar { display: none; }
  .dg-media-strip.is-dragging { scroll-behavior: auto; scroll-snap-type: none; cursor: grabbing; user-select: none; }
  .dg-media-sequence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 2rem); }
}

@layer dg.components {
  .dg-media-kicker, .dg-media-section > h2 { color: var(--dg-muted); font-size: .64rem; font-weight: 600; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
  .dg-creator-row { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .75rem 0; border-block: 1px solid var(--dg-border); }
  .dg-creator-row:hover { color: var(--dg-text); }
  .dg-creator-row__avatar, .dg-creator-row__avatar > a, .dg-creator-row__avatar .dg-avatar-shell, .dg-creator-row__avatar .dg-avatar { display: block; width: 2.4rem !important; height: 2.4rem !important; border-radius: 50% !important; }
  .dg-creator-row__identity { min-width: 0; }
  .dg-creator-row b, .dg-creator-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dg-creator-row b { font-size: .78rem; font-weight: 600; }
  .dg-creator-row small { margin-top: .12rem; color: var(--dg-muted); font-size: .65rem; }
  .dg-creator-row__arrow { display: grid; width: 2.3125rem; height: 2.3125rem; place-items: center; color: var(--dg-muted) !important; }
  .dg-media-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr)); overflow: hidden; border-bottom: 1px solid var(--dg-border); }
  .dg-media-stats > div { min-width: 0; padding: .8rem 0; border-inline-end: 1px solid var(--dg-border); }
  .dg-media-stats > div + div { padding-inline-start: .8rem; }
  .dg-media-stats > div:last-child { border-inline-end: 0; }
  .dg-media-stats dt { display: flex; align-items: center; gap: .25rem; color: var(--dg-muted); font-size: .58rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
  .dg-media-stats dt i { flex: 0 0 auto; width: .72rem; height: .72rem; font-size: .72rem; line-height: 1; }
  .dg-media-stats dd { margin-bottom: .2rem; font-size: 1.08rem; font-weight: 500; }
  .dg-media-section { padding: .9rem 0; border-bottom: 1px solid var(--dg-border); }
  .dg-media-section:last-child { border-bottom: 0; }
  .dg-media-section h2 { display: flex; align-items: center; gap: .35rem; margin-bottom: .55rem; }
  .dg-media-section h2 > i { flex: 0 0 auto; width: .78rem; height: .78rem; font-size: .78rem; line-height: 1; }
  .dg-media-copy { color: var(--dg-text); font-size: .76rem; line-height: 1.55; }
  .dg-media-copy :where(h1, h2, h3, h4, h5, h6) { margin: .85rem 0 .3rem; font-size: .82rem; font-weight: 600; letter-spacing: 0; line-height: 1.35; text-transform: none; }
  .dg-media-copy :where(p, ul, ol) + :where(p, ul, ol) { margin-top: .55rem; }
  .dg-disclosure { scroll-margin-top: 1rem; }
  .dg-disclosure__content { --dg-disclosure-height: 13rem; max-height: var(--dg-disclosure-height); overflow: hidden; transition: max-height .38s cubic-bezier(.22, 1, .36, 1), -webkit-mask-image .24s ease, mask-image .24s ease; }
  .dg-disclosure.is-collapsible:not(.is-expanded) .dg-disclosure__content { max-height: var(--dg-disclosure-height); overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
  .dg-disclosure.is-expanded .dg-disclosure__content { -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); }
  .dg-disclosure__toggle { display: none; align-items: center; justify-content: space-between; gap: .4rem; width: 100%; min-height: 2.3125rem; margin-top: .3rem; padding: 0; border: 0; border-top: 1px solid var(--dg-border); border-radius: 0; background: transparent; color: var(--dg-muted); font: inherit; font-size: .7rem; font-weight: 600; cursor: pointer; }
  .dg-disclosure.is-collapsible .dg-disclosure__toggle { display: flex; }
  .dg-disclosure__toggle:hover { color: var(--dg-text); }
  .dg-disclosure__toggle i { display: block; width: 1rem; height: 1rem; flex: 0 0 auto; font-size: 1rem; line-height: 1; transform: rotate(90deg); transition: transform .18s ease; }
  .dg-disclosure.is-expanded .dg-disclosure__toggle i { transform: rotate(-90deg); }
  .dg-technical-line { display: flex; align-items: flex-start; gap: .5rem; color: var(--dg-muted); font-size: .7rem; line-height: 1.45; }
  .dg-technical-line + .dg-technical-line { margin-top: .4rem; }
  .dg-technical-line i { margin-top: .1rem; }
  .dg-exif-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; border: 0; border-radius: 0; }
  .dg-exif-grid > div { min-width: 0; padding: .55rem 0; border-bottom: 1px solid var(--dg-border); }
  .dg-exif-grid > div:nth-child(odd) { border-inline-end: 0; }
  .dg-exif-grid > div:last-child, .dg-exif-grid > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .dg-exif-grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-inline-end: 0; }
  .dg-exif-grid dt { overflow: hidden; color: var(--dg-muted); font-size: .56rem; font-weight: 600; letter-spacing: .07em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
  .dg-exif-grid dd { margin-top: .18rem; font-size: .68rem; font-weight: 500; overflow-wrap: anywhere; }
  .dg-map-preview { display: grid; grid-template-columns: minmax(0, 1fr) 2.3125rem; align-items: center; gap: .65rem; width: 100%; min-height: 3.5rem; padding: .5rem 0; border: 0; border-block: 1px solid var(--dg-border); border-radius: 0; background: transparent; color: var(--dg-text); text-align: start; cursor: pointer; }
  .dg-map-preview span, .dg-map-preview b, .dg-map-preview small { display: block; min-width: 0; }
  .dg-map-preview b { font-size: .72rem; font-weight: 600; }
  .dg-map-preview small { margin-top: .15rem; color: var(--dg-muted); font-size: .58rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
  .dg-map-preview > i { justify-self: center; color: var(--dg-muted); }
  .dg-map-preview:hover { color: var(--dg-text); }
  .dg-map-preview:hover > i { color: var(--dg-text); }
  .dg-map-dialog { width: min(72rem, calc(100vw - 2rem)); max-width: none; height: min(48rem, calc(100vh - 2rem)); max-height: none; padding: 1rem; border: 1px solid var(--dg-border); border-radius: var(--dg-radius-sm); background: var(--dg-surface); color: var(--dg-text); }
  .dg-map-dialog::backdrop { background: #0009; }
  .dg-map-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; }
  .dg-map-dialog h3 { margin: .2rem 0 0; font-size: 1rem; font-weight: 600; }
  .dg-map-dialog__actions { display: flex; align-items: center; gap: .35rem; }
  .dg-map-dialog__actions :where(a, button) { display: grid; width: 2.3125rem; height: 2.3125rem; padding: 0; place-items: center; border: 1px solid var(--dg-border); border-radius: var(--dl-radius-round, 50%); background: transparent; color: var(--dg-muted); cursor: pointer; }
  .dg-map-dialog__actions :where(a, button):hover { border-color: var(--dg-border-strong); color: var(--dg-text); }
  .dg-map-dialog__actions i { display: block; width: 1rem; height: 1rem; font-size: 1rem; line-height: 1; }
  .dg-map-switch { display: flex; margin-bottom: .45rem; border-bottom: 1px solid var(--dg-border); }
  .dg-map-switch button { min-height: 2.3125rem; padding: 0 .8rem; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; color: var(--dg-muted); font: inherit; font-size: .65rem; font-weight: 600; cursor: pointer; }
  .dg-map-switch button:first-child, .dg-map-switch button:last-child { border-radius: 0; }
  .dg-map-switch button:last-child { margin-inline-start: 0; }
  .dg-map-switch button.is-active { margin-bottom: -1px; border-bottom-color: var(--dg-text); background: transparent; color: var(--dg-text); }
  .dg-media-map { position: relative; height: calc(100% - 7.5rem); min-height: 20rem; overflow: hidden; border: 0; border-radius: var(--dg-radius-sm); background: var(--dg-surface-soft); }
  .dg-media-map.is-unavailable::after { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: var(--dg-surface-soft); color: var(--dg-muted); content: attr(aria-label); font-size: .68rem; text-align: center; }
  .dg-map-marker { width: 1rem; height: 1rem; border: 3px solid #fff; border-radius: 50%; background: #2f75c8; }
  .dg-map-coordinates { margin-top: .35rem !important; color: var(--dg-muted); font-size: .58rem; font-variant-numeric: tabular-nums; letter-spacing: .05em; }
  .dg-media-map .maplibregl-ctrl-group { border: 1px solid #ffffff4d; border-radius: var(--dg-radius-sm); box-shadow: none; }
  .dg-media-map .maplibregl-ctrl-group button { width: 1.8rem; height: 1.8rem; }
  .dg-media-map .maplibregl-ctrl-attrib { font-size: .5rem; }
  .dg-chip-list { display: flex; flex-wrap: wrap; gap: .3rem; }
  .dg-chip { padding: .28rem .45rem; border: 1px solid var(--dg-border); border-radius: var(--dg-radius-sm); color: var(--dg-muted) !important; font-size: .65rem; }
  .dg-chip:hover { border-color: var(--dg-border-strong); color: var(--dg-text) !important; }
  .dg-palette { display: flex; gap: .3rem; }
  .dg-palette a { flex: 1 1 0; min-width: 0; }
  .dg-palette span { display: block; height: 1.6rem; border: 1px solid color-mix(in srgb, var(--dg-border) 50%, transparent); border-radius: var(--dl-radius); background: var(--dg-swatch); }
  .dg-palette small { display: block; margin-top: .2rem; overflow: hidden; color: var(--dg-muted); font-size: .52rem; text-align: center; text-overflow: ellipsis; }
  .dg-media-edit { margin: .75rem 0; }
  .dg-media-sequence { border-top: 1px solid var(--dg-border); }
  .dg-media-sequence > a { display: grid; align-items: center; gap: .65rem; min-height: 4rem; padding: .45rem 0; border: 0; border-bottom: 1px solid var(--dg-border); border-radius: 0; background: transparent; }
  .dg-media-sequence > a[rel="prev"] { grid-template-columns: 2.3125rem 2.8rem minmax(0, 1fr); }
  .dg-media-sequence > a[rel="next"] { grid-template-columns: 2.8rem minmax(0, 1fr) 2.3125rem; }
  .dg-media-sequence > a:hover { color: var(--dg-text); }
  .dg-media-sequence img { width: 2.8rem; height: 2.8rem; border-radius: calc(var(--dg-radius-sm) * .75); object-fit: cover; }
  .dg-media-sequence span, .dg-media-sequence b, .dg-media-sequence small { display: block; min-width: 0; }
  .dg-media-sequence small { color: var(--dg-muted); font-size: .56rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
  .dg-media-sequence b { margin-top: .12rem; overflow: hidden; font-size: .7rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  .dg-media-sequence > a > i { display: grid; width: 2.3125rem; height: 2.3125rem; place-items: center; border: 1px solid var(--dg-border); border-radius: var(--dl-radius-round, 50%); color: var(--dg-muted); font-size: 1rem; line-height: 1; }
  .dg-media-sequence > a:hover > i { border-color: var(--dg-border-strong); background: var(--dg-surface-strong); color: var(--dg-text); }
  .dg-media-backlink { display: flex; align-items: center; justify-content: center; gap: .25rem; margin-top: .7rem; color: var(--dg-muted); font-size: .65rem; line-height: 1; }
  .dg-media-backlink a { display: inline-flex; align-items: center; color: inherit; }
  .dg-media-backlink .di-like { margin-inline: .12rem; font-size: .8rem; }
  .dg-swiper__controls { display: flex; align-items: center; gap: .3rem; }
  .dg-swiper__controls button { display: grid; place-items: center; width: 2.3125rem; height: 2.3125rem; padding: 0; border: 1px solid var(--dg-border); border-radius: var(--dl-radius-round, 50%); background: var(--dg-surface); color: var(--dg-text); cursor: pointer; }
  .dg-swiper__controls button i { display: block; width: 1rem; height: 1rem; font-size: 1rem; line-height: 1; }
  .dg-swiper__controls button:hover:not(:disabled) { border-color: var(--dg-border-strong); background: var(--dg-surface-strong); }
  .dg-swiper__controls button:disabled { opacity: .32; cursor: default; }
  .dg-swiper__progress { position: relative; width: clamp(3rem, 8vw, 5.5rem); height: 1px; overflow: hidden; background: var(--dg-border); }
  .dg-swiper__progress i { position: absolute; inset: 0; background: var(--dg-text); transform: scaleX(var(--dg-swiper-progress, 0)); transform-origin: left center; transition: transform .16s ease; }
  .dg-media-strip > a { flex: 0 0 clamp(11rem, 22vw, 17rem); min-width: 0; scroll-snap-align: start; scroll-snap-stop: normal; }
  .dg-media-strip__visual { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--dg-border); border-radius: var(--dg-radius-sm); background: var(--dg-surface-soft); }
  .dg-media-strip img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .22s ease, filter .18s ease; }
  .dg-media-strip img.is-ready { opacity: 1; }
  .dg-media-strip > a:hover img { filter: brightness(1.06) contrast(1.04); }
  .dg-media-strip b { display: block; margin-top: .35rem; overflow: hidden; font-size: .68rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
}

/* Component typography must stay compact even inside opinionated site templates. */
.dg-media-experience .dg-media-heading h1 { margin-top: .45rem; font-size: clamp(1.25rem, 2.1vw, 1.85rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; text-transform: none; }
.dg-media-experience .dg-media-section > h2 { margin: 0 0 .55rem; color: var(--dg-muted); font-size: .64rem; font-weight: 600; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.dg-media-experience .dg-media-collection h2 { margin: 0; font-size: 1.15rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.2; text-transform: none; }
.dg-media-experience .dg-media-copy :where(h1, h2, h3, h4, h5, h6) { margin: .85rem 0 .3rem; font-size: .82rem; font-weight: 600; letter-spacing: 0; line-height: 1.35; text-transform: none; }

/* Keep the global icon font from forcing 24px glyphs outside compact controls. */
.dg-media-experience i[class^="di-"], .dg-media-experience i[class*=" di-"] { font-size: 1rem; line-height: 1; }
.dg-media-experience i[class^="di-"]::before, .dg-media-experience i[class*=" di-"]::before { width: 1em; height: 1em; }
.dg-media-experience .dg-media-section > h2 > i, .dg-media-experience .dg-media-stats dt i { font-size: .78rem; }

@layer dg.responsive {
  @media (max-width: 880px) { .dg-media-rail { position: static; grid-template-columns: minmax(0, 1fr) minmax(14rem, .55fr); align-items: start; } }
  @media (max-width: 880px) { .dg-media-metadata__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dg-media-section--file, .dg-media-section--tags, .dg-media-metadata .dg-media-edit { grid-column: 1; } .dg-media-section--exif, .dg-media-section--location, .dg-media-section--palette { grid-column: 2; } .dg-media-section--file, .dg-media-section--exif { grid-row: 1; } .dg-media-section--tags, .dg-media-section--location { grid-row: 2; } .dg-media-metadata .dg-media-edit, .dg-media-section--palette { grid-row: 3; } }
  @media (max-width: 560px) { .dg-media-rail { grid-template-columns: 1fr; margin-top: 1rem; } .dg-media-heading { padding: .1rem 0 1rem; } .dg-creator-row, .dg-media-section { padding-inline: 0; } .dg-media-stats > div { padding-inline: 0; } .dg-media-stats > div + div { padding-inline-start: .8rem; } .dg-media-collection h2 { margin-top: .3rem; } .dg-swiper__progress { display: none; } .dg-media-strip > a { flex-basis: min(72vw, 16rem); } .dg-media-metadata__grid, .dg-media-sequence { grid-template-columns: 1fr; } .dg-media-metadata__grid > *, .dg-media-section--file, .dg-media-section--exif, .dg-media-section--location, .dg-media-section--tags, .dg-media-section--palette, .dg-media-metadata .dg-media-edit { grid-column: 1; grid-row: auto; } .dg-media-sequence > a[rel="prev"] { grid-template-columns: 2.3125rem 2.8rem minmax(0, 1fr); } .dg-media-sequence > a[rel="next"] { grid-template-columns: 2.8rem minmax(0, 1fr) 2.3125rem; } .dg-map-dialog { width: calc(100vw - 1rem); height: calc(100vh - 1rem); padding: .65rem; } .dg-media-map { min-height: 16rem; } }
}

@media (prefers-reduced-motion: reduce) {
  .dg-media-strip { scroll-behavior: auto; }
  .dg-disclosure__content, .dg-disclosure__toggle i, .dg-swiper__progress i { transition: none; }
}