:root{--ink:#14251f;--muted:#5d6d66;--paper:#f7f4ed;--panel:rgba(255,255,255,.94);--line:#d9d2c4;--accent:#0f6b57;--accent-dark:#084838;--gold:#c79024;--shadow:0 12px 32px rgba(20,37,31,.10);--practice:#0f6b57;--technique:#c79024;--structure:#bf5a47;--term:#535c60;--music:#a33f68;--video:#ffffff;--tempo:#15727c;--music-context:#3b7799;--attire:#8b5631;--place:#7755a0;--context:#2e7ca8}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:radial-gradient(circle at 7% 0%,rgba(199,144,36,.14),transparent 28rem),radial-gradient(circle at 93% 100%,rgba(15,107,87,.14),transparent 34rem),var(--paper);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.page{width:100%;padding:24px}header,.controls,.network-layout,.below,.final-note,footer{max-width:2200px;margin-left:auto;margin-right:auto}header{display:flex;gap:26px;justify-content:space-between;align-items:center;margin-bottom:18px}h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.85rem,3.8vw,3.1rem);line-height:1;margin:0 0 9px;letter-spacing:-.04em}.byline,.slogan{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(1rem,1.7vw,1.3rem);line-height:1.2;margin:0 0 12px;color:var(--accent-dark);letter-spacing:.01em}.lede{max-width:1040px;color:#42534c;font-size:1.03rem;line-height:1.55;margin:0}.legend{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end;max-width:700px}.pill,button{border:1px solid var(--line);background:rgba(255,255,255,.85);color:var(--ink);border-radius:999px;padding:8px 12px;font:inherit;font-size:.82rem}.pill{cursor:default;font-weight:750;border-color:currentColor;background:#fff}.pill.practice{color:var(--practice)}.pill.technique{color:var(--technique)}.pill.music{color:var(--music)}.pill.tempo{color:var(--tempo)}.pill.music-context{color:var(--music-context)}.pill.attire{color:var(--attire)}.pill.place{color:var(--place)}.pill.context{color:var(--context)}.pill.term{color:var(--term)}.pill.video{color:var(--video);border-color:var(--video);background:#000}button{cursor:pointer;transition:.18s ease}button:hover,button.active{color:#fff;background:var(--accent);border-color:var(--accent)}.controls{display:grid;grid-template-columns:minmax(250px,1fr) auto;gap:16px;padding:14px;border:1px solid var(--line);background:var(--panel);border-radius:16px;box-shadow:var(--shadow);margin-bottom:18px}.control-label{display:block;color:var(--muted);font-size:.77rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}.filters,.type-filters{display:flex;flex-wrap:wrap;gap:8px}.type-filters button{position:relative;padding-left:28px}.type-filters button::before{content:"";position:absolute;width:10px;height:10px;left:11px;top:50%;transform:translateY(-50%);border-radius:50%;background:var(--type-color,#535c60)}.type-filters button.active::before{background:#fff}.type-filters button[data-type="practice"]{--type-color:var(--practice)}.type-filters button[data-type="technique"]{--type-color:var(--technique)}.type-filters button[data-type="structure"]{--type-color:var(--structure)}.type-filters button[data-type="term"]{--type-color:var(--term)}.type-filters button[data-type="music"]{--type-color:var(--music)}.type-filters button[data-type="tempo"]{--type-color:var(--tempo)}.type-filters button[data-type="music-context"]{--type-color:var(--music-context)}.type-filters button[data-type="attire"]{--type-color:var(--attire)}.type-filters button[data-type="place"]{--type-color:var(--place)}.type-filters button[data-type="context"]{--type-color:var(--context)}.search-wrap{display:flex;gap:8px;min-width:min(100%,430px);align-items:end}input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);background:#fff;font:inherit;font-size:0.6em;}input:focus{outline:3px solid rgba(15,107,87,.18);border-color:var(--accent)}.network-layout{display:grid;grid-template-columns:minmax(0,1fr) 450px;gap:18px;align-items:start}.map-panel,.detail-panel,.reference-panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.map-toolbar{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}.map-toolbar p{margin:0;color:var(--muted);font-size:.86rem}.map{position:relative;min-height:1030px;background-color:#fbfaf6;background-image:radial-gradient(#ded7ca 1px,transparent 1px);background-size:18px 18px;overflow:auto;touch-action:pan-x pan-y}svg{display:block;width:100%;height:1030px;min-width:1450px}.cluster-halo{fill:#fffdf7;fill-opacity:.78;stroke:#d1cabd;stroke-width:1.5;stroke-dasharray:6 6;transition:opacity .28s ease}.cluster-title-plate{fill:#fbfaf6;stroke:#d1cabd;stroke-width:1}.cluster-label{font-family:Georgia,"Times New Roman",serif;font-size:17px;font-weight:700;letter-spacing:.03em;fill:#314b40;transition:opacity .28s ease}.cluster-subtitle{font-size:10px;font-weight:700;letter-spacing:.08em;fill:#6b7d75;text-transform:uppercase;transition:opacity .28s ease}.link{stroke:#809086;stroke-width:1.5;stroke-opacity:.52;transition:all .28s ease}.link.dashed{stroke-dasharray:7 5}.link.dotted{stroke-dasharray:1 6;stroke-linecap:round}.link.highlight{stroke:var(--gold);stroke-width:4;stroke-opacity:1}.link.dim{stroke-opacity:.04}.node{cursor:pointer;transition:opacity .28s ease}.node-inner{transform-box:fill-box;transform-origin:center;transition:transform .20s cubic-bezier(.2,.8,.2,1)}.node circle{stroke:#fff;stroke-width:3;filter:drop-shadow(0 3px 3px rgba(0,0,0,.12));transition:stroke-width .18s ease}.node text{font-size:11px;fill:var(--ink);font-weight:700;paint-order:stroke;stroke:#fbfaf6;stroke-width:4px;stroke-linejoin:round;pointer-events:none}.node.dim{opacity:.32}.node.selected circle,.node.focused circle{stroke:var(--gold);stroke-width:5}.node.hovered{opacity:1!important}.node.hovered .node-inner{transform:scale(2)}.node.hovered circle{stroke:var(--accent-dark);stroke-width:5}.node.hovered text{font-size:12.4px}.video-badge{fill:#fff;stroke:var(--music);stroke-width:2}.video-badge-triangle{fill:var(--video);pointer-events:none}.type-practice circle{fill:var(--practice)}.type-technique circle{fill:var(--technique)}.type-place circle{fill:var(--place)}.type-context circle{fill:var(--context)}.type-structure circle{fill:var(--structure)}.type-term circle{fill:var(--term)}.type-music circle{fill:var(--music)}.type-tempo circle{fill:var(--tempo)}.type-music-context circle{fill:var(--music-context)}.type-attire circle{fill:var(--attire)}.hover-card{position:absolute;z-index:8;display:none;max-width:315px;padding:13px 15px;border:1px solid rgba(15,107,87,.28);border-left:5px solid var(--gold);border-radius:12px;background:rgba(255,255,255,.98);box-shadow:0 14px 30px rgba(20,37,31,.18);pointer-events:none}.hover-card.visible{display:block}.hover-card .hover-type{margin:0 0 4px;color:var(--accent);font-size:.69rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.hover-card h3{font-family:Georgia,"Times New Roman",serif;font-size:1.28rem;line-height:1.1;margin:0 0 7px;color:var(--ink)}.hover-card p{margin:0;color:#43534d;font-size:.86rem;line-height:1.42}.detail-panel{padding:22px;min-height:1030px;position:sticky;top:16px}.eyebrow{color:var(--accent);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px}.detail-panel h2,.reference-panel h2{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.025em;font-size:2rem;margin:0 0 10px;line-height:1.05}.detail-panel p,.reference-panel p{color:#43534d;line-height:1.55}.connection-list{margin:18px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}.connection-list li{position:relative;padding:13px 0 13px 17px;border-bottom:1px solid var(--line);font-size:.93rem;line-height:1.4}.connection-list li::before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;left:0;top:17px;background:var(--node-color,#535c60)}.connection-list strong{display:block;color:var(--node-color,var(--accent-dark));margin-bottom:3px}.node-practice{--node-color:var(--practice)}.node-technique{--node-color:var(--technique)}.node-structure{--node-color:var(--structure)}.node-term{--node-color:var(--term)}.node-music{--node-color:var(--music)}.node-tempo{--node-color:var(--tempo)}.node-music-context{--node-color:var(--music-context)}.node-attire{--node-color:var(--attire)}.node-place{--node-color:var(--place)}.node-context{--node-color:var(--context)}.video-section{margin-top:20px;padding-top:16px;}.video-section h3{font-family:Georgia,"Times New Roman",serif;margin:0 0 10px;font-size:1.2rem}.video-card{border:1px solid var(--line);border-radius:12px;background:#fffdfa;overflow:hidden;margin:10px 0}.video-thumb{position:relative;display:block;background:#182923;color:#fff;text-decoration:none;padding:12px 12px 11px}.video-thumb::after{content:'▶';position:absolute;right:12px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--music);color:#fff;font-size:13px}.video-thumb:hover{background:#0f6b57}.video-title{display:block;padding-right:40px;font-weight:800;font-size:.9rem;line-height:1.25}.video-meta{display:block;margin-top:5px;color:#dbe9e2;font-size:.76rem;line-height:1.35}.video-caption{padding:10px 12px;color:#43534d;font-size:.82rem;line-height:1.4}.video-caption a{color:var(--accent-dark);font-weight:700}.province-map{margin:18px 0 4px;padding:14px;border:1px solid var(--line);border-radius:13px;background:#fffdf7}.province-map h3{font-family:Georgia,"Times New Roman",serif;margin:0 0 8px;font-size:1.15rem;color:var(--accent-dark)}.province-map p{margin:0 0 10px;font-size:.82rem;line-height:1.42}.province-map svg{width:50%;min-width:180px;height:auto;display:block;border-radius:8px;background:#eef4f0}.ireland-outline{fill:#e7ece9;stroke:#52645c;stroke-width:1.7}.province-area{fill:#dce6e0;stroke:#6e8077;stroke-width:1.1}.province-active{fill:#7755a0;stroke:#3f2a5b;stroke-width:1.6}.county-label{font-size:6px;fill:#20342c;font-weight:700;text-anchor:middle}.map-legend-label{font-size:7px;fill:#42534c;font-weight:700}.help{color:var(--muted);font-size:.88rem;line-height:1.55}.source-note{margin-top:20px;padding-top:12px;color:var(--muted);font-size:.78rem;line-height:1.45}.below{margin-top:18px}.reference-panel{padding:24px}.reference-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}.reference-card{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fffdfa}.reference-card h3{margin:0 0 6px;font-size:.98rem;color:var(--accent-dark)}.reference-card p{margin:0;font-size:.88rem}.reference-card .key{display:block;color:var(--music);font-weight:800;margin:7px 0;font-size:1.05rem}.final-note{margin-top:18px;padding:20px 24px;border:1px solid #e5be5b;border-left:8px solid #bf8615;border-radius:14px;background:#fff3bf;color:#4c3a08;box-shadow:var(--shadow);font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.08rem,1.8vw,1.34rem);line-height:1.45}.final-note strong{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:.78em;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:7px;color:#805a08}footer{margin-top:20px;padding:18px 0 4px;border-top:1px solid var(--line);color:var(--muted);font-size:.83rem;text-align:center}@media(max-width:1180px){header,.controls{grid-template-columns:1fr;display:grid}.legend{justify-content:flex-start}.network-layout{grid-template-columns:1fr}.detail-panel{position:static;min-height:0}.reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:760px){.page{padding:12px}header{gap:14px}h1{font-size:2rem}.byline{font-size:1rem}.lede{font-size:.96rem}.legend{display:none}.controls{padding:12px}.filters,.type-filters{gap:6px}.filters button,.type-filters button{font-size:.77rem;padding:8px 10px}
.type-filters button{padding-left:25px}.type-filters button::before{left:9px}.search-wrap{min-width:0;width:100%}

.map{min-height:760px}
svg{height:960px;min-width:1320px}
.detail-panel{position:static;min-height:0}
.reference-grid{grid-template-columns:1fr}
.final-note{padding:18px}
.map-toolbar{align-items:flex-start;flex-direction:column}
.province-map svg{width:60%;min-width:160px}}

.group-label{font-size:0.8em;}
.column-label {font-weight:bold;font-size:1.1em;}
.column-subtitle {font-size:0.8em;font-style:italic;}
#status {display:none;}
.legend button.pill.video {
    cursor: pointer;
}

.legend button.pill.video.active {
    color: #fff;
    background: var(--music);
    border-color: var(--music);
}

.legend button.pill.video:focus-visible {
    outline: 3px solid rgba(163, 63, 104, .28);
    outline-offset: 2px;
}

p {
  white-space: pre-line; /* This forces \n to render as actual line breaks */
}

.hover-card {
  width: min(330px, calc(100% - 28px));
  max-width: 360px;
  min-width: 280px;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 520px) {
  .hover-card {
    min-width: 0;
    width: calc(100% - 28px);
    max-width: calc(100% - 28px);
  }
}

.search-highlight {
  background: #fff200;
  color: #14251f;
  border-radius: 2px;
  padding: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.source-note {
	font-style:italic;
}

.slogan {font-style:italic;}

/*Connection badges*/
/* Relationship-line key in the right-hand info cards */

.connection-card {
  padding-left: 17px;
}

.connection-card-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.connection-card-topline strong {
  min-width: 0;
}

.connection-card-relation {
  display: block;
  margin-top: 3px;
}

.connection-line-key {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.connection-line-swatch {
  display: inline-block;
  width: 26px;
  border-top: 3px solid var(--gold);
}

/* Direct relationship */
.connection-line-solid .connection-line-swatch {
  border-top-style: solid;
}

/* Partial, contextual, or qualified relationship */
.connection-line-dashed .connection-line-swatch {
  border-top-style: dashed;
}

/* Shared term, disputed term, or distinct meaning */
.connection-line-dotted .connection-line-swatch {
  border-top-style: dotted;
}

@media (max-width: 520px) {
  .connection-card-topline {
    display: block;
  }

  .connection-line-key {
    margin-top: 6px;
  }
}

/*Eyebrow*/
/* Match each right-pane node-type heading to its map node color. */
p.eyebrow {
	color:#fff;
	padding:10px 15px;
}
p.eyebrow-practice {
  background: var(--practice);
}

p.eyebrow-technique {
  background: var(--technique);
}

p.eyebrow-structure {
  background: var(--structure);
}

p.eyebrow-term {
  background: var(--term);
}

p.eyebrow-music {
  background: var(--music);
}

p.eyebrow-tempo {
  background: var(--tempo);
}

p.eyebrow-music-context {
  background: var(--music-context);
}

p.eyebrow-attire {
  background: var(--attire);
}

p.eyebrow-place {
  background: var(--place);
}

p.eyebrow-context {
  background: var(--context);
}

/* ---------------------------------------------------------
   Show node types: inactive = white with a colored dot.
   Active = button filled with the matching node-type color.
   --------------------------------------------------------- */

/* Base/off state */
.type-filters button {
  color: var(--ink);
  background: #fff;
  border-color: var(--type-color);
  border-width:2px;
}

/* The colored dot remains visible only when the button is off. */
.type-filters button::before {
  background: var(--type-color);
}

/* Active/on state: fill the button with its node-type color. */
.type-filters button.active {
  color: #fff;
  background: var(--type-color);
  border-color: var(--type-color);
}

/* Active/on state: make the dot white, so it remains visible. */
.type-filters button.active::before {
  background: #fff;
}

.filters button {
	border-width:2px;
}

/*Search results*/
/* Search-results list in the right-hand information pane */

.search-results-heading {
  margin: 20px 0 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.search-results-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.search-result-item {
  --node-color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.search-result-button {
  display: block;
  width: 100%;
  padding: 13px 12px 13px 16px;
  border: 0;
  border-radius: 0;
  border-left: 4px solid var(--node-color);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}

.search-result-button:hover,
.search-result-button:focus-visible {
  background: rgba(15, 107, 87, 0.08);
  color: var(--ink);
  border-color: var(--node-color);
}

.search-result-button:focus-visible {
  outline: 3px solid rgba(15, 107, 87, 0.25);
  outline-offset: -3px;
}

.search-result-type,
.search-result-title,
.search-result-description,
.search-result-match-kind {
  display: block;
}

.search-result-type {
  margin-bottom: 3px;
  color: var(--node-color);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.search-result-title {
  color: var(--node-color);
  font-size: 1rem;
  line-height: 1.25;
}

.search-result-description {
  display: -webkit-box;
  margin-top: 5px;
  overflow: hidden;
  color: #43534d;
  font-size: 0.84rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.search-result-match-kind {
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.7rem;
  font-style: italic;
}

/* Reuse your existing node-color variables. */
.search-result-item.node-practice {
  --node-color: var(--practice);
}

.search-result-item.node-technique {
  --node-color: var(--technique);
}

.search-result-item.node-structure {
  --node-color: var(--structure);
}

.search-result-item.node-term {
  --node-color: var(--term);
}

.search-result-item.node-music {
  --node-color: var(--music);
}

.search-result-item.node-tempo {
  --node-color: var(--tempo);
}

.search-result-item.node-music-context {
  --node-color: var(--music-context);
}

.search-result-item.node-attire {
  --node-color: var(--attire);
}

.search-result-item.node-place {
  --node-color: var(--place);
}

.search-result-item.node-context {
  --node-color: var(--context);
}
/* Return from a selected node to the retained search-results list. */

.back-to-search-results {
  display: inline-flex;
  align-items: center;
  margin: 0 0 14px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.back-to-search-results:hover,
.back-to-search-results:focus-visible {
  border-color: var(--accent);
  background: rgba(15, 107, 87, 0.1);
  color: var(--accent-dark);
}

.back-to-search-results:focus-visible {
  outline: 3px solid rgba(15, 107, 87, 0.25);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   Relationship-line legend in the map toolbar
   --------------------------------------------------------- */

.relationship-legend {
  position: relative;
  flex: 0 0 auto;
  min-width: 248px;
  max-width: 350px;
  color: var(--ink);
}

.relationship-legend summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
  list-style: none;
}

.relationship-legend summary::-webkit-details-marker {
  display: none;
}

.relationship-legend summary::before {
  content: "+";
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--accent-dark);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
}

.relationship-legend[open] summary::before {
  content: "–";
}

.relationship-legend-content {
  position: absolute;
  z-index: 12;
  top: calc(100% + 8px);
  right: auto;
  width: min(350px, calc(100vw - 48px));
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 28px rgba(20, 37, 31, 0.16);
}

.relationship-legend-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 0;
}

.relationship-legend-item + .relationship-legend-item {
  border-top: 1px solid var(--line);
}

.relationship-legend-item strong,
.relationship-legend-item span:not(.relationship-legend-swatch) {
  display: block;
}

.relationship-legend-item strong {
  color: var(--accent-dark);
  font-size: 0.78rem;
  line-height: 1.3;
}

.relationship-legend-item span:not(.relationship-legend-swatch) {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.relationship-legend-swatch {
  display: block;
  width: 29px;
  margin-top: 8px;
  border-top: 3px solid var(--gold);
}

/* Mirrors the line styles in the SVG map. */
.relationship-legend-solid {
  border-top-style: solid;
}

.relationship-legend-dashed {
  border-top-style: dashed;
}

.relationship-legend-dotted {
  border-top-style: dotted;
}

/*
  On narrow screens, the toolbar already stacks vertically.
  Put the legend’s expanded panel in normal document flow so it
  cannot be clipped or run off the screen.
*/
@media (max-width: 760px) {
  .relationship-legend {
    width: 100%;
    max-width: none;
  }

  .relationship-legend-content {
    position: static;
    width: auto;
    margin-top: 8px;
  }
}

/* =========================================================
   YouTube video dialog
   ========================================================= */

.video-thumb {
  width: 100%;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.video-text-trigger {
  margin-left: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;

  background: transparent;
  color: var(--accent-dark);

  cursor: pointer;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.video-text-trigger:hover,
.video-text-trigger:focus-visible {
  background: transparent;
  color: var(--accent);
}

.video-thumb:focus-visible,
.video-text-trigger:focus-visible {
  outline: 3px solid rgba(15, 107, 87, 0.32);
  outline-offset: -3px;
}

/*
  Native dialog backdrop. The browser automatically handles focus
  trapping while the dialog is open.
*/
.video-dialog {
  width: min(920px, calc(100vw - 24px));
  margin: auto;
  padding: 0;

  border: 1px solid rgba(199, 144, 36, 0.76);
  border-radius: 18px;

  background: #fffdf7;
  color: var(--ink);

  box-shadow: 0 24px 75px rgba(0, 0, 0, 0.36);
}

.video-dialog::backdrop {
  background: rgba(20, 37, 31, 0.72);
  backdrop-filter: blur(3px);
}

.video-dialog-shell {
  overflow: hidden;
  border-radius: inherit;
}

.video-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line);
}

.video-dialog-header h2 {
  margin: 0;

  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 3vw, 1.5rem);
  line-height: 1.1;
}

.video-dialog-close {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;

  flex: 0 0 auto;

  border: 1px solid var(--line);
  border-radius: 50%;

  background: #fff;
  color: var(--accent-dark);

  cursor: pointer;
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1;
}

.video-dialog-close:hover,
.video-dialog-close:focus-visible {
  border-color: var(--accent);
  color:white;
  background: var(--accent-dark);
}

.video-dialog-close:focus-visible {
  outline: 3px solid rgba(15, 107, 87, 0.28);
  outline-offset: 2px;
}

.video-dialog-player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
}

.video-dialog-player-wrap iframe {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  border: 0;
}

.video-dialog-footer {
  padding: 10px 18px 13px;
  border-top: 1px solid var(--line);

  font-size: 0.8rem;
}

.video-dialog-footer a {
  color: var(--accent-dark);
  font-weight: 800;
}

.video-dialog-footer a:hover,
.video-dialog-footer a:focus-visible {
  color: var(--accent);
}

@media (max-width: 650px) {
  .video-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .video-dialog-header {
    padding: 11px 13px 9px;
  }

  .video-dialog-footer {
    padding: 9px 13px 11px;
  }
}