.creative-portal { padding:30px 0 80px; border-top:1px solid var(--line); }
.creative-portal-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:30px; }
.creative-portal-heading h2 { margin:0; font:500 clamp(2.3rem,4.8vw,4.2rem)/.95 'Newsreader',Georgia,serif; letter-spacing:-.065em; }
.creative-portal-heading > p { max-width:330px; margin:0; color:var(--muted); font-size:.88rem; line-height:1.6; }
.hex-explorer { --portal-accent:var(--brass); display:grid; grid-template-columns:minmax(0,1.4fr) minmax(230px,.8fr); align-items:center; gap:44px; }
.hex-explorer[data-active-atmosphere="cinematic"],.hex-explorer[data-active-atmosphere="playful"] { --portal-accent:var(--rust); }
.hex-explorer[data-active-atmosphere="gallery"],.hex-explorer[data-active-atmosphere="rhythmic"] { --portal-accent:var(--blue); }
.hex-portal { position:relative; width:100%; max-width:660px; aspect-ratio:1; margin:auto; isolation:isolate; }
.hex-portal::before,.hex-portal::after { content:''; position:absolute; inset:14%; border:1px solid rgba(208,164,93,.25); border-radius:50%; pointer-events:none; }
.hex-portal::after { inset:28%; border-style:dashed; opacity:.65; }
.hex-portal-trace { position:absolute; inset:21%; background:rgba(208,164,93,.15); clip-path:polygon(50% 0,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%); }
.hex-portal-trace::after { content:''; position:absolute; inset:1px; background:#1b110c; clip-path:inherit; }
.hex-portal-core { position:absolute; inset:34%; margin:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:9px; z-index:1; }
.hex-portal-core img { width:100%; height:80%; min-height:0; object-fit:contain; filter:drop-shadow(0 8px 15px rgba(0,0,0,.18)); }
.hex-portal-core figcaption { color:var(--muted); font-size:.65rem; line-height:1.35; text-align:center; }
.hex-portal-nodes { position:absolute; inset:0; }
.hex-portal-node { position:absolute; width:27%; height:26%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; padding:14px 8px; border:0; background:rgba(208,164,93,.5); color:var(--ink); clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); isolation:isolate; cursor:var(--cursor-navigation); transition:transform .22s ease,background .22s ease,color .22s ease; }
.hex-portal-node::before { content:''; position:absolute; inset:1px; background:#1b110c; clip-path:inherit; z-index:-1; transition:background .22s ease; }
.hex-portal-node:nth-child(1) { left:36.5%; top:1%; }
.hex-portal-node:nth-child(2) { left:66%; top:18%; }
.hex-portal-node:nth-child(3) { left:66%; top:52%; }
.hex-portal-node:nth-child(4) { left:36.5%; top:69%; }
.hex-portal-node:nth-child(5) { left:7%; top:52%; }
.hex-portal-node:nth-child(6) { left:7%; top:18%; }
.hex-portal-node:hover,.hex-portal-node[aria-pressed="true"] { background:var(--portal-accent); transform:translateY(-3px); }
.hex-portal-node:hover::before,.hex-portal-node[aria-pressed="true"]::before { background:#36251a; }
.hex-portal-node:focus-visible { clip-path:none; border-radius:16px; outline:3px solid var(--portal-accent); outline-offset:4px; }
.hex-portal-node:active { transform:scale(.98); }
.hex-portal-node-icon { width:clamp(28px,4vw,52px); height:clamp(28px,4vw,52px); object-fit:contain; transition:transform .22s ease; }
.hex-portal-node[aria-pressed="true"] .hex-portal-node-icon { transform:scale(1.08); }
.hex-portal-node-index { font:500 .62rem 'DM Mono',monospace; color:var(--portal-accent); }
.hex-portal-node-label { max-width:85%; font-size:clamp(.64rem,1.1vw,.86rem); line-height:1.2; text-align:center; }
.hex-portal-story { border-left:1px solid var(--portal-accent); padding:10px 0 10px 26px; }
.hex-portal-story h3 { margin:14px 0 20px; font:500 clamp(2rem,3.4vw,3.4rem)/1.04 'Newsreader',Georgia,serif; letter-spacing:-.04em; }
.hex-portal-story [data-portal-note] { min-height:70px; color:var(--muted); line-height:1.65; font-size:.92rem; }
.hex-portal-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.hex-portal-actions .button { flex-basis:100%; width:fit-content; }
.hex-art-next { background:none; color:var(--brass); border:0; border-bottom:1px solid var(--brass); padding:7px 0; font-size:.8rem; cursor:var(--cursor-navigation); }
.hex-art-next:disabled { opacity:.4; cursor:default; }
.hex-art-count,.hex-portal-help { color:var(--muted); font-size:.72rem; line-height:1.6; }
.hex-portal-help { margin:25px 0 0; }
.hex-portal-fallback { grid-column:1/-1; line-height:1.8; }
@media(max-width:850px) { .hex-explorer { grid-template-columns:1fr; gap:20px; } .hex-portal { max-width:570px; } .hex-portal-story { max-width:570px; width:100%; margin:0 auto; } .hex-portal-story [data-portal-note] { min-height:0; } .hex-portal-actions .button { flex-basis:auto; } .hex-portal-node-label { font-size:.82rem; } }
@media(max-width:560px) { .creative-portal-heading { align-items:start; flex-direction:column; gap:16px; } .hex-portal-node { gap:4px; padding:8px 4px; } .hex-portal-node-icon { width:28px; height:28px; } .hex-portal-node-index { font-size:.5rem; } .hex-portal-node-label { font-size:.62rem; } .hex-portal-core figcaption { font-size:.52rem; } .hex-portal-story { padding-left:18px; } }
@media(pointer:coarse) { .hex-portal-node,.hex-art-next { cursor:pointer; } }
@media(prefers-reduced-motion:reduce) { .hex-portal-node,.hex-portal-node::before,.hex-portal-node-icon { transition:none; } .hex-portal-node:hover,.hex-portal-node[aria-pressed="true"],.hex-portal-node:active,.hex-portal-node[aria-pressed="true"] .hex-portal-node-icon { transform:none; } }

/* Leave the actual listening dock clear when jumping to or tabbing through the map. */
.creative-portal,.hex-portal-node,.hex-portal-actions a,.hex-portal-actions button { scroll-margin-top:calc(var(--portal-dock-height,240px) + 18px); }
@media(min-width:851px) { .hex-portal { max-width:min(660px,max(380px,calc(100svh - var(--portal-dock-height,240px) - 145px))); } }

.hex-portal-center { display:grid; place-items:center; width:100%; flex:1; min-height:0; border-radius:3px; cursor:var(--cursor-navigation); }
.hex-portal-center img { width:100%; height:100%; object-fit:contain; }
.hex-portal-center:hover { box-shadow:0 0 0 1px var(--portal-accent); }
.hex-portal-center:focus-visible { outline:3px solid var(--portal-accent); outline-offset:5px; }
@media(pointer:coarse) { .hex-portal-center { cursor:pointer; } }

/* Keep all text inside the clipped hexagon without changing the ring or behavior. */
.hex-portal-node {
  gap: 4px;
  padding: 4px 0;
}
.hex-portal-node-icon {
  width: 30%;
  max-width: 52px;
  height: auto;
  aspect-ratio: 1;
  flex: 0 0 auto;
}
.hex-portal-node-index {
  flex: 0 0 auto;
  line-height: 1.2;
}
.hex-portal-node-label {
  flex: 0 0 auto;
  width: 64%;
  max-width: none;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Keep the longest single-word label on one line, nearer the wide center. */
.hex-portal-node:nth-child(4) { gap:3px; padding:4px 0 20px; }
.hex-portal-node:nth-child(4) .hex-portal-node-label { width:82%; font-size:.75rem; }
@media(max-width:850px) {
  .hex-portal-node:nth-child(4) .hex-portal-node-label { font-size:.82rem; }
}
@media(max-width:560px) {
  .hex-portal-node:nth-child(4) .hex-portal-node-label { font-size:.62rem; }
}