/* Consistent portfolio cards and animated export atlas — 5 November 2026. */
.portfolio-unified .section-head { margin-block-end: 3rem; }
.portfolio-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; }
.portfolio-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 1.2rem; background: rgb(10 17 16); color: var(--paper); }
.portfolio-card-angus { background: var(--forest); }
.portfolio-card-cloverlea { background: rgb(17 7 78); }
.portfolio-card-kinu-toro { background: rgb(31 23 14); }
.portfolio-card-visual { position: relative; display: block; isolation: isolate; block-size: 24rem; overflow: hidden; color: var(--paper); }
.portfolio-card-visual > img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.3s cubic-bezier(.2,.75,.2,1); }
.portfolio-card-visual::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg,rgb(5 18 16 / .83),transparent 65%); }
.portfolio-card-visual:hover > img { transform: scale(1.035); }
.portfolio-card-visual-brand { background: var(--paper); }
.portfolio-card-kinu-toro .portfolio-card-visual-brand { background: rgb(253 252 241); }
.portfolio-card-visual-brand::after { display: none; }
.portfolio-card-visual-brand > img.portfolio-brand-art { object-fit: contain; padding: 2.5rem; }
.portfolio-card-cloverlea .portfolio-brand-art { padding-block: 2rem; }
.portfolio-card-visual-brand .portfolio-card-number { color: rgb(20 45 62); }
.portfolio-card[id] { scroll-margin-block-start: 1rem; }
.portfolio-card-number { position: absolute; z-index: 1; top: 1.4rem; right: 1.5rem; font-size: .75rem; }
.portfolio-card-identity { position: absolute; bottom: 1.4rem; left: 2rem; z-index: 1; display: flex; align-items: end; min-block-size: 8rem; }
.portfolio-card-identity img { inline-size: 9rem; block-size: 9rem; object-fit: contain; }
.portfolio-card-oishi .portfolio-card-identity { mix-blend-mode: screen; }
.portfolio-program-identity { font-size: .85rem; letter-spacing: .09em; line-height: 1.5; text-transform: uppercase; color: var(--paper); }
.portfolio-program-identity strong { display: block; color: var(--gold); font-size: 3.4rem; text-transform: none; letter-spacing: -.045em; line-height: 1.05; font-weight: 400; }
.portfolio-card-copy { display: flex; flex-direction: column; align-items: start; padding: 2.5rem; flex: 1; }
.portfolio-card .eyebrow { color: var(--gold); font-size: .66rem; letter-spacing: .11em; }
.portfolio-card h3 { color: var(--paper); font-size: clamp(2.4rem,3.3vw,3.6rem); line-height: 1.06; margin-block: 1rem 1.4rem; }
.portfolio-card-copy > p { color: rgb(243 239 230 / .78); font-size: 1rem; line-height: 1.75; max-inline-size: 40ch; margin-block-end: 1.8rem; }
.portfolio-card-details { list-style: none; display: flex; gap: .6rem; flex-wrap: wrap; padding: 0; margin-block: auto 1.8rem; }
.portfolio-card-details li { padding: .45rem .8rem; border: 1px solid rgb(230 221 192 / .22); border-radius: 99px; font-size: .7rem; color: rgb(233 228 211); }
.portfolio-card-action { display: flex; inline-size: 100%; align-items: center; justify-content: space-between; gap: 1rem; color: var(--paper); text-decoration: none; border-block-start: 1px solid rgb(230 221 192 / .23); padding-block-start: 1.3rem; font-size: .9rem; }
.portfolio-card-action span { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; border: 1px solid rgb(230 221 192 / .3); color: var(--gold); transition: background .25s,transform .3s; }
.portfolio-card-action:hover span { background: rgb(230 221 192 / .09); transform: translate(2px,-2px); }
.portfolio-card :focus-visible { outline-color: var(--gold); }
.export-atlas { background: var(--sage); padding-block: 5rem 4rem; }
.export-atlas .market-explorer-heading { margin-block-end: 2.4rem; }
.export-atlas .market-explorer-heading .eyebrow { color: var(--forest); }
.atlas-stage { position: relative; overflow: hidden; border-radius: 1.2rem; background: rgb(8 26 31); color: var(--paper); isolation: isolate; }
.atlas-stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 58% 20%,rgb(47 84 69 / .45),transparent 65%); pointer-events: none; z-index: -1; }
.atlas-topline { display: flex; align-items: center; gap: 1.5rem; justify-content: space-between; padding: 1.5rem 2rem 0; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: rgb(234 230 208 / .7); }
.atlas-topline > span:first-child { display: flex; gap: .65rem; align-items: center; }
.atlas-topline i { inline-size: .4rem; block-size: .4rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 13px rgb(214 194 134 / .55); }
.atlas-topline [data-atlas-position] { margin-inline-start: auto; }
.atlas-play { display: inline-flex; align-items: center; gap: .6rem; border: 1px solid rgb(231 226 202 / .24); border-radius: 99px; min-block-size: 2.65rem; padding: .5rem 1rem; color: var(--paper); background: transparent; font-size: .72rem; letter-spacing: 0; text-transform: none; }
.atlas-play:hover { border-color: var(--gold); }
.atlas-play:disabled { cursor: default; opacity: .65; }
.atlas-play[hidden] { display: none; }
.atlas-map-window { position: relative; overflow: hidden; block-size: clamp(20rem,36vw,32rem); margin-block: .5rem 0; }
.atlas-map { inline-size: 100%; block-size: 100%; display: block; }
.atlas-land { fill: rgb(62 91 75 / .7); stroke: rgb(155 175 146 / .28); stroke-width: .65; vector-effect: non-scaling-stroke; }
.atlas-land-origin { fill: rgb(144 139 90 / .85); stroke: rgb(207 191 134 / .5); }
.atlas-graticule { fill: none; stroke: rgb(177 199 175 / .08); stroke-width: .7; vector-effect: non-scaling-stroke; }
.atlas-route-base { fill: none; stroke: rgb(202 187 136 / .22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.atlas-route-light { fill: none; stroke: rgb(231 205 145 / .5); stroke-width: 2; opacity: 0; vector-effect: non-scaling-stroke; transition: opacity .4s; filter: drop-shadow(0 0 4px rgb(220 197 137 / .45)); }
.atlas-route-trail { fill: none; stroke: rgb(255 239 191); stroke-width: 2.5; stroke-dasharray: .075 .925; opacity: 0; vector-effect: non-scaling-stroke; }
.atlas-comet { fill: rgb(255 239 191); stroke: rgb(219 197 137 / .25); stroke-width: 4; opacity: 0; filter: drop-shadow(0 0 5px rgb(220 197 137 / .8)); }
.atlas-route.is-selected .atlas-route-light,.atlas-route.is-selected .atlas-route-trail,.atlas-route.is-selected .atlas-comet { opacity: 1; }
.atlas-node { fill: var(--paper); stroke: rgb(10 30 31); stroke-width: 2; vector-effect: non-scaling-stroke; }
.atlas-node-halo { fill: rgb(224 206 146 / .08); opacity: 0; }
.atlas-node-pulse { fill: none; stroke: rgb(224 206 146 / .6); stroke-width: 1; opacity: 0; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.atlas-destination text { fill: rgb(233 235 217 / .6); font-family: var(--font); font-size: 10px; letter-spacing: .02em; }
.atlas-destination.is-selected .atlas-node { fill: rgb(242 218 155); }
.atlas-destination.is-selected .atlas-node-halo,.atlas-destination.is-selected .atlas-node-pulse { opacity: 1; }
.atlas-destination.is-selected text { fill: rgb(250 235 193); font-size: 13px; font-weight: 600; }
.export-atlas[data-playing=true][data-motion-active=true] .atlas-destination.is-selected .atlas-node-pulse { animation: atlas-beacon 2.6s ease-out infinite; }
.atlas-origin-marker circle { fill: rgb(238 220 167); }
.atlas-origin-marker .atlas-origin-halo { fill: rgb(224 206 146 / .1); }
.atlas-origin-marker text { fill: rgb(232 220 185); font-family: var(--font); font-size: 9px; letter-spacing: .12em; }
.export-atlas .market-focus { display: flex; align-items: end; padding: 1.5rem 2.5rem 2rem; gap: 2rem; border-block-start: 1px solid rgb(226 226 202 / .12); }
.export-atlas .market-focus .eyebrow { color: var(--gold); }
.export-atlas .market-focus h3 { color: var(--paper); font-size: clamp(2rem,3vw,3rem); margin-block: .6rem .8rem; }
.export-atlas .market-focus p { color: rgb(230 234 216 / .75); font-size: .9rem; max-inline-size: 64ch; }
.export-atlas .market-focus .text-link { color: var(--paper); white-space: nowrap; font-size: .85rem; }
.atlas-tour-progress { display: block; block-size: 2px; inline-size: calc(var(--atlas-progress,0) * 100%); background: var(--gold); }
.export-atlas .market-choices { border-block-start: 0; margin-block-start: 1rem; border-block-end: 1px solid rgb(24 53 45 / .18); gap: .5rem; border: 0; }
.export-atlas .market-chip { border: 1px solid rgb(24 53 45 / .17); border-radius: .45rem; font-size: .8rem; min-block-size: 3.5rem; padding: .75rem 1rem; gap: .6rem; }
.atlas-choice-number { font-size: .6rem; opacity: .6; }
.atlas-choice-arrow { margin-inline-start: auto; }
.export-atlas .market-chip[aria-pressed=true] { background: var(--forest); color: var(--paper); }
.export-atlas .market-eligibility { color: var(--secondary); font-size: .7rem; line-height: 1.7; }
.export-atlas :focus-visible { outline-color: var(--gold); }
.export-atlas-compact { padding: 0; background: transparent; }
.export-atlas-compact > .wrap { inline-size: 100%; padding: 0; }
.export-atlas-compact .atlas-stage { background: rgb(8 26 31); }
.export-atlas-compact .atlas-topline { padding: 1rem 1.2rem 0; font-size: .55rem; }
.export-atlas-compact .atlas-map-window { block-size: 21rem; }
.export-atlas-compact .market-focus { padding: 1.2rem; display: block; }
.export-atlas-compact .market-focus h3 { font-size: 1.8rem; }
.export-atlas-compact .market-focus p { font-size: .8rem; }
.export-atlas-compact .market-focus .text-link { margin-block-start: 1rem; }
.export-atlas-compact .market-choices { grid-template-columns: repeat(2,minmax(0,1fr)); }
.export-atlas-compact .market-chip { color: var(--paper); border-color: rgb(230 233 209 / .2); font-size: .72rem; min-block-size: 2.8rem; }
.export-atlas-compact .market-chip[aria-pressed=true] { background: var(--paper); color: var(--forest); }
.export-atlas-compact .market-eligibility { color: rgb(230 234 216 / .65); font-size: .65rem; }
.chapter-markets .chapter-layout { grid-template-columns: .85fr 1.25fr; }
@keyframes atlas-beacon { from { opacity: .8; transform: scale(.75); } to { opacity: 0; transform: scale(1.65); } }
@media (max-width: 900px) {
  .portfolio-card-copy { padding: 1.8rem; }
  .portfolio-card-visual { block-size: 21rem; }
  .portfolio-card h3 { font-size: 2.5rem; }
  .export-atlas .market-choices { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .atlas-map-window { block-size: 27rem; }
  .export-atlas .market-focus { padding: 1.5rem; }
  .export-atlas .market-focus p { max-inline-size: 42ch; }
  .chapter-markets .chapter-layout { grid-template-columns: 1fr; }
  .export-atlas-compact .market-choices { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .portfolio-card-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .portfolio-card-visual { block-size: 23rem; }
  .portfolio-card-copy { padding: 2rem 1.5rem; }
  .portfolio-card h3 { font-size: 2.8rem; }
  .portfolio-card-identity { left: 1.5rem; }
  .export-atlas { padding-block: 3.5rem; }
  .export-atlas .market-explorer-heading h2 { font-size: 2.8rem; }
  .atlas-stage { border-radius: .9rem; }
  .atlas-topline { padding: 1.2rem 1rem 0; gap: .65rem; font-size: .5rem; }
  .atlas-play { padding: .4rem .65rem; font-size: .6rem; min-block-size: 2.75rem; }
  .atlas-topline [data-atlas-position] { display: none; }
  .export-atlas .atlas-map-window { block-size: 12rem; }
  .atlas-destination text { opacity: 0; }
  .atlas-destination.is-selected text { opacity: 1; font-size: 20px; }
  .atlas-origin-marker text { font-size: 14px; }
  .export-atlas .market-focus { display: block; padding: 1.2rem; }
  .export-atlas .market-focus h3 { font-size: 2rem; }
  .export-atlas .market-focus p { font-size: .83rem; }
  .export-atlas .market-focus .text-link { margin-block-start: 1.2rem; display: inline-flex; }
  .export-atlas .market-choices { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
  .export-atlas .market-chip { font-size: .75rem; padding-inline: .75rem; }
  .export-atlas .market-eligibility { font-size: .65rem; }
  .export-atlas-compact { padding: 0; }
}
html[data-reduce-motion=true] .atlas-node-pulse { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .atlas-node-pulse { animation: none !important; } }
@media print { .atlas-play,.atlas-tour-progress { display: none !important; } .atlas-stage { print-color-adjust: exact; } .portfolio-card-grid { display: block; } .portfolio-card { break-inside: avoid; margin-block: 1rem; } }