.lb, .cx{
  --ink:#2A2620;
  --ink-2:#3A352E;
  --ink-3:#4A443B;
  --ink-rgb:42,38,32;
  --on-dark:      var(--bone);
  --on-dark-2:    rgba(247,244,238,.80);
  --on-dark-3:    rgba(247,244,238,.66);
  --line-dark:    rgba(247,244,238,.28);
  --line-dark-2:  rgba(247,244,238,.15);
  --line-dark-hi: rgba(247,244,238,.39);
  --veil-dark:    rgba(247,244,238,.20);
  --wine-lt:#E9B6A7;
}
.lb{
  border:none;padding:0;background:transparent;color:var(--bone);
  width:100%;height:100%;max-width:100vw;max-height:100dvh;overflow:visible;
}
.lb::backdrop{background:var(--veil);backdrop-filter:blur(7px) saturate(115%);-webkit-backdrop-filter:blur(7px) saturate(115%)}
.lb[open]{animation:lbIn var(--t-modal) var(--e-out)}
.lb[open] .lb__body{animation:lbBodyIn var(--t-modal) var(--e-out)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
@keyframes lbBodyIn{from{transform:translate3d(0,12px,0)}to{transform:none}}
.lb.is-closing{animation:lbOut var(--t-ui) var(--e-inout) forwards}
@keyframes lbOut{from{opacity:1}to{opacity:0}}
.lb__box{position:absolute;inset:0;display:grid;place-items:center;padding:0}
.lb__body{
  position:relative;width:100%;height:100dvh;
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  touch-action:pan-y;
}
.lb__pic{position:relative;flex:none;display:none;background:transparent}
.lb.is-pic .lb__pic{display:block}
.lb__pic img{
  width:100%;height:100%;object-fit:contain;border-radius:var(--r-pic);
}
.lb__pic img[data-dir]{animation:lbNext var(--t-modal) var(--e-out)}
.lb__pic img[data-dir="prev"]{animation-name:lbPrev}
@keyframes lbNext{from{transform:translate3d(3%,0,0);opacity:0}to{transform:none;opacity:1}}
@keyframes lbPrev{from{transform:translate3d(-3%,0,0);opacity:0}to{transform:none;opacity:1}}
.lb.is-work .lb__body{
  display:flex;flex-direction:column;height:100dvh;overflow:hidden;
}
.lb.is-work .lb__pic{
  flex:1 1 auto;min-height:0;
  padding:clamp(56px,7vh,88px) clamp(10px,4vw,88px) clamp(14px,2vh,22px);
}
.lb.is-work .lb__pic img{height:100%;width:100%;object-fit:contain}
.lb.is-work .lb__side{
  flex:none;
  width:100%;max-width:none;margin:0;
  padding:clamp(12px,1.8vh,18px) clamp(16px,4vw,56px) clamp(16px,3vh,26px);
  background:var(--ink);
  border-top:1px solid var(--line-dark-2);
  display:flex;flex-direction:row;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:12px 24px;
}
.lb.is-work .lb__kicker,
.lb.is-work .lb__count{margin:0}
.lb.is-work .lb__count::before{
  content:"·";margin-right:.6em;color:var(--line-dark);
}
.lb.is-work .lb__side > .lb__kicker{order:1}
.lb.is-work .lb__side > .lb__count{order:2;margin-right:auto}
.lb.is-work .lb__cta{order:3;margin-top:0;align-self:center}
@media (max-width:639px){
  .lb.is-work .lb__side{
    flex-direction:column;align-items:stretch;text-align:left;gap:10px;
  }
  .lb.is-work .lb__side > .lb__count{margin-right:0}
  .lb.is-work .lb__cta{width:100%}
}
.lb.is-master .lb__pic{
  height:min(52dvh,560px);background:transparent;overflow:visible;
  margin:clamp(52px,7vh,84px) auto 0;
  width:min(100%, 860px);
  padding-inline:clamp(18px,4vw,40px);
}
.lb.is-master .lb__pic img{border-radius:var(--r-card)}
@media (min-width:900px){
  .lb.is-master .lb__body{
    display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    align-items:center;gap:clamp(28px,4vw,64px);
    max-width:1220px;margin-inline:auto;
    padding:clamp(64px,8vh,104px) clamp(24px,5vw,64px) clamp(36px,6vh,72px);
  }
  .lb.is-master .lb__pic{margin:0;width:100%;height:min(64dvh,640px);padding:0}
  .lb.is-master .lb__side{width:100%;margin:0;padding:0}
}
.lb.is-master .lb__silh:not([hidden]){
  position:absolute;inset:0;display:grid;place-items:center;
  background:var(--ink-2);border-radius:var(--r-card);overflow:hidden;
}
.lb.is-master .lb__silh svg{width:34%;max-width:180px;fill:var(--veil-dark)}
.lb.is-master .lb__silh::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg,var(--line-dark-2) 0 1px,transparent 1px 10px);
}
.lb.is-master .lb__silh span{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-3);
}
.lb__side{
  width:min(100%,860px);margin-inline:auto;
  padding:clamp(22px,3.4vw,40px) clamp(18px,4vw,40px) clamp(48px,7vh,90px);
  display:flex;flex-direction:column;gap:14px;
}
.lb.is-master .lb__kicker{display:flex;align-items:center;gap:.8em}
.lb.is-master .lb__kicker::before{
  content:"";width:34px;height:2px;background:var(--wine-lt);flex:none;
}
.lb.is-master .lb__title{margin-top:-2px}
.lb.is-master .lb__awards{margin-top:6px}
.lb.is-master .lb__links{margin-top:2px}
.lb__kicker{
  font-family:var(--f-caps);font-weight:700;font-size:.82rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--wine-lt);
}
.lb__kicker:empty{display:none}
.lb__title{
  font-family:var(--f-display);text-transform:uppercase;line-height:1.02;
  font-size:clamp(2rem,5.2vw,4rem);color:var(--white);
}
.lb__title:empty{display:none}
.lb__text{color:var(--on-dark-2);line-height:1.6;max-width:66ch}
.lb__text:empty{display:none}
.lb__awards{display:flex;flex-wrap:wrap;gap:8px}
.lb__awards:empty{display:none}
.lb__awards li{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:var(--fs-xs);color:var(--on-dark);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  border:1px solid var(--line-dark);padding:.55em .95em;border-radius:var(--r-pill);
}
.lb__awards li::before{
  content:"";width:6px;height:6px;flex:none;background:var(--wine-lt);
}
.lb__links{display:flex;gap:10px;flex-wrap:wrap}
.lb__links:empty{display:none}
.lb .btn--ghost{color:var(--bone);border-color:var(--line-dark)}
.lb__cta{align-self:flex-start;margin-top:10px}
.lb__count{
  font-family:var(--f-caps);font-weight:600;font-size:var(--fs-xs);color:var(--on-dark-3);
  letter-spacing:.16em;text-transform:uppercase;
}
.lb__count:empty{display:none}
.lb__x{
  position:fixed;top:clamp(12px,2vw,22px);right:clamp(12px,2vw,22px);z-index:5;
  width:54px;height:54px;display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--bone);color:var(--ink);
  transition:background-color var(--t-ui) var(--e-hover), transform var(--t-tap) var(--e-tap);
}
.lb__x svg{width:22px;height:22px}
.lb__x:active,.lb__nav:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){ .lb__x:hover{background:var(--wine-hot);color:var(--white);transform:rotate(90deg)} }
.lb__nav{
  position:fixed;top:50%;translate:0 -50%;z-index:5;
  width:54px;height:54px;display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--line-dark-2);color:var(--bone);
  transition:background-color var(--t-ui) var(--e-hover), transform var(--t-tap) var(--e-tap);
}
.lb__nav svg{width:22px;height:22px}
.lb__nav--prev{left:clamp(8px,2vw,22px)}
.lb__nav--next{right:clamp(8px,2vw,22px)}
@media (hover:hover) and (pointer:fine){ .lb__nav:hover{background:var(--wine-hot);color:var(--white)} }
.lb:not(.is-multi) .lb__nav{display:none}
@media (max-width:639px){
  .lb__nav{top:auto;bottom:16px;translate:none;width:50px;height:50px}
  .lb.is-work .lb__side{padding-bottom:78px}
}
.cx{
  border:none;padding:0;background:transparent;color:var(--bone);
  width:100%;height:100%;max-width:100vw;max-height:100dvh;
}
.cx::backdrop{background:var(--veil);backdrop-filter:blur(7px) saturate(115%);-webkit-backdrop-filter:blur(7px) saturate(115%)}
.cx[open]{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,2vw,20px);
}
.cx[open]{animation:lbIn var(--t-modal) var(--e-out)}
.cx[open] .cx__box{animation:cxIn var(--t-modal) var(--e-out)}
@keyframes cxIn{from{transform:translate3d(0,16px,0);opacity:0}to{transform:none;opacity:1}}
.cx.is-closing{animation:lbOut var(--t-ui) var(--e-inout) forwards}
.cx__box{
  position:relative;
  width:min(560px, 100%);max-height:100%;
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--ink-2);border-radius:var(--r-card);
  padding:clamp(22px,3vw,32px);
  box-shadow:inset 0 0 0 1px var(--ink-3), 0 26px 60px -28px rgba(var(--shade-rgb), .8);
  display:flex;flex-direction:column;gap:14px;
}
.cx__grab{display:none}
.cx__x{
  position:absolute;top:12px;right:12px;width:44px;height:44px;
  display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--ink-3);color:var(--bone);
  transition:background-color var(--t-ui) var(--e-hover), transform var(--t-tap) var(--e-tap);
}
.cx__x svg{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){ .cx__x:hover{background:var(--wine-hot)} }
.cx__x:active{transform:scale(.92)}
.cx__kicker{
  font-family:var(--f-caps);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--wine-lt);
}
.cx__h{
  font-family:var(--f-display);text-transform:uppercase;line-height:1.04;
  font-size:clamp(1.5rem,4.2vw,2.1rem);padding-right:52px;
}
.cx__test{
  background:var(--wine-deep);color:var(--white);
  border-radius:10px;padding:9px 13px;font-size:var(--fs-sm);line-height:1.35;
}
.cx__label{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-3);
}
.cx__text{
  background:var(--ink);color:var(--bone);
  border:1px solid var(--ink-3);border-radius:12px;
  padding:12px 14px;line-height:1.5;resize:vertical;min-height:96px;
  transition:border-color var(--t-ui) var(--e-hover);
}
.cx__text:focus{border-color:var(--wine-lt);outline:none}
.cx__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cx__grid > :last-child:nth-child(odd){grid-column:1 / -1}
.cx__ch{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:2px 12px;align-items:center;text-align:left;
  padding:13px;border-radius:14px;
  background:var(--ink);border:1px solid var(--ink-3);
  color:var(--bone);min-height:44px;
  transition:background-color var(--t-ui) var(--e-hover),
             border-color var(--t-ui) var(--e-hover),
             transform var(--t-tap) var(--e-tap);
}
.cx__i{grid-row:1 / span 2;width:34px;height:34px;display:grid;place-items:center;
  border-radius:10px;background:var(--ink-3);color:var(--bone)}
.cx__i svg{width:20px;height:20px}
.cx__n{font-weight:600;font-size:1rem;line-height:1.2}
.cx__d{font-size:.78rem;color:var(--on-dark-3);line-height:1.25}
@media (hover:hover) and (pointer:fine){
  .cx__ch:hover{background:var(--ink-2);border-color:var(--wine-lt)}
  .cx__ch:hover .cx__i{background:var(--wine);color:var(--white)}
}
.cx__ch:active{transform:scale(.98)}
.cx__hint{
  font-size:var(--fs-sm);color:var(--wine-lt);line-height:1.4;min-height:0;
}
.cx__hint:empty{display:none}
.cx.is-done .cx__hint{
  background:var(--ink);border-radius:10px;padding:10px 14px;color:var(--bone);
  box-shadow:inset 0 0 0 1px var(--wine-lt);
}
@media (max-width:719px){
  .cx[open]{align-items:flex-end;padding:0}
  .cx__box{
    width:100%;max-width:none;max-height:88dvh;
    border-radius:var(--r-card) var(--r-card) 0 0;
    padding:10px clamp(14px,4vw,20px) calc(16px + env(safe-area-inset-bottom));
    gap:10px;
  }
  .cx[open] .cx__box{animation:cxSheetIn var(--t-modal) var(--e-out)}
  @keyframes cxSheetIn{from{transform:translate3d(0,100%,0)}to{transform:none}}
  .cx__grab{
    display:block;width:44px;height:4px;border-radius:2px;
    background:var(--ink-3);margin:2px auto 4px;flex:none;
  }
  .cx__x{top:6px;right:6px;width:40px;height:40px}
  .cx__h{padding-right:44px;font-size:1.35rem}
  .cx__test{padding:8px 11px;font-size:.8rem}
  .cx__label{font-size:.68rem}
  .cx__text{min-height:74px;padding:10px 12px}
  .cx__ch{padding:10px;gap:1px 9px}
  .cx__i{width:30px;height:30px}
  .cx__n{font-size:.92rem}
  .cx__d{font-size:.72rem}
}
@media (prefers-reduced-motion: reduce){
  .cx[open],.cx[open] .cx__box,.cx.is-closing{animation:none}
}