@charset "UTF-8";
/* =====================================================================
   BARKEDGE — works.css
   WORKS list (works.html) + WORKS detail (works-detail.html).
   Loaded after common.css + sub.css. PC follows the 1440px design,
   SP (≤860px) follows the 375px SP sample.
   ===================================================================== */

/* ---------- shared: work card (list + OTHER) ---------- */
.wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:calc(34 * var(--v));row-gap:calc(64 * var(--v));
  margin:0;padding:0 calc(120 * var(--v));list-style:none}
.wcard{position:relative;display:block;min-width:0}
.wcard-img{position:relative;display:block;aspect-ratio:377/201;overflow:hidden;background:#d0d0d0}
.wcard-img img,.wcard-img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;transition:transform 1.2s var(--ease),filter .6s}
.wcard:hover .wcard-img img,.wcard:hover .wcard-img video{transform:scale(1.05)}
.wcard-img::after{content:"";position:absolute;inset:0;background:var(--sun);mix-blend-mode:multiply;opacity:0;transition:opacity .5s}
.wcard:hover .wcard-img::after{opacity:.18}
.wcard-t{display:block;margin:calc(14 * var(--v)) 0 0;font:500 max(16px,calc(18 * var(--v)))/1.5 var(--f-jp);letter-spacing:.01em}
.wcard-t span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
.wcard:hover .wcard-t span{background-size:100% 1px}
.wcard-c{display:block;margin-top:calc(12 * var(--v));font:400 13px/1.5 var(--f-jp)}
.wtags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.wtags li{min-width:101px;height:22px;padding:0 8px;display:grid;place-items:center;border:1px solid #c3c3c3;font:400 10px/1 var(--f-jp);white-space:nowrap;box-sizing:border-box}
.wcard:focus-visible{outline:2px solid var(--ink);outline-offset:6px}

/* ---------- WORKS list ---------- */
.wk{padding-bottom:calc(180 * var(--v))}
.wk-filter{display:flex;flex-wrap:wrap;gap:calc(16 * var(--v));margin:calc(100 * var(--v)) 0 calc(147 * var(--v));padding:0 calc(120 * var(--v));list-style:none}
.wk-filter a{display:grid;place-items:center;width:max(120px,calc(144 * var(--v)));height:max(30px,calc(31 * var(--v)));background:#000;color:#fff;opacity:.5;
  font:400 13px/1 var(--f-jp);white-space:nowrap;transition:opacity .4s,background-color .4s,color .4s,transform .5s var(--ease)}
.wk-filter a:hover{opacity:.8;transform:translateY(-3px)}
.wk-filter a[aria-current="true"]{opacity:1}
.wk-filter a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wcard.is-out{display:none}
.wk-empty{padding:0 calc(120 * var(--v));font:400 15px/1.8 var(--f-jp)}
.pager{display:flex;justify-content:center;gap:calc(8 * var(--v));margin-top:calc(110 * var(--v))}
.pager a,.pager span{display:grid;place-items:center;width:60px;height:60px;border:1px solid #707070;box-sizing:border-box;transition:background-color .4s,color .4s,border-color .4s}
.pager svg{width:14px;height:14px}
.pager a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager span{opacity:.25}
.pager a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- WORKS detail: head ---------- */
.wd-head{padding:calc(106 * var(--v)) var(--gut) 0 calc(120 * var(--v))}
.wd-lbl{display:flex;align-items:center;gap:6px;font:600 17px/1 var(--f-wide);font-stretch:112%;letter-spacing:-.03em}
.wd-lbl .slash{width:16px;margin-top:2px}
.wd-lbl a{position:relative}
.wd-lbl a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.wd-lbl a:hover::after{transform:scaleX(1);transform-origin:left}
.wd-title{margin:calc(56 * var(--v)) 0 0;font:500 max(28px,calc(50 * var(--v)))/1.35 var(--f-jp);letter-spacing:.01em}
.wd-head .wtags{margin-top:calc(14 * var(--v))}
.wd-meta{display:grid;grid-template-columns:80px minmax(0,1fr);row-gap:12px;margin:calc(62 * var(--v)) 0 0;font-size:14px}
.wd-meta dt{font:700 14px/1.2 var(--f-display)}
.wd-meta dd{margin:0;min-width:0;font:400 15px/1.2 var(--f-jp);letter-spacing:.03em}
.wd-meta dd a{display:inline-flex;align-items:center;gap:6px;font:700 14px/1.2 var(--f-display);letter-spacing:.03em;word-break:break-all;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
.wd-meta dd a:hover{background-size:100% 1px}
.wd-meta dd a svg{flex:none;width:11px;height:11px}

/* ---------- WORKS detail: main visual ---------- */
.wd-mv{position:relative;height:max(300px,calc(628 * var(--v)));margin-top:calc(62 * var(--v));overflow:hidden;background:#0b0b0b}
.wd-mv img,.wd-mv video{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;max-width:none}

/* ---------- WORKS detail: body (content + sticky CATEGORY) ---------- */
.wd-body{display:grid;grid-template-columns:calc(960 * var(--v)) calc(200 * var(--v));column-gap:calc(120 * var(--v));align-items:start;
  padding:calc(150 * var(--v)) 0 calc(120 * var(--v)) calc(120 * var(--v))}
.wd-main{min-width:0}
.wd-side{align-self:stretch;min-width:0}
.wd-lead h2{margin:0;font:500 max(22px,calc(30 * var(--v)))/1.5 var(--f-jp);letter-spacing:-.02em}
.wd-lead p{margin:calc(44 * var(--v)) 0 0 calc(280 * var(--v));max-width:calc(680 * var(--v));font:400 max(13px,calc(15 * var(--v)))/2.27 var(--f-jp)}
.wd-sec{padding-top:calc(110 * var(--v));scroll-margin-top:40px}
.wd-sec + .wd-sec{padding-top:calc(140 * var(--v))}
.wd-media{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0}
.wd-media.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wd-media.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wd-media figure{position:relative;margin:0;overflow:hidden;background:#efefef;aspect-ratio:960/407}
.wd-media.n2 figure{aspect-ratio:480/407}
.wd-media.n3 figure{aspect-ratio:320/407}
.wd-media img,.wd-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.wd-scroll{position:relative}
.wd-bar,.wd-hint{display:none}
.wd-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wd-sec h3{margin:calc(16 * var(--v)) 0 0;font:500 max(16px,calc(18 * var(--v)))/1.6 var(--f-jp)}
.wd-sec h3 .en{font-family:var(--f-display);font-weight:700}
.wd-sec .note{margin:calc(6 * var(--v)) 0 0;font:400 14px/1.8 var(--f-jp)}

/* sticky CATEGORY navigation */
.wd-nav{position:sticky;top:calc(max(60px,calc(100 * var(--v))) + 40px);transition:top .7s var(--ease);border-top:1px solid rgba(112,112,112,.3);padding-top:22px}
body:has(.hdr.is-hidden) .wd-nav{top:40px}
.wd-nav h2{margin:0;font:700 16px/1 var(--f-wide);font-stretch:112%;letter-spacing:-.02em}
.wd-nav ul{display:grid;gap:0;margin:44px 0 0;padding:0;list-style:none}
.wd-nav a{position:relative;display:flex;align-items:center;height:58px;padding-left:17px;color:#6b6b6b;font:400 13px/1 var(--f-jp);
  transition:font-size .45s var(--ease),color .4s}
.wd-nav a::before{content:"-";position:absolute;left:0;top:50%;transform:translateY(-55%);font:400 13px/1 var(--f-display)}
.wd-nav a::after{content:"";position:absolute;left:-1px;top:50%;width:3px;height:0;margin-top:-9px;background:var(--sun);transition:height .5s var(--ease)}
.wd-nav a:hover{color:var(--ink)}
.wd-nav a[aria-current="true"]{color:var(--ink);font-size:17px}
.wd-nav a[aria-current="true"]::before{opacity:0}
.wd-nav a[aria-current="true"]::after{height:18px}
.wd-nav a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- WORKS detail: OTHER ---------- */
.wd-other{position:relative;padding:0 0 calc(130 * var(--v))}
.wd-other .rule{background:#e1e1e1}
.wd-other .ob{display:flex;align-items:center;gap:14px;padding:calc(26 * var(--v)) 0 calc(54 * var(--v)) calc(120 * var(--v))}
.wd-other .ob .slash{width:22px;margin-top:2px}
.wd-other .ob b{font:700 max(16px,calc(18 * var(--v)))/1 var(--f-display)}
.wd-other .ob small{font:400 15px/1 var(--f-jp)}
.wd-other .more-wrap{padding:calc(70 * var(--v)) 0 0}

/* ---------- SP (≤860px) — follows the 375px SP sample ---------- */
@media (max-width:860px){
  .wgrid{grid-template-columns:1fr;row-gap:44px;padding:0 calc(15 * var(--s))}
  .wcard-t{margin-top:12px;font-size:16px}
  .wcard-c{margin-top:6px}
  .wtags{gap:5px}
  .wtags li{min-width:0;padding:0 10px}

  .wk{padding-bottom:100px}
  .wk-filter{display:flex;flex-wrap:wrap;gap:5px;margin:36px 0 48px;padding:0 calc(15 * var(--s))}
  .wk-filter a{width:auto;height:32px;padding:0 14px;font-size:12px}
  .wk-filter a:hover{transform:none}
  .wk-empty{padding:0 calc(15 * var(--s))}
  .pager{margin-top:64px;gap:8px}
  .pager a,.pager span{width:50px;height:50px}

  .wd-head{padding:48px calc(15 * var(--s)) 0}
  .wd-title{margin-top:28px;font-size:calc(26 * var(--s));line-height:1.4}
  .wd-head .wtags{margin-top:14px}
  .wd-meta{grid-template-columns:62px minmax(0,1fr);margin-top:30px;row-gap:12px}
  .wd-meta dt{font-size:12px}
  .wd-meta dd{font-size:13px}
  .wd-meta dd a{font-size:12px}
  .wd-mv{height:auto;aspect-ratio:375/300;margin-top:36px}

  .wd-body{display:block;padding:0 0 70px}
  .wd-main{order:2;padding:0 calc(15 * var(--s))}
  .wd-lead{padding-top:48px}
  .wd-lead h2{font-size:20px;line-height:1.55}
  .wd-lead p{margin:24px 0 0;max-width:none;font-size:14px;line-height:2.1}
  .wd-sec{padding-top:56px;scroll-margin-top:0}
  .wd-sec + .wd-sec{padding-top:72px}
  .wd-media.n2,.wd-media.n3{grid-template-columns:1fr;gap:4px}
  .wd-media.n2 figure,.wd-media.n3 figure{aspect-ratio:480/407}
  /* single wide visual: same height as one stacked image, swipe sideways */
  .wd-media.n1{display:block;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wd-media.n1::-webkit-scrollbar{display:none}
  .wd-media.n1 figure{width:200%;aspect-ratio:960/407}
  .wd-bar{display:block;position:relative;height:2px;margin-top:12px;background:#e3e3e3;overflow:hidden}
  .wd-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w,50%);background:var(--ink);transform:translateX(var(--x,0px));will-change:transform}
  .wd-hint{display:grid;place-items:center;position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;
    background:rgba(13,13,13,.72);color:#fff;pointer-events:none;opacity:0;transform:scale(.8);transition:opacity .45s,transform .6s var(--ease)}
  .wd-hint.is-on{opacity:1;transform:none}
  .wd-hint svg{width:34px;height:34px;overflow:visible}
  .wd-hint .hand{animation:swipeHint 1.3s cubic-bezier(.6,0,.3,1) infinite}
  .wd-hint small{position:absolute;bottom:14px;font:700 8px/1 var(--f-ui);letter-spacing:.14em}
  @keyframes swipeHint{0%,100%{transform:translateX(9px)}50%{transform:translateX(-9px)}}
  .wd-sec h3{margin-top:14px;font-size:16px}
  .wd-sec .note{margin-top:4px;font-size:13px;line-height:1.8}

  /* CATEGORY nav is PC only */
  .wd-side{display:none}

  .wd-other{padding-bottom:80px}
  .wd-other .ob{padding:22px calc(15 * var(--s)) 32px}
}
@media (prefers-reduced-motion:reduce){.wd-nav,.wd-side,.wd-nav a{transition:none}}

/* =====================================================================
   WORKS list v2 — reuses the TOP "OUR CREATIVE / WORKS" parts
   (mega heading, split row with filter, s/l tile collage, VIEW cursor).
   Scoped under .wl so top.css is not needed on this page.
   ===================================================================== */
.wl{position:relative;padding-bottom:calc(180 * var(--v))}
.wl .mega{position:relative;margin:calc(36 * var(--v)) 0 0;padding:0 0 0 calc(12 * var(--v));font:300 max(56px,calc(200 * var(--v)))/.8 var(--f-wide);font-stretch:118%;letter-spacing:-.085em;white-space:nowrap}
.wl .mega .w{padding-bottom:0}
.wl .sweep{position:absolute;left:calc(2 * var(--v));right:0;bottom:-2px;height:2px;background:var(--sun);pointer-events:none;transform:scaleX(0)}
.wl .row2{position:relative;display:grid;grid-template-columns:calc(920 * var(--v)) minmax(0,1fr);align-items:center;min-height:calc(85 * var(--v));margin-top:calc(24 * var(--v))}
.wl .row2 .bar{padding-left:calc(59 * var(--v))}
.wl .row2 .bar h1{margin:0;display:inline-flex;font:600 max(15px,calc(18 * var(--v)))/1 var(--f-wide);font-stretch:112%;letter-spacing:-.05em}
.wl .row2 .vr{position:absolute;left:calc(920 * var(--v));top:calc(14 * var(--v));bottom:calc(14 * var(--v));width:1px;background:var(--hair);transform-origin:top}
.wl .wf{list-style:none;margin:0;padding:calc(30 * var(--v)) 0 calc(30 * var(--v)) calc(59 * var(--v));display:grid;gap:6px}
.wl .wf button{appearance:none;border:0;background:none;padding:2px 0;cursor:pointer;font:400 max(14px,calc(16 * var(--v)))/1.3 var(--f-display);color:#939393;display:flex;gap:6px;transition:color .4s,transform .5s var(--ease)}
.wl .wf button::before{content:"・"}
.wl .wf button[aria-pressed="true"]{color:var(--ink)}
.wl .wf button:hover{color:var(--ink);transform:translateX(4px)}
.wl .wf button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* collage: rows alternate small+large / large+small (any number of works) */
.wl .works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:max(8px,calc(11 * var(--v)));padding:calc(40 * var(--v)) var(--gut) 0;margin:0;list-style:none}
.wl .work{position:relative;display:block;overflow:hidden;height:max(220px,calc(450 * var(--v)));background:#ddd;cursor:none;grid-column:span 2}
.wl .work:nth-child(4n+1),.wl .work:nth-child(4n+4){grid-column:span 1}
.wl .work .media{position:absolute;inset:0;overflow:hidden;transition:transform 1.2s var(--ease)}
.wl .work:hover .media{transform:scale(1.045)}
.wl .work img,.wl .work video{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;max-width:none}
.wl .work .cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:end;gap:12px;
  padding:16px 18px;color:#fff;font:600 13px/1.3 var(--f-wide);font-stretch:112%;letter-spacing:-.02em;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);transform:translateY(100%);transition:transform .7s var(--ease)}
.wl .work .cap small{font:400 11px/1 var(--f-ui);letter-spacing:.08em;opacity:.8;white-space:nowrap}
.wl .work:hover figcaption{transform:none}
.wl .work.is-dim{pointer-events:none}
.wl .work > a{position:absolute;inset:0;display:block;cursor:none}
.wl .work > a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.wl .work > a:focus-visible .cap{transform:none}
.wl .pager{margin-top:calc(120 * var(--v))}
.cursor{position:fixed;left:0;top:0;z-index:50;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--sun);color:var(--ink);
  display:grid;place-items:center;font:700 12px/1 var(--f-ui);letter-spacing:.12em;pointer-events:none;transform:scale(0)}
@media (hover:none){.wl .work,.wl .work > a{cursor:auto}.wl .work .cap{transform:none}.cursor{display:none}}

@media (max-width:860px){
  .wl{padding-bottom:90px}
  .wl .mega{margin:calc(24 * var(--s)) 0 0 calc(-7 * var(--s));padding:0;font-size:calc(53 * var(--s));line-height:.8;letter-spacing:-.1em}
  .wl .row2{display:block;min-height:0;margin-top:calc(20 * var(--s))}
  .wl .row2 .vr{display:none}
  .wl .row2 .bar{min-height:calc(30 * var(--s));padding:0 calc(18 * var(--s));gap:calc(24 * var(--s))}
  .wl .row2 .bar h1{font-size:14px}
  .wl .row2 .rule.b{top:calc(30 * var(--s));bottom:auto}
  .wl .wf{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;grid-auto-flow:column;gap:6px 0;
    padding:calc(12 * var(--s)) calc(20 * var(--s)) calc(16 * var(--s));border-bottom:1px solid var(--hair)}
  .wl .wf button{font-size:13px}
  .wl .wf button:hover{transform:none}
  /* SP collage (from the TOP SP comp): a tall full-width tile, two squares, a full square, two squares … */
  .wl .works{grid-template-columns:1fr 1fr;gap:5px;padding:calc(38 * var(--s)) 0 0}
  .wl .work,.wl .work:nth-child(4n+1),.wl .work:nth-child(4n+4){grid-column:span 1;height:auto;aspect-ratio:1}
  .wl .work:nth-child(6n+1){grid-column:span 2;aspect-ratio:375/550}
  .wl .work:nth-child(6n+4){grid-column:span 2;aspect-ratio:1}
  .wl .work:nth-child(6n+2):last-child,.wl .work:nth-child(6n+5):last-child{grid-column:span 2;aspect-ratio:375/300}
  .wl .work img,.wl .work video{top:-6%;height:112%}
  .wl .work .cap{display:none}
  .wl .pager{margin-top:56px}
}