/* ---------- member tokens: the only block a new member touches ---------- */
:root{
  --ink:#000000;
  --paper:#ffffff;
  --quiet:#6f6f6f;       /* secondary text, passes 4.5:1 on white */
  --font:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;

  /* dot system, taken from the logo grid: pitch = 1.43 × dot, cell gap = 1.87 × dot */
  --dot:6px;
  --pitch:calc(var(--dot) * 1.43);
  --cellgap:calc(var(--dot) * 1.87);

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:7rem; --s7:10rem;
  --gutter:clamp(1.25rem,4vw,3rem);
  --max:1440px;
}
#kreis,#kreis *{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
#kreis{background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:400;font-size:14px;font-variant-numeric:tabular-nums;line-height:1.6;-webkit-font-smoothing:antialiased}
#kreis :is(h1,h2,h3,nav,button,.lang,.logo,.lenscap,.filters,.facts dt){text-transform:lowercase}
html[lang|="zh"] #kreis{--font:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif}
#kreis a{color:inherit;text-decoration:none}
#kreis button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-transform:inherit}
#kreis img{display:block;max-width:100%;height:auto}
#kreis :focus-visible{outline:2px solid var(--ink);outline-offset:4px}
#kreis .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
#kreis .quiet{color:var(--quiet)}
#kreis .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- the dot ---------- */
#kreis .dot{display:inline-block;width:var(--dot);height:var(--dot);border-radius:50%;background:var(--ink);flex:none}
#kreis .mark{position:relative;padding-left:calc(var(--dot) + .6em)}
#kreis .mark::before{content:"";position:absolute;left:0;top:50%;width:var(--dot);height:var(--dot);margin-top:calc(var(--dot) / -2);border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .2s ease}
#kreis .mark:hover::before,#kreis .mark[aria-current="true"]::before,#kreis .mark[aria-current="page"]::before,#kreis .mark[aria-pressed="true"]::before{transform:scale(1)}
#kreis .braille{display:inline-block;vertical-align:middle}
#kreis .braille circle{fill:var(--ink)}
#kreis .divider{height:var(--dot);background:radial-gradient(circle,var(--ink) calc(var(--dot)/2),transparent calc(var(--dot)/2 + .5px)) left center/calc(var(--dot)*4) var(--dot) repeat-x;width:calc(var(--dot)*4*3);margin:var(--s6) 0 var(--s4)}

/* ---------- header ---------- */
#kreis .bar{position:sticky;top:0;z-index:20;background:var(--paper)}
#kreis .bar .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px}
#kreis .bar .logo{display:flex;align-items:center;gap:.9rem;justify-self:start}
#kreis .bar .logo span{font-weight:500}
#kreis .bar nav,#kreis .bar .logo{font-size:13px}
#kreis .bar nav{display:flex;gap:var(--s4)}
#kreis .lang{display:flex;gap:var(--s3);justify-self:end;font-size:12px}
#kreis .lang button,#kreis .lang a{color:var(--quiet)}
#kreis .lang [aria-current="true"]{color:var(--ink)}

/* ---------- intro ---------- */
#kreis .intro{padding:var(--s6) 0 var(--s7);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s3);align-items:end}
#kreis .intro .big{grid-column:1 / span 6}

/* lens logo: every dot is a camera lens */
#kreis .lensbox{position:relative;width:min(100%,520px)}
#kreis .lens{position:absolute;display:block;border-radius:50%;background:var(--paper);overflow:hidden;isolation:isolate}
#kreis .lens .par{position:absolute;inset:-10%;background:var(--paper)}
#kreis .lens .zoom{position:absolute;inset:0;will-change:transform}
#kreis .lens img{width:100%;height:100%;object-fit:cover}
/* aperture: fourteen curved blades, drawn per frame in js. shading lives in the shared #lens-defs */
#kreis .lens .ap{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;clip-path:circle(49.6% at 50% 50%)}
#kreis .lens .blades path{fill-rule:evenodd}
#kreis .lens .seams{fill:none;stroke:#000;stroke-width:.5;stroke-linecap:round}
#kreis .lens .seams-lit{fill:none;stroke:#fff;stroke-width:.25;stroke-linecap:round;opacity:.16;transform:translate(.3px,.3px)}
#kreis .lens .hole{fill:none;stroke:#000;stroke-width:.7;opacity:.4}
#kreis .lens .bevel{fill:none;stroke:#fff;stroke-width:.35;opacity:.28;transform:translate(-.25px,-.25px)}
#kreis .lens .facets path{fill:#fff}
#kreis .lens .shade{fill:none;stroke:#000;stroke-width:1.6;opacity:.35;transform:translate(-.7px,-.7px)}
#kreis .lens .coat{pointer-events:none}
#kreis .lens .glint-arc{fill:none;stroke:#fff;stroke-width:.5;stroke-linecap:round;opacity:.3}
#kreis .lens .glint-arc.low{opacity:.14}
/* brushed barrel: a slow sweep of light around the black ring */
#kreis .lens .barrel{position:absolute;inset:0;border-radius:50%;pointer-events:none;transition:opacity .5s;
  background:conic-gradient(from 10deg,#fff0 0deg,#ffffff26 35deg,#fff0 80deg,#fff0 170deg,#ffffff14 215deg,#fff0 260deg,#fff0 360deg);
  -webkit-mask:radial-gradient(circle closest-side,#0000 94.4%,#000 95%,#000 99.2%,#0000 100%);mask:radial-gradient(circle closest-side,#0000 94.4%,#000 95%,#000 99.2%,#0000 100%)}
#kreis a.lens:hover .barrel,#kreis a.lens:focus-visible .barrel{opacity:0}
#kreis .lens .edge{fill:none;stroke:#fff;stroke-width:2.4;opacity:.028;transform:translate(.9px,.9px)}
#kreis .lens .ticks line{stroke:#fff;stroke-width:.22;opacity:.16}
#kreis .lens .glass{pointer-events:none}
#kreis .lens .spec{fill:#fff;opacity:.3}
#kreis .lens .rim{fill:none;stroke:#fff;stroke-width:.4;opacity:.1}
#kreis .lens .ring{fill:none;stroke:var(--ink);stroke-width:3;transition:stroke-width .6s cubic-bezier(.3,1,.4,1)}
#kreis a.lens:hover .ring,#kreis a.lens:focus-visible .ring{stroke-width:1.4}
#kreis .lens:focus-visible{outline-offset:6px}
#kreis .lenscap{margin-top:var(--s3);font-size:12px;min-height:1.6em;color:var(--quiet)}
#kreis .lenscap b{font-weight:500;color:var(--ink);margin-left:.6em}

/* loader */
body.loading #kreis{overflow:hidden}
/* the loader. the markup comes from the page, see inc/front.php */
#kreis-loader{position:fixed;inset:0;z-index:2147483000;pointer-events:none;animation:kreis-off 0s linear 1.4s forwards}
@keyframes kreis-off{to{opacity:0;visibility:hidden}}
#kreis-loader.js{animation:none}
#kreis-loader .kreis-veil{position:absolute;inset:0;background:#fff}
#kreis-loader .kreis-lg{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%)}
#kreis-loader .kreis-lg svg{display:block}
#kreis-loader .kreis-lg circle{fill:#000;transform:scale(0);transform-box:fill-box;transform-origin:50% 50%}
/* the page waits behind the white sheet until the dots have landed */

#kreis .intro .text{grid-column:8 / span 5}
#kreis .intro h1{font-size:clamp(28px,3.2vw,44px);font-weight:500;line-height:1.15;letter-spacing:-.01em;margin-bottom:var(--s3)}
#kreis .intro .line{font-size:clamp(17px,1.4vw,20px);line-height:1.5;max-width:30em;margin-bottom:var(--s4)}
#kreis .facts{display:grid;grid-template-columns:auto 1fr;gap:.35rem var(--s3);font-size:13px}
#kreis .facts dt{color:var(--quiet)}

/* ---------- work ---------- */
#kreis .section-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
#kreis h2{font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:-.005em}
#kreis h2 small{font-size:12px;font-weight:400;color:var(--quiet);margin-left:.8em}
#kreis .controls{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font-size:12px;margin-bottom:var(--s3)}
#kreis .filters{display:flex;gap:var(--s3);flex-wrap:wrap}
#kreis .filters button{display:inline-flex;align-items:center;gap:.55rem;color:var(--quiet)}
#kreis .filters button[aria-pressed="true"],#kreis .filters button:hover{color:var(--ink)}
#kreis .filters .braille circle{fill:currentColor}

/* work grid: every image keeps its own proportions, nothing is cropped */
#kreis .plates{columns:3;column-gap:var(--s3)}
#kreis .plate{break-inside:avoid;margin:0 0 var(--s5);position:relative}
#kreis .plate img{width:100%;height:auto;background:var(--paper)}
#kreis .plate figcaption{margin-top:.7rem;font-size:12px;color:var(--quiet);opacity:0;transition:opacity .3s}
#kreis .plate.has-cap:hover figcaption,#kreis .plate.has-cap:focus-visible figcaption{opacity:1}
@media (hover:none){#kreis .plate.has-cap figcaption{opacity:1}}
#kreis .plate:target img{outline:1px solid var(--ink);outline-offset:6px}
#kreis .empty{padding:var(--s5) 0;max-width:34em;font-size:17px}

/* ---------- about ---------- */
#kreis .about{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s3)}
#kreis .about .head{grid-column:1 / span 4}
#kreis .about .body{grid-column:5 / span 5;font-size:15px;line-height:1.7}
#kreis .about .body p+p{margin-top:1.1em}
#kreis .disc{grid-column:5 / span 8;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s5);font-size:12.5px}
#kreis .disc b{display:flex;align-items:center;gap:.6rem;font-weight:500;margin-bottom:.4rem}

/* ---------- contact ---------- */
#kreis .contact{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s3);padding-bottom:var(--s6)}
#kreis .contact .head{grid-column:1 / span 4}
#kreis .contact .body{grid-column:5 / span 8}
#kreis .contact .mail{font-size:clamp(22px,2.8vw,38px);font-weight:500;letter-spacing:-.015em;line-height:1.1;display:inline-block;border-bottom:2px solid var(--ink)}
#kreis .contact .mail:hover{border-bottom-color:transparent}
#kreis .contact ul{list-style:none;display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s4);font-size:13px}

#kreis footer{font-size:11.5px;color:var(--quiet)}
#kreis footer .wrap{display:flex;justify-content:space-between;gap:var(--s3);padding-top:var(--s3);padding-bottom:var(--s4);flex-wrap:wrap}
#kreis footer a{color:var(--ink)}
#kreis footer nav{display:flex;gap:var(--s3)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  #kreis .plates{columns:2}
  #kreis .intro .big{grid-column:1 / -1}
  #kreis .intro .text{grid-column:1 / -1;margin-top:var(--s4)}
  #kreis .about .head,#kreis .about .body,#kreis .disc,#kreis .contact .head,#kreis .contact .body{grid-column:1 / -1}
  #kreis .disc{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  #kreis .plates{columns:1}
  #kreis .disc{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){#kreis,#kreis *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* jump links land below the sticky bar */
#kreis section{scroll-margin-top:96px}
/* mobile and tablet: no menu, the page is one scroll.
   the language sits in the bar as "• en". tap it and the other languages
   open in the same line, the name steps aside. no box, no arrow */
#kreis .lang-m{display:none;justify-self:end}
@media (max-width:1000px){
  #kreis .bar .wrap{grid-template-columns:1fr auto;height:60px}
  #kreis .bar nav,#kreis .bar .lang:not(.langlist){display:none}
  #kreis .lang-m{display:block;font-size:13px}
  #kreis .lang-cur::before{transform:scale(1)}
  #kreis .langlist{display:none;gap:var(--s3)}
  #kreis .lang-m.open .lang-cur{display:none}
  #kreis .lang-m.open .langlist{display:flex}
  #kreis .langlist button,#kreis .langlist a{display:block;color:var(--quiet);padding-top:.6rem;padding-bottom:.6rem}
  #kreis .langlist [aria-current="true"]{color:var(--ink)}
  #kreis .lang-cur{padding-top:.6rem;padding-bottom:.6rem}
  #kreis .lang-m button:focus-visible{outline:none;text-decoration:underline;text-underline-offset:4px}
  #kreis .bar .logo>span+span{transition:opacity .25s}
  #kreis .bar.lang-open .logo>span+span{opacity:0}
  @media (prefers-reduced-motion:no-preference){
    #kreis .lang-m.open .langlist a{animation:kreis-langin .35s cubic-bezier(.2,.8,.2,1) both}
    #kreis .lang-m.open .langlist a:nth-child(2){animation-delay:.04s}
    #kreis .lang-m.open .langlist a:nth-child(3){animation-delay:.08s}
    #kreis .lang-m.open .langlist a:nth-child(4){animation-delay:.12s}
  }
}
/* touch screens keep hover after a tap, so dots only mark the real state there */
@media (hover:none){#kreis .mark:hover:not([aria-pressed="true"]):not([aria-current="true"]):not([aria-current="page"]):not(.lang-cur)::before{transform:scale(0)}}
@keyframes kreis-langin{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
/* wordpress: keep the theme's heading and link styles out */
#kreis :is(h1,h2,h3,p,a,li,dt,dd,span,button,figure){font-family:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
#kreis a:hover{color:inherit}
/* wordpress: break out of the theme container, sit below the admin bar */
#kreis{width:100vw;margin-left:calc(50% - 50vw);position:relative}
.admin-bar #kreis .bar{top:32px}
@media (max-width:782px){.admin-bar #kreis .bar{top:46px}}

/* ---------- world: the endless board, full width between work and about ---------- */
#kreis .world .section-head{margin-bottom:var(--s3)}
#kreis .board{position:relative;height:clamp(460px,82vh,920px);overflow:clip;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
#kreis .board.dragging{cursor:grabbing}
#kreis .board:focus-visible{box-shadow:inset 0 0 0 2px var(--ink)}
#kreis .tile{position:absolute;left:0;top:0;padding:0;display:block;opacity:0;transition:opacity .8s ease;will-change:transform;cursor:inherit}
#kreis .tile.in{opacity:1}
#kreis .tile img,#kreis .tile video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
#kreis .tile:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
#kreis .worldcap{margin-top:var(--s3);font-size:12px;min-height:1.6em;color:var(--quiet)}
#kreis .worldcap b{font-weight:500;color:var(--ink)}
#kreis .board .plain{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s3);padding:0 var(--gutter);overflow:auto;height:100%}
@media (max-width:640px){#kreis .board{height:clamp(420px,70vh,640px)}}
/* a closer look */
#kreis .look{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;background:var(--paper);color:var(--ink)}
#kreis .look::backdrop{background:var(--paper)}
#kreis .look[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2)}
#kreis .look-media{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;padding:var(--s5) var(--gutter) 0}
#kreis .look-media img,#kreis .look-media video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
#kreis .look-cap{font-size:12px;min-height:1.6em;padding-bottom:var(--s3)}
#kreis .look-close{position:absolute;top:var(--s3);right:var(--gutter);font-size:13px}
@media (prefers-reduced-motion:no-preference){#kreis .look[open]{animation:kreis-look .35s ease both}}
@keyframes kreis-look{from{opacity:0}to{opacity:1}}