/* STAGE — imprint level. Dark frame, iridescent pastel stage, tiny mono labels. */
.t-stage{--ink:#111;--paper:#f4f2f7;--mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;--sans:'Inter Tight',system-ui,sans-serif;
  background:#111;color:var(--ink);font:400 16px/1.55 var(--sans)}
.t-stage :focus-visible{outline:2px solid #111;outline-offset:3px}
.lbl{font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;color:inherit}
a.lbl:hover,button.lbl:hover{text-decoration:underline;text-underline-offset:3px}
.lbl-text{font:400 12px/1.5 var(--mono);color:#9a9a9a;margin-top:10px;max-width:32ch}

/* frame + logo */
.frame{position:relative;background:#111;padding:24px 5.5vw 56px;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.logo{display:block}.logo img{display:block;width:auto;height:100%}
/* the logo gets its own centred row above the stage */
.frame-logo{display:block;flex:none;align-self:center;margin:0 auto 24px}
.frame-logo:focus-visible{outline:2px solid #efeeec;outline-offset:6px}
.logo-top{height:64px}
.edge{position:absolute;top:50%;color:#d9d9d9;white-space:nowrap;writing-mode:vertical-rl;transform:translateY(-50%)}
.edge-l{left:calc(2.75vw - 7px);transform:translateY(-50%) rotate(180deg)}.edge-r{right:calc(2.75vw - 7px)}

/* the stage */
.stage{position:relative;width:min(1180px,100%);min-height:clamp(640px,calc(100vh - 168px),860px);isolation:isolate;
  background:linear-gradient(135deg,#ebe6f6 0%,#f1e8f6 35%,#e6ebfb 70%,#e9f5f2 100%)}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.95;
  background:
    radial-gradient(38% 46% at 8% 96%,rgba(150,236,214,.85),transparent 70%),
    radial-gradient(42% 52% at 58% 104%,rgba(146,160,255,.85),transparent 70%),
    radial-gradient(34% 40% at 92% 6%,rgba(240,186,236,.8),transparent 70%),
    radial-gradient(30% 36% at 34% 0%,rgba(255,206,226,.75),transparent 70%),
    radial-gradient(26% 30% at 96% 70%,rgba(190,214,255,.7),transparent 70%);
  background-size:140% 140%;animation:iri 22s ease-in-out infinite alternate}
@keyframes iri{0%{background-position:0% 0%}50%{background-position:60% 30%}100%{background-position:100% 100%}}
.notch{position:absolute;background:#111;z-index:5;pointer-events:none}
.notch-a{left:-1px;top:19%;width:8.5%;height:23%}
.notch-b{right:-1px;bottom:-1px;width:11%;height:36%}
.notch-c{left:-1px;bottom:36%;width:3.5%;height:8%}
.stage-bar{position:absolute;left:0;right:0;display:grid;align-items:start;padding:0 26px;z-index:6}
.stage-top{top:14px;grid-template-columns:1fr 1fr 56px 1fr 1fr 1fr}
.stage-top>:nth-child(4),.stage-top>:nth-child(5){justify-self:center}
.stage-top>:last-child{justify-self:end}
.view-toggle{justify-self:start;margin-top:14px}
.view-toggle span{opacity:.45}
[data-view="carousel"] .vt-a,[data-view="list"] .vt-a,[data-view="grid"] .vt-b{opacity:1;text-decoration:underline;text-underline-offset:3px}
.stage-mark{justify-self:center;width:30px;height:30px;color:#111}
.stage-mark svg{width:100%;height:100%;fill:currentColor}
.stage-bottom{top:auto;bottom:14px;grid-template-columns:1fr 1fr 1fr 1fr;align-items:end}
.stage-bottom>:nth-child(2){justify-self:center}.stage-bottom>:nth-child(3){justify-self:center}.stage-bottom>:last-child{justify-self:end}
.half{display:inline-block;width:10px;height:10px;border:1.5px solid #111;border-radius:50%;background:linear-gradient(90deg,#111 50%,transparent 50%);vertical-align:-1px;margin-right:8px}
.stage-title{position:absolute;left:26px;top:64px;z-index:6;display:flex;flex-direction:column;gap:6px;max-width:250px;font-weight:400}
.st-line{font:500 15px/1.35 var(--sans);letter-spacing:-.01em}

/* carousel */
.carousel{position:absolute;left:calc(50% - 50vw);width:100vw;top:max(150px,calc(50% - 250px));overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scrollbar-width:none;z-index:3;cursor:grab;padding:8px 0 16px}
.carousel::-webkit-scrollbar{display:none}
.carousel.is-drag{cursor:grabbing;scroll-snap-type:none}
.carousel:focus-visible{outline:none}
.carousel:focus-visible .is-active .card{outline:2px solid #111;outline-offset:4px}
.track{display:flex;gap:24px;width:max-content;padding-inline:calc(50vw - 150px)}
.card-item{width:300px;flex:none;scroll-snap-align:center}
.card-label{margin:0 0 8px 2px;color:#111;display:flex;gap:10px}
.card-label span{opacity:.5}
.card{position:relative;display:block;height:390px;border-radius:14px;overflow:hidden;text-decoration:none;background:#111;
  transform:perspective(1300px) rotateY(var(--ry,0deg)) scale(var(--s,1));transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
  box-shadow:0 20px 40px -18px rgba(40,30,80,.45)}
/* full cover, never cropped: contained in the space above the meta strip */
.card{display:flex;flex-direction:column}
.card-media{position:relative;flex:1 1 auto;min-height:0;margin:16px 16px 0}
.card-media .cover,.card-media .cover img,.card-media .dith{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.card-dither .dith{image-rendering:pixelated;transition:opacity .6s ease}
.card:hover .dith,.card:focus-visible .dith,.is-active .card .dith{opacity:0}
.card-meta{position:relative;flex:none;padding:12px 16px 14px;color:#fff;display:flex;flex-direction:column;gap:2px}
.card-meta .lbl{opacity:.8;margin-bottom:6px}
.card-name{font:600 21px/1.1 var(--sans);letter-spacing:-.02em}
.card-by{font:400 13px/1.3 var(--sans);opacity:.85}
.card-teaser{display:none}

/* floating globe: equirectangular map (ocean solid, land cut out) scrolled inside a shaded circle. scripts/make-globe.py */
.globe-scene{position:absolute;left:50%;bottom:40px;width:104px;height:104px;margin-left:-52px;z-index:4;animation:bob 6s ease-in-out infinite;pointer-events:none}
.globe{--land:transparent;position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--land);isolation:isolate;
  transform:rotate(-16deg);border:1px solid rgba(255,255,255,.95);box-shadow:0 14px 26px -12px rgba(60,60,110,.45)}
.globe-map{position:absolute;top:0;left:0;width:400%;height:100%;
  background:url(/assets/art/globe-map.png?v=85230762) repeat-x 0 0/50% 100%;background-image:image-set(url(/assets/art/globe-map.webp?v=df068191) type("image/webp"),url(/assets/art/globe-map.png?v=85230762) type("image/png"));
  animation:globe-spin 24s linear infinite;will-change:transform}
.globe::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 28%,rgba(190,220,255,.5),rgba(190,220,255,0) 42%),radial-gradient(circle at 50% 50%,rgba(5,15,35,0) 55%,rgba(5,15,35,.45) 100%);
  box-shadow:inset 0 0 18px rgba(150,150,200,.35)}
@keyframes globe-spin{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}

.stage-caption{position:absolute;left:26px;bottom:52px;max-width:340px;z-index:6}
.cap-text{font:400 13px/1.45 var(--sans);margin-top:6px;min-height:3.9em}
.cap-text strong{font-weight:600;display:block}
.carousel-ctrl{position:absolute;right:13%;bottom:56px;display:flex;align-items:center;gap:12px;z-index:6}
.rail{position:relative;width:150px;height:1px;background:#111}
.rail-dot{position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:#111;transform:translateX(calc(var(--rail,0) * 143px))}

/* GRID view */
[data-view="grid"].stage{min-height:0;padding:150px 26px 96px}
[data-view="grid"] .carousel{position:static;width:auto;transform:none;overflow:visible;cursor:auto;padding:0}
[data-view="grid"] .track{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;width:auto;padding:0 6% 0}
[data-view="grid"] .card-item{width:auto}
[data-view="grid"] .card{height:auto;aspect-ratio:4/5;transform:none}
[data-view="grid"] .card-teaser{display:block;font:400 14px/1.5 var(--sans);margin-top:14px;max-width:40ch}
[data-view="grid"] .globe-scene{left:auto;right:4%;bottom:auto;top:62px;width:64px;height:64px;margin:0}
[data-view="grid"] .stage-caption,[data-view="grid"] .carousel-ctrl{display:none}
[data-view="grid"] .notch-a{top:30%;height:14%;width:4%}
[data-view="grid"] .notch-b{width:3%;height:18%}

/* sheet (index/authors/about/contact) */
.sheet{width:min(1180px,calc(100% - 11vw));margin:0 auto;background:linear-gradient(180deg,#f4f2f7,#eef0f6);padding:24px 56px 40px}
.sheet-sec{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:56px 0;border-top:1px solid rgba(17,17,17,.14)}
.sheet-sec:first-child{border-top:0}
.sec-lbl{padding-top:12px}
.sheet h2{font:600 clamp(34px,4.2vw,58px)/1 var(--sans);letter-spacing:-.035em;margin-bottom:30px}
.index-row{display:grid;grid-template-columns:36px 1.15fr .8fr 2fr 130px;gap:20px;align-items:baseline;padding:22px 10px;border-top:1px solid rgba(17,17,17,.14);text-decoration:none;transition:background .2s}
.index-list li:last-child .index-row{border-bottom:1px solid rgba(17,17,17,.14)}
.index-row:hover{background:rgba(255,255,255,.6)}
.ir-name{font:600 22px/1.15 var(--sans);letter-spacing:-.02em}
.ir-by{font-size:14px;color:#444}
.ir-teaser{font-size:14px;line-height:1.5;color:#333}
.ir-count{justify-self:end;text-align:right}
.author-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.author-list a{display:flex;flex-direction:column;gap:8px;padding:20px 0 0;border-top:2px solid #111;text-decoration:none}
.al-name{font:600 24px/1.1 var(--sans);letter-spacing:-.02em}
.author-list a:hover .al-name{text-decoration:underline;text-underline-offset:4px}
.al-tag{font-size:14px;color:#444}
.lead{font:500 clamp(19px,1.8vw,24px)/1.4 var(--sans);letter-spacing:-.01em;max-width:46ch;margin-bottom:24px}
.cols{columns:2;column-gap:40px;max-width:820px;font-size:15px}
.cols p{margin-bottom:1em;break-inside:avoid}
.placeholder{font-family:var(--mono);font-size:12px;color:#666}
.big-mail{display:inline-flex;gap:14px;margin-top:18px;font:500 clamp(28px,4.6vw,64px)/1.05 var(--sans);letter-spacing:-.035em;text-decoration:none;border-bottom:2px solid #111;padding-bottom:6px;word-break:break-all}
.big-mail:hover{border-bottom-color:transparent}

/* footer */
.stage-footer{position:relative;background:#111;color:#e8e8e6;padding:72px 5.5vw 28px}
.sf-inner{width:min(1180px,100%);margin:0 auto;display:grid;grid-template-columns:1.2fr 2fr;gap:40px}
.sf-brand{display:inline-block;text-decoration:none}
.sf-brand:focus-visible{outline:2px solid #efeeec;outline-offset:6px}
.logo-foot{height:44px}
.sf-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.sf-cols div{display:flex;flex-direction:column;gap:8px}
.sf-cols .lbl{color:#8d8d8d;margin-bottom:6px}
.sf-cols a{font-size:14px;text-decoration:none;color:#e8e8e6}
.sf-cols a:hover{text-decoration:underline}
.sf-copy{width:min(1180px,100%);margin:64px auto 0;display:flex;justify-content:space-between;color:#8d8d8d;border-top:1px solid #2a2a2a;padding-top:16px}

/* catalog page */
.stage-page .notch-a{top:auto;bottom:16%;height:12%;width:4%}
.frame-page{padding-bottom:56px}
.stage-page{min-height:0;padding:120px 26px 80px}
.page-main{position:relative;z-index:2;padding:0 6%}
.page-h{font:600 clamp(52px,9vw,128px)/.95 var(--sans);letter-spacing:-.05em;margin:12px 0 44px}
.cat-item a{display:grid;grid-template-columns:36px 64px 1.5fr 1fr 1.1fr 110px;gap:20px;align-items:center;padding:16px 8px;border-top:1px solid rgba(17,17,17,.15);text-decoration:none}
.cat-list li:last-child a{border-bottom:1px solid rgba(17,17,17,.15)}
.cat-item a:hover{background:rgba(255,255,255,.55)}
.ci-cover img{border-radius:3px;box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
.ci-title{font:600 20px/1.15 var(--sans);letter-spacing:-.02em}
.ci-sub{display:block;font:400 13px/1.3 var(--sans);color:#555;margin-top:4px;letter-spacing:0}
.ci-by{font-size:14px}
.ci-status{justify-self:end}
.cat-note{margin-top:22px;opacity:.7}
[data-view="grid"] .cat-list{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 26px}
[data-view="grid"] .cat-item a{grid-template-columns:1fr;grid-template-areas:"cover" "title" "by" "series" "status";gap:6px;border:0;padding:0;align-items:start}
[data-view="grid"] .ci-n{display:none}
[data-view="grid"] .ci-cover{grid-area:cover;margin-bottom:10px}
[data-view="grid"] .ci-cover img{border-radius:10px}
[data-view="grid"] .ci-status{justify-self:start}
.pill{display:inline-block;border:1px solid #111;border-radius:999px;padding:10px 16px}

@media (max-width:1100px){
  .index-row{grid-template-columns:30px 1fr 110px;grid-template-areas:"n name count" "n by count" "n teaser teaser";row-gap:6px}
  .index-row>:nth-child(1){grid-area:n}.ir-name{grid-area:name}.ir-by{grid-area:by}.ir-teaser{grid-area:teaser}.ir-count{grid-area:count}
}
@media (max-width:760px){
  .frame{padding:16px 10px 28px}
  .frame-logo{margin-bottom:16px}.logo-top{height:40px}.logo-foot{height:36px}
  .edge{display:none}
  .stage{min-height:max(620px,calc(100svh - 112px))}
  .stage-bar{padding:0 14px}
  .stage-top{grid-template-columns:1fr 34px 1fr;row-gap:6px}
  .stage-top>.lbl-brand{grid-column:1}.stage-mark{grid-column:2;grid-row:1;width:24px;height:24px}
  .stage-top>:nth-child(4),.stage-top>:nth-child(5){display:none}
  .stage-top>:last-child{grid-column:3;grid-row:1}
  .view-toggle{grid-column:1;grid-row:2;margin-top:2px}
  .stage-title{top:78px;left:14px;max-width:none;right:14px}
  .st-line{font-size:14px}
  .track{padding-inline:calc(50vw - 36vw);gap:14px}
  .card-item{width:72vw}
  .card{height:min(96vw,440px)}
  .carousel{top:150px}
  .globe-scene{width:66px;height:66px;margin-left:-33px;bottom:64px}
  .stage-caption{display:none}
  .carousel-ctrl{right:auto;left:50%;transform:translateX(-50%);bottom:40px;gap:10px;display:none}
  .stage-bottom{grid-template-columns:1fr 1fr}
  .stage-bottom>:nth-child(2),.stage-bottom>:nth-child(3){display:none}
  .notch-a{width:7%;height:16%;top:24%}.notch-b{width:7%;height:14%;bottom:26%}
  [data-view="grid"].stage{padding:130px 14px 80px}
  [data-view="grid"] .track{grid-template-columns:1fr;padding:0}
  [data-view="grid"] .globe-scene{top:64px;right:14px;width:44px;height:44px}
  .sheet{width:calc(100% - 20px);padding:8px 20px 24px}
  .sheet-sec{grid-template-columns:1fr;gap:6px;padding:40px 0}
  .author-list{grid-template-columns:1fr}
  .cols{columns:1}
  .sf-inner,.sf-cols{grid-template-columns:1fr}
  .stage-page{padding:110px 14px 60px}
  .page-main{padding:0}
  .cat-item a{grid-template-columns:56px 1fr;grid-template-areas:"cover title" "cover by" "cover series" "cover status";gap:2px 14px;align-items:start}
  .ci-n{display:none}.ci-cover{grid-area:cover}.ci-title{grid-area:title}.ci-by{grid-area:by}.ci-series{grid-area:series}.ci-status{grid-area:status;justify-self:start}
  [data-view="grid"] .cat-list{grid-template-columns:1fr 1fr;gap:28px 14px}
  .sf-copy{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){.stage::before,.globe-map,.globe-scene{animation:none}.globe-map{transform:translateX(-10%)}.card{transition:none}}