/* ---------- member tokens: the only block a new member touches ---------- */
:root{
  --ink:#000000;
  --paper:#ffffff;
  --quiet:#6f6f6f;       /* secondary text, passes 4.5:1 on white */
  --line:#e8e8e8;        /* rules in the index only */
  --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;text-transform:lowercase;-webkit-font-smoothing:antialiased}
#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-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)}
body.loading #kreis{visibility:hidden}
#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}
#loader{position:fixed;inset:0;z-index:100000;pointer-events:none}
#loader .veil{position:absolute;inset:0;background:#fff}
#loader .lg{position:fixed;left:50%;top:50%;transform-origin:50% 50%}
#loader .lg i{position:absolute;border-radius:50%;background:#000;transform:scale(0)}
#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,#kreis .views{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}
#kreis .views button{color:var(--quiet)}
#kreis .views button[aria-pressed="true"]{color:var(--ink)}

/* index view */
#kreis .index{width:100%;border-collapse:collapse;font-size:13px}
#kreis .index th{text-align:left;font-weight:400;color:var(--quiet);font-size:11px;padding:0 0 .7rem;border-bottom:1px solid var(--ink)}
#kreis .index td{padding:1rem 0;border-bottom:1px solid var(--line);vertical-align:top}
#kreis .index tr.row{cursor:pointer}
#kreis .index tr.row:hover td,#kreis .index tr.row:focus-within td{border-bottom-color:var(--ink)}
#kreis .index .no{width:8%;color:var(--quiet);position:relative}
#kreis .index .no .num{transition:opacity .2s}
#kreis .index tr.row:hover .no span{opacity:0}

#kreis .index .ti{width:30%;font-weight:500}
#kreis .index .yr{width:8%}
#kreis .index .ma{width:30%}
#kreis .index .di{text-align:right}
#kreis .index td a{display:block}
#kreis .index .di .braille{margin-left:.5rem}

/* plates view */
#kreis .plates{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s3)}
#kreis .plate img{aspect-ratio:1;object-fit:contain;width:100%;background:var(--paper);transition:transform .4s ease}
#kreis .plate:hover img{transform:scale(1.03)}
#kreis .plate .cap{display:flex;justify-content:space-between;gap:1rem;margin-top:var(--s2);font-size:13px}
#kreis .plate .cap b{font-weight:500}
#kreis .plate .sub{font-size:12px;color:var(--quiet)}
#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)}

/* ---------- single project ---------- */
#kreis .project{padding-top:var(--s4);padding-bottom:var(--s6)}
#kreis .project .back{font-size:13px;margin-bottom:var(--s5)}
#kreis .project .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s3)}
#kreis .project .media{grid-column:1 / span 7}
#kreis .project .media img{width:100%;aspect-ratio:1;object-fit:contain}
#kreis .media .shot+.shot{margin-top:var(--s3)}
#kreis .project .info{grid-column:9 / span 4;align-self:start;position:sticky;top:110px}
#kreis .project .no{font-size:13px;color:var(--quiet);margin-bottom:var(--s2)}
#kreis .project h1{font-size:clamp(24px,2.4vw,34px);font-weight:500;line-height:1.15;letter-spacing:-.01em;margin-bottom:var(--s4)}
#kreis .project .facts{margin-bottom:var(--s4);font-size:13px}
#kreis .project .desc{font-size:15px;line-height:1.75;max-width:32em}
#kreis .pager{display:flex;justify-content:space-between;margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--ink);font-size:13px}
#kreis .pager a small{display:block;color:var(--quiet);font-size:12px}
#kreis .pager a:last-child{text-align:right}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  #kreis .plates{grid-template-columns:repeat(2,1fr)}
  #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)}
  #kreis .project .media,#kreis .project .info{grid-column:1 / -1;position:static}
}
@media (max-width:640px){
  #kreis .plates{grid-template-columns:1fr}
  #kreis .index .ma,#kreis .index .yr,#kreis .index th.ma,#kreis .index th.yr{display:none}
  #kreis .index .di span{display:none}
  #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(.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}}