/* cover.css — Inline-Stylesheet aus Lilys Entwurf culture-site/index.html, unveraendert bis auf CSS_PATCHES (fh-book-convert). */
/* Schriften: dieselben Schnitte wie Lilys Google-Fonts-Anfrage, selbst gehostet (fh-book-convert). */
@font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/spectral-500.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Spectral";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/spectral-600.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/manrope-300-800.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-300-800.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/manrope-300-800.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/manrope-300-800.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Ab hier aus dem Entwurf. */
:root{
  --field:#0E1A26;        /* the page = the video background; keep identical (kickoff ground) */
  --field-deep:#08111A;
  --field-lift:#16283A;
  --ivory:#F4F1EA;
  --mist:#D3DEEA;         /* lede */
  --haze:#A9BDD2;         /* secondary text, tinted from the field */
  --dim:#97ADC4;          /* inactive items */
  --cn:#B02329;
  --de:#1B3A5C;
  --paper:#F3F4F1;
  --ink:#111820;
  --ink-soft:#4C554F;
  --de-pale:#A6C4DE;
  --display:"Spectral",Georgia,"Songti SC",serif;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(1rem,4vw,3.5rem);
  --t-size:min(64vh,44vw);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:112.5%;-webkit-text-size-adjust:100%;scrollbar-color:var(--de-pale) var(--field-deep);}
body{margin:0;background:var(--field);color:var(--ivory);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;}
::selection{background:var(--cn);color:#fff;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--ivory);outline-offset:4px;border-radius:6px;}

/* ---------- cover ---------- */
.cover{position:relative;min-height:100svh;background:radial-gradient(52vmax 52vmax at 72% 50%,var(--field-lift) 0%,transparent 70%),var(--field);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;overflow:hidden;isolation:isolate;}

/* media layer: full-bleed, sits where the video will play */
.cover-media{position:absolute;inset:0;z-index:-1;}
.cover-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.taiji-stage{position:absolute;top:50%;right:calc(var(--gutter) + 3vw);width:var(--t-size);height:var(--t-size);translate:0 -50%;
  filter:drop-shadow(0 28px 44px rgba(6,15,27,.5));}
.taiji-stage svg{width:100%;height:100%;display:block;}
.taiji-stage .spin{transform-origin:0 0;animation:spin 40s linear infinite;}
.taiji-stage .cnEye{transform-origin:50px 0;animation:spinBack 40s linear infinite;}
.taiji-stage .deEye{transform-origin:-50px 0;animation:spinBack 40s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes spinBack{to{transform:rotate(-360deg);}}

/* light, vignette and grain over the media (also tones the video) */
.cover::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120vmax 90vmax at 50% 50%,transparent 60%,rgba(3,8,13,.5) 100%);}
.cover::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.wrap{width:100%;max-width:92rem;margin:0 auto;padding-inline:var(--gutter);}

/* top bar */
.bar{display:flex;align-items:center;gap:clamp(1rem,3vw,2.6rem);padding-block:clamp(1rem,2.6vh,1.6rem);}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:700;font-size:.92rem;letter-spacing:.005em;margin-right:auto;}
.brand svg{width:1.45rem;height:1.45rem;flex:none;}
.menu{display:flex;gap:clamp(1rem,2.2vw,1.9rem);}
.menu a{font-size:.86rem;font-weight:600;color:var(--haze);text-decoration:none;transition:color .2s;}
.menu a:hover{color:var(--ivory);text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px;}
.lang{display:flex;gap:.2rem;font-size:.8rem;font-weight:700;}
.lang :is(button,a){font:inherit;color:var(--dim);background:none;border:0;padding:.35rem .5rem;border-radius:100px;cursor:pointer;transition:color .2s,background-color .2s;}
.lang :is(button,a):hover{color:var(--ivory);background:rgba(244,241,234,.08);}
.lang :is(button,a)[aria-current]{color:var(--ivory);cursor:default;background:none;}

/* headline block */
.stage{display:flex;align-items:center;}
.cover-text{width:min(46rem,54%);container-type:inline-size;padding-block:clamp(1rem,3.5vh,2.8rem);}
h1{font-family:var(--display);font-weight:600;font-size:clamp(1.35rem,5.9cqi,2.9rem);line-height:1.08;letter-spacing:-.022em;margin:0 0 clamp(1.1rem,3vh,1.7rem);text-wrap:balance;}
h1 span{display:block;white-space:nowrap;}
h1 .l1{font-size:1.6em;line-height:1;margin-bottom:.12em;}
h1 .l2{width:fit-content;background:linear-gradient(100deg,#E24A4F,#B15C86 48%,#5B93D6);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em;}
.lede{font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.5;color:var(--mist);max-width:37rem;margin:0 0 .55rem;text-wrap:balance;}
.keys{display:flex;flex-wrap:wrap;gap:.3rem .6rem;margin:0 0 clamp(1.3rem,3.4vh,1.9rem);font-size:.9rem;font-weight:700;color:var(--de-pale);}
.keys span + span::before{content:"·";margin-right:.6rem;color:var(--haze);font-weight:400;}
.meta{font-size:.8rem;font-weight:600;color:var(--haze);margin:clamp(.8rem,2vh,1.2rem) 0 0;}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.6rem;}
.btn-primary{display:inline-flex;align-items:center;gap:.85rem;padding:.5rem .55rem .5rem 1.35rem;border-radius:100px;background:var(--ivory);color:var(--field-deep);font-weight:800;font-size:.95rem;text-decoration:none;
  box-shadow:0 10px 26px rgba(6,15,27,.35);transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);}
.btn-primary .chip{width:2.1rem;height:2.1rem;border-radius:50%;background:var(--cn);display:grid;place-items:center;transition:transform .35s var(--ease-out);}
.btn-primary .chip svg{width:1rem;height:1rem;color:#fff;}
.btn-primary{position:relative;}
.btn-primary::before,.btn-primary::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:beacon 2.8s cubic-bezier(.2,.6,.3,1) infinite;}
.btn-primary::after{animation-delay:1.4s;}
@keyframes beacon{0%{box-shadow:0 0 0 0 rgba(244,241,234,.55),0 0 18px 2px rgba(226,74,79,.35);opacity:1;}100%{box-shadow:0 0 0 18px rgba(244,241,234,0),0 0 34px 10px rgba(226,74,79,0);opacity:0;}}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(6,15,27,.45);}
.btn-primary:hover .chip{transform:translateX(3px);}

/* three doors under Start reading */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:clamp(1.1rem,2.8vh,1.6rem);}
.door{display:flex;flex-direction:column;gap:.15rem;min-width:0;padding:.5rem .7rem .55rem;border-radius:10px;text-decoration:none;color:var(--ivory);background:rgba(244,241,234,.035);transition:background-color .25s;}
.door:hover{background:rgba(244,241,234,.08);}
.door-head{font-size:.8rem;font-weight:700;line-height:1.3;}
.door-list{font-size:.66rem;line-height:1.45;color:var(--haze);white-space:nowrap;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 50%,transparent 98%);mask-image:linear-gradient(90deg,#000 50%,transparent 98%);}
.meta-row{display:flex;align-items:center;gap:.8rem;margin-top:clamp(1.2rem,3vh,1.7rem);}
.faces{display:flex;flex:none;text-decoration:none;}
.faces img{width:2rem;height:2rem;border-radius:50%;object-fit:cover;border:2px solid var(--field);margin-left:-.5rem;background:var(--field-lift);transition:transform .25s var(--ease-out);}
.faces img:first-child{margin-left:0;}
.faces:hover img{transform:translateY(-2px);}
.meta-row .meta{margin:0;}

/* ---------- authors ---------- */
.authors-sec{background:var(--paper);color:var(--ink);padding-block:clamp(3.6rem,10vh,6.8rem) clamp(4rem,11vh,7.5rem);}
.authors-sec ::selection{background:var(--de);color:#fff;}
.authors-sec :focus-visible{outline-color:var(--de);}
.authors-sec h2{font-family:var(--display);font-weight:600;font-size:clamp(2.1rem,3.6vw,3.1rem);line-height:1.05;letter-spacing:-.018em;margin:0 0 .75rem;}
.authors-intro{font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.55;color:var(--ink-soft);max-width:36rem;margin:0 0 clamp(2.2rem,5vh,3.2rem);text-wrap:balance;}
.person{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.15rem;align-items:start;}
.person img{width:4.8rem;height:4.8rem;border-radius:50%;object-fit:cover;background:#E1E3DC;box-shadow:0 6px 16px rgba(17,24,32,.12);}
.author-group + .author-group{margin-top:clamp(2.8rem,7vh,4rem);}
.group-title{font-family:var(--sans);font-weight:800;font-size:.95rem;letter-spacing:.01em;color:var(--de);margin:0 0 1.4rem;}
.author-row,.coauthors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2.5rem,6vw,5.5rem);}
.coauthors{row-gap:clamp(2.2rem,5vh,3rem);}
.author-row .author-group + .author-group{margin-top:0;}
.author-row + .author-group{margin-top:clamp(2.8rem,7vh,4rem);}
.contribute{margin:0;font-size:1.02rem;line-height:1.6;color:var(--ink-soft);max-width:52rem;}
.contribute strong{color:var(--ink);font-weight:700;}
.contribute a{color:var(--de);font-weight:700;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px;text-decoration-color:rgba(27,58,92,.4);}
.contribute a:hover{text-decoration-color:var(--de);}
.p-name{font-family:var(--display);font-weight:600;font-size:1.32rem;line-height:1.2;margin:0;}
.p-name .zh{font-family:var(--sans);font-weight:600;font-size:.82rem;color:var(--ink-soft);margin-left:.5rem;letter-spacing:.04em;}
.p-role{font-size:.82rem;font-weight:700;color:var(--de);margin:.3rem 0 .55rem;}
.p-bio{font-size:.95rem;line-height:1.6;color:var(--ink-soft);margin:0 0 .8rem;text-align:justify;hyphens:auto;}
.p-bio cite{font-style:italic;}
.p-links{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:0;}
.p-web{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:700;color:var(--de);text-decoration:none;padding:.32rem .75rem .32rem .55rem;border-radius:100px;background:#E8EEF4;transition:background-color .2s,color .2s;}
.p-web svg{width:1rem;height:1rem;flex:none;}
.p-web:hover{background:#D6E2EE;}
.p-li{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:6px;transition:transform .2s var(--ease-out),opacity .2s;}
.p-li svg{width:1.45rem;height:1.45rem;}
.p-li:hover{transform:translateY(-2px);}
@media (max-width:820px){
  .author-row,.coauthors{grid-template-columns:1fr;row-gap:2.2rem;}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* toast for DE / 中文 */
.toast{position:fixed;left:50%;bottom:1.6rem;translate:-50% 1rem;opacity:0;pointer-events:none;background:var(--ivory);color:var(--field-deep);font-weight:700;font-size:.85rem;padding:.6rem 1.1rem;border-radius:100px;
  box-shadow:0 12px 28px rgba(6,15,27,.4);transition:opacity .3s,translate .45s var(--ease-out);}
.toast.show{opacity:1;translate:-50% 0;}

/* the settle moment: text arrives once the taiji has formed */
@keyframes rise{from{opacity:0;translate:0 14px;filter:blur(8px);}to{opacity:1;translate:0 0;filter:blur(0);}}
@keyframes form{from{opacity:0;scale:.9;}to{opacity:1;scale:1;}}
.settled .taiji-stage{animation:form 1.6s var(--ease-out) both;}
.settled .cover-text > *{animation:rise 1.1s var(--ease-out) both;}
.settled h1 span{animation:rise 1.1s var(--ease-out) both;}
.settled h1 span:nth-child(1){animation-delay:.3s;}
.settled h1 span:nth-child(2){animation-delay:.42s;}
.settled h1{animation:none;}
.settled .lede{animation-delay:.8s;}
.settled .keys{animation-delay:.9s;}
.settled .doors{animation-delay:1.3s;}
.settled .meta-row{animation-delay:1.15s;}
.settled .actions{animation-delay:1.1s;}
.js .cover.waiting .cover-text{opacity:0;}
@media (prefers-reduced-motion:reduce){
  .btn-primary::before,.btn-primary::after{animation:none;opacity:0;}
  .taiji-stage .spin,.taiji-stage .cnEye,.taiji-stage .deEye,.settled .taiji-stage,.settled .cover-text > *,.settled h1 span{animation:none;}
}

/* ---------- smaller screens ---------- */
@media (max-width:960px){
  .menu{display:none;}
}
@media (max-width:820px){
  :root{--t-size:min(66vw,38vh);}
  .cover{background:radial-gradient(70vmax 70vmax at 50% 26%,var(--field-lift) 0%,transparent 62%),var(--field);}
  .taiji-stage{top:calc(var(--t-size) / 2 + 12vh);right:50%;translate:50% -50%;}
  .stage{align-items:flex-end;}
  .cover-text{max-width:none;padding-top:calc(var(--t-size) + 6vh);padding-bottom:1.2rem;}
  h1{font-size:clamp(1.9rem,8vw,2.6rem);}
  .cover-text{width:auto;container-type:normal;}
  h1 span{white-space:normal;}
  h1 .l1{font-size:1.3em;white-space:nowrap;}
  .doors{grid-template-columns:1fr;}
  .meta-row{flex-direction:column;align-items:flex-start;gap:.6rem;}
  .p-bio{text-align:left;hyphens:manual;}
  .bar{gap:.8rem;}
  .brand{font-size:.8rem;line-height:1.25;min-width:0;}
  .lang{flex:none;}
  .lang :is(button,a){padding:.3rem .38rem;}
}

/* ---------- be part of the project ---------- */
.inv-sec{background:var(--paper);color:var(--ink);padding-block:0 clamp(4rem,11vh,7rem);margin-top:-2px;position:relative;}
.authors-sec{padding-bottom:clamp(2.8rem,7vh,4.4rem);}
.inv-sec h2{font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.08;letter-spacing:-.015em;margin:0 0 .6rem;}
.inv-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;}
.inv-card{display:flex;flex-direction:column;gap:.35rem;text-decoration:none;color:var(--ink);padding:1.1rem 1.15rem 1.2rem;border:1.5px solid transparent;border-radius:16px;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#B02329,#1B3A5C) border-box;box-shadow:0 1px 2px rgba(17,24,32,.04),0 18px 40px -26px rgba(17,24,32,.28);transition:transform .2s ease,box-shadow .2s ease;}
.inv-card:hover{transform:translateY(-2px);box-shadow:0 2px 6px rgba(17,24,32,.05),0 30px 60px -32px rgba(17,24,32,.34);}
.inv-card b{font-size:1rem;line-height:1.3;}
.inv-card span{font-size:.86rem;line-height:1.45;color:var(--ink-soft);}
.inv-ic{width:2.1rem;height:2.1rem;padding:.45rem;border-radius:9px;background:linear-gradient(135deg,#F7E9E8,#E8EEF4);color:#1B3A5C;margin-bottom:.45rem;}
@media(max-width:900px){.inv-cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.inv-cards{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){.inv-card{transition:none;}}

/* compact cards: icon on the left, text on the right */
.inv-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.75rem;row-gap:.15rem;align-items:start;align-content:start;padding:.85rem 1rem .9rem;}
@media(max-width:1100px){.inv-cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.inv-cards{grid-template-columns:1fr;}}
.inv-ic{grid-row:1 / span 2;width:1.9rem;height:1.9rem;padding:.4rem;margin:0;}
.inv-card b{font-size:.95rem;line-height:1.3;}
.inv-card span{font-size:.82rem;line-height:1.4;}

/* subscribe pill in the cover bar */
.sub-pill{display:inline-flex;align-items:center;gap:.4rem;flex:none;font-size:.82rem;font-weight:700;color:var(--ivory);text-decoration:none;
  padding:.42rem .85rem .42rem .7rem;border-radius:100px;border:1px solid rgba(244,241,234,.35);transition:background-color .2s,border-color .2s;}
.sub-pill svg{width:.95rem;height:.95rem;}
.sub-pill:hover{background:rgba(244,241,234,.1);border-color:rgba(244,241,234,.6);}
@media(max-width:820px){.sub-pill span{display:none;}.sub-pill{padding:.42rem;}}

/* floating "Start reading": appears once the cover button has scrolled out of view */
.read-fab{position:fixed;right:clamp(1rem,2.5vw,1.8rem);bottom:clamp(1rem,2.5vw,1.8rem);z-index:60;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-width:9rem;font-size:.84rem;font-weight:700;color:#fff;text-decoration:none;padding:.6rem 1rem;border-radius:100px;
  background:linear-gradient(135deg,#B02329,#1B3A5C);box-shadow:0 10px 24px -10px rgba(6,15,27,.6);
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s ease,transform .3s ease,box-shadow .2s ease;}
.read-fab svg{width:1rem;height:1rem;}
.read-fab.on{opacity:1;transform:none;pointer-events:auto;}
.read-fab.on:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(6,15,27,.65);}
@media(prefers-reduced-motion:reduce){.read-fab{transition:none;}}