@import url("chrome.css");



body.home {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-x: none;
}

.home-top,
.home-foot {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  padding-inline: var(--margin);
}

.home-top {
  top: 0;
  padding-top: var(--s-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--s-2);
}
.home-top .site-title { font-size: var(--t-body); font-weight: 500; line-height: 1.1; margin: 0; }
.home-top .site-nav   { justify-self: end; }
.home-mid { margin: 0; color: var(--ink-soft); }

.home-foot {
  bottom: 0;
  padding-bottom: var(--s-2);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
}
.foot-place { grid-column: 1 / span 3; margin: 0; }
.foot-hint  { grid-column: 5 / span 3; margin: 0; color: var(--ink-soft); }
.foot-line  {
  grid-column: 8 / span 3;
  margin: 0;
  max-width: 34ch;
  font-size: var(--t-micro);
  line-height: 1.45;
  letter-spacing: 0.02em;
}
.foot-line [lang="ja"] { font-size: 0.94em; }
.foot-reach {
  grid-column: 11 / span 2;
  justify-self: end;
  display: flex;
  gap: var(--s-2);
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.foot-reach a { border-bottom-color: transparent; padding-bottom: 0.2em; }
.foot-reach a:hover,
.foot-reach a:focus-visible { border-bottom-color: var(--ink); }

.works {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: var(--ring-chrome-top);
}



.ring {
  --band:  var(--ring-band);
  --room:  min(var(--band) / 2, 50vw - var(--margin) * var(--ring-edge));
  --reach: min(var(--reach-y), var(--reach-x));                 
  --F-l:   calc(2 * var(--room) * var(--ring-focus));           
  --S-l:   calc(var(--F-l) / (1 + var(--ring-peak)));            
  --Rc:    calc(var(--reach) - var(--F-l) * 0.51);
  --reach-y: calc((var(--band) + var(--ring-chrome-top) + var(--ring-chrome-bot)
                   - var(--ring-text-top) - var(--ring-text-bot)) / 2 - var(--ring-clear));
  --shift: calc((var(--ring-chrome-bot) - var(--ring-text-bot)
                 - var(--ring-chrome-top) + var(--ring-text-top)) / 2);
  --reach-x: calc((50vw - var(--margin) * var(--ring-edge)) * var(--ring-reach));
  --szs:   calc(1 - (1 - var(--ring-small)) * (1 - var(--ring-sz, var(--ring-default-size))));
  --S:     calc(var(--S-l) * var(--szs));
  --out:   calc(var(--Rc) + var(--F-l) * var(--szs) / 2);          

  position: relative;
  top: var(--shift);                
  height: var(--band);
  -webkit-user-select: none;
          user-select: none;
}
html.ring-live .ring { background: var(--paper); }

.ring-probe {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--Rc);
  height: var(--reach-y);           
  margin-left: var(--reach-x);
  visibility: hidden;
  pointer-events: none;
}

.ring-list {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
}

.ring-item {
  --cap:  max(0px, min(var(--reach-y) - var(--Rc) * max(var(--sn), -1 * var(--sn)),
                       var(--reach-x) - var(--Rc) * max(var(--c), -1 * var(--c))));
  --side: min(var(--k) * var(--S), 2 * var(--cap));
}
.ring-link {
  position: absolute;
  z-index: var(--z, 1);
  left:   calc(50% + var(--Rc) * var(--c)  - var(--side) / 2);
  top:    calc(50% + var(--Rc) * var(--sn) - var(--side) / 2);
  width:  var(--side);
  height: var(--side);
  display: block;
  border-bottom: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}



html.ring-live .ring {
  touch-action: none;
}
html.ring-live .ring-link {
  left: calc(50% - var(--F-l) / 2);
  top: calc(50% - var(--F-l) / 2);
  width: var(--F-l);
  height: var(--F-l);
  z-index: 1;
  transform-origin: 50% 50%;
}



.ring-face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper-deep);
  container-type: inline-size;
  --corner: calc(var(--ring-rc, var(--ring-default-corners)) * var(--ring-corner-max));
  -webkit-clip-path: inset(0 round var(--corner));
          clip-path: inset(0 round var(--corner));
  transition: clip-path var(--d-fast) var(--e-out), -webkit-clip-path var(--d-fast) var(--e-out);
}
html.ring-live .ring-face[data-wait] { opacity: 0; }
html.ring-live .ring-face[data-fade] {
  transition: clip-path var(--d-fast) var(--e-out), -webkit-clip-path var(--d-fast) var(--e-out),
              opacity var(--d-base) var(--e-inout);
}

.ring-link:focus-visible { outline-offset: 3px; }
html.ring-live .ring-link:focus-visible {
  outline-width: calc(2px / var(--fs, 1));
  outline-offset: calc(3px / var(--fs, 1));
}

.ring-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  -webkit-user-drag: none;
}

.ring-logo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  pointer-events: none;
  color: var(--logo-ink);
}
.ring-lockup {
  --logo-adv: 0.68;
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 0.5em;
  max-width: 86cqi;
  margin: 0;
  font-size: min(10cqi, calc(86cqi / (var(--logo-len, 10) * var(--logo-adv))));
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.08em;
  padding-left: 0.08em;
  text-transform: none;
  text-align: center;
}
.ring-lockup[data-img] {
  flex-direction: column;
  flex-wrap: nowrap;
  row-gap: calc(var(--ring-logo-gap) * 100cqi);
  max-width: none;
  padding-left: 0;
}
@container (max-width: 69.9px) {
  .ring-lockup { opacity: 0; }
}

.ring-logo-name { white-space: normal; }
.ring-logo-break { flex-basis: 100%; height: 0; }

.ring-logo-img {
  display: block;
  flex: none;
  width: calc(min(var(--ring-logo-cap), var(--ring-logo) * var(--k, 0.7)) * var(--fx, 1) * 100cqi);
  height: auto;
  max-width: none;
  min-width: 0;
  transform: translate(calc(var(--dx, 0) * -100%), calc(var(--dy, 0) * -100%));
  filter: brightness(0) invert(1);
}



.ring-label {
  --lab-d: calc(var(--Rc) + var(--side) / 2 * var(--cs) + var(--ring-label-gap));
  --lab-h: 6.5em;
  position: absolute;
  z-index: 30;
  left: calc(50% + var(--lab-d) * var(--c));
  top: clamp((0.5 - 0.5 * var(--ls, 0)) * var(--lab-h),
             50% + var(--lab-d) * var(--sn),
             100% - (0.5 + 0.5 * var(--ls, 0)) * var(--lab-h));
  width: max-content;
  max-width: min(var(--ring-label-w), 100vw - 2 * var(--margin));
  transform: translate(calc(-50% + 50% * var(--lc, 0)), calc(-50% + 50% * var(--ls, 0)));
  margin: 0;
  font-size: var(--fs-ring-label);
  line-height: 1.4;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  text-align: var(--la, center);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ring-label-fade) var(--e-inout);   
}
.ring-n     { display: block; margin-bottom: 0.9em; font-variant-numeric: tabular-nums; }
.ring-title { display: block; }
.ring-meta  { display: block; }

html:not(.ring-live) .ring-item:hover .ring-label,
html:not(.ring-live) .ring-item:focus-within .ring-label { opacity: 1; }

@media (max-aspect-ratio: 3/4) {
  html:not(.ring-live) .ring-label {
    left: 50%;
    top: var(--s-1);
    transform: translate(-50%, 0);
    text-align: center;
  }
}
@media (max-height: 500px) and (min-aspect-ratio: 3/2) {
  html:not(.ring-live) .ring-label {
    left: var(--margin);
    top: 50%;
    max-width: calc(50% - var(--out) - var(--margin) - var(--s-2));
    transform: translate(0, -50%);
    text-align: left;
  }
}

html.ring-live .ring-label {
  left: 0;
  top: 0;
  max-width: var(--lab-w, var(--ring-label-w));
  transform: none;
}
html.ring-live .ring-item[data-label] .ring-label {
  opacity: 1;
}

.ring-sliders { display: none; }
html.ring-live .ring-sliders {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  row-gap: 0;
  pointer-events: none;
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
}
.rs {
  --rs-len: clamp(var(--ring-slider-min),
                  2 * var(--ring-slider-len) * var(--Rc) - 12 * var(--t-micro),
                  100vw - 2 * var(--margin) - 12 * var(--t-micro));
  position: relative;
  padding-block: calc(var(--ring-slider-gap) / 2);
  pointer-events: auto;
}
.rs-row {
  position: relative;
  display: grid;
  grid-template-columns: 5.2em auto 5.2em;
  align-items: center;
  column-gap: 0.8em;
  min-height: 24px;            
}
.rs-end {
  --rs-ink: 1;
  position: relative;
  z-index: 33;
  line-height: 1;
  color: color-mix(in srgb, var(--ring-sw-blend) calc(var(--rs-ink) * 100%), transparent);
  mix-blend-mode: difference;
  cursor: var(--cursor-pick);
}
.rs-end:first-child {
  --rs-ink: calc(1 - (1 - var(--ring-sw-soft)) * var(--rv, 0));
  text-align: right;
}
.rs-end:last-child {
  --rs-ink: calc(var(--ring-sw-soft) + (1 - var(--ring-sw-soft)) * var(--rv, 0));
  text-align: left;
}

.rs-input {
  --fill: calc(var(--ring-slider-thumb) / 2 + (100% - var(--ring-slider-thumb)) * var(--rv, 0));
  position: relative;
  z-index: 33;
  -webkit-appearance: none;
          appearance: none;
  display: block;
  width: var(--rs-len);
  height: 24px;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--ring-sw-blend);
  mix-blend-mode: difference;
  cursor: var(--cursor-pick);
  touch-action: none;
}
.rs-input::-webkit-slider-runnable-track {
  height: 0.5rem;
  border: 0;
  background:
    linear-gradient(currentColor, currentColor) 0 50% / var(--fill) var(--hairline) no-repeat,
    linear-gradient(var(--ring-sw-track), var(--ring-sw-track)) 0 50% / 100% var(--hairline) no-repeat;
}
.rs-input::-moz-range-track {
  height: 0.5rem;
  border: 0;
  background:
    linear-gradient(currentColor, currentColor) 0 50% / var(--fill) var(--hairline) no-repeat,
    linear-gradient(var(--ring-sw-track), var(--ring-sw-track)) 0 50% / 100% var(--hairline) no-repeat;
}
.rs-input::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: var(--ring-slider-thumb);
  height: 0.5rem;
  border: 0;
  border-radius: 0.25rem;
  background: currentColor;
}
.rs-input::-moz-range-thumb {
  width: var(--ring-slider-thumb);
  height: 0.5rem;
  border: 0;
  border-radius: 0.25rem;
  background: currentColor;
}
.rs-input:focus { outline: none; }
.rs-input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 372px) {
  html.ring-live .ring-sliders { font-size: clamp(8px, calc(var(--Rc) * 0.10917), var(--t-micro)); }
  .rs { --rs-len: min(var(--ring-slider-min), calc(var(--Rc) * 0.52402)); }
}



html.ring-opening .works { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html.ring-opening .works { opacity: 1; pointer-events: auto; }
}



@media (max-width: 760px) {
  .home-foot {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--s-1);
  }
  .foot-line  { display: none; }
  .foot-place { grid-column: 1; grid-row: 1; }
  .foot-reach { grid-column: 2; grid-row: 1; }
  .home-foot { align-items: last baseline; }
  .foot-hint  { display: none; }
}
@media (max-width: 900px) {
  .home-top { grid-template-columns: minmax(0, 1fr) auto; }
  .home-mid { display: none; }
}
@media (max-width: 372px) {
  .home-top { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-1); }
  .home-top .site-nav { justify-self: start; }
}