/* ---------- image plates ----------
   A plate shows a generated image when the active theme's manifest has one for
   its slot, and falls back to the deterministic canvas renderer otherwise.
   Both live in the same box so switching themes never reflows the grid. */
.plate{
  cursor:pointer;padding:0;text-align:left;
  width:100%;height:100%;display:block;
  background:var(--panel);border:1px solid var(--line);text-decoration:none;
}
.plate[data-static]{cursor:default}
.plate-media{position:relative;display:block;width:100%;height:100%;overflow:hidden}
.plate-media canvas,.plate-media .shot{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease;
}
.plate .shot{object-fit:cover;opacity:0}
.plate .shot.ready{opacity:1}
.plate .shot.ready + canvas,.plate.has-image canvas{opacity:0}
.plate:hover .plate-media canvas,.plate:focus-visible .plate-media canvas,
.plate:hover .plate-media .shot,.plate:focus-visible .plate-media .shot{transform:scale(1.025)}
@media (prefers-reduced-motion:reduce){
  .plate-media canvas,.plate-media .shot{transition:none}
  .plate:hover .plate-media canvas,.plate:hover .plate-media .shot{transform:none}
}

.plate .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:baseline;gap:8px;
  padding:10px 12px;
  background:linear-gradient(transparent,var(--capfade) 45%);
}
.cap .name{font-weight:var(--card-weight);font-size:14px;letter-spacing:.1px}
.cap .meta{font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:auto;white-space:nowrap}
.cap .dot{width:8px;height:8px;border-radius:50%;flex:none;transform:translateY(-1px)}

.badge{
  position:absolute;top:10px;left:10px;z-index:3;
  font-family:var(--mono);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;
  padding:4px 8px;border-radius:4px;color:#0E1015;font-weight:700;
  transform:rotate(calc(-2deg + var(--tilt)));transform-origin:left top;
}
.badge.rev{background:var(--amber)}
.badge.fo{background:var(--ink);color:var(--on-ink)}

/* ---------- text tiles ---------- */
.txt{padding:20px 22px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.txt .kicker{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}

.hero-copy h1{font-family:var(--display);font-size:clamp(34px,4.6vw,62px);font-weight:var(--display-weight);line-height:1.02;letter-spacing:var(--display-tracking)}
.hero-copy h1 .pub{color:var(--amber)}
.hero-copy p{color:var(--muted);font-size:15px;max-width:46ch;margin-top:10px}
.hero-copy .kicker{margin-bottom:auto}

.gp-copy{gap:10px;justify-content:center}
.gp-copy h3{font-family:var(--display);font-size:clamp(22px,2.6vw,34px);font-weight:var(--display-weight);letter-spacing:var(--display-tracking)}
.gp-copy p{color:var(--muted);font-size:14px;max-width:52ch}

.contact{align-items:flex-start;justify-content:center;gap:12px}
.contact h3{font-family:var(--display);font-size:clamp(24px,3vw,40px);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);line-height:1.05}
.contact h3 span{color:var(--magenta)}
.contact p{color:var(--muted);font-size:14px;max-width:44ch}

/* ---------- filter chips ---------- */
.chips{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;padding:4px 2px 2px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;letter-spacing:var(--label-tracking);text-transform:uppercase;
  padding:8px 13px;border-radius:100px;border:1px solid var(--line);
  background:transparent;color:var(--muted);
}
.chip span{font-size:9px;opacity:.7;letter-spacing:0}
.chip:hover{color:var(--text)}
.chip[aria-pressed="true"]{
  background:var(--chip-color);border-color:var(--chip-color);color:var(--chip-text);font-weight:700;
}

/* ---------- portfolio discovery ---------- */
.portfolio-view-controls,#portfolioViewControls{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-top:4px}
.view-tabs{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:100px;background:var(--panel)}
.view-tabs button{
  min-height:36px;padding:7px 13px;border-radius:100px;
  color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:var(--label-tracking);text-transform:uppercase;
}
.view-tabs button:hover{color:var(--text)}
.view-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}

.trend-cards,#trendCards{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.trend-card{
  min-width:0;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  box-shadow:inset 0 3px 0 var(--cobalt);
}
.trend-card:nth-child(2){box-shadow:inset 0 3px 0 var(--teal)}
.trend-card:nth-child(3n){box-shadow:inset 0 3px 0 var(--magenta)}
.trend-kicker{font-family:var(--mono);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.trend-card h3{margin-top:8px;font-family:var(--display);font-size:clamp(20px,2vw,28px);line-height:1.05;font-weight:var(--display-weight);letter-spacing:var(--display-tracking)}
.trend-card > p:not(.trend-kicker){margin-top:10px;color:var(--muted);font-size:13px;max-width:48ch}
.trend-card ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin-top:18px}
.trend-card a{
  display:block;padding:5px 9px;border:1px solid var(--line);border-radius:100px;text-decoration:none;
  font-size:11px;background:var(--panel-2);
}
.trend-card a:hover,.trend-card a:focus-visible{border-color:var(--muted);color:var(--text)}
.lin-mini,.lin-co{text-decoration:none;color:inherit}

/* ---------- standalone company profiles ---------- */
.company-page{max-width:1120px;min-height:calc(100vh - 180px);padding-top:clamp(32px,6vw,84px)}
.company-profile{
  display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);grid-template-areas:"art copy";
  align-items:stretch;min-height:600px;padding:0;overflow:hidden;
}
.company-hero-art{grid-area:art;min-height:100%;margin:0;overflow:hidden;background:var(--panel-2)}
.company-hero-art img{width:100%;height:100%;object-fit:cover}
.company-copy{grid-area:copy;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(28px,5vw,64px)}
.company-copy .kicker{color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}
.company-copy h1{margin-top:auto;font-family:var(--display);font-size:clamp(38px,6vw,72px);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);line-height:.96}
.company-copy > .desc{max-width:54ch;margin-top:18px;color:var(--muted);font-size:17px;line-height:1.55}
.tag-list{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin-top:18px}
.tag-list .tag{padding:5px 8px;border-radius:100px;background:var(--panel-2);color:var(--muted);font-family:var(--mono);font-size:9px;letter-spacing:.5px;text-transform:uppercase}
.company-facts{display:grid;width:100%;gap:8px;margin-top:20px}
.company-facts > div{display:grid;grid-template-columns:minmax(90px,.35fr) minmax(0,1fr);gap:12px;padding-top:8px;border-top:1px solid var(--line)}
.company-facts dt{color:var(--muted);font-family:var(--mono);font-size:9px;letter-spacing:.7px;text-transform:uppercase}
.company-facts dd{font-size:13px}
.company-copy .visit{display:inline-block;margin-top:20px;padding:9px 13px;border:1px solid var(--line);border-radius:6px;text-decoration:none;font-family:var(--mono);font-size:10px;text-transform:uppercase}
.company-copy .prompt-box{width:100%;margin-top:24px;padding:0;overflow:hidden;border:1px dashed var(--line);border-radius:8px;background:var(--panel-2)}
.company-copy .prompt-box summary{cursor:pointer;padding:12px 14px;color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase}
.company-copy .prompt-box[open] summary{border-bottom:1px dashed var(--line);color:var(--text)}
.prompt-copy{display:grid;gap:9px;padding:14px;font-size:12px;line-height:1.55}
.prompt-copy h2{font-family:var(--display);font-size:18px;font-weight:var(--display-weight)}
.prompt-copy ul{padding-left:20px}

/* ---------- compact portfolio cards ---------- */
.portfolio-listing,#portfolioListing{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.portfolio-card{grid-column:span 3;min-height:320px;display:grid;grid-template-rows:minmax(170px,1fr) auto}
.portfolio-card .plate-media{height:auto;min-height:170px}
.portfolio-card .cap{padding:12px 13px}
.portfolio-card .cap .name{font-family:var(--body);font-size:16px;line-height:1.05}
.portfolio-card .cap .meta{font-size:9px}
.portfolio-summary{display:flex;flex-direction:column;gap:10px;min-height:128px;padding:14px;border-top:1px solid var(--line);background:var(--panel)}
.portfolio-desc{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:12.5px;line-height:1.45;color:var(--muted)}
.portfolio-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto}
.portfolio-tags span{
  padding:3px 6px;border-radius:4px;background:var(--panel-2);color:var(--muted);
  font-family:var(--mono);font-size:8px;line-height:1.35;letter-spacing:.4px;text-transform:uppercase;
}

/* ---------- theme switcher ---------- */
.themer{
  position:fixed;bottom:16px;right:16px;z-index:60;
  display:flex;align-items:center;gap:6px;flex-wrap:nowrap;
  width:auto;max-width:calc(100vw - 32px);padding:7px;border-radius:999px;
  background:var(--headbg);backdrop-filter:blur(12px);
  border:1px solid var(--line);
  box-shadow:0 6px 24px rgba(10,12,17,.18);
}
.tbtn{
  display:grid;place-items:center;flex:none;width:38px;height:38px;padding:3px;border-radius:50%;border:1px solid transparent;color:var(--muted);
}
.tbtn:hover{border-color:var(--muted);transform:translateY(-1px)}
.tbtn[aria-pressed="true"]{border-color:var(--text);box-shadow:0 0 0 2px var(--panel),0 0 0 3px var(--text)}
.style-preview{
  position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:50%;background:var(--panel-2);
}
.theme-icon::before,.theme-icon::after,.theme-icon i{position:absolute;display:block;content:""}
.theme-icon--riso{background:radial-gradient(#253a8a 1px,transparent 1.3px) 0 0/5px 5px,#f3ead5}
.theme-icon--riso::before{inset:6px 3px 14px;background:#ea2d89;transform:rotate(-14deg)}
.theme-icon--riso::after{right:4px;bottom:5px;width:16px;height:13px;background:#2745d7;transform:rotate(18deg)}
.theme-icon--darkroom{background:#12161c}
.theme-icon--darkroom::before{width:27px;height:27px;left:5px;top:4px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#edf0f5 0 8%,#707b90 18%,#12161c 65%)}
.theme-icon--darkroom::after{right:5px;bottom:6px;width:14px;height:2px;background:#b3bdca;box-shadow:0 -5px 0 rgba(179,189,202,.45)}
.theme-icon--blueprint{background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(223,241,255,.32) 7px 8px),repeating-linear-gradient(0deg,transparent 0 7px,rgba(223,241,255,.32) 7px 8px),#143272}
.theme-icon--blueprint::before{left:5px;right:5px;top:17px;height:2px;background:#a9e6f5;transform:rotate(-28deg)}
.theme-icon--blueprint::after{left:17px;top:5px;width:2px;height:28px;background:#a9e6f5;transform:rotate(31deg)}
.theme-icon--shimokitazawa{background:repeating-linear-gradient(-24deg,#f5efe0 0 6px,#151924 6px 10px,#ef4384 10px 13px,#f5efe0 13px 18px)}
.theme-icon--shimokitazawa::before{inset:8px 5px 9px;background:#f5cf38;mix-blend-mode:multiply;transform:rotate(11deg)}
.theme-icon--soft-wash{background:radial-gradient(circle at 25% 30%,#ffd8bc 0 21%,transparent 45%),radial-gradient(circle at 78% 70%,#8dc7d0 0 23%,transparent 48%),#e8e6ef}
.theme-icon--soft-wash::before{left:9px;top:6px;width:20px;height:23px;border-radius:50%;background:rgba(191,145,190,.55);filter:blur(3px)}
.theme-icon--storybook{background:linear-gradient(145deg,#f8ebc9,#dceac8)}
.theme-icon--storybook::before{left:10px;top:6px;width:17px;height:25px;border-radius:10px 10px 3px 3px;background:#557d63}
.theme-icon--storybook::after{left:15px;top:10px;width:7px;height:14px;border-radius:6px 6px 1px 1px;background:#f7d37f}
.theme-icon--nocturne{background:radial-gradient(circle at 50% 122%,#6b1f24 0 36%,transparent 38%),#0f0b0a}
.theme-icon--nocturne::before{left:7px;top:4px;width:18px;height:18px;border:1.5px solid #e5b75b;border-radius:50%;box-shadow:inset 0 0 0 3.5px #0f0b0a,inset 0 0 0 4.5px rgba(229,183,91,.65)}
.theme-icon--nocturne::after{left:13px;top:10px;width:6px;height:6px;border-radius:50%;background:#f5ebd7;box-shadow:0 0 8px 2px rgba(245,235,215,.55)}
.tbtn[data-loading="true"]{opacity:.55}

/* ---------- dossier modal ---------- */
.overlay{
  position:fixed;inset:0;z-index:100;display:none;
  background:rgba(23,26,33,.42);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:20px;
}
.overlay.open{display:flex}
.dossier{
  width:min(760px,100%);max-height:92vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  position:relative;display:flex;flex-direction:column;
}
.dossier .art{position:relative;height:260px;flex:0 0 260px;order:1;border-bottom:1px solid var(--line);overflow:hidden}
.dossier .art canvas,.dossier .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dossier .body{padding:22px 26px 28px;order:2}
.dossier .row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dossier h3{font-family:var(--display);font-size:30px;font-weight:var(--display-weight);letter-spacing:var(--display-tracking)}
.dossier .tag{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:4px 9px;border-radius:4px;font-weight:700}
.dossier .desc{color:var(--muted);margin:12px 0 16px;font-size:14px;max-width:60ch}
.dossier dl{display:grid;grid-template-columns:130px 1fr;gap:8px 14px;font-size:13px}
.dossier dt{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding-top:2px}
.dossier dd{color:var(--text)}
.dossier-person-details{margin-top:18px}
.dossier-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dossier-metrics > *{display:flex;flex-direction:column;padding:11px 12px;border-radius:8px;background:var(--panel-2);text-decoration:none}
.dossier-metrics strong{font-family:var(--display);font-size:20px;line-height:1.1}
.dossier-metrics span{margin-top:3px;color:var(--muted);font-size:11px}
.dossier-metrics small{margin-top:4px;color:var(--muted);font-family:var(--mono);font-size:8px;text-transform:uppercase}
.dossier-person-links{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.dossier-person-links a{padding:6px 9px;border:1px solid var(--line);border-radius:6px;text-decoration:none;font-family:var(--mono);font-size:9px;text-transform:uppercase}
.dossier-person-links a:hover{border-color:var(--muted)}
.dossier .close{
  position:absolute;top:14px;right:14px;z-index:3;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--closebg);color:var(--ink);font-size:15px;
}
.dossier .prompt-box{
  margin-top:18px;padding:12px 14px;border-radius:8px;
  border:1px dashed var(--line);background:var(--panel-2);
}
.dossier .prompt-box summary{
  cursor:pointer;list-style-position:outside;font-family:var(--mono);font-size:10px;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);
}
.dossier .prompt-box[open] summary{margin-bottom:10px}
.dossier .prompt-box .plabel{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.dossier .prompt-box p{font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--text)}
.dossier .visit{
  display:inline-block;margin-top:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:1px;text-transform:uppercase;text-decoration:none;
  padding:9px 14px;border-radius:6px;border:1px solid var(--line);
}
.dossier .visit[hidden]{display:none}
.dossier .visit:hover{border-color:var(--muted)}

@media (max-width:640px){
  .portfolio-card{grid-column:span 1;aspect-ratio:4/3}
  .portfolio-card .cap{padding:9px 9px 8px;gap:6px}
  .portfolio-card .cap .name{font-size:15px;letter-spacing:0}
  .portfolio-card .cap .meta{display:none}
  .portfolio-card .cap .dot{width:7px;height:7px}
  .portfolio-listing,#portfolioListing{grid-template-columns:repeat(2,1fr);gap:8px}
  .portfolio-card{grid-column:span 1;min-height:290px}
  .portfolio-summary{min-height:122px;padding:11px}
  .portfolio-tags span{font-size:7.5px}
  .trend-cards,#trendCards{grid-template-columns:1fr}
  .trend-card{padding:18px}
  .company-page{padding-top:20px}
  .company-profile{grid-template-columns:1fr;grid-template-areas:"copy" "art";min-height:0}
  .company-copy{padding:28px 22px}
  .company-copy h1{margin-top:48px}
  .company-hero-art{min-height:300px}
  .dossier dl{grid-template-columns:110px 1fr}
  .dossier .body{order:1;padding:52px 20px 22px}
  .dossier .art{order:2;height:180px;flex-basis:180px;border-top:1px solid var(--line);border-bottom:0}
  .dossier-metrics{grid-template-columns:1fr 1fr}
  .themer{
    bottom:12px;right:12px;left:auto;max-width:calc(100vw - 24px);padding:6px;gap:4px;
  }
  .tbtn{width:35px;height:35px;padding:3px}
  /* Keep the hero links clear of the fixed theme switcher. */
  .hero-actions{padding-bottom:60px}
}

@media (min-width:641px) and (max-width:1024px){
  .portfolio-listing,#portfolioListing{grid-template-columns:repeat(6,1fr)}
  .portfolio-card{grid-column:span 3}
  .trend-cards,#trendCards{grid-template-columns:1fr 1fr}
  .trend-card:last-child:nth-child(odd){grid-column:1/-1}
}

/* ---------- generic plate hosts (grid tiles, lineage thumbs, dossier art) ----------
   Any element with [data-slot] holds an image layer over a canvas fallback.
   `.has-image` is set by paintPlate() once the generated image has decoded. */
[data-slot]{position:relative}
[data-slot] > img.shot{opacity:0;transition:opacity .35s ease}
[data-slot] > img.shot.ready{opacity:1}
[data-slot].has-image > canvas{opacity:0}
[data-slot] > canvas{opacity:1;transition:opacity .35s ease}
@media (prefers-reduced-motion:reduce){
  [data-slot] > img.shot,[data-slot] > canvas{transition:none}
}

/* Reference thumbnails shown under the prompt in a dossier. */
.dossier .prompt-refs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.dossier .prompt-refs img{
  width:64px;height:64px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:6px;
}