:root{
  --ink:#111;
  --muted:#777;
  --gap:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:#fff;
  color:var(--ink);
  font-family:Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,a{font:inherit;color:inherit}
a{text-decoration:none}
button{border:0;background:none;padding:0}

.site-menu{
  position:fixed;
  top:14px;
  right:16px;
  z-index:60;
  display:flex;
  gap:14px;
  align-items:center;
  font-size:13px;
  line-height:1;
  mix-blend-mode:difference;
  color:#fff;
}
.site-menu a{white-space:nowrap}
.site-menu a:hover,
.site-menu a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}

.page-shell{padding:0}
.concept-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--gap);
  padding:var(--gap);
}
.concept-card{
  display:block;
  min-width:0;
  cursor:default;
}
.card-media{
  display:block;
  aspect-ratio:2/3;
  overflow:hidden;
  background:#f0f0f0;
  cursor:zoom-in;
}
.card-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  cursor:zoom-in;
}
.empty-state{min-height:100vh}

.concept-modal{
  width:100vw;
  max-width:none;
  height:100vh;
  height:100dvh;
  max-height:100vh;
  max-height:100dvh;
  margin:0;
  padding:0;
  border:0;
  color:var(--ink);
  background:rgba(255,255,255,.95);
  overflow:hidden;
}
.concept-modal::backdrop{background:transparent}
.concept-modal[open]{animation:modalIn .14s ease-out}
@keyframes modalIn{from{opacity:0}to{opacity:1}}
.modal-shell{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,30vw);
  height:100vh;
  height:100dvh;
  min-height:0;
  overflow:hidden;
  background:transparent;
}
.modal-close{
  position:fixed;
  right:16px;
  top:12px;
  z-index:80;
  width:38px;
  height:38px;
  cursor:pointer;
  font-size:31px;
  font-weight:300;
  line-height:1;
}
.viewer{
  position:relative;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) 54px;
  align-items:center;
  height:100vh;
  height:100dvh;
  min-height:0;
  padding:18px;
  overflow:hidden;
  background:transparent;
}
.image-stage{
  position:relative;
  width:100%;
  height:calc(100vh - 36px);
  height:calc(100dvh - 36px);
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:transparent;
}
.image-stage img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(100vh - 36px);
  max-height:calc(100dvh - 36px);
  object-fit:contain;
  object-position:center center;
}
.image-counter{
  position:absolute;
  left:10px;
  bottom:8px;
  font-size:11px;
  color:#555;
  background:rgba(255,255,255,.9);
  padding:4px 7px;
}
.nav-button{
  color:#111;
  font-size:28px;
  opacity:.65;
  cursor:pointer;
}
.nav-button:hover{opacity:1}
.concept-info{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:48px;
  padding:72px 30px 30px;
  background:#fff;
  border-left:1px solid rgba(0,0,0,.12);
  overflow:auto;
}
.concept-info h2{
  margin:0 0 28px;
  font-size:clamp(34px,3.2vw,58px);
  line-height:.95;
  letter-spacing:-.055em;
  font-weight:500;
}
.concept-description{
  font-size:15px;
  line-height:1.6;
  max-width:42ch;
  color:#333;
}
.concept-description p{margin:0 0 1em}
.share-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding-top:18px;
  border-top:1px solid rgba(0,0,0,.12);
}
.share-block a,.share-block button{
  font-size:clamp(25px,2.1vw,38px);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1.1;
  margin:3px 0;
  text-align:left;
  cursor:pointer;
}
.share-block a:hover,.share-block button:hover{text-decoration:underline;text-underline-offset:4px}
.share-note{display:block;min-height:18px;margin-top:10px;color:var(--muted);font-size:11px}

.realized-page{background:#fff}
.under-construction{
  min-height:100vh;
  display:grid;
  place-items:center;
}
.under-construction p{
  margin:0;
  font-size:clamp(36px,7vw,100px);
  letter-spacing:-.06em;
}

@media (max-width:900px){
  :root{--gap:5px}
  .concept-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:var(--gap)}
  .site-menu{top:11px;right:10px;gap:10px;font-size:11px}
  .modal-shell{grid-template-columns:1fr;grid-template-rows:auto auto}
  .viewer{min-height:0;height:72dvh;grid-template-columns:38px minmax(0,1fr) 38px;padding:12px 4px;overflow:hidden}
  .image-stage{width:100%;height:calc(72dvh - 24px);max-width:none;min-height:0}
  .image-stage img{max-height:calc(72dvh - 24px)}
  .concept-info{padding:30px 16px 34px;border-left:0;border-top:1px solid rgba(0,0,0,.12);overflow:visible}
  .concept-info h2{font-size:40px}
  .modal-close{top:8px;right:8px}
  .share-block a,.share-block button{font-size:28px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}